/*
  This is copy of modern-normalize with these changes done:

  - Remove html font-family, we set our own
  - Remove html tab-size, we set our own
  - Remove b,strong font-weight, we set our own
  - Remove b,code,samp,pre font-size, we set our own
*/

/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  line-height: normal; /* 1. (not following the "modern-normalize") Do not change the browser's default line-height, the default value is font-dependent and roughly 1.2 */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
}

/*
Sections
========
*/

body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

@keyframes isloadingspin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.is-loading {
  pointer-events: none !important;
  position: relative !important;
}

.is-loading > * {
  opacity: 0.3;
}

.btn.is-loading > *,
.button.is-loading > * {
  opacity: 0;
}

.is-loading::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  height: min(4em, 66.6%);
  width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: isloadingspin 1000ms infinite linear;
  border-width: 3px;
  border-style: solid;
  border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
  border-radius: var(--border-radius-full);
}

.is-loading.loading-icon-2px::after {
  border-width: 2px;
}

.is-loading.loading-icon-3px::after {
  border-width: 3px;
}

/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */

form.single-button-form.is-loading > * {
  opacity: 1;
}

form.single-button-form.is-loading .button {
  color: transparent;
}

.markup pre.is-loading,
.editor-loading.is-loading {
  height: var(--height-loading);
}

.markup .is-loading > * {
  visibility: hidden;
}

.markup .is-loading {
  color: transparent;
  background: transparent;
}

/* TODO: not needed, use "is-loading loading-icon-2px" instead */

code.language-math.is-loading::after {
  padding: 0;
  border-width: 2px;
  width: 1.25rem;
  height: 1.25rem;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */

@keyframes pulse-1p5 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* pulse animation for scale(1.5) in 200ms */

.pulse-1p5-200 {
  animation: pulse-1p5 200ms linear;
}

.ui.modal,
.ui.dimmer.transition {
  animation-name: fadein;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
}

.rotate-clockwise {
  animation: rotate-clockwise-keyframes 1s linear infinite;
}

@keyframes rotate-clockwise-keyframes {
  100% {
    transform: rotate(360deg);
  }
}

/* fomantic replacements */

.ui.button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  outline: none;
  font-family: var(--fonts-regular);
  margin: 0 0.25em 0 0;
  font-weight: var(--font-weight-normal);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  border-radius: var(--border-radius);
  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;
}

.ui.button:focus-visible {
  box-shadow: inset 0 0 0 2px currentcolor;
}

@media (max-width: 767.98px) {
  .ui.button {
    white-space: normal;
  }
}

.ui.button:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.ui.active.button,
.ui.button:active,
.ui.active.button:active,
.ui.active.button:hover {
  background: var(--color-active);
  color: var(--color-text);
}

.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;
}

/* there is no "ui labeled icon button" support" because it is not used */

.ui.labeled.button:not(.icon) {
  flex-direction: row;
  background: none;
  padding: 0;
  border: none;
  min-height: unset;
}

.ui.labeled.button > .button {
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ui.labeled.button > .label {
  display: flex;
  align-items: center;
  margin: 0 0 0 -1px !important;
  font-size: 1em;
  border-color: var(--color-light-border);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ui.labeled.button > .label:hover {
  background: var(--color-hover);
}

.ui.labeled.button > .button:hover + .label {
  border-left-color: var(--color-secondary-dark-2);
}

.ui.button > .icon:not(.button) {
  height: auto;
  opacity: 0.8;
}

.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.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
  vertical-align: baseline;
}

.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
  margin: 0 -0.21428571em 0 0.42857143em;
}

/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */

.ui.button { /* stylelint-disable-line no-duplicate-selectors */
  gap: var(--gap-block);
  min-height: 38px;
  padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
}

.ui.compact.buttons .button,
.ui.compact.button {
  gap: var(--gap-inline);
  padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
  min-height: 32px;
}

.ui.compact.icon.buttons .button,
.ui.compact.icon.button {
  padding: 0.57em /* around 8px */;
}

/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */

.ui.mini.buttons .dropdown,
.ui.mini.buttons .dropdown .menu > .item,
.ui.mini.buttons .button,
.ui.ui.ui.ui.mini.button {
  gap: var(--gap-inline);
  font-size: 11px;
  min-height: 30px;
}

.ui.ui.ui.ui.mini.button.compact {
  min-height: 26px;
}

/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */

.ui.tiny.buttons .dropdown,
.ui.tiny.buttons .dropdown .menu > .item,
.ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
  gap: var(--gap-inline);
  font-size: 12px;
  min-height: 32px;
}

.ui.ui.ui.ui.tiny.button.compact {
  min-height: 28px;
}

/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */

.ui.small.buttons .dropdown,
.ui.small.buttons .dropdown .menu > .item,
.ui.small.buttons .button,
.ui.ui.ui.ui.small.button {
  font-size: 13px;
  min-height: 34px;
}

.ui.ui.ui.ui.small.button.compact {
  min-height: 30px;
}

.ui.icon.buttons .button,
.ui.icon.button:not(.compact) {
  padding: 0.57em;
}

.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  margin: 0 !important;
  vertical-align: top;
}

.ui.basic.buttons .button,
.ui.basic.button {
  border-radius: var(--border-radius);
  background: none;
}

.ui.basic.buttons {
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
}

.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 {
  color: var(--color-text-light);
  background: var(--color-button);
}

.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
  color: var(--color-text);
  background: var(--color-hover);
  border-color: var(--color-secondary-dark-2);
}

.ui.basic.buttons .button:active,
.ui.basic.button:active,
.ui.basic.buttons .active.button,
.ui.basic.active.button,
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
  color: var(--color-text);
  background: var(--color-active);
}

.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%;
}

.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background: var(--color-primary-active);
}

.ui.basic.primary.buttons .button,
.ui.basic.primary.button {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: none;
}

.ui.basic.primary.buttons .button:hover,
.ui.basic.primary.button:hover {
  color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.ui.basic.primary.buttons .button:active,
.ui.basic.primary.button:active {
  color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.ui.red.button,
.ui.red.buttons .button {
  color: var(--color-white);
  background: var(--color-red);
}

.ui.red.button:hover,
.ui.red.buttons .button:hover {
  background: var(--color-red-dark-1);
}

.ui.red.button:active,
.ui.red.buttons .button:active {
  background: var(--color-red-dark-2);
}

.ui.basic.red.buttons .button,
.ui.basic.red.button {
  color: var(--color-red);
  border-color: var(--color-red);
  background: none;
}

.ui.basic.red.buttons .button:hover,
.ui.basic.red.button:hover {
  color: var(--color-red-dark-1);
  border-color: var(--color-red-dark-1);
}

.ui.basic.red.buttons .button:active,
.ui.basic.red.button:active {
  color: var(--color-red-dark-2);
  border-color: var(--color-red-dark-2);
}

.ui.green.button,
.ui.green.buttons .button {
  color: var(--color-white);
  background: var(--color-green);
}

.ui.green.button:hover,
.ui.green.buttons .button:hover {
  background: var(--color-green-dark-1);
}

.ui.green.button:active,
.ui.green.buttons .button:active {
  background: var(--color-green-dark-2);
}

.ui.basic.green.buttons .button,
.ui.basic.green.button {
  color: var(--color-green);
  border-color: var(--color-green);
  background: none;
}

.ui.basic.green.buttons .button:hover,
.ui.basic.green.button:hover {
  color: var(--color-green-dark-1);
  border-color: var(--color-green-dark-1);
}

.ui.basic.green.buttons .button:active,
.ui.basic.green.button:active {
  color: var(--color-green-dark-2);
  border-color: var(--color-green-dark-2);
}

.ui.buttons {
  display: inline-flex;
  flex-direction: row;
  font-size: 0;
  vertical-align: baseline;
  margin: 0 0.25em 0 0;
}

.delete-button,
.delete-button:hover {
  color: var(--color-red);
}

/* 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);
  border: none;
  color: inherit;
  margin: 0;
  padding: 0;
}

.btn:hover,
.btn:active {
  background: none;
  border: none;
}

a.btn,
a.btn:hover {
  color: inherit;
}

.btn.tiny {
  font-size: 12px;
}

.btn.small {
  font-size: 13px;
}

/* 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;
  border-radius: 0;
  flex-shrink: 0;
  margin: 0;
}

.ui.buttons .button:first-child {
  border-left: none;
  margin-left: 0;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.ui.buttons .button:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.ui.buttons .button:hover {
  border-color: var(--color-secondary-dark-2);
}

.ui.buttons .button:hover + .button {
  border-left: 1px solid var(--color-secondary-dark-2);
}

/* 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.buttons .button:last-child,
.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
  border-right: 1px solid var(--color-light-border);
}

.ui.buttons .button.active {
  border-left: 1px solid var(--color-light-border);
  border-right: 1px solid var(--color-light-border);
}

.ui.buttons .button.active + .button {
  border-left: none;
}

/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.container {
  width: 1280px;
  max-width: calc(100% - calc(2 * var(--page-margin-x)));
  margin-left: auto;
  margin-right: auto;
}

.ui.fluid.container {
  width: 100%;
}

.ui.container.medium-width {
  width: 800px;
}

.ui.message.web-banner-container {
  position: relative;
  margin: 0;
  border-radius: 0;
}

.ui.message.web-banner-container > .web-banner-content {
  width: 1280px;
  max-width: calc(100% - calc(2 * var(--page-margin-x)));
  margin: auto;
}

.ui.message.web-banner-container > button.dismiss-banner {
  position: absolute;
  right: 20px;
  top: 15px;
}

.divider {
  margin: 10px 0;
  height: 0;
  font-weight: var(--font-weight-medium);
  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);
}

.divider.divider-text {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.divider.divider-text::before,
.divider.divider-text::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-secondary);
}

.divider.divider-text::before {
  margin-right: .75em;
}

.divider.divider-text::after {
  margin-left: .75em;
}

/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.header {
  color: var(--color-text);
  border: none;
  margin: calc(2rem - 0.1428571428571429em) 0 1rem;
  padding: 0;
  font-family: var(--fonts-regular);
  font-weight: var(--font-weight-medium);
  line-height: 1.28571429;
}

.ui.header:first-child {
  margin-top: -0.14285714em;
}

.ui.header:last-child {
  margin-bottom: 0;
}

.ui.header .ui.label {
  margin-left: 0.25rem;
  vertical-align: middle;
}

.ui.header > .ui.label.compact {
  margin-top: inherit;
}

.ui.header .sub.header {
  display: block;
  font-weight: var(--font-weight-normal);
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-text-light-1);
}

.ui.header > i.icon {
  display: table-cell;
  opacity: 1;
  font-size: 1.5em;
  padding-top: 0;
  vertical-align: middle;
}

.ui.header > i.icon:only-child {
  display: inline-block;
  padding: 0;
  margin-right: 0.75rem;
}

.ui.header + p {
  margin-top: 0;
}

h2.ui.header {
  font-size: 1.71428571rem;
}

h2.ui.header .sub.header {
  font-size: 1.14285714rem;
}

h4.ui.header {
  font-size: 1.07142857rem;
}

h4.ui.header .sub.header {
  font-size: 1rem;
}

.ui.sub.header {
  padding: 0;
  margin-bottom: 0.14285714rem;
  font-weight: var(--font-weight-normal);
  font-size: 0.85714286em;
}

.ui.icon.header svg {
  width: 3em;
  height: 3em;
  float: none;
  display: block;
  line-height: var(--line-height-default);
  padding: 0;
  margin: 0 auto 0.5rem;
  opacity: 1;
}

.ui.header:not(h1,h2,h3,h4,h5,h6) {
  font-size: 1.28571429em;
}

.ui.attached.header {
  position: relative;
  background: var(--color-box-header);
  padding: 0.78571429rem 1rem;
  margin: 0 -1px;
  border-radius: 0;
  border: 1px solid var(--color-secondary);
}

.ui.attached:not(.top).header {
  border-top: none;
}

.ui.top.attached.header {
  border-radius: 0.28571429rem 0.28571429rem 0 0;
}

.ui.bottom.attached.header {
  border-radius: 0 0 0.28571429rem 0.28571429rem;
}

.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
  font-size: 1em;
}

/* fix misaligned right buttons on box headers */

.ui.attached.header > .ui.right {
  position: absolute;
  right: 0.78571429rem;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */

.ui.attached.header > .ui.right .ui.tiny.button {
  padding: 6px 10px;
  font-weight: var(--font-weight-normal);
}

/* if a .top.attached.header is followed by a .segment, add some margin */

.ui.segments + .ui.top.attached.header,
.ui.attached.segment + .ui.top.attached.header {
  margin-top: 1rem;
}

.ui.dividing.header {
  border-bottom-color: var(--color-secondary);
}

.ui.dividing.header .sub.header {
  padding-bottom: 0.21428571rem;
}

.ui.dividing.header i.icon {
  margin-bottom: 0;
}

.ui.error.header {
  background: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border-color: var(--color-error-border) !important;
}

.ui.warning.header {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning-text) !important;
  border-color: var(--color-warning-border) !important;
}

.attention-header {
  padding: 0.5em 0.75em !important;
  color: var(--color-text) !important;
}

/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.input {
  position: relative;
  font-weight: var(--font-weight-normal);
  display: inline-flex;
  color: var(--color-input-text);
}

.ui.input > input {
  margin: 0;
  max-width: 100%;
  flex: 1 0 auto;
  outline: none;
  font-family: var(--fonts-regular);
  padding: 0.67857143em 1em;
  border: 1px solid var(--color-input-border);
  color: var(--color-input-text);
  border-radius: 0.28571429rem;
  line-height: var(--line-height-default);
  text-align: start;
}

.ui.disabled.input,
.ui.input:not(.disabled) input[disabled] {
  opacity: var(--opacity-disabled);
}

.ui.disabled.input > input,
.ui.input:not(.disabled) input[disabled] {
  pointer-events: none;
}

.ui.input.focus > input,
.ui.input > input:focus {
  border-color: var(--color-primary);
}

.ui.input.error > input {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.ui.icon.input > i.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 2.67142857em;
  opacity: 0.5;
  border-radius: 0 0.28571429rem 0.28571429rem 0;
  pointer-events: none;
  padding: 4px;
}

.ui.icon.input > i.icon.is-loading {
  position: absolute !important;
  height: 28px;
  top: 4px;
}

.ui.icon.input > i.icon.is-loading > * {
  visibility: hidden;
}

.ui.ui.ui.ui.icon.input > textarea,
.ui.ui.ui.ui.icon.input > input {
  padding-right: 2.67142857em;
}

.ui.icon.input > i.link.icon {
  cursor: pointer;
}

.ui.icon.input > i.circular.icon {
  top: 0.35em;
  right: 0.5em;
}

.ui[class*="left icon"].input > i.icon {
  right: auto;
  left: 1px;
  border-radius: 0.28571429rem 0 0 0.28571429rem;
}

.ui[class*="left icon"].input > i.circular.icon {
  right: auto;
  left: 0.5em;
}

.ui.ui.ui.ui[class*="left icon"].input > textarea,
.ui.ui.ui.ui[class*="left icon"].input > input {
  padding-left: 2.67142857em;
  padding-right: 1em;
}

.ui.icon.input > textarea:focus ~ .icon,
.ui.icon.input > input:focus ~ .icon {
  opacity: 1;
}

.ui.icon.input > textarea ~ i.icon {
  height: 3em;
}

.ui.form .field.error > .ui.action.input > .ui.button,
.ui.action.input.error > .ui.button {
  border-top: 1px solid var(--color-error-border);
  border-bottom: 1px solid var(--color-error-border);
}

.ui.action.input > .button,
.ui.action.input > .buttons {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.ui.action.input > .button,
.ui.action.input > .buttons > .button {
  padding-top: 0.78571429em;
  padding-bottom: 0.78571429em;
  margin: 0;
}

.ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > .ui.input > input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
}

.ui.action.input > .dropdown:first-child,
.ui.action.input > .button:first-child,
.ui.action.input > .buttons:first-child > .button {
  border-radius: 0.28571429rem 0 0 0.28571429rem;
}

.ui.action.input > .dropdown:not(:first-child),
.ui.action.input > .button:not(:first-child),
.ui.action.input > .buttons:not(:first-child) > .button {
  border-radius: 0;
}

.ui.action.input > .dropdown:last-child,
.ui.action.input > .button:last-child,
.ui.action.input > .buttons:last-child > .button {
  border-radius: 0 0.28571429rem 0.28571429rem 0;
}

.ui.fluid.input {
  display: flex;
}

.ui.fluid.input > input {
  width: 0 !important;
}

.ui.tiny.input {
  font-size: 0.85714286em;
}

.ui.small.input {
  font-size: 0.92857143em;
}

.ui.action.input .ui.ui.button {
  border-color: var(--color-input-border);
  padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
  padding-bottom: 0;
}

/* currently used for search bar dropdowns in repo search and explore code */

.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
  min-width: 10em;
}

.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
  border-right: none;
}

.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
  border-color: var(--color-input-border);
}

.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > input:hover {
  border-right: none;
}

.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .button,
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
  border-left-color: var(--color-primary);
}

.ui.action.input:not([class*="left action"]) > input:focus {
  border-right-color: var(--color-primary);
}

/* based on Fomantic UI label module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.label {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: var(--gap-inline);
  min-width: 0;
  max-width: 100%;
  background: var(--color-label-bg);
  color: var(--color-label-text);
  padding: 2px 6px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  border: 0 solid transparent;
  border-radius: var(--border-radius);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.ui.label {
  cursor: pointer;
}

.ui.label > a {
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
}

.ui.label > a:hover {
  opacity: 1;
}

.ui.label > img {
  width: auto;
  vertical-align: middle;
  height: 2.1666em;
}

.ui.label > .color-icon {
  margin-left: 0;
}

.ui.label > .icon {
  width: auto;
  margin: 0 0.75em 0 0;
}

.ui.label > .detail {
  display: inline-block;
  vertical-align: top;
  font-weight: var(--font-weight-medium);
  margin-left: 1em;
  opacity: 0.8;
}

.ui.label > .detail .icon {
  margin: 0 0.25em 0 0;
}

.ui.label > .close.icon,
.ui.label > .delete.icon {
  cursor: pointer;
  font-size: 0.92857143em;
  opacity: 0.5;
}

.ui.label > .close.icon:hover,
.ui.label > .delete.icon:hover {
  opacity: 1;
}

.ui.label.left.icon > .close.icon,
.ui.label.left.icon > .delete.icon {
  margin: 0 0.5em 0 0;
}

.ui.label:not(.icon) > .close.icon,
.ui.label:not(.icon) > .delete.icon {
  margin: 0 0 0 0.5em;
}

.ui.header > .ui.label {
  margin-top: -0.29165em;
}

a.ui.label:hover {
  background: var(--color-label-hover-bg);
  border-color: var(--color-label-hover-bg);
  color: var(--color-label-text);
}

.ui.basic.label {
  background: var(--color-button);
  border: 1px solid var(--color-light-border);
  color: var(--color-text-light);
}

a.ui.basic.label:hover {
  text-decoration: none;
  color: var(--color-text);
  border-color: var(--color-secondary-dark-2);
  background: var(--color-hover);
}

.ui.ui.ui.primary.label {
  background: var(--color-primary);
  border-color: var(--color-primary-dark-2);
  color: var(--color-primary-contrast);
}

a.ui.ui.ui.primary.label:hover {
  background: var(--color-primary-dark-3);
  border-color: var(--color-primary-dark-3);
  color: var(--color-primary-contrast);
}

.ui.ui.ui.basic.primary.label {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

a.ui.ui.ui.basic.primary.label:hover {
  background: var(--color-hover);
  border-color: var(--color-primary-dark-1);
  color: var(--color-primary-dark-1);
}

.ui.ui.ui.red.label {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

a.ui.ui.ui.red.label:hover {
  background: var(--color-red-dark-1);
  border-color: var(--color-red-dark-1);
  color: var(--color-white);
}

.ui.ui.ui.basic.red.label {
  background: transparent;
  border-color: var(--color-red);
  color: var(--color-red);
}

a.ui.ui.ui.basic.red.label:hover {
  background: transparent;
  border-color: var(--color-red-dark-1);
  color: var(--color-red-dark-1);
}

.ui.ui.ui.orange.label {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

a.ui.ui.ui.orange.label:hover {
  background: var(--color-orange-dark-1);
  border-color: var(--color-orange-dark-1);
  color: var(--color-white);
}

.ui.ui.ui.basic.orange.label {
  background: transparent;
  border-color: var(--color-orange);
  color: var(--color-orange);
}

a.ui.ui.ui.basic.orange.label:hover {
  background: transparent;
  border-color: var(--color-orange-dark-1);
  color: var(--color-orange-dark-1);
}

.ui.ui.ui.yellow.label {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-white);
}

a.ui.ui.ui.yellow.label:hover {
  background: var(--color-yellow-dark-1);
  border-color: var(--color-yellow-dark-1);
  color: var(--color-white);
}

.ui.ui.ui.basic.yellow.label {
  background: transparent;
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

a.ui.ui.ui.basic.yellow.label:hover {
  background: transparent;
  border-color: var(--color-yellow-dark-1);
  color: var(--color-yellow-dark-1);
}

.ui.ui.ui.olive.label {
  background: var(--color-olive);
  border-color: var(--color-olive);
  color: var(--color-white);
}

.ui.ui.ui.green.label {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}

a.ui.ui.ui.green.label:hover {
  background: var(--color-green-dark-1);
  border-color: var(--color-green-dark-1);
  color: var(--color-white);
}

.ui.ui.ui.basic.green.label {
  background: transparent;
  border-color: var(--color-green);
  color: var(--color-green);
}

a.ui.ui.ui.basic.green.label:hover {
  background: transparent;
  border-color: var(--color-green-dark-1);
  color: var(--color-green-dark-1);
}

.ui.ui.ui.purple.label {
  background: var(--color-purple);
  border-color: var(--color-purple);
  color: var(--color-white);
}

a.ui.ui.ui.purple.label:hover {
  background: var(--color-purple-dark-1);
  border-color: var(--color-purple-dark-1);
  color: var(--color-white);
}

.ui.ui.ui.basic.purple.label {
  background: transparent;
  border-color: var(--color-purple);
  color: var(--color-purple);
}

a.ui.ui.ui.basic.purple.label:hover {
  background: transparent;
  border-color: var(--color-purple-dark-1);
  color: var(--color-purple-dark-1);
}

.ui.ui.ui.grey.label {
  background: var(--color-label-bg);
  border-color: var(--color-label-bg);
  color: var(--color-label-text);
}

a.ui.ui.ui.grey.label:hover {
  background: var(--color-label-hover-bg);
  border-color: var(--color-label-hover-bg);
  color: var(--color-white);
}

.ui.ui.ui.basic.grey.label {
  background: transparent;
  border-color: var(--color-label-bg);
  color: var(--color-label-text);
}

a.ui.ui.ui.basic.grey.label:hover {
  background: transparent;
  border-color: var(--color-label-hover-bg);
  color: var(--color-label-hover-bg);
}

/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */

.ui.horizontal.label {
  margin: 0 0.5em 0 0;
  padding: 0.4em 0.833em;
  min-width: 3em;
  text-align: center;
}

.ui.circular.label {
  min-width: 2em;
  min-height: 2em;
  padding: 0.5em !important;
  line-height: 1;
  text-align: center;
  border-radius: 500rem;
  justify-content: center;
}

.ui.mini.label {
  font-size: 0.64285714rem;
}

.ui.tiny.label {
  font-size: 0.71428571rem;
}

.ui.small.label {
  font-size: 0.78571429rem;
}

.ui.large.label {
  font-size: 1rem;
}

/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */

.labels-list {
  display: contents;
  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
}

.labels-list a {
  display: inline-flex;
  max-width: 100%; /* for ellipsis */
}

.labels-list .ui.label {
  min-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

.with-labels-list-inline .labels-list .ui.label + .ui.label {
  margin-left: var(--gap-inline);
}

.with-labels-list-inline .labels-list .ui.label {
  line-height: var(--line-height-default);
}

/* Scoped labels with different colors on left and right */

.ui.label.scope-parent {
  background: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

.ui.label.scope-parent > .ui.label {
  margin: 0 !important; /* scoped label's margin is handled by the parent */
}

.ui.label.scope-left {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.ui.label.scope-middle {
  border-radius: 0;
}

.ui.label.scope-right {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.ui.label.archived-label {
  filter: grayscale(0.5);
  opacity: 0.5;
}

/* based on Fomantic UI list module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.list {
  list-style-type: none;
  margin: 1em 0;
  padding: 0;
}

.ui.list:first-child {
  margin-top: 0;
  padding-top: 0;
}

.ui.list:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.ui.list > .item,
.ui.list .list > .item {
  display: list-item;
  table-layout: fixed;
  list-style-type: none;
  list-style-position: outside;
}

.ui.list .list:not(.icon) {
  clear: both;
  margin: 0;
  padding: 0.75em 0 0.25em 0.5em;
}

.ui.list .list > .item {
  padding: 0.14285714em 0;
}

.ui.list .list > .item > i.icon,
.ui.list > .item > i.icon {
  display: table-cell;
  min-width: 1.55em;
  padding-top: 0;
  transition: color 0.1s ease;
  padding-right: 0.28571429em;
  vertical-align: top;
}

.ui.list .list > .item > i.icon:only-child,
.ui.list > .item > i.icon:only-child {
  display: inline-block;
  min-width: auto;
  vertical-align: top;
}

.ui.list .list > .item > .image,
.ui.list > .item > .image {
  display: table-cell;
  background-color: transparent;
  vertical-align: top;
}

.ui.list .list > .item > .image:not(:only-child):not(img),
.ui.list > .item > .image:not(:only-child):not(img) {
  padding-right: 0.5em;
}

.ui.list .list > .item > .image img,
.ui.list > .item > .image img {
  vertical-align: top;
}

.ui.list .list > .item > img.image,
.ui.list .list > .item > .image:only-child,
.ui.list > .item > img.image,
.ui.list > .item > .image:only-child {
  display: inline-block;
}

.ui.list .list > .item > .content,
.ui.list > .item > .content {
  color: var(--color-text);
}

.ui.list .list > .item > .image + .content,
.ui.list .list > .item > i.icon + .content,
.ui.list > .item > .image + .content,
.ui.list > .item > i.icon + .content {
  display: table-cell;
  width: 100%;
  padding: 0 0 0 0.5em;
  vertical-align: top;
}

.ui.list .list > .item > img.image + .content,
.ui.list > .item > img.image + .content {
  display: inline-block;
  width: auto;
}

.ui.list .list > .item > .content > .list,
.ui.list > .item > .content > .list {
  margin-left: 0;
  padding-left: 0;
}

.ui.list .list > .item .header,
.ui.list > .item .header {
  display: block;
  margin: 0;
  font-family: var(--fonts-regular);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

.ui.list .list > .item .description,
.ui.list > .item .description {
  display: block;
  color: var(--color-text);
}

.ui.list > .item a,
.ui.list .list > .item a {
  cursor: pointer;
}

.ui.menu .ui.list > .item,
.ui.menu .ui.list .list > .item {
  display: list-item;
  table-layout: fixed;
  background-color: transparent;
  list-style-type: none;
  list-style-position: outside;
  padding: 0.21428571em 0;
}

.ui.menu .ui.list .list > .item::before,
.ui.menu .ui.list > .item::before {
  border: none;
  background: none;
}

.ui.menu .ui.list .list > .item:first-child,
.ui.menu .ui.list > .item:first-child {
  padding-top: 0;
}

.ui.menu .ui.list .list > .item:last-child,
.ui.menu .ui.list > .item:last-child {
  padding-bottom: 0;
}

.ui.list .list > .disabled.item,
.ui.list > .disabled.item {
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

.ui.list .list > a.item:hover > .icons,
.ui.list > a.item:hover > .icons,
.ui.list .list > a.item:hover > i.icon,
.ui.list > a.item:hover > i.icon {
  color: var(--color-text-dark);
}

.ui.divided.list > .item {
  border-top: 1px solid var(--color-secondary);
}

.ui.divided.list .list > .item {
  border-top: none;
}

.ui.divided.list .item .list > .item {
  border-top: none;
}

.ui.divided.list .list > .item:first-child,
.ui.divided.list > .item:first-child {
  border-top: none;
}

.ui.divided.list .list > .item:first-child {
  border-top-width: 1px;
}

.ui.relaxed.list > .item:not(:first-child) {
  padding-top: 0.42857143em;
}

.ui.relaxed.list > .item:not(:last-child) {
  padding-bottom: 0.42857143em;
}

/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.segment {
  position: relative;
  margin: 1rem 0;
  padding: 1em;
  border-radius: 0.28571429rem;
  border: 1px solid var(--color-secondary);
  background: var(--color-box-body);
  color: var(--color-text);
}

.ui.segment:first-child {
  margin-top: 0;
}

.ui.segment:last-child {
  margin-bottom: 0;
}

.ui.grid.segment {
  margin: 1rem 0;
  border-radius: 0.28571429rem;
}

.ui.segment.tab:last-child {
  margin-bottom: 1rem;
}

.ui.segments {
  flex-direction: column;
  position: relative;
  margin: 1rem 0;
  border: 1px solid var(--color-secondary);
  border-radius: 0.28571429rem;
  background: var(--color-box-body);
  color: var(--color-text);
}

.ui.segments:first-child {
  margin-top: 0;
}

.ui.segments:last-child {
  margin-bottom: 0;
}

.ui.segments > .segment {
  top: 0;
  bottom: 0;
  border-radius: 0;
  margin: 0;
  width: auto;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--color-secondary);
}

.ui.segments:not(.horizontal) > .segment:first-child {
  top: 0;
  bottom: 0;
  border-top: none;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0.28571429rem 0.28571429rem 0 0;
}

.ui.segments:not(.horizontal) > .segment:last-child {
  top: 0;
  bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0 0 0.28571429rem 0.28571429rem;
}

.ui.segments:not(.horizontal) > .segment:only-child,
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
  border-radius: 0.28571429rem;
}

.ui.segments > .ui.segments {
  border-top: 1px solid var(--color-secondary);
  margin: 1rem;
}

.ui.segments > .segments:first-child {
  border-top: none;
}

.ui.segments > .segment + .segments:not(.horizontal) {
  margin-top: 0;
}

.ui.horizontal.segments {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  padding: 0;
  margin: 1rem 0;
  border-radius: 0.28571429rem;
  border: 1px solid var(--color-secondary);
}

.ui.horizontal.segments > .segment {
  margin: 0;
  min-width: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  border-left: 1px solid var(--color-secondary);
}

.ui.segments > .horizontal.segments:first-child {
  border-top: none;
}

.ui.horizontal.segments:not(.stackable) > .segment:first-child {
  border-left: none;
}

.ui.horizontal.segments > .segment:first-child {
  border-radius: 0.28571429rem 0 0 0.28571429rem;
}

.ui.horizontal.segments > .segment:last-child {
  border-radius: 0 0.28571429rem 0.28571429rem 0;
}

.ui.clearing.segment::after {
  content: "";
  display: block;
  clear: both;
}

.ui.secondary.segment {
  background: var(--color-secondary-bg);
  color: var(--color-text-light);
}

.ui.attached.segment {
  top: 0;
  bottom: 0;
  border-radius: 0;
  margin: 0 -1px;
  width: calc(100% + 2px);
  max-width: calc(100% + 2px);
  box-shadow: none;
  border: 1px solid var(--color-secondary);
  background: var(--color-box-body);
  color: var(--color-text);
}

.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
  border-top: none;
}

.ui.attached.segment:has(+ .ui[class*="top attached"].header),
.ui.attached.segment:has(+ .page.buttons),
.ui.attached.segment:last-child,
.ui.segment:has(+ .ui.segment:not(.attached)),
.ui.attached.segment:has(+ .ui.modal) {
  border-bottom-left-radius: 0.28571429rem;
  border-bottom-right-radius: 0.28571429rem;
}

.ui[class*="top attached"].segment {
  bottom: 0;
  margin-bottom: 0;
  top: 0;
  margin-top: 1rem;
  border-radius: 0.28571429rem 0.28571429rem 0 0;
}

.ui.segment[class*="top attached"]:first-child {
  margin-top: 0;
}

.ui[class*="top attached"].segment:last-child {
  border-top-left-radius: 0.28571429rem;
  border-top-right-radius: 0.28571429rem;
}

.ui.segment[class*="bottom attached"] {
  bottom: 0;
  margin-top: 0;
  top: 0;
  margin-bottom: 1rem;
  border-radius: 0 0 0.28571429rem 0.28571429rem;
}

.ui.segment[class*="bottom attached"]:last-child {
  margin-bottom: 1rem;
}

.ui.fitted.segment:not(.horizontally) {
  padding-top: 0;
  padding-bottom: 0;
}

.ui.fitted.segment:not(.vertically) {
  padding-left: 0;
  padding-right: 0;
}

.ui.segments .segment,
.ui.segment {
  font-size: 1rem;
}

.ui.error.segment {
  border-color: var(--color-error-border) !important;
}

.ui.warning.segment {
  border-color: var(--color-warning-border) !important;
}

/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0;
  margin: -1rem;
}

.ui.relaxed.grid {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.ui[class*="very relaxed"].grid {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
}

.ui.grid + .grid {
  margin-top: 1rem;
}

.ui.grid > .column:not(.row),
.ui.grid > .row > .column {
  position: relative;
  display: inline-block;
  width: 6.25%;
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: top;
}

.ui.grid > * {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ui.grid > .row {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: stretch;
  width: 100% !important;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ui.grid > .column:not(.row) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ui.grid > .row > .column {
  margin-top: 0;
  margin-bottom: 0;
}

.ui.grid > .row > img,
.ui.grid > .row > .column > img {
  max-width: 100%;
}

.ui.grid > .ui.grid:first-child {
  margin-top: 0;
}

.ui.grid > .ui.grid:last-child {
  margin-bottom: 0;
}

.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
  width: 100%;
}

.ui.grid .row + .ui.divider {
  flex-grow: 1;
  margin: 1rem;
}

.ui.grid .column + .ui.vertical.divider {
  height: calc(50% - 1rem);
}

.ui.grid > .row > .column:last-child > .horizontal.segment,
.ui.grid > .column:last-child > .horizontal.segment {
  box-shadow: none;
}

@media only screen and (max-width: 767.98px) {
  .ui.page.grid {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .ui.page.grid {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 2em;
    padding-right: 2em;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .ui.page.grid {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
  .ui.page.grid {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15%;
    padding-right: 15%;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.page.grid {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 23%;
    padding-right: 23%;
  }
}

.ui.grid > .column:only-child,
.ui.grid > .row > .column:only-child {
  width: 100%;
}

.ui[class*="one column"].grid > .row > .column,
.ui[class*="one column"].grid > .column:not(.row) {
  width: 100%;
}

.ui[class*="two column"].grid > .row > .column,
.ui[class*="two column"].grid > .column:not(.row) {
  width: 50%;
}

.ui[class*="three column"].grid > .row > .column,
.ui[class*="three column"].grid > .column:not(.row) {
  width: 33.33333333%;
}

.ui[class*="four column"].grid > .row > .column,
.ui[class*="four column"].grid > .column:not(.row) {
  width: 25%;
}

.ui[class*="five column"].grid > .row > .column,
.ui[class*="five column"].grid > .column:not(.row) {
  width: 20%;
}

.ui[class*="six column"].grid > .row > .column,
.ui[class*="six column"].grid > .column:not(.row) {
  width: 16.66666667%;
}

.ui[class*="seven column"].grid > .row > .column,
.ui[class*="seven column"].grid > .column:not(.row) {
  width: 14.28571429%;
}

.ui[class*="eight column"].grid > .row > .column,
.ui[class*="eight column"].grid > .column:not(.row) {
  width: 12.5%;
}

.ui[class*="nine column"].grid > .row > .column,
.ui[class*="nine column"].grid > .column:not(.row) {
  width: 11.11111111%;
}

.ui[class*="ten column"].grid > .row > .column,
.ui[class*="ten column"].grid > .column:not(.row) {
  width: 10%;
}

.ui[class*="eleven column"].grid > .row > .column,
.ui[class*="eleven column"].grid > .column:not(.row) {
  width: 9.09090909%;
}

.ui[class*="twelve column"].grid > .row > .column,
.ui[class*="twelve column"].grid > .column:not(.row) {
  width: 8.33333333%;
}

.ui[class*="thirteen column"].grid > .row > .column,
.ui[class*="thirteen column"].grid > .column:not(.row) {
  width: 7.69230769%;
}

.ui[class*="fourteen column"].grid > .row > .column,
.ui[class*="fourteen column"].grid > .column:not(.row) {
  width: 7.14285714%;
}

.ui[class*="fifteen column"].grid > .row > .column,
.ui[class*="fifteen column"].grid > .column:not(.row) {
  width: 6.66666667%;
}

.ui[class*="sixteen column"].grid > .row > .column,
.ui[class*="sixteen column"].grid > .column:not(.row) {
  width: 6.25%;
}

.ui.grid > [class*="one column"].row > .column {
  width: 100% !important;
}

.ui.grid > [class*="two column"].row > .column {
  width: 50% !important;
}

.ui.grid > [class*="three column"].row > .column {
  width: 33.33333333% !important;
}

.ui.grid > [class*="four column"].row > .column {
  width: 25% !important;
}

.ui.grid > [class*="five column"].row > .column {
  width: 20% !important;
}

.ui.grid > [class*="six column"].row > .column {
  width: 16.66666667% !important;
}

.ui.grid > [class*="seven column"].row > .column {
  width: 14.28571429% !important;
}

.ui.grid > [class*="eight column"].row > .column {
  width: 12.5% !important;
}

.ui.grid > [class*="nine column"].row > .column {
  width: 11.11111111% !important;
}

.ui.grid > [class*="ten column"].row > .column {
  width: 10% !important;
}

.ui.grid > [class*="eleven column"].row > .column {
  width: 9.09090909% !important;
}

.ui.grid > [class*="twelve column"].row > .column {
  width: 8.33333333% !important;
}

.ui.grid > [class*="thirteen column"].row > .column {
  width: 7.69230769% !important;
}

.ui.grid > [class*="fourteen column"].row > .column {
  width: 7.14285714% !important;
}

.ui.grid > [class*="fifteen column"].row > .column {
  width: 6.66666667% !important;
}

.ui.grid > [class*="sixteen column"].row > .column {
  width: 6.25% !important;
}

.ui.grid > .row > [class*="one wide"].column,
.ui.grid > .column.row > [class*="one wide"].column,
.ui.grid > [class*="one wide"].column,
.ui.column.grid > [class*="one wide"].column {
  width: 6.25% !important;
}

.ui.grid > .row > [class*="two wide"].column,
.ui.grid > .column.row > [class*="two wide"].column,
.ui.grid > [class*="two wide"].column,
.ui.column.grid > [class*="two wide"].column {
  width: 12.5% !important;
}

.ui.grid > .row > [class*="three wide"].column,
.ui.grid > .column.row > [class*="three wide"].column,
.ui.grid > [class*="three wide"].column,
.ui.column.grid > [class*="three wide"].column {
  width: 18.75% !important;
}

.ui.grid > .row > [class*="four wide"].column,
.ui.grid > .column.row > [class*="four wide"].column,
.ui.grid > [class*="four wide"].column,
.ui.column.grid > [class*="four wide"].column {
  width: 25% !important;
}

.ui.grid > .row > [class*="five wide"].column,
.ui.grid > .column.row > [class*="five wide"].column,
.ui.grid > [class*="five wide"].column,
.ui.column.grid > [class*="five wide"].column {
  width: 31.25% !important;
}

.ui.grid > .row > [class*="six wide"].column,
.ui.grid > .column.row > [class*="six wide"].column,
.ui.grid > [class*="six wide"].column,
.ui.column.grid > [class*="six wide"].column {
  width: 37.5% !important;
}

.ui.grid > .row > [class*="seven wide"].column,
.ui.grid > .column.row > [class*="seven wide"].column,
.ui.grid > [class*="seven wide"].column,
.ui.column.grid > [class*="seven wide"].column {
  width: 43.75% !important;
}

.ui.grid > .row > [class*="eight wide"].column,
.ui.grid > .column.row > [class*="eight wide"].column,
.ui.grid > [class*="eight wide"].column,
.ui.column.grid > [class*="eight wide"].column {
  width: 50% !important;
}

.ui.grid > .row > [class*="nine wide"].column,
.ui.grid > .column.row > [class*="nine wide"].column,
.ui.grid > [class*="nine wide"].column,
.ui.column.grid > [class*="nine wide"].column {
  width: 56.25% !important;
}

.ui.grid > .row > [class*="ten wide"].column,
.ui.grid > .column.row > [class*="ten wide"].column,
.ui.grid > [class*="ten wide"].column,
.ui.column.grid > [class*="ten wide"].column {
  width: 62.5% !important;
}

.ui.grid > .row > [class*="eleven wide"].column,
.ui.grid > .column.row > [class*="eleven wide"].column,
.ui.grid > [class*="eleven wide"].column,
.ui.column.grid > [class*="eleven wide"].column {
  width: 68.75% !important;
}

.ui.grid > .row > [class*="twelve wide"].column,
.ui.grid > .column.row > [class*="twelve wide"].column,
.ui.grid > [class*="twelve wide"].column,
.ui.column.grid > [class*="twelve wide"].column {
  width: 75% !important;
}

.ui.grid > .row > [class*="thirteen wide"].column,
.ui.grid > .column.row > [class*="thirteen wide"].column,
.ui.grid > [class*="thirteen wide"].column,
.ui.column.grid > [class*="thirteen wide"].column {
  width: 81.25% !important;
}

.ui.grid > .row > [class*="fourteen wide"].column,
.ui.grid > .column.row > [class*="fourteen wide"].column,
.ui.grid > [class*="fourteen wide"].column,
.ui.column.grid > [class*="fourteen wide"].column {
  width: 87.5% !important;
}

.ui.grid > .row > [class*="fifteen wide"].column,
.ui.grid > .column.row > [class*="fifteen wide"].column,
.ui.grid > [class*="fifteen wide"].column,
.ui.column.grid > [class*="fifteen wide"].column {
  width: 93.75% !important;
}

.ui.grid > .row > [class*="sixteen wide"].column,
.ui.grid > .column.row > [class*="sixteen wide"].column,
.ui.grid > [class*="sixteen wide"].column,
.ui.column.grid > [class*="sixteen wide"].column {
  width: 100% !important;
}

.ui.centered.grid,
.ui.centered.grid > .row,
.ui.grid > .centered.row {
  text-align: center;
  justify-content: center;
}

.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
  text-align: left;
}

.ui.grid > .centered.column,
.ui.grid > .row > .centered.column {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ui.relaxed.grid > .column:not(.row),
.ui.relaxed.grid > .row > .column,
.ui.grid > .relaxed.row > .column {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.ui[class*="very relaxed"].grid > .column:not(.row),
.ui[class*="very relaxed"].grid > .row > .column,
.ui.grid > [class*="very relaxed"].row > .column {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.ui.relaxed.grid .row + .ui.divider,
.ui.grid .relaxed.row + .ui.divider {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.ui[class*="very relaxed"].grid .row + .ui.divider,
.ui.grid [class*="very relaxed"].row + .ui.divider {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

@media only screen and (max-width: 767.98px) {
  .ui[class*="mobile reversed"].grid,
  .ui[class*="mobile reversed"].grid > .row,
  .ui.grid > [class*="mobile reversed"].row {
    flex-direction: row-reverse;
  }
  .ui.stackable[class*="mobile reversed"] {
    flex-direction: column-reverse;
  }
  .ui.stackable.grid {
    width: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ui.stackable.grid > .row > .wide.column,
  .ui.stackable.grid > .wide.column,
  .ui.stackable.grid > .column.grid > .column,
  .ui.stackable.grid > .column.row > .column,
  .ui.stackable.grid > .row > .column,
  .ui.stackable.grid > .column:not(.row),
  .ui.grid > .stackable.stackable.stackable.row > .column {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    padding: 1rem;
  }
  .ui.stackable.grid:not(.vertically) > .row {
    margin: 0;
    padding: 0;
  }

  .ui.container > .ui.stackable.grid > .column,
  .ui.container > .ui.stackable.grid > .row > .column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ui.grid .ui.stackable.grid,
  .ui.segment:not(.vertical) .ui.stackable.page.grid {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }
}

.ui.ui.ui.compact.grid > .column:not(.row),
.ui.ui.ui.compact.grid > .row > .column {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ui.ui.ui.compact.grid > * {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ui.ui.ui.compact.grid > .row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.ui.ui.ui.compact.grid > .column:not(.row) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.ui.menu {
  display: flex;
  flex-shrink: 0;
  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 {
  background: var(--color-active);
  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);
  color: var(--color-text-dark);
  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 {
  border-radius: 0.28571429rem;
}

.ui.secondary.menu .active.item,
.ui.secondary.menu .active.item:hover {
  color: var(--color-text-dark);
  background: var(--color-active);
}

.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: 2px solid transparent;
  border-radius: 0;
  align-self: flex-end;
  margin: 0 0 -2px;
  padding: 0.85714286em 1.14285714em;
}

.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;
}

.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.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;
  flex-shrink: 0;
}

.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);
}

.small-menu-items {
  min-height: 35.4px !important; /* match .small.button in height */
  background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
  user-select: none;
}

.small-menu-items .item {
  background: var(--color-menu) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.small-menu-items .item:hover {
  background: var(--color-hover) !important;
}

.small-menu-items .item.active {
  background: var(--color-active) !important;
}

/* based on Fomantic UI message module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.message {
  background: var(--color-box-body);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  position: relative;
  min-height: 1em;
  margin: 1em 0;
  padding: 1em 1.5em;
  border-radius: var(--border-radius);
}

.ui.message:first-child {
  margin-top: 0;
}

.ui.message:last-child {
  margin-bottom: 0;
}

.ui.attached.message {
  margin-bottom: -1px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-left: -1px;
  margin-right: -1px;
}

.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  margin-top: -1px;
  border-radius: 0;
}

.ui.bottom.attached.message {
  margin-top: -1px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.ui.bottom.attached.message:not(:last-child) {
  margin-bottom: 1em;
}

.ui.message .header {
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

.ui.info.message,
.ui.attached.info.message,
.ui.blue.message,
.ui.attached.blue.message {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.ui.success.message,
.ui.attached.success.message,
.ui.positive.message,
.ui.attached.positive.message {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.ui.error.message,
.ui.attached.error.message,
.ui.red.message,
.ui.attached.red.message,
.ui.negative.message,
.ui.attached.negative.message {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}

.ui.warning.message,
.ui.attached.warning.message,
.ui.yellow.message,
.ui.attached.yellow.message {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.ui.message > .close.icon {
  cursor: pointer;
  position: absolute;
  top: 9px;
  right: 9px;
  opacity: .7;
}

.ui.message > .close.icon:hover {
  opacity: 1;
}

/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
   unused rules here after refactoring, please remove them. */

.ui.table {
  width: 100%;
  margin: 1em 0;
  border: 1px solid var(--color-secondary);
  border-radius: 0.28571429rem;
  vertical-align: middle;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text);
  background: var(--color-box-body);
  border-color: var(--color-secondary);
  text-align: start;
}

.ui.table:first-child {
  margin-top: 0;
}

.ui.table:last-child {
  margin-bottom: 0;
}

.ui.table > thead,
.ui.table > tbody {
  text-align: inherit;
  vertical-align: inherit;
}

.ui.table > thead > tr > th {
  background: var(--color-box-header);
  text-align: inherit;
  color: var(--color-text);
  padding: 6px 5px;
  vertical-align: inherit;
  font-weight: var(--font-weight-normal);
  border-bottom: 1px solid var(--color-secondary);
  border-left: none;
}

.ui.table > thead > tr > th:first-child {
  border-left: none;
}

.ui.table > thead > tr:first-child > th:first-child {
  border-radius: 0.28571429rem 0 0;
}

.ui.table > thead > tr:first-child > th:last-child {
  border-radius: 0 0.28571429rem 0 0;
}

.ui.table > thead > tr:first-child > th:only-child {
  border-radius: 0.28571429rem 0.28571429rem 0 0;
}

.ui.table > tfoot > tr > th,
.ui.table > tfoot > tr > td {
  border-top: 1px solid var(--color-secondary);
  background: var(--color-box-body);
  text-align: inherit;
  color: var(--color-text);
  padding: 0.78571429em;
  vertical-align: inherit;
  font-weight: var(--font-weight-normal);
}

.ui.table > tfoot > tr > th:first-child,
.ui.table > tfoot > tr > td:first-child {
  border-left: none;
}

.ui.table > tfoot > tr:first-child > th:first-child,
.ui.table > tfoot > tr:first-child > td:first-child {
  border-radius: 0 0 0 0.28571429rem;
}

.ui.table > tfoot > tr:first-child > th:last-child,
.ui.table > tfoot > tr:first-child > td:last-child {
  border-radius: 0 0 0.28571429rem;
}

.ui.table > tfoot > tr:first-child > th:only-child,
.ui.table > tfoot > tr:first-child > td:only-child {
  border-radius: 0 0 0.28571429rem 0.28571429rem;
}

.ui.table > tr > td,
.ui.table > tbody > tr > td {
  border-top: 1px solid var(--color-secondary-alpha-50);
  padding: 6px 5px;
  text-align: inherit;
}

.ui.table > tr:first-child > td,
.ui.table > tbody > tr:first-child > td {
  border-top: none;
}

.ui.table.segment {
  padding: 0;
}

.ui.table.segment::after {
  display: none;
}

@media only screen and (max-width: 767.98px) {
  .ui.table:not(.unstackable) {
    width: 100%;
    padding: 0;
  }
  .ui.table:not(.unstackable) > thead,
  .ui.table:not(.unstackable) > thead > tr,
  .ui.table:not(.unstackable) > tfoot,
  .ui.table:not(.unstackable) > tfoot > tr,
  .ui.table:not(.unstackable) > tbody,
  .ui.table:not(.unstackable) > tr,
  .ui.table:not(.unstackable) > tbody > tr,
  .ui.table:not(.unstackable) > tr > th,
  .ui.table:not(.unstackable) > thead > tr > th,
  .ui.table:not(.unstackable) > tbody > tr > th,
  .ui.table:not(.unstackable) > tfoot > tr > th,
  .ui.table:not(.unstackable) > tr > td,
  .ui.table:not(.unstackable) > tbody > tr > td,
  .ui.table:not(.unstackable) > tfoot > tr > td {
    display: block !important;
    width: auto !important;
  }
  .ui.table:not(.unstackable) > thead {
    display: block;
  }
  .ui.table:not(.unstackable) > tfoot {
    display: block;
  }
  .ui.ui.ui.ui.table:not(.unstackable) > tr,
  .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
  .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
  .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
  .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
  .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
  .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
  .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
  .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
  .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
    background: none;
    border: none;
    padding: 0.25em 0.75em;
  }
  .ui.table:not(.unstackable) > tr > th:first-child,
  .ui.table:not(.unstackable) > thead > tr > th:first-child,
  .ui.table:not(.unstackable) > tbody > tr > th:first-child,
  .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
  .ui.table:not(.unstackable) > tr > td:first-child,
  .ui.table:not(.unstackable) > tbody > tr > td:first-child,
  .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
    font-weight: var(--font-weight-normal);
  }
}

.ui.table th.collapsing,
.ui.table td.collapsing {
  width: 1px;
  white-space: nowrap;
}

.ui.fixed.table {
  table-layout: fixed;
}

.ui.fixed.table th,
.ui.fixed.table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui.selectable.table > tbody > tr:hover,
.ui.table tbody tr td.selectable:hover {
  background: var(--color-hover);
}

.ui.attached.table {
  top: 0;
  bottom: 0;
  border-radius: 0;
  margin: 0 -1px;
  width: calc(100% + 2px);
  max-width: calc(100% + 2px);
  border: 1px solid var(--color-secondary);
}

.ui.attached + .ui.attached.table:not(.top) {
  border-top: none;
}

.ui[class*="bottom attached"].table {
  bottom: 0;
  margin-top: 0;
  top: 0;
  margin-bottom: 1em;
  border-radius: 0 0 0.28571429rem 0.28571429rem;
}

.ui[class*="bottom attached"].table:last-child {
  margin-bottom: 0;
}

.ui.table[class*="single line"],
.ui.table [class*="single line"] {
  white-space: nowrap;
}

/* Column Width */

.ui.table th.one.wide,
.ui.table td.one.wide {
  width: 6.25%;
}

.ui.table th.two.wide,
.ui.table td.two.wide {
  width: 12.5%;
}

.ui.table th.three.wide,
.ui.table td.three.wide {
  width: 18.75%;
}

.ui.table th.four.wide,
.ui.table td.four.wide {
  width: 25%;
}

.ui.table th.five.wide,
.ui.table td.five.wide {
  width: 31.25%;
}

.ui.table th.six.wide,
.ui.table td.six.wide {
  width: 37.5%;
}

.ui.table th.seven.wide,
.ui.table td.seven.wide {
  width: 43.75%;
}

.ui.table th.eight.wide,
.ui.table td.eight.wide {
  width: 50%;
}

.ui.table th.nine.wide,
.ui.table td.nine.wide {
  width: 56.25%;
}

.ui.table th.ten.wide,
.ui.table td.ten.wide {
  width: 62.5%;
}

.ui.table th.eleven.wide,
.ui.table td.eleven.wide {
  width: 68.75%;
}

.ui.table th.twelve.wide,
.ui.table td.twelve.wide {
  width: 75%;
}

.ui.table th.thirteen.wide,
.ui.table td.thirteen.wide {
  width: 81.25%;
}

.ui.table th.fourteen.wide,
.ui.table td.fourteen.wide {
  width: 87.5%;
}

.ui.table th.fifteen.wide,
.ui.table td.fifteen.wide {
  width: 93.75%;
}

.ui.table th.sixteen.wide,
.ui.table td.sixteen.wide {
  width: 100%;
}

.ui.basic.table {
  background: transparent;
  border: 1px solid var(--color-secondary);
}

.ui.basic.table > thead > tr > th,
.ui.basic.table > tbody > tr > th,
.ui.basic.table > tfoot > tr > th,
.ui.basic.table > tr > th {
  background: transparent;
  border-left: none;
}

.ui.basic.table > tbody > tr {
  border-bottom: 1px solid var(--color-secondary);
}

.ui.basic.table > tbody > tr > td,
.ui.basic.table > tfoot > tr > td,
.ui.basic.table > tr > td {
  background: transparent;
}

.ui[class*="very basic"].table {
  border: none;
}

.ui.celled.table > tr > th,
.ui.celled.table > thead > tr > th,
.ui.celled.table > tbody > tr > th,
.ui.celled.table > tfoot > tr > th,
.ui.celled.table > tr > td,
.ui.celled.table > tbody > tr > td,
.ui.celled.table > tfoot > tr > td {
  border-left: 1px solid var(--color-secondary-alpha-50);
}

.ui.celled.table > tr > th:first-child,
.ui.celled.table > thead > tr > th:first-child,
.ui.celled.table > tbody > tr > th:first-child,
.ui.celled.table > tfoot > tr > th:first-child,
.ui.celled.table > tr > td:first-child,
.ui.celled.table > tbody > tr > td:first-child,
.ui.celled.table > tfoot > tr > td:first-child {
  border-left: none;
}

.ui.compact.table > tr > th,
.ui.compact.table > thead > tr > th,
.ui.compact.table > tbody > tr > th,
.ui.compact.table > tfoot > tr > th {
  padding-left: 0.7em;
  padding-right: 0.7em;
}

.ui.compact.table > tr > td,
.ui.compact.table > tbody > tr > td,
.ui.compact.table > tfoot > tr > td {
  padding: 0.5em 0.7em;
}

/* use more horizontal padding on first and last items for visuals */

.ui.table > thead > tr > th:first-of-type,
.ui.table > tbody > tr > td:first-of-type,
.ui.table > tr > td:first-of-type {
  padding-left: 10px;
}

.ui.table > thead > tr > th:last-of-type,
.ui.table > tbody > tr > td:last-of-type,
.ui.table > tr > td:last-of-type {
  padding-right: 10px;
}

/* Below styles are a subset of the full fomantic card styles which are */

/* needed to get all current uses of fomantic cards working. */

/* TODO: remove all these styles and use custom styling instead  */

.ui.card:last-child {
  margin-bottom: 0;
}

.ui.card:first-child {
  margin-top: 0;
}

.ui.cards > .card,
.ui.card {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: 290px;
  min-height: 0;
  padding: 0;
  background: var(--color-card);
  border: 1px solid var(--color-secondary);
  box-shadow: none;
  overflow-wrap: break-word;
  border-radius: var(--border-radius);
}

.ui.card {
  margin: 1em 0;
}

.ui.cards {
  display: flex;
  margin: -0.875em -0.5em;
  flex-wrap: wrap;
}

.ui.cards > .card {
  display: flex;
  margin: 0.875em 0.5em;
  float: none;
}

.ui.cards > .card > .content,
.ui.card > .content {
  border-top: 1px solid var(--color-secondary);
  max-width: 100%;
  padding: 1em;
  font-size: 1em;
}

.ui.cards > .card > .content > .meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.card > .content > .meta + .description,
.ui.card > .content > .header + .description {
  margin-top: .5em;
}

.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
  font-weight: var(--font-weight-medium);
  font-size: 1.28571429em;
  margin-top: -.21425em;
  line-height: 1.28571429;
}

.ui.cards > .card > .content:first-child,
.ui.card > .content:first-child {
  border-top: none;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.ui.cards > .card > :last-child,
.ui.card > :last-child {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.ui.cards > .card > :only-child,
.ui.card > :only-child {
  border-radius: var(--border-radius) !important;
}

.ui.cards > .card > .extra,
.ui.card > .extra,
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
  color: var(--color-text);
}

.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
  color: var(--color-primary);
}

.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
  color: var(--color-text);
}

.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
  color: var(--color-text);
}

.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
  color: var(--color-text-light-2);
}

.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
  color: var(--color-text);
}

.ui.cards a.card:hover,
a.ui.card:hover {
  border: 1px solid var(--color-secondary);
  background: var(--color-card);
}

.ui.cards > .card > .extra,
.ui.card > .extra {
  color: var(--color-text);
  border-top-color: var(--color-secondary-light-1) !important;
}

.ui.three.cards {
  margin-left: -1em;
  margin-right: -1em;
}

.ui.three.cards > .card {
  width: calc(33.33333333333333% - 2em);
  margin-left: 1em;
  margin-right: 1em;
}

/* 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. */

input[type="radio"] {
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--color-input-border);
  border-radius: 50%;
  background: var(--color-input-background);
}

input[type="radio"]:checked {
  background: var(--color-white);
  border: 4px solid var(--color-primary);
}

input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--color-input-border);
  border-radius: 3px;
  background: var(--color-input-background);
  overflow: hidden;
  print-color-adjust: exact;
}

input[type="checkbox"]::before {
  content: "";
  background: var(--color-white);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  clip-path: inset(var(--checkbox-size) 0 0 0);
  mask-image: var(--checkbox-mask-checked);
  -webkit-mask-image: var(--checkbox-mask-checked);
  mask-size: 75%;
  -webkit-mask-size: 75%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

input[type="checkbox"]:checked::before {
  clip-path: inset(0);
}

input[type="checkbox"]:disabled:checked,
input[type="checkbox"]:disabled:indeterminate {
  background: var(--color-secondary-dark-4);
  border-color: var(--color-secondary-dark-4);
}

input[type="radio"]:disabled:checked {
  border-color: var(--color-secondary-dark-4);
}

input[type="checkbox"]:indeterminate::before {
  clip-path: inset(0);
  mask-image: var(--checkbox-mask-indeterminate);
  -webkit-mask-image: var(--checkbox-mask-indeterminate);
  mask-size: 75%;
  -webkit-mask-size: 75%;
}

.ui.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  min-height: var(--checkbox-size);
  line-height: var(--checkbox-size);
  min-width: var(--checkbox-size);
  padding: 1px;
}

.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
  position: absolute;
  top: 1px;
  left: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
}

.ui.checkbox label {
  position: relative;
  display: block;
}

.ui.checkbox label,
.ui.radio.checkbox label {
  margin-left: 20px;
}

.ui.checkbox + label {
  vertical-align: middle;
}

.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
  cursor: default !important;
  opacity: 0.5;
  pointer-events: none;
}

.ui.radio.checkbox {
  min-height: var(--checkbox-size);
}

/* "switch" styled checkbox */

.ui.toggle.checkbox {
  min-height: 1.5rem;
}

.ui.toggle.checkbox input {
  width: 3.5rem;
  height: 21px;
  opacity: 0;
  z-index: 3;
}

.ui.toggle.checkbox label {
  min-height: 1.5rem;
  padding-left: 4.5rem;
  padding-top: 0.15em;
}

.ui.toggle.checkbox label::before {
  display: block;
  position: absolute;
  content: "";
  z-index: 1;
  top: 0;
  width: 49px;
  height: 21px;
  border-radius: 500rem;
  left: 0;
}

.ui.toggle.checkbox label::after {
  background: var(--color-white);
  box-shadow: 1px 1px 4px 1px var(--color-shadow);
  position: absolute;
  content: "";
  opacity: 1;
  z-index: 2;
  width: 18px;
  height: 18px;
  top: 1.5px;
  left: 1.5px;
  border-radius: 500rem;
  transition: background 0.3s ease, left 0.3s ease;
}

.ui.toggle.checkbox input ~ label::after {
  left: 1.5px;
}

.ui.toggle.checkbox input:checked ~ label::after {
  left: 29px;
}

.ui.toggle.checkbox input:focus ~ label::before,
.ui.toggle.checkbox label::before {
  background: var(--color-input-toggle-background);
}

.ui.toggle.checkbox label,
.ui.toggle.checkbox input:checked ~ label,
.ui.toggle.checkbox input:focus:checked ~ label {
  color: var(--color-text) !important;
}

.ui.toggle.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:focus:checked ~ label::before {
  background: var(--color-primary) !important;
}

label.gt-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.ui.form .field > label.gt-checkbox {
  display: flex;
}

/* These are the remnants of the fomantic dimmer module */

.ui.dimmer {
  position: fixed;
  display: none;
  inset: 0;
  background: var(--color-overlay-backdrop);
  opacity: 0;
  z-index: 1000;
  overflow-y: auto;
  justify-content: center;
  padding: 8px 0;
  animation-name: fadein;
  animation-duration: .2s;
  user-select: none;
}

.ui.active.dimmer {
  display: flex;
  opacity: 1;
}

.ui.dimmer > .ui.modal {
  position: static;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* These are the remnants of the fomantic modal module */

.ui.modal {
  position: absolute;
  display: none;
  z-index: var(--z-index-modal);
  text-align: left;
  background: var(--color-body);
  border: none;
  box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
  transform-origin: 50% 25%;
  flex: 0 0 auto;
  border-radius: var(--border-radius);
  user-select: text;
  will-change: top, left, margin, transform, opacity;
}

.ui.modal > :first-child:not(.icon) {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.ui.modal > :last-child {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.ui.modal > .close {
  cursor: pointer;
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  z-index: 1;
  opacity: 0.8;
  font-size: 1.25em;
  color: var(--color-white);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.625rem 0 0;
}

.ui.modal > .close:hover {
  opacity: 1;
}

.ui.modal > .header {
  display: block;
  font-family: var(--fonts-regular);
  background: var(--color-body);
  margin: 0;
  padding: 1.25rem 1.5rem;
  box-shadow: none;
  color: var(--color-text-dark);
  border-bottom: 1px solid var(--color-secondary);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.ui.modal > .header:not(.ui) {
  font-size: 1.42857143rem;
  line-height: 1.28571429em;
  font-weight: var(--font-weight-medium);
}

.ui.modal > .header .svg {
  vertical-align: middle;
  display: inline-block;
}

.ui.modal > .content,
.ui.modal form > .content {
  display: block;
  width: 100%;
  font-size: 1em;
  line-height: 1.4;
  padding: 1.5em;
  background: var(--color-body);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.ui.modal > .actions,
.ui.modal .content + .actions,
.ui.modal .content + form > .actions {
  background: var(--color-secondary-bg);
  padding: 1rem;
  border-top: 1px solid var(--color-secondary);
  text-align: right;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.ui.modal .actions > .button {
  margin-left: 0.75em;
}

@media only screen and (max-width: 767.98px) {
  .ui.modal {
    width: 95%;
  }
}

@media only screen and (min-width: 768px) {
  .ui.modal {
    width: 88%;
  }
}

@media only screen and (min-width: 992px) {
  .ui.modal {
    width: 850px;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.modal {
    width: 900px;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.modal {
    width: 950px;
  }
}

@media only screen and (max-width: 991.98px) {
  .ui.modal > .header {
    padding-right: 2.25rem;
  }
  .ui.modal > .close {
    top: 1.0535rem;
    right: 1rem;
    color: var(--color-text);
  }
}

@media only screen and (max-width: 767.98px) {
  .ui.modal > .header {
    padding: 0.75rem 1rem !important;
    padding-right: 2.25rem !important;
  }
  .ui.modal > .content {
    display: block;
    padding: 1rem !important;
  }
  .ui.modal > .close {
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
  .ui.modal > .actions {
    padding: 1rem 1rem 0 !important;
  }
  .ui.modal .actions > .buttons,
  .ui.modal .actions > .button {
    margin-bottom: 1rem;
  }
}

.ui.active.modal {
  display: block;
}

.scrolling.dimmable > .dimmer {
  justify-content: flex-start;
  position: fixed;
}

.modals.dimmer .ui.scrolling.modal {
  margin: 2rem auto;
}

.ui.modal > .close.inside + .header {
  padding-right: 2.25rem;
}

.ui.modal > .close.inside {
  top: 1.0535rem;
  right: 1rem;
  color: inherit;
}

.ui.modal > .close.icon[height="16"] {
  top: 0.7em;
  color: var(--color-text-dark);
}

.ui.mini.modal > .header:not(.ui) {
  font-size: 1.3em;
}

@media only screen and (max-width: 767.98px) {
  .ui.mini.modal {
    width: 95%;
  }
}

@media only screen and (min-width: 768px) {
  .ui.mini.modal {
    width: 35.2%;
  }
}

@media only screen and (min-width: 992px) {
  .ui.mini.modal {
    width: 340px;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.mini.modal {
    width: 360px;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.mini.modal {
    width: 380px;
  }
}

.ui.tiny.modal > .header:not(.ui) {
  font-size: 1.3em;
}

@media only screen and (max-width: 767.98px) {
  .ui.tiny.modal {
    width: 95%;
  }
}

@media only screen and (min-width: 768px) {
  .ui.tiny.modal {
    width: 52.8%;
  }
}

@media only screen and (min-width: 992px) {
  .ui.tiny.modal {
    width: 510px;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.tiny.modal {
    width: 540px;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.tiny.modal {
    width: 570px;
  }
}

.ui.small.modal > .header:not(.ui) {
  font-size: 1.3em;
}

@media only screen and (max-width: 767.98px) {
  .ui.small.modal {
    width: 95%;
  }
}

@media only screen and (min-width: 768px) {
  .ui.small.modal {
    width: 70.4%;
  }
}

@media only screen and (min-width: 992px) {
  .ui.small.modal {
    width: 680px;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.small.modal {
    width: 720px;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.small.modal {
    width: 760px;
  }
}

.ui.modal.g-modal-confirm {
  max-width: min(800px, 90vw);
  width: fit-content;
}

.ui.modal.g-modal-confirm > .inside.close.icon {
  padding: 0;
  width: 1em;
  height: 1em;
  top: 1.2em;
}

.ui.modal .content > form > .actions,
.ui.modal .content > .actions {
  padding-top: 1em;
  text-align: right;
}

.ui.modal .actions > .ui.button {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px 10px 10px;
  margin-right: 0;
}

.ui.modal .actions > .ui.button.danger {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.ui.modal .actions > .ui.button .svg {
  margin-right: 5px;
}

/* These are the remnants of the fomantic search module */

.ui.search {
  position: relative;
}

.ui.search > .results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: normal;
  text-align: left;
  background: var(--color-body);
  margin-top: 0.5em;
  width: 18em;
  border-radius: 0.28571429rem;
  box-shadow: 0 2px 4px 0 var(--color-shadow), 0 2px 10px 0 var(--color-shadow);
  border: 1px solid var(--color-secondary);
  z-index: 998;
  transform-origin: center top;
  overflow-wrap: anywhere;
}

.ui.search > .results > :first-child {
  border-top-left-radius: 0.28571429rem;
  border-top-right-radius: 0.28571429rem;
}

.ui.search > .results > :last-child {
  border-bottom-left-radius: 0.28571429rem;
  border-bottom-right-radius: 0.28571429rem;
}

.ui.search > .results .result {
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0.85714286em 1.14285714em;
  color: var(--color-text);
  line-height: 1.33;
  border-bottom: 1px solid var(--color-secondary);
  background: var(--color-body);
}

.ui.search > .results .result:last-child {
  border-bottom: none;
}

.ui.search > .results .result .image {
  overflow: hidden;
  border-radius: 0.25em;
}

.ui.search > .results .result .image img {
  display: block;
  height: 100%;
}

.ui.search > .results .result .title {
  margin: -0.14285714em 0 0;
  font-family: var(--fonts-regular);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

.ui.search > .results .result .description {
  font-size: 0.92857143em;
  color: var(--color-text-light-2);
}

.ui.search > .results .result:hover,
.ui.search > .results .result.active {
  background: var(--color-hover);
}

.ui.fluid.search .results {
  width: 100%;
}

@media only screen and (max-width: 767.98px) {
  .ui.search .results {
    max-width: calc(100vw - 2rem);
  }
}

.ui.tab {
  display: none;
}

.ui.tab.active {
  display: block;
}

.ui.form {
  position: relative;
  max-width: 100%;
}

.ui.form > p {
  margin: 1em 0;
}

.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;
}

.ui.form .field > label {
  display: block;
  margin: 0 0 0.28571429rem;
  color: var(--color-text);
  font-size: 0.92857143em;
  font-weight: var(--font-weight-medium);
  text-transform: none;
}

.ui.form textarea,
.ui.form input:not([type="checkbox"], [type="radio"]) {
  width: 100%;
  vertical-align: top;
}

.ui.form ::-webkit-datetime-edit,
.ui.form ::-webkit-inner-spin-button {
  height: 1.21428571em;
}

.ui.form input:not([type="checkbox"], [type="radio"]),
.ui.search > .prompt {
  font-family: var(--fonts-regular);
  margin: 0;
  outline: none;
  line-height: 1.21428571;
  padding: 0.67857143em 1em;
  font-size: 1em;
  color: var(--color-text);
  border-radius: 0.28571429rem;
}

.ui.input textarea,
.ui.form textarea {
  margin: 0;
  padding: 0.78571429em 1em;
  outline: none;
  color: var(--color-text);
  border-radius: 0.28571429rem;
  font-size: 1em;
  font-family: var(--fonts-regular);
  line-height: 1.2857;
  resize: vertical;
}

.ui.form textarea:not([rows]) {
  height: var(--min-height-textarea);
  min-height: var(--min-height-textarea);
  max-height: 24em;
}

input:not([type="checkbox"], [type="radio"]),
textarea,
.ui.input > input,
.ui.form input:not([type="checkbox"], [type="radio"]),
.ui.form select,
.ui.form textarea,
.ui.selection.dropdown,
.ui.search > .prompt {
  background: var(--color-input-background);
  border: 1px solid var(--color-input-border);
  color: var(--color-input-text);
}

input:not([type="checkbox"], [type="radio"]):focus,
textarea:focus,
.ui.input input:focus,
.ui.form input:not([type="checkbox"], [type="radio"]):focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.search > .prompt:focus {
  background: var(--color-input-background);
  border-color: var(--color-primary);
  color: var(--color-input-text);
}

.ui.form input:not([type="checkbox"], [type="radio"])[readonly],
.ui.form textarea[readonly],
.ui.form select[readonly],
.ui.form .ui.selection.dropdown[readonly] {
  background: var(--color-secondary-bg);
}

.ui.input {
  color: var(--color-input-text);
}

.ui.form textarea,
.ui.form input[type="checkbox"] {
  vertical-align: top;
}

.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;
}

.ui.form .field > .selection.dropdown {
  min-width: 14em; /* matches the default min width */
  width: 100%;
}

.ui.form .field > .selection.dropdown > .dropdown.icon {
  float: right;
}

.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.form .field .ui.input,
.ui.form .fields .field .ui.input {
  width: 100%;
}

.ui.form .inline.fields .field .ui.input,
.ui.form .inline.field .ui.input {
  width: auto;
  vertical-align: middle;
}

.ui.form .fields .field .ui.input input,
.ui.form .field .ui.input input {
  width: auto;
}

.ui.form .error.message,
.ui.form .error.message:empty {
  display: none;
}

.ui.form .message:first-child {
  margin-top: 0;
}

.ui.form .ui.action.input:not([class*="left action"]) input:focus {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ui.form .ui[class*="left action"].input input {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.ui.form.error .error.message:not(:empty) {
  display: block;
}

.ui.form .fields.error .error.message:not(:empty),
.ui.form .field.error .error.message:not(:empty) {
  display: block;
}

.ui.form .fields.error .field textarea,
.ui.form .fields.error .field select,
.ui.form .fields.error .field input,
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error input {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.ui.form .field.error textarea:focus,
.ui.form .field.error select:focus,
.ui.form .field.error input:focus {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.ui.form .field.error select {
  appearance: menulist-button;
}

.ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown {
  border-color: var(--color-error-border);
}

.ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover {
  border-color: var(--color-error-border);
}

.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover {
  background-color: var(--color-error-bg-hover);
}

.ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item {
  background-color: var(--color-error-bg-active) !important;
}

.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;
}

.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: var(--color-red);
}

.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%;
}

.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;
  color: var(--color-text);
  font-size: 0.92857143em;
  font-weight: var(--font-weight-medium);
  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;
}

.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;
}

@media only screen and (max-width: 767.98px) {
  .ui.form .fields {
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .ui.form .fields > .fields,
  .ui.form .fields > .field {
    width: 100%;
    margin: 0 0 1em;
  }
}

.ui.form .inline.fields {
  margin: 0 0 1em;
  align-items: center;
}

.ui.form .inline.fields .field {
  margin: 0;
  padding: 0 1em 0 0;
}

.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: var(--font-weight-medium);
  color: var(--color-text);
  text-transform: none;
}

.ui.form .inline.fields > label {
  margin: 0.035714em 1em 0 0;
}

.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.form .inline.fields .field > :first-child,
.ui.form .inline.field > :first-child {
  margin: 0 0.85714286em 0 0;
}

.ui.form .inline.fields .field > :only-child,
.ui.form .inline.field > :only-child {
  margin: 0;
}

.ui.form,
.ui.form .field .dropdown,
.ui.form .field .dropdown .menu > .item {
  font-size: 1rem;
}

/* previously from web_src/css/form.css */

.ui .form .autofill-dummy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -10000;
}

.ui .form .sub.field {
  margin-left: 25px;
}

.ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover {
  border-color: var(--color-error-border) !important;
}

.ui.form .fields.error .dropdown .menu,
.ui.form .field.error .dropdown .menu {
  border-color: var(--color-error-border) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important;
  border-color: var(--color-primary-light-4) !important;
}

.ui.form .field.muted {
  opacity: var(--opacity-disabled);
}

.form .help {
  color: var(--color-secondary-dark-5);
  margin-top: 0.25em;
  padding-bottom: 0.6em;
  display: inline-block;
  text-wrap: balance;
}

.form .help code {
  color: var(--color-text-light-1);
}

.form .help pre.command-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0.25em 0 0.25em 1em;
}

.ui.form.left-right-form .inline.field > label {
  text-align: right;
  width: 250px;
  margin-right: 10px;
}

.ui.form.left-right-form .inline.field > .help {
  display: block;
  margin-left: calc(250px + 15px);
}

.ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
.ui.form.left-right-form .inline.field .ui.dropdown,
.ui.form.left-right-form .inline.field textarea {
  width: 50%;
}

.ui.form.left-right-form .inline.field .ui.dropdown input.search {
  width: 100%;
}

.ui.form.left-right-form .inline.field .inline-right {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5em;
}

@media (max-width: 767.98px) {
  .ui.form.left-right-form .inline.field > label {
    width: 100%;
    margin: 0;
    text-align: left;
  }
  .ui.form.left-right-form .inline.field > .help {
    margin: 0;
  }
  .ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
  .ui.form.left-right-form .inline.field .ui.dropdown,
  .ui.form.left-right-form .inline.field textarea {
    width: 100%;
  }
}

/* These are the remnants of the fomantic dropdown module */

.ui.dropdown {
  cursor: pointer;
  position: relative;
  display: inline-block;
  outline: none;
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ui.dropdown .menu {
  cursor: auto;
  position: absolute;
  display: none;
  outline: none;
  top: 100%;
  min-width: max-content;
  margin: 0;
  padding: 0;
  background: var(--color-menu);
  font-size: 1em;
  text-align: left;
  box-shadow: 0 6px 18px var(--color-shadow);
  border: 1px solid var(--color-secondary);
  border-radius: 0.28571429rem;
  z-index: 11;
  left: 0;
}

.ui.dropdown .menu > * {
  white-space: nowrap;
}

.ui.dropdown > input:not(.search):first-child,
.ui.dropdown > select {
  display: none !important;
}

.ui.dropdown > .dropdown.icon {
  line-height: 1;
  height: 1em;
  width: auto;
  backface-visibility: hidden;
  text-align: center;
}

.ui.dropdown:not(.labeled) > .dropdown.icon {
  position: relative;
  width: auto;
  font-size: 0.85714286em;
  margin: 0 0 0 1em;
}

.ui.dropdown > .text {
  display: inline-block;
}

.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: var(--line-height-default);
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.78571429rem 1.14285714rem !important;
  text-transform: none;
  font-weight: var(--font-weight-normal);
  box-shadow: none;
  -webkit-touch-callout: none;
}

.ui.dropdown .menu > .item:first-child {
  border-top-width: 0;
}

.ui.dropdown .menu > .header {
  margin: 1rem 0 0.75rem;
  padding: 0 1.14285714rem;
  font-weight: var(--font-weight-medium);
  text-transform: none;
}

.ui.dropdown .menu > .header:not(.ui) {
  color: var(--color-text);
  font-size: 0.95em;
}

.ui.dropdown .menu > .divider {
  border-top: 1px solid var(--color-secondary);
  height: 0;
  margin: 4px 0;
}

.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;
}

.ui.dropdown > .text > .description,
.ui.dropdown .menu > .item > .description {
  float: right;
  margin: 0 0 0 1em;
  color: var(--color-text-light-2);
}

.ui.dropdown .menu > .message {
  padding: 0.78571429rem 1.14285714rem;
  font-weight: var(--font-weight-normal);
}

.ui.dropdown .menu > .message:not(.ui) {
  color: var(--color-text-light-2);
}

/* 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;
}

.ui.button.dropdown .menu {
  min-width: 100%;
}

select.ui.dropdown {
  height: 38px;
  padding: 0.5em;
  border: 1px solid var(--color-input-border);
  visibility: visible;
}

.ui.selection.dropdown {
  cursor: pointer;
  overflow-wrap: break-word;
  line-height: 1em;
  white-space: normal;
  outline: 0;
  transform: rotateZ(0deg);
  min-width: 14em;
  min-height: 2.71428571em;
  background: var(--color-input-background);
  display: inline-block;
  padding: 0.78571429em 3.2em 0.78571429em 1em;
  color: var(--color-input-text);
  box-shadow: none;
  border: 1px solid var(--color-input-border);
  border-radius: 0.28571429rem;
}

.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;
}

.ui.selection.dropdown .menu {
  overflow-x: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  border-top-width: 0 !important;
  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 6px 18px var(--color-shadow);
}

.ui.selection.dropdown .menu::after,
.ui.selection.dropdown .menu::before {
  display: none;
}

.ui.selection.dropdown .menu > .message {
  padding: 0.78571429rem 1.14285714rem;
}

@media only screen and (max-width: 767.98px) {
  .ui.selection.dropdown .menu {
    max-height: 8.01428571rem;
  }
}

@media only screen and (min-width: 768px) {
  .ui.selection.dropdown .menu {
    max-height: 10.68571429rem;
  }
}

@media only screen and (min-width: 992px) {
  .ui.selection.dropdown .menu {
    max-height: 16.02857143rem;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.selection.dropdown .menu {
    max-height: 21.37142857rem;
  }
}

.ui.selection.dropdown .menu > .item {
  border-top: 1px solid var(--color-secondary);
  padding: 0.78571429rem 1.14285714rem !important;
  white-space: normal;
  overflow-wrap: normal;
}

.ui.selection.dropdown .menu .item:first-of-type {
  border-radius: 0;
}

.ui.selection.dropdown .menu > .hidden.addition.item {
  display: none;
}

.ui.selection.dropdown:hover {
  box-shadow: none;
}

.ui.selection.active.dropdown {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px var(--color-shadow);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ui.selection.active.dropdown .menu {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px var(--color-shadow);
}

.ui.selection.dropdown:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.ui.selection.dropdown:focus .menu {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px var(--color-shadow);
}

.ui.selection.visible.dropdown > .text:not(.default) {
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
}

.ui.selection.active.dropdown:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px var(--color-shadow);
}

.ui.selection.active.dropdown:hover .menu {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px var(--color-shadow);
}

.ui.active.selection.dropdown > .dropdown.icon,
.ui.visible.selection.dropdown > .dropdown.icon {
  z-index: 3;
}

.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;
}

.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: transparent;
  padding: inherit;
  position: absolute;
  z-index: 2;
}

.ui.search.dropdown > .text {
  cursor: text;
  position: relative;
  left: 1px;
  z-index: auto;
}

.ui.search.selection.dropdown > input.search {
  line-height: 1.21428571em;
  padding: 0.67857143em 3.2em 0.67857143em 1em;
}

.ui.search.selection.dropdown > span.sizer {
  line-height: 1.21428571em;
  padding: 0.67857143em 3.2em 0.67857143em 1em;
  display: none;
  white-space: pre;
}

.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;
}

.ui.active.search.dropdown input.search:focus + .text i.icon {
  opacity: var(--opacity-disabled);
}

.ui.active.search.dropdown input.search:focus + .text {
  color: var(--color-placeholder-text) !important;
}

.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;
  }
}

.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;
}

.ui.ui.multiple.dropdown {
  padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
}

.ui.multiple.dropdown .menu {
  cursor: auto;
}

.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 var(--color-secondary) inset;
}

/* 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.search.dropdown,
.ui.multiple.search.dropdown > input.search {
  cursor: 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;
}

.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.dropdown .menu .active.item {
  background: var(--color-active);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  box-shadow: none;
  z-index: 12;
  border-radius: 0;
}

.ui.dropdown .menu > .item:hover {
  background: var(--color-hover);
  color: var(--color-text);
  z-index: 13;
}

.ui.dropdown .menu > .item:active {
  color: var(--color-text);
  background: var(--color-active);
}

.ui.dropdown:not(.button) > .default.text,
.ui.default.dropdown:not(.button) > .text {
  color: var(--color-placeholder-text);
}

.ui.dropdown:not(.button) > input:focus ~ .default.text,
.ui.default.dropdown:not(.button) > input:focus ~ .text {
  color: var(--color-placeholder-text);
}

.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 var(--color-secondary);
}

.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 var(--color-text-light-2);
  border-radius: 500rem;
}

.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;
}

.ui.dropdown.selected,
.ui.dropdown .menu .selected.item {
  color: var(--color-text);
  background: var(--color-hover);
}

.ui.dropdown > .filtered.text {
  visibility: hidden;
}

.ui.dropdown .filtered.item {
  display: none !important;
}

.ui.disabled.dropdown,
.ui.dropdown .menu > .disabled.item {
  cursor: default;
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

.ui.dropdown > .left.menu {
  left: auto !important;
  right: 0 !important;
}

.ui.upward.dropdown > .menu {
  top: auto;
  bottom: 100%;
  box-shadow: 0 6px 18px var(--color-shadow);
  border-radius: 0.28571429rem 0.28571429rem 0 0;
}

.ui.dropdown .upward.menu {
  top: auto !important;
  bottom: 0 !important;
}

.ui.upward.selection.dropdown .menu {
  border-top-width: 1px !important;
  border-bottom-width: 0 !important;
  box-shadow: 0 6px 18px var(--color-shadow);
}

.ui.upward.selection.dropdown:hover {
  box-shadow: 0 0 2px 0 var(--color-shadow);
}

.ui.active.upward.selection.dropdown {
  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
}

.ui.upward.selection.dropdown.visible {
  box-shadow: 0 0 3px 0 var(--color-shadow);
  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
}

.ui.upward.active.selection.dropdown:hover {
  box-shadow: 0 0 3px 0 var(--color-shadow);
}

.ui.upward.active.selection.dropdown:hover .menu {
  box-shadow: 0 6px 18px var(--color-shadow);
}

.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;
  margin: 0 !important;
  min-width: 100% !important;
  width: auto !important;
  border-top: 1px solid var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}

.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;
}

@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;
  }
}

.ui.fluid.dropdown {
  display: block;
  width: 100% !important;
  min-width: 0;
}

.ui.fluid.dropdown > .dropdown.icon {
  float: right;
}

.ui.floating.dropdown .menu {
  left: 0;
  right: auto;
  box-shadow: 0 6px 18px var(--color-shadow) !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;
}

.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 var(--color-secondary);
  background: var(--color-menu);
  z-index: 2;
  top: -0.25em;
  left: 50%;
  margin: 0 0 0 -0.25em;
}

.ui.top.right.pointing.dropdown > .menu {
  inset: 100% 0 auto 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);
}

.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;
}

/* This rule must come AFTER .ui.selection.dropdown because both have
   specificity (0,3,0) and source order determines the winner.
   In the original codebase this was in base.css which loaded after fomantic. */

.ui.dropdown:not(.button) {
  line-height: var(--line-height-default);
}

/* Icons / Flags / Labels / Image */

.ui.dropdown > .text > img,
.ui.dropdown > .text > .image,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img {
  margin-left: 0;
  float: none;
  margin-right: 0.78571429rem;
}

.ui.dropdown .menu > .item > svg {
  margin-right: 0.78rem;
}

/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */

.ui.dropdown > .text > .img {
  margin-left: 0;
  float: none;
  margin-right: 0.78571429rem;
}

.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.25rem;
  margin-bottom: -0.25rem;
  max-height: 2em;
}

.ui.dropdown .menu .item {
  border-radius: 0;
}

.ui.dropdown .menu .item:first-of-type {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.ui.dropdown .menu .item:last-of-type {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */

.ui.ui.dropdown > .icon.icon {
  position: initial;
  padding: 0;
  margin: 0;
  height: auto;
}

.ui.ui.dropdown > .icon.icon:hover {
  opacity: 1;
}

.ui.ui.button.dropdown > .icon.icon,
.ui.ui.selection.dropdown > .icon.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.ui.ui.dropdown > .dropdown.icon {
  right: 0.5em;
}

.ui.ui.dropdown > .remove.icon {
  right: 2em;
}

.ui.dropdown.mini.button,
.ui.dropdown.tiny.button {
  padding-right: 20px;
}

.ui.dropdown.button {
  padding-right: 22px;
}

.ui.multiple.selection.dropdown {
  flex-wrap: wrap;
}

.ui.ui.dropdown.selection {
  min-width: 14em;
}

.ui.dropdown .ui.label .svg {
  vertical-align: middle;
}

.ui.dropdown > .ui.button {
  margin: 0;
}

/* popover box shadow for menu dropdown */

.ui.menu .dropdown.item .menu {
  box-shadow: 0 6px 18px var(--color-shadow);
}

.ui.dropdown .menu.context-user-switch .scrolling.menu {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--color-secondary);
  max-width: 80vw;
}

.scrolling.menu .item.selected {
  font-weight: var(--font-weight-semibold) !important;
}

/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */

.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
  display: flex !important;
  align-items: center;
  gap: var(--gap-block);
  min-width: 0;
}

.ui.dropdown .menu.flex-items-menu > .item img,
.ui.dropdown .menu.flex-items-menu > .item svg {
  margin: 0;
}

.ui.dropdown.ellipsis-text-items {
  /* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */
  padding-top: 0;
  padding-bottom: 0;
}

.ui.dropdown.ellipsis-text-items > .text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 2.71;
}

.ui.dropdown.ellipsis-text-items .menu > .item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.global-shortcut-wrapper {
  position: relative;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-light-2);
  background-color: var(--color-box-body);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-kbd);
}

.global-shortcut-wrapper > kbd {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* styles are based on node_modules/tippy.js/dist/tippy.css */

/* class to hide tippy target elements on page load */

.tippy-target {
  display: none !important;
}

/* show target element once it's been moved by tippy.js */

.tippy-content .tippy-target {
  display: unset !important;
}

[data-tippy-root] {
  max-width: calc(100vw - 32px);
}

.tippy-box {
  position: relative;
  background-color: var(--color-menu);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  font-size: 1rem;
}

.tippy-content {
  position: relative;
  z-index: 1;
}

.tippy-box[data-theme="default"] {
  box-shadow: 0 6px 18px var(--color-shadow);
}

/* bare theme, no styling at all, except box-shadow */

.tippy-box[data-theme="bare"] {
  border: none;
  box-shadow: 0 6px 18px var(--color-shadow);
}

.tippy-box[data-theme="bare"] .tippy-content {
  padding: 0;
  background: transparent;
}

/* tooltip theme for text tooltips */

.tippy-box[data-theme="tooltip"] {
  background-color: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  border: none;
}

.tippy-box[data-theme="tooltip"] .tippy-content {
  padding: 0.5rem 1rem;
}

.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
  fill: var(--color-tooltip-bg);
}

/* menu theme for .ui.menu */

.tippy-box[data-theme="menu"] {
  background-color: var(--color-menu);
  color: var(--color-text);
  box-shadow: 0 6px 18px var(--color-shadow);
}

.tippy-box[data-theme="menu"] .tippy-content {
  padding: 4px 0;
}

.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
  fill: var(--color-menu);
}

.tippy-box[data-theme="menu"] .item {
  display: flex;
  align-items: center;
  padding: 9px 18px;
  color: inherit;
  background: inherit;
  text-decoration: none;
  gap: 10px;
  width: 100%;
}

.tippy-box[data-theme="menu"] .item:hover {
  background: var(--color-hover);
}

.tippy-box[data-theme="menu"] .item:focus {
  background: var(--color-hover);
}

.tippy-box[data-theme="menu"] .item.active {
  background: var(--color-active);
}

/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */

.tippy-box[data-theme="box-with-header"] {
  box-shadow: 0 6px 18px var(--color-shadow);
}

.tippy-box[data-theme="box-with-header"] .tippy-content {
  background: var(--color-box-body);
  border-radius: var(--border-radius);
  padding: 0;
}

.tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner {
  fill: var(--color-box-body);
}

.tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner {
  fill: var(--color-box-header);
}

.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
  bottom: 0;
}

.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
  top: 16px;
  transform: rotate(180deg);
}

.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
  top: 0;
}

.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
  bottom: 16px;
}

.tippy-box[data-placement^="left"] > .tippy-svg-arrow {
  right: 0;
}

.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
  transform: rotate(90deg);
  top: calc(50% - 3px);
  left: 11px;
}

.tippy-box[data-placement^="right"] > .tippy-svg-arrow {
  left: 0;
}

.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
  transform: rotate(-90deg);
  top: calc(50% - 3px);
  right: 11px;
}

.tippy-svg-arrow {
  width: 16px;
  height: 16px;
  text-align: initial;
}

.tippy-svg-arrow,
.tippy-svg-arrow > svg {
  position: absolute;
}

.tippy-svg-arrow-outer {
  fill: var(--color-secondary);
}

.tippy-svg-arrow-inner {
  fill: var(--color-menu);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  overflow-wrap: anywhere;
}

.breadcrumb .breadcrumb-divider {
  color: var(--color-text-light-2);
}

/* These are the remnants of the fomantic comment module */

/* TODO: remove all of these rules */

.ui.comments {
  margin: 1.5em 0;
}

.ui.comments:first-child {
  margin-top: 0;
}

.ui.comments:last-child {
  margin-bottom: 0;
}

.ui.comments .comment {
  display: flex;
  position: relative;
  background: none;
  margin: 3px 0 0;
  padding: 0.5em 0 0;
  border: none;
  border-top: none;
}

.edit-content-zone .comment {
  flex-direction: column;
}

.ui.comments .comment:first-child {
  margin-top: 0;
  padding-top: 0;
}

.ui.comments .comment > .comments {
  margin: 0 0 0.5em 0.5em;
  padding: 1em 0 1em 1em;
}

.ui.comments .comment > .comments::before {
  position: absolute;
  top: 0;
  left: 0;
}

.ui.comments .comment > .comments .comment {
  border: none;
  border-top: none;
  background: none;
}

.ui.comments .comment > .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ui.comments .comment .metadata {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.875em;
}

.ui.comments .comment .metadata > * {
  display: inline-block;
  margin: 0 0.5em 0 0;
}

.ui.comments .comment .metadata > :last-child {
  margin-right: 0;
}

.ui.comments .comment .text {
  margin: 0.25em 0 0.5em;
  font-size: 1em;
  overflow-wrap: break-word;
  line-height: 1.3;
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-secondary);
  padding: 0 10px;
}

/* When notification message is present after navbar, hide border to avoid double border */

#navbar:has(+ .ui.message) {
  border-bottom: none;
}

#navbar .navbar-left,
#navbar .navbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 49px; /* +1px border-bottom */
}

.navbar-left > .item,
.navbar-right > .item,
.navbar-mobile-right > .item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--color-nav-text);
  position: relative;
  text-decoration: none;
  min-height: 36px;
  min-width: 36px;
  padding: 3px 13px;
  border-radius: 4px;
}

#navbar .item.active {
  background: var(--color-active);
}

#navbar a.item:hover,
#navbar button.item:hover {
  background: var(--color-nav-hover-bg);
}

#navbar .item.ui.dropdown {
  padding-right: 5px;
}

@media (max-width: 767.98px) {
  #navbar {
    align-items: stretch;
  }
  /* hide all items */
  #navbar .navbar-left > .item,
  #navbar .navbar-right > .item {
    display: none;
  }
  #navbar #navbar-logo {
    display: flex;
  }
  /* show the first navbar item (logo and its mobile right items) */
  #navbar .navbar-left {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  #navbar .navbar-mobile-right {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
    width: auto;
  }
  #navbar .navbar-mobile-right > .item {
    display: flex;
    width: auto;
  }
  /* show items if the navbar is open */
  #navbar.navbar-menu-open {
    padding-bottom: 8px;
  }
  #navbar.navbar-menu-open,
  #navbar.navbar-menu-open .navbar-right {
    flex-direction: column;
  }
  #navbar.navbar-menu-open .navbar-left {
    flex-wrap: wrap;
  }
  #navbar.navbar-menu-open .navbar-left > .item,
  #navbar.navbar-menu-open .navbar-right > .item {
    display: flex;
    width: 100%;
  }
  #navbar.navbar-menu-open .navbar-left #navbar-logo {
    justify-content: flex-start;
    width: auto;
  }
  #navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
    justify-content: flex-end;
    min-height: 49px;
  }
  #navbar #mobile-stopwatch-icon,
  #navbar #mobile-notifications-icon {
    margin-right: 6px;
  }
}

#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot,
#navbar .item.active .navbar-admin-badge {
  border-color: var(--color-nav-hover-bg);
}

#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot,
#navbar .item .navbar-admin-badge {
  color: var(--color-nav-bg);
  padding: 0 3.75px;
  font-size: 12px;
  line-height: 12px;
  font-weight: var(--font-weight-bold);
  background: var(--color-primary);
  border: 2px solid var(--color-nav-bg);
  position: absolute;
  left: calc(100% - 9px);
  bottom: calc(100% - 9px);
  min-width: 17px;
  height: 17px;
  border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* prevent menu button background from overlaying icon */
  user-select: none;
  white-space: nowrap;
  overflow: visible;
}

.navbar-avatar {
  position: relative;
  display: inline-flex;
}

#navbar .item .navbar-admin-badge {
  position: absolute;
  bottom: calc(100% - 29px);
  left: calc(100% - 18px);
  padding: 1.5px;
}

.secondary-nav {
  background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
}

.issue-navbar {
  display: flex;
  justify-content: space-between;
}

.toastify {
  color: var(--color-white);
  position: fixed;
  opacity: 0;
  transition: all .2s ease;
  z-index: var(--z-index-toast);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px var(--color-shadow);
  display: flex;
  max-width: 50vw;
  min-width: 300px;
  padding: 4px;
}

.toastify.on {
  opacity: 1;
}

.toast-body {
  flex: 1;
  padding: 5px 0;
  overflow-wrap: anywhere;
}

.toast-close {
  border-radius: var(--border-radius);
  width: 30px;
  height: 30px;
  justify-content: center;
}

.toast-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
}

.toast-duplicate-number::before {
  content: "(";
}

.toast-duplicate-number {
  display: inline-block;
  margin-right: 5px;
  user-select: none;
}

.toast-duplicate-number::after {
  content: ")";
}

.toast-close:hover {
  background: var(--color-hover);
}

.toast-close:active {
  background: var(--color-active);
}

.toastify-right {
  right: 15px;
}

.toastify-left {
  left: 15px;
}

.toastify-top {
  top: -150px;
}

.toastify-bottom {
  bottom: -150px;
}

.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

@media (max-width: 360px) {
  .toastify-right, .toastify-left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}

/* some material icons have "fill=none" (e.g.: ".txt -> document"), so the CSS styles shouldn't overwrite it,
 and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */

.svg:not(.git-entry-icon) {
  display: inline-block;
  vertical-align: text-top;
  fill: currentcolor;
}

.middle .svg {
  vertical-align: middle;
}

/* some browsers like Chrome have a bug: when a SVG is in a "display: none" container and referenced
 somewhere else by `<use href="#id">`, it won't be rendered correctly. e.g.: ".kts -> kotlin" */

.svg-icon-container {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
   here are cherry-picked for our use cases, feel free to add more. after
   https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
   supported in browsers, use `attr(width px)` instead for a generic
   solution. */

.svg[height="12"] { min-height: 12px; }

.svg[height="13"] { min-height: 13px; }

.svg[height="14"] { min-height: 14px; }

.svg[height="15"] { min-height: 15px; }

.svg[height="16"] { min-height: 16px; }

.svg[height="18"] { min-height: 18px; }

.svg[height="20"] { min-height: 20px; }

.svg[height="22"] { min-height: 22px; }

.svg[height="24"] { min-height: 24px; }

.svg[height="36"] { min-height: 36px; }

.svg[height="48"] { min-height: 48px; }

.svg[height="56"] { min-height: 56px; }

.svg[width="12"] { min-width: 12px; }

.svg[width="13"] { min-width: 13px; }

.svg[width="14"] { min-width: 14px; }

.svg[width="15"] { min-width: 15px; }

.svg[width="16"] { min-width: 16px; }

.svg[width="18"] { min-width: 18px; }

.svg[width="20"] { min-width: 20px; }

.svg[width="22"] { min-width: 22px; }

.svg[width="24"] { min-width: 24px; }

.svg[width="36"] { min-width: 36px; }

.svg[width="48"] { min-width: 48px; }

.svg[width="56"] { min-width: 56px; }

/* container for full-page content with sidebar on left */

.flex-container {
  display: flex !important;
  gap: var(--page-spacing);
  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 */
}

@media (max-width: 767.98px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container-nav,
  .flex-container-sidebar {
    order: -1;
    width: auto;
  }
}

.code-editor-options {
  flex-wrap: wrap;
}

.editor-loading {
  padding: 1rem;
  text-align: center;
}

.editor-loading.is-loading {
  width: 100%;
  min-height: 200px;
  height: 90vh;
}

.edit.githook .code-editor-container {
  border: 1px solid var(--color-secondary);
}

/* editor layout */

.code-editor-container .cm-editor {
  color: var(--color-text);
  background-color: var(--color-code-bg);
  font-family: var(--fonts-monospace);
  font-size: 12px;
  max-height: 90vh;
}

.code-editor-container .cm-editor,
.code-editor-container .cm-editor .cm-scroller {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.code-editor-container .cm-content,
.code-editor-container .cm-gutter {
  min-height: 200px;
}

.code-editor-container .cm-scroller {
  overflow: auto;
  line-height: var(--line-height-code);
}

.code-editor-container .cm-content * {
  caret-color: inherit;
}

.code-editor-container .cm-content {
  padding: 0;
}

.code-editor-container .cm-cursor,
.code-editor-container .cm-dropCursor {
  border-left-color: var(--color-caret);
}

.code-editor-container .cm-editor.cm-focused {
  outline: none;
}

.code-editor-container .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
.code-editor-container .cm-selectionBackground {
  background-color: var(--color-primary-alpha-30);
}

.code-editor-container .cm-panels {
  background-color: var(--color-body);
  color: var(--color-text);
  border-color: var(--color-secondary);
  font-family: var(--fonts-regular);
  font-size: 13px;
}

.code-editor-container .cm-panel.cm-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  position: relative;
  padding-right: 24px;
}

.code-editor-container .cm-panel.cm-search br {
  display: none;
}

.code-editor-container .cm-panel.cm-search::after {
  content: "";
  flex-basis: 100%;
  order: 1;
}

.code-editor-container .cm-panel.cm-search .cm-textfield {
  width: 200px;
}

.code-editor-container .cm-panel.cm-search br + input.cm-textfield,
.code-editor-container .cm-panel.cm-search br + input.cm-textfield ~ * {
  order: 2;
}

.code-editor-container .cm-panel.cm-search input,
.code-editor-container .cm-panel.cm-search button,
.code-editor-container .cm-panel.cm-search label {
  margin: 0;
}

.code-editor-container .cm-panel.cm-search .cm-button + label,
.code-editor-container .cm-panel.cm-search label + label {
  margin-left: 4px;
}

.code-editor-container .cm-panel.cm-search label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.code-editor-container .cm-panel.cm-search input[type="checkbox"] {
  cursor: pointer;
}

.code-editor-container .cm-editor .cm-panel button[name="close"] {
  font-size: 0;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask-image: var(--octicon-x);
  mask-size: cover;
  -webkit-mask-image: var(--octicon-x);
  -webkit-mask-size: cover;
  border-radius: var(--border-radius);
}

.code-editor-container .cm-panel.cm-search button[name="close"] {
  position: absolute;
  right: 8px;
  top: 8px;
}

.code-editor-container .cm-editor .cm-panel button[name="close"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.code-editor-container .cm-activeLine,
.code-editor-container .cm-activeLineGutter {
  background-color: var(--color-editor-line-highlight);
}

.code-editor-container .cm-gutters {
  background-color: var(--color-code-bg);
  color: var(--color-secondary-dark-6);
  border-right: none;
}

.code-editor-container .cm-gutters .cm-lineNumbers .cm-gutterElement {
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.code-editor-container .cm-foldGutter .cm-gutterElement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  overflow: hidden;
}

.code-editor-container .cm-foldGutter .cm-gutterElement svg {
  color: var(--color-text-light-2);
  cursor: pointer;
  visibility: hidden;
}

.code-editor-container .cm-gutters:hover .cm-foldGutter .cm-gutterElement svg {
  visibility: visible;
}

.code-editor-container .cm-foldGutter .cm-gutterElement:hover svg {
  color: var(--color-text);
}

.code-editor-container .cm-gutters .cm-lineNumbers .cm-activeLineGutter {
  color: var(--color-text-light);
}

.code-editor-container .cm-editor .cm-line ::selection,
.code-editor-container .cm-editor .cm-line::selection {
  color: currentcolor;
  background-color: var(--color-editor-selection);
}

.code-editor-container .cm-foldPlaceholder {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--color-text-light-2);
  cursor: pointer;
  vertical-align: middle;
  padding: 0 1px;
  margin: 0 2px;
}

.code-editor-container .cm-foldPlaceholder:hover {
  color: var(--color-text);
}

.code-editor-container .cm-searchMatch {
  background-color: var(--color-highlight-bg);
  outline: 1px solid var(--color-highlight-fg);
}

.code-editor-container .cm-searchMatch-selected {
  background-color: var(--color-primary-alpha-30);
}

.code-editor-container .cm-selectionMatch {
  background-color: var(--color-highlight-bg);
}

.code-editor-container .cm-tooltip {
  background-color: var(--color-body);
  color: var(--color-text);
  border-color: var(--color-secondary);
}

.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > li {
  display: flex;
  align-items: center;
  padding: 4px;
}

.code-editor-container .cm-completionIcon {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-right: 4px;
  color: var(--color-text-light);
  opacity: 1;
}

.code-editor-container .cm-tooltip-autocomplete ul li[aria-selected] {
  background-color: var(--color-primary-alpha-30);
  color: var(--color-text);
}

.code-editor-container .cm-completionMatchedText {
  text-decoration: none;
  color: var(--color-primary-dark-1);
  font-weight: var(--font-weight-semibold);
}

.code-editor-container .cm-placeholder {
  color: var(--color-placeholder-text);
}

.code-editor-container .cm-button {
  background-image: none;
  background-color: var(--color-button);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  height: 28px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
}

.code-editor-container .cm-button:hover {
  background-color: var(--color-hover);
}

.code-editor-container .cm-textfield {
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
  height: 28px;
  padding: 0 6px;
}

.code-editor-container .cm-textfield:focus {
  border-color: var(--color-primary);
}

.code-editor-container .cm-specialChar {
  color: var(--color-syntax-invalid);
}

.code-editor-container .cm-trailingSpace {
  background-color: var(--color-error-bg);
}

.code-editor-container .cm-activeLine .cm-trailingSpace {
  background-color: transparent;
}

.code-editor-container.cm-mod-held .cm-url {
  text-decoration: underline dotted var(--color-syntax-link);
  cursor: pointer;
}

.code-editor-container .cm-editor.cm-focused .cm-matchingBracket {
  background-color: var(--color-syntax-matching-bracket-bg);
}

.code-editor-container .cm-editor.cm-focused .cm-nonmatchingBracket {
  background-color: var(--color-syntax-nonmatching-bracket-bg);
}

.code-editor-container .cm-panels-top {
  border-bottom-color: var(--color-secondary);
}

.code-editor-container .cm-panels-bottom {
  border-top-color: var(--color-secondary);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.code-editor-container .cm-snippetField {
  background-color: var(--color-primary-alpha-10);
}

.code-editor-container .cm-snippetFieldPosition {
  border-left-color: var(--color-text-light-3);
}

.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {
  border-bottom-color: var(--color-secondary);
}

.code-editor-container .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
  background-color: var(--color-secondary);
}

/* command palette */

.code-editor-container {
  position: relative;
  min-height: 90vh;
}

.cm-command-palette {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 301;
  width: 400px;
  max-width: min(calc(100% - 16px), 90vw);
  background-color: var(--color-body);
  border: 1px solid var(--color-secondary);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: 0 4px 12px var(--color-shadow);
  font-family: var(--fonts-regular);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.cm-command-palette-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px !important;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  font-size: 13px;
  outline: none;
}

.cm-command-palette-input:focus {
  border-color: var(--color-primary);
}

.cm-command-palette-list {
  position: relative;
  max-height: calc(8 * 24px);
  overflow-y: auto;
}

.cm-command-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 6px;
  border-radius: 2px;
  cursor: pointer;
}

.cm-command-palette-item[aria-selected="true"] {
  background-color: var(--color-primary-alpha-30);
}

.cm-command-palette-empty {
  color: var(--color-text-light);
  text-align: center;
}

.cm-command-palette-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-command-palette-label mark {
  background: none;
  color: var(--color-primary-dark-1);
  font-weight: var(--font-weight-semibold);
}

.cm-command-palette-keys {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

.code-editor-container .cm-gutter-lint {
  width: 14px;
}

.code-editor-container .cm-gutter-lint .cm-gutterElement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.code-editor-container .cm-lint-marker-error {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-red);
}

.code-editor-container .cm-lint-marker-warning {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-yellow);
}

.code-editor-container .cm-lintRange-error {
  background-image: none;
  text-decoration: wavy underline var(--color-red);
  text-underline-offset: 3px;
}

.code-editor-container .cm-lintRange-warning {
  background-image: none;
  text-decoration: wavy underline var(--color-yellow);
  text-underline-offset: 3px;
}

.code-editor-container .cm-lintPoint-error::after {
  border-bottom-color: var(--color-red);
}

.code-editor-container .cm-lintPoint-warning::after {
  border-bottom-color: var(--color-yellow);
}

.code-editor-container .cm-tooltip-lint {
  background-color: var(--color-body);
  color: var(--color-text);
  border-color: var(--color-secondary);
}

.code-editor-container .cm-panel.cm-panel-lint button[name="close"] {
  top: 4px;
  right: 8px;
}

.code-editor-container .cm-panel.cm-panel-lint ul {
  max-height: 120px;
  outline: none;
}

.code-editor-container .cm-panel.cm-panel-lint [aria-selected] {
  background-color: var(--color-primary-alpha-30) !important;
}

.code-editor-container .cm-diagnostic.cm-diagnostic-error {
  border-left-color: var(--color-red);
}

.code-editor-container .cm-diagnostic.cm-diagnostic-warning {
  border-left-color: var(--color-yellow);
}

/* syntax highlighting classes from @lezer/highlight classHighlighter */

.code-editor-container .tok-keyword,
.code-editor-container .tok-atom { color: var(--color-syntax-keyword); }

.code-editor-container .tok-bool { color: var(--color-syntax-bool); }

.code-editor-container .tok-variableName { color: var(--color-syntax-variable); }

.code-editor-container .tok-variableName2 { color: var(--color-syntax-keyword); }

.code-editor-container .tok-propertyName { color: var(--color-syntax-property); }

.code-editor-container .tok-typeName,
.code-editor-container .tok-className { color: var(--color-syntax-type); }

.code-editor-container .tok-namespace { color: var(--color-syntax-namespace); }

.code-editor-container .tok-macroName { color: var(--color-syntax-name); }

.code-editor-container .tok-labelName { color: var(--color-syntax-name); }

.code-editor-container .tok-number { color: var(--color-syntax-number); }

.code-editor-container .tok-string { color: var(--color-syntax-string); }

.code-editor-container .tok-string2 { color: var(--color-syntax-regexp); }

.code-editor-container .tok-operator { color: var(--color-syntax-operator); }

.code-editor-container .tok-punctuation { color: var(--color-syntax-punctuation); }

.code-editor-container .tok-comment { color: var(--color-syntax-comment); }

.code-editor-container .tok-meta { color: var(--color-syntax-preproc); }

.code-editor-container .tok-invalid { color: var(--color-syntax-invalid); }

.code-editor-container .tok-link { color: var(--color-syntax-link); }

.code-editor-container .tok-heading { color: var(--color-syntax-heading); }

.code-editor-container .tok-emphasis { color: var(--color-syntax-emph); font-style: italic; }

.code-editor-container .tok-strong { font-weight: var(--font-weight-bold); }

.code-editor-container .tok-inserted { color: var(--color-syntax-string); }

.code-editor-container .tok-deleted { color: var(--color-syntax-invalid); }

/* language-specific overrides */

.code-editor-container[data-language="json"] .tok-propertyName,
.code-editor-container[data-language="json5"] .tok-propertyName,
.code-editor-container[data-language="yaml"] .tok-propertyName { color: var(--color-syntax-tag); }

.code-editor-container[data-language="css"] .tok-propertyName { color: var(--color-syntax-name); }

.code-editor-container[data-language="html"] .tok-propertyName,
.code-editor-container[data-language="xml"] .tok-propertyName { color: var(--color-syntax-attribute); }

/* context menu — uses tippy "menu" theme for base styling */

.cm-context-menu {
  min-width: 200px;
  font-size: 13px;
  user-select: none;
}

.cm-context-menu .item {
  height: 24px !important;
  padding: 0 12px !important;
  cursor: pointer;
}

.cm-context-menu .item.disabled {
  color: var(--color-text-light-3);
  cursor: default;
  pointer-events: none;
}

.cm-context-menu-keys {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding-left: 30px;
}

.cm-context-menu-separator {
  border-top: 1px solid var(--color-secondary);
  margin: 4px 0;
}

/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */

/* structural */

.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }

.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }

.chroma .hl { display: block; width: 100%; }

.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em; }

.chroma .ln { margin-right: 0.4em; padding: 0 0.4em; }

/* tokens */

.chroma .bp { color: var(--color-syntax-name-pseudo); }

/* NameBuiltinPseudo */

.chroma .c { color: var(--color-syntax-comment); }

/* Comment */

.chroma .c1 { color: var(--color-syntax-comment); }

/* CommentSingle */

.chroma .ch { color: var(--color-syntax-comment); }

/* CommentHashbang */

.chroma .cm { color: var(--color-syntax-comment); }

/* CommentMultiline */

.chroma .cp { color: var(--color-syntax-preproc); }

/* CommentPreproc */

.chroma .cpf { color: var(--color-syntax-preproc-file); }

/* CommentPreprocFile */

.chroma .cs { color: var(--color-syntax-comment-special); }

/* CommentSpecial */

.chroma .dl { color: var(--color-syntax-string); }

/* LiteralStringDelimiter */

.chroma .gd { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-deleted-bg); }

/* GenericDeleted */

.chroma .ge { color: var(--color-syntax-emph); }

/* GenericEmph */

.chroma .gh { color: var(--color-syntax-heading); }

/* GenericHeading */

.chroma .gi { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-inserted-bg); }

/* GenericInserted */

.chroma .gl { text-decoration: underline; }

/* GenericUnderline */

.chroma .go { color: var(--color-syntax-output); }

/* GenericOutput */

.chroma .gp { color: var(--color-syntax-prompt); }

/* GenericPrompt */

.chroma .gr { color: var(--color-syntax-invalid); }

/* GenericError */

.chroma .gs { color: var(--color-syntax-strong); font-weight: var(--font-weight-semibold); }

/* GenericStrong */

.chroma .gt { color: var(--color-syntax-traceback); }

/* GenericTraceback */

.chroma .gu { color: var(--color-syntax-subheading); }

/* GenericSubheading */

.chroma .il { color: var(--color-syntax-number); }

/* LiteralNumberIntegerLong */

.chroma .k { color: var(--color-syntax-keyword); }

/* Keyword */

.chroma .kc { color: var(--color-syntax-bool); }

/* KeywordConstant */

.chroma .kd { color: var(--color-syntax-keyword); }

/* KeywordDeclaration */

.chroma .kn { color: var(--color-syntax-control); }

/* KeywordNamespace */

.chroma .kp { color: var(--color-syntax-keyword); }

/* KeywordPseudo */

.chroma .kr { color: var(--color-syntax-keyword); }

/* KeywordReserved */

.chroma .kt { color: var(--color-syntax-type); }

/* KeywordType */

.chroma .m { color: var(--color-syntax-number); }

/* LiteralNumber */

.chroma .mb { color: var(--color-syntax-number); }

/* LiteralNumberBin */

.chroma .mf { color: var(--color-syntax-number); }

/* LiteralNumberFloat */

.chroma .mh { color: var(--color-syntax-number); }

/* LiteralNumberHex */

.chroma .mi { color: var(--color-syntax-number); }

/* LiteralNumberInteger */

.chroma .mo { color: var(--color-syntax-number); }

/* LiteralNumberOct */

.chroma .n { color: var(--color-syntax-text); }

/* Name */

.chroma .na { color: var(--color-syntax-attribute); }

/* NameAttribute */

.chroma .nb { color: var(--color-syntax-name); }

/* NameBuiltin */

.chroma .nc { color: var(--color-syntax-type); }

/* NameClass */

.chroma .nd { color: var(--color-syntax-decorator); }

/* NameDecorator */

.chroma .ne { color: var(--color-syntax-keyword); }

/* NameException */

.chroma .nf { color: var(--color-syntax-name); }

/* NameFunction */

.chroma .ni { color: var(--color-syntax-entity); }

/* NameEntity */

.chroma .nl { color: var(--color-syntax-keyword); }

/* NameLabel */

.chroma .nn { color: var(--color-syntax-namespace); }

/* NameNamespace */

.chroma .no { color: var(--color-syntax-variable); }

/* NameConstant */

.chroma .nt { color: var(--color-syntax-tag); }

/* NameTag */

.chroma .nv { color: var(--color-syntax-variable); }

/* NameVariable */

.chroma .nx { color: var(--color-syntax-text-alt); }

/* NameOther */

.chroma .o { color: var(--color-syntax-operator); }

/* Operator */

.chroma .ow { color: var(--color-syntax-operator); }

/* OperatorWord */

.chroma .p { color: var(--color-syntax-punctuation); }

/* Punctuation */

.chroma .s { color: var(--color-syntax-string); }

/* LiteralString */

.chroma .s1 { color: var(--color-syntax-string); }

/* LiteralStringSingle */

.chroma .s2 { color: var(--color-syntax-string); }

/* LiteralStringDouble */

.chroma .sa { color: var(--color-syntax-string-special); }

/* LiteralStringAffix */

.chroma .sb { color: var(--color-syntax-string); }

/* LiteralStringBacktick */

.chroma .sc { color: var(--color-syntax-string-special); }

/* LiteralStringChar */

.chroma .sd { color: var(--color-syntax-string); }

/* LiteralStringDoc */

.chroma .se { color: var(--color-syntax-escape); }

/* LiteralStringEscape */

.chroma .sh { color: var(--color-syntax-string); }

/* LiteralStringHeredoc */

.chroma .si { color: var(--color-syntax-string-special); }

/* LiteralStringInterpol */

.chroma .sr { color: var(--color-syntax-regexp); }

/* LiteralStringRegex */

.chroma .ss { color: var(--color-syntax-escape); }

/* LiteralStringSymbol */

.chroma .sx { color: var(--color-syntax-string); }

/* LiteralStringOther */

.chroma .vc { color: var(--color-syntax-variable); }

/* NameVariableClass */

.chroma .vg { color: var(--color-syntax-variable); }

/* NameVariableGlobal */

.chroma .vi { color: var(--color-syntax-variable); }

/* NameVariableInstance */

.chroma .w { color: var(--color-syntax-whitespace); }

/* TextWhitespace */

.chroma .err {/* not styled because Chroma uses it on too many things like JSX */}

/* Error */

/*
Show the escaped and hide the real char:
  <span class="broken-code-point" data-escaped="␡"><span class="char">{real-char}</span></span>
Only show the real-char:
  <span class="broken-code-point">{real-char}</span>
*/

.broken-code-point:not([data-escaped]) {
  border-radius: 4px;
  padding: 0 2px;
  border: 1px var(--color-yellow) solid;
}

.broken-code-point[data-escaped] {
  position: relative;
}

.broken-code-point[data-escaped]::before {
  visibility: visible;
  content: attr(data-escaped);
  border-radius: 2px;
  padding: 0 1px;
  border: 1px var(--color-yellow) solid;
}

.broken-code-point[data-escaped] .char {
  /* keep the original character selectable/copyable while showing the escaped label via ::before */
  position: absolute;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/*
Show the escaped and hide the real-char:
  <span class="unicode-escaped">
    <span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
  </span>
Hide the escaped and show the real-char:
  <span>
    <span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
  </span>
*/

.unicode-escaped .escaped-code-point[data-escaped]::before {
  visibility: visible;
  content: attr(data-escaped);
  color: var(--color-red);
}

.unicode-escaped .escaped-code-point .char {
  display: none;
}

.unicode-escaped .ambiguous-code-point {
  border: 1px var(--color-yellow) solid;
}

.flex-list {
  list-style: none;
}

.flex-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 0;
}

.flex-item .flex-item-leading {
  display: flex;
  align-items: flex-start;
}

.flex-item .flex-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  flex-grow: 1;
  flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
  min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
}

.flex-item-header {
  display: flex;
  gap: .25rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item a:not(.label, .button):hover {
  color: var(--color-primary) !important;
}

.flex-item .flex-item-trailing {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-grow: 0;
  flex-wrap: wrap;
  justify-content: end;
}

.flex-item .flex-item-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  /* labels are under effect of this gap here because they are display:contents. Ideally we should make wrapping
     of labels work without display: contents and set this to a static value again. */
  gap: var(--gap-inline);
  max-width: 100%;
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
  min-width: 0;
}

.flex-item .flex-item-title a {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.flex-item .flex-item-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  color: var(--color-text-light-2);
  overflow-wrap: anywhere;
}

.flex-item .flex-item-body a {
  color: inherit;
  overflow-wrap: anywhere;
}

.flex-list > .flex-item + .flex-item {
  border-top: 1px solid var(--color-secondary);
}

/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `tw-hidden` siblings).
Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */

.flex-list.flex-space-fitted > .flex-item:first-child,
.ui.segment > .flex-list > .flex-item:first-child {
  padding-top: 0;
}

.flex-list.flex-space-fitted > .flex-item:last-child,
.ui.segment > .flex-list > .flex-item:last-child {
  padding-bottom: 0;
}

/* If there is a divider besides the flex-list, some padding/margin are not needs */

.divider + .flex-list > .flex-item:first-child {
  padding-top: 0;
}

.flex-list + .divider {
  margin-top: 0;
}

.milestone-list {
  list-style: none;
}

.milestone-card {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.milestone-card + .milestone-card {
  border-top: 1px solid var(--color-secondary);
}

.milestone-card .render-content {
  padding-top: 10px;
}

.milestone-header progress {
  width: 200px;
  height: 16px;
}

.milestone-header {
  display: flex;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
  justify-content: space-between;
}

.milestone-toolbar {
  padding-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.milestone-toolbar .group {
  color: var(--color-text-light-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.milestone-toolbar .group > a {
  font-size: 15px;
  color: var(--color-text-light-2);
}

.milestone-toolbar .group > a:hover {
  color: var(--color-text);
}

@media (max-width: 767.98px) {
  .milestone-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.repository .head .ui.header .text,
.organization .head .ui.header .text {
  vertical-align: middle;
  font-size: 1.6rem;
  margin-left: 15px;
}

.repository .ui.tabs.container,
.organization .ui.tabs.container {
  margin-top: 14px;
  margin-bottom: 0;
}

.repository .head .ui.header .org-visibility .label,
.organization .head .ui.header .org-visibility .label {
  margin-left: 5px;
  margin-top: 5px;
}

details.toggleable-item {
  user-select: none !important;
  padding: 0 !important;
}

details.toggleable-item .menu {
  margin: 4px 0 10px !important;
}

details.toggleable-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.92857143em 1.14285714em;
}

details.toggleable-item summary::marker, /* Chrome, Edge, Firefox */
details.toggleable-item summary::-webkit-details-marker /* Safari */ {
  display: none;
}

details.toggleable-item summary::after {
  transition: transform 0.25s ease;
  content: "";
  width: 14px;
  height: 14px;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-image: var(--octicon-chevron-right);
  -webkit-mask-image: var(--octicon-chevron-right);
  background: currentcolor;
  border: 1px solid var(--color-body); /* workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 */
}

details.toggleable-item[open] summary::after {
  transform: rotate(90deg);
}

.ui .field .dropzone {
  border: 2px dashed var(--color-secondary);
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: var(--border-radius-medium);
  min-height: 0;
}

.ui .field .dropzone .dz-message {
  margin: 10px 0;
}

.dropzone .dz-button {
  color: var(--color-text-light) !important;
}

.dropzone:hover .dz-button {
  color: var(--color-text) !important;
}

.dropzone .dz-error-message {
  top: 145px !important;
}

.dropzone .dz-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}

.dropzone .dz-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.dropzone .dz-preview.dz-image-preview,
.dropzone-attachments .thumbnails img {
  background: transparent !important;
}

.dropzone-attachments .thumbnails img {
  height: 120px !important;
  width: 120px !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
}

.dropzone .dz-preview:hover .dz-image img {
  filter: opacity(0.5) !important;
}

.ui .field .dropzone .dz-preview .dz-progress {
  /* by default the progress-bar is vertically centered (top: 50%), it's better to put it after the "details (size, filename)",
  then the layout from top to bottom is: size, filename, progress */
  top: 7em;
}

#git-graph-container {
  overflow-x: auto;
  width: 100%;
  min-height: 350px;
}

#git-graph-container h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#git-graph-container #flow-select-refs-dropdown {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 250px;
  border-right: none;
}

#git-graph-container #flow-select-refs-dropdown .ui.label {
  max-width: 180px;
  display: inline-flex !important;
  align-items: center;
}

#git-graph-container li {
  list-style-type: none;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

#git-graph-container li > span {
  flex-shrink: 0;
}

#git-graph-container li > span.message {
  flex-shrink: 1;
}

#git-graph-container li .ui.label.commit-id-short {
  padding: 2px 4px;
  height: 20px;
}

#git-graph-container li .time {
  color: var(--color-text-light-3);
  font-size: 80%;
}

#git-graph-container #rel-container {
  max-width: 30%;
  overflow-x: auto;
  float: left;
}

#git-graph-container #rev-container {
  width: 100%;
}

#git-graph-container #rev-list {
  margin: 0;
  padding: 0;
  width: 100%;
}

#git-graph-container li .commit-refs .ui.button,
#git-graph-container li .commit-refs .ui.label.tag-label {
  padding: 2px 4px;
  margin-right: 0.25em;
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-default);
  min-height: 0;
}

#git-graph-container.monochrome #rel-container .flow-group {
  stroke: var(--color-secondary-dark-5);
  fill: var(--color-secondary-dark-5);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
  stroke: #499a37;
  fill: #499a37;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 {
  stroke: #ce4751;
  fill: #ce4751;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 {
  stroke: #8f9121;
  fill: #8f9121;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 {
  stroke: #ac32a6;
  fill: #ac32a6;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 {
  stroke: #7445e9;
  fill: #7445e9;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 {
  stroke: #c67d28;
  fill: #c67d28;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 {
  stroke: #4db392;
  fill: #4db392;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
  stroke: #aa4d30;
  fill: #aa4d30;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 {
  stroke: #2a6f84;
  fill: #2a6f84;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 {
  stroke: #c45327;
  fill: #c45327;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 {
  stroke: #3d965c;
  fill: #3d965c;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 {
  stroke: #792a93;
  fill: #792a93;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 {
  stroke: #439d73;
  fill: #439d73;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 {
  stroke: #103aad;
  fill: #103aad;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 {
  stroke: #982e85;
  fill: #982e85;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 {
  stroke: #7db233;
  fill: #7db233;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-1 {
  stroke: #5ac144;
  fill: #5ac144;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-2 {
  stroke: #ed5a8b;
  fill: #ed5a8b;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-3 {
  stroke: #ced049;
  fill: #ced048;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-4 {
  stroke: #db61d7;
  fill: #db62d6;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-5 {
  stroke: #8455f9;
  fill: #8455f9;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-6 {
  stroke: #e6a151;
  fill: #e6a151;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-7 {
  stroke: #44daaa;
  fill: #44daaa;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-8 {
  stroke: #dd7a5c;
  fill: #dd7a5c;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-9 {
  stroke: #38859c;
  fill: #38859c;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-10 {
  stroke: #d95520;
  fill: #d95520;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-11 {
  stroke: #42ae68;
  fill: #42ae68;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-12 {
  stroke: #9126b5;
  fill: #9126b5;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-13 {
  stroke: #4ab080;
  fill: #4ab080;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-14 {
  stroke: #284fb8;
  fill: #284fb8;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-15 {
  stroke: #971c80;
  fill: #971c80;
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-0 {
  stroke: #87ca28;
  fill: #87ca28;
}

#user-heatmap {
  width: 100%;
  font-size: 9px;
  position: relative;
}

.activity-heatmap-container {
  container-type: inline-size;
}

@container (width > 0) {
  #user-heatmap {
    /* Set element to fixed height so that it does not resize after load. The calculation is complex
       because the element does not scale with a fixed aspect ratio. */
    height: calc((100cqw / 5) - (100cqw / 25) + 20px);
  }
}

/* Fallback height adjustment above for browsers that don't support container queries */

@supports not (container-type: inline-size) {
  /* Before the Vue component is mounted, show a loading indicator with dummy size */
  /* The ratio is guesswork for legacy browsers, new browsers use the "@container" approach above  */
  #user-heatmap.is-loading {
    aspect-ratio: 5.4823972051; /* the size is about 816 x 148.84 */
  }
  .user.profile #user-heatmap.is-loading {
    aspect-ratio: 5.6290608387; /* the size is about 953 x 169.3 */
  }
}

#user-heatmap text {
  fill: currentcolor !important;
}

/* root legend */

#user-heatmap .vch__container > .vch__legend {
  display: flex;
  font-size: 11px;
  justify-content: space-between;
}

/* for the "Less" and "More" legend */

#user-heatmap .vch__legend .vch__legend {
  display: flex;
  align-items: center;
  justify-content: right;
}

#user-heatmap .vch__legend .vch__legend div:first-child,
#user-heatmap .vch__legend .vch__legend div:last-child {
  display: inline-block;
  padding: 0 5px;
}

#user-heatmap .vch__day__square:hover {
  outline: 1.5px solid var(--color-text);
}

.image-diff-tabs {
  min-height: 60px;

}

.image-diff-tabs.is-loading .tab {
  display: none;
}

.image-diff-container {
  text-align: center;
  padding: 0.5em 0 1em;
}

.image-diff-container img {
  border: 1px solid var(--color-primary-light-7);
  background: var(--background-view-image);
}

.image-diff-container .before-container {
  border: 1px solid var(--color-red);
  display: block;
}

.image-diff-container .after-container {
  border: 1px solid var(--color-green);
  display: block;
}

.image-diff-container .diff-side-by-side .side {
  display: inline-block;
  line-height: 0;
  vertical-align: top;
  margin: 0 1em;
}

.image-diff-container .diff-side-by-side .side .side-header {
  font-weight: var(--font-weight-semibold);
}

.image-diff-container .diff-swipe {
  margin: auto;
  padding: 1em 0;
}

.image-diff-container .diff-swipe .swipe-frame {
  position: absolute;
}

.image-diff-container .diff-swipe .swipe-frame .before-container {
  position: absolute;
}

.image-diff-container .diff-swipe .swipe-frame .swipe-container {
  position: absolute;
  right: 0;
  display: block;
  border-left: 2px solid var(--color-secondary-dark-8);
  height: 100%;
  overflow: hidden;
}

.image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container {
  position: absolute;
  right: 0;
}

.image-diff-container .diff-swipe .swipe-frame .swipe-bar {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
  background: var(--color-secondary-dark-8);
  left: -5px;
  height: 12px;
  width: 12px;
  position: absolute;
  transform: rotate(45deg);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle {
  top: -12px;
}

.image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle {
  bottom: -14px;
}

.image-diff-container .diff-overlay {
  margin: 0 auto;
}

.image-diff-container .diff-overlay .overlay-frame {
  margin: 1em auto 0;
  position: relative;
}

.image-diff-container .diff-overlay .before-container,
.image-diff-container .diff-overlay .after-container {
  position: absolute;
}

.image-diff-container .diff-overlay input {
  max-width: 300px;
}

#project-board {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: auto;
  margin: 0 0.5em;
  min-height: max(calc(100vh - 400px), 300px);
  max-height: calc(100vh - 120px);
}

.project-header {
  padding: 0.5em 0;
  flex-wrap: wrap;
}

.project-header h2 {
  white-space: nowrap;
  margin: 0;
}

.project-column {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-project-column-bg);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  margin: 0 0.5rem;
  padding: 0.5rem;
  width: 320px;
  overflow: visible;
}

.project-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.ui.label.project-column-issue-count {
  color: inherit;
}

.project-column > .ui.cards {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  overflow: clip auto;
  gap: .25rem;
  margin: 0;
  padding: 0;
}

.project-column > .divider {
  margin: 5px 0;
  border-color: currentcolor;
  opacity: .5;
}

.project-column:first-child {
  margin-left: auto !important;
}

.project-column:last-child {
  margin-right: auto !important;
}

.card-attachment-images {
  display: inline-block;
  white-space: nowrap;
  overflow: auto;
  cursor: default;
  scroll-snap-type: x mandatory;
  text-align: center;
}

.card-attachment-images img {
  display: inline-block;
  max-height: 50px;
  border-radius: var(--border-radius);
  text-align: left;
  scroll-snap-align: center;
  margin-right: 2px;
  aspect-ratio: 1;
  object-fit: contain;
}

.card-attachment-images img:only-child {
  max-height: 90px;
  margin: auto;
}

.card-ghost {
  border-color: var(--color-secondary-dark-4) !important;
  border-style: dashed !important;
  background: none !important;
}

.card-ghost * {
  opacity: 0;
}

.fullscreen.projects-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */

.fullscreen.projects-view .project-description {
  display: none;
}

.fullscreen.projects-view #project-board {
  flex: 1;
  max-height: unset;
  padding-bottom: 0.5em;
}

text-expander .suggestions,
.tribute-container {
  position: absolute;
  max-height: min(300px, 95vh);
  max-width: min(500px, 95vw);
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  background: var(--color-menu);
  box-shadow: 0 6px 18px var(--color-shadow);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-secondary);
  z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */
}

text-expander {
  display: block;
  position: relative;
}

text-expander .suggestions {
  padding: 0;
  margin-top: 24px;
  list-style: none;
}

text-expander .suggestions li,
.tribute-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 6px;
  font-weight: var(--font-weight-medium);
}

text-expander .suggestions li,
.tribute-container li {
  padding: 3px 6px;
}

text-expander .suggestions li + li,
.tribute-container li + li {
  border-top: 1px solid var(--color-secondary);
}

text-expander .suggestions li:first-child {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

text-expander .suggestions li:last-child {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

text-expander .suggestions li:only-child {
  border-radius: var(--border-radius);
}

text-expander .suggestions .fullname,
.tribute-container li .fullname {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light-1);
  overflow: hidden;
  text-overflow: ellipsis;
}

text-expander .suggestions li:hover,
text-expander .suggestions li:hover *,
text-expander .suggestions li[aria-selected="true"],
text-expander .suggestions li[aria-selected="true"] *,
.tribute-container li.highlight,
.tribute-container li.highlight * {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

text-expander .suggestions img,
.tribute-item img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  aspect-ratio: 1;
}

.tribute-container {
  display: block;
}

.tribute-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tribute-container li.no-match {
  cursor: default;
}

/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.avatar-file-with-cropper + .cropper-panel .cropper-wrapper {
  max-width: 400px;
  max-height: 400px;
}

/* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */

.console {
  background: var(--color-console-bg);
  color: var(--color-console-fg);
  font-family: var(--fonts-monospace);
  border-radius: var(--border-radius);
  overflow-wrap: anywhere;
}

.console img { max-width: 100%; }

.console a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
}

.console a:hover { color: var(--color-primary); }

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

/* ansi_up colors used in actions */

.ansi-black-fg { color: var(--color-ansi-black); }

.ansi-red-fg { color: var(--color-ansi-red); }

.ansi-green-fg { color: var(--color-ansi-green); }

.ansi-yellow-fg { color: var(--color-ansi-yellow); }

.ansi-blue-fg { color: var(--color-ansi-blue); }

.ansi-magenta-fg { color: var(--color-ansi-magenta); }

.ansi-cyan-fg { color: var(--color-ansi-cyan); }

.ansi-white-fg { color: var(--color-ansi-white); }

.ansi-bright-black-fg { color: var(--color-ansi-bright-black); }

.ansi-bright-red-fg { color: var(--color-ansi-bright-red); }

.ansi-bright-green-fg { color: var(--color-ansi-bright-green); }

.ansi-bright-yellow-fg { color: var(--color-ansi-bright-yellow); }

.ansi-bright-blue-fg { color: var(--color-ansi-bright-blue); }

.ansi-bright-magenta-fg { color: var(--color-ansi-bright-magenta); }

.ansi-bright-cyan-fg { color: var(--color-ansi-bright-cyan); }

.ansi-bright-white-fg { color: var(--color-ansi-bright-white); }

.ansi-black-bg { background-color: var(--color-ansi-black); }

.ansi-red-bg { background-color: var(--color-ansi-red); }

.ansi-green-bg { background-color: var(--color-ansi-green); }

.ansi-yellow-bg { background-color: var(--color-ansi-yellow); }

.ansi-blue-bg { background-color: var(--color-ansi-blue); }

.ansi-magenta-bg { background-color: var(--color-ansi-magenta); }

.ansi-cyan-bg { background-color: var(--color-ansi-cyan); }

.ansi-white-bg { background-color: var(--color-ansi-white); }

.ansi-bright-black-bg { background-color: var(--color-ansi-bright-black); }

.ansi-bright-red-bg { background-color: var(--color-ansi-bright-red); }

.ansi-bright-green-bg { background-color: var(--color-ansi-bright-green); }

.ansi-bright-yellow-bg { background-color: var(--color-ansi-bright-yellow); }

.ansi-bright-blue-bg { background-color: var(--color-ansi-bright-blue); }

.ansi-bright-magenta-bg { background-color: var(--color-ansi-bright-magenta); }

.ansi-bright-cyan-bg { background-color: var(--color-ansi-bright-cyan); }

.ansi-bright-white-bg { background-color: var(--color-ansi-bright-white); }

/* term colors used in console rendering */

.term-fg2 { color: var(--color-ansi-bright-black); }

/* faint (decreased intensity) - same as gray really */

.term-fg3 { font-style: italic; }

/* italic */

.term-fg4 { text-decoration: underline; }

/* underline */

.term-fg5 { animation: blink-animation 1s steps(3, start) infinite; }

/* blink */

.term-fg9 { text-decoration: line-through; }

/* crossed-out */

.term-fg30 { color: var(--color-ansi-black); }

/* black (but we can't use black, so a diff color) */

.term-fg31 { color: var(--color-ansi-red); }

/* red */

.term-fg32 { color: var(--color-ansi-green); }

/* green */

.term-fg33 { color: var(--color-ansi-yellow); }

/* yellow */

.term-fg34 { color: var(--color-ansi-blue); }

/* blue */

.term-fg35 { color: var(--color-ansi-magenta); }

/* magenta */

.term-fg36 { color: var(--color-ansi-cyan); }

/* cyan */

/* high intense colors */

.term-fgi1 { color: var(--color-ansi-bright-green); }

.term-fgi90 { color: var(--color-ansi-bright-black); }

/* grey */

.term-fgi91 { color: var(--color-ansi-bright-red); }

/* red */

.term-fgi92 { color: var(--color-ansi-bright-green); }

/* green */

.term-fgi93 { color: var(--color-ansi-bright-yellow); }

/* yellow */

.term-fgi94 { color: var(--color-ansi-bright-blue); }

/* blue */

.term-fgi95 { color: var(--color-ansi-bright-magenta); }

/* magenta */

.term-fgi96 { color: var(--color-ansi-bright-cyan); }

/* cyan */

/* background colors */

.term-bg40 { background: var(--color-ansi-bright-black); }

/* grey */

.term-bg41 { background: var(--color-ansi-red); }

/* red */

.term-bg42 { background: var(--color-ansi-green); }

/* green */

/* custom foreground/background combos for readability */

.term-fg31.term-bg40 { color: var(--color-ansi-bright-red); }

/* xterm colors */

.term-fgx16 { color: #000000; }

.term-fgx17 { color: #00005f; }

.term-fgx18 { color: #000087; }

.term-fgx19 { color: #0000af; }

.term-fgx20 { color: #0000d7; }

.term-fgx21 { color: #0000ff; }

.term-fgx22 { color: #005f00; }

.term-fgx23 { color: #005f5f; }

.term-fgx24 { color: #005f87; }

.term-fgx25 { color: #005faf; }

.term-fgx26 { color: #005fd7; }

.term-fgx27 { color: #005fff; }

.term-fgx28 { color: #008700; }

.term-fgx29 { color: #00875f; }

.term-fgx30 { color: #008787; }

.term-fgx31 { color: #0087af; }

.term-fgx32 { color: #0087d7; }

.term-fgx33 { color: #0087ff; }

.term-fgx34 { color: #00af00; }

.term-fgx35 { color: #00af5f; }

.term-fgx36 { color: #00af87; }

.term-fgx37 { color: #00afaf; }

.term-fgx38 { color: #00afd7; }

.term-fgx39 { color: #00afff; }

.term-fgx40 { color: #00d700; }

.term-fgx41 { color: #00d75f; }

.term-fgx42 { color: #00d787; }

.term-fgx43 { color: #00d7af; }

.term-fgx44 { color: #00d7d7; }

.term-fgx45 { color: #00d7ff; }

.term-fgx46 { color: #00ff00; }

.term-fgx47 { color: #00ff5f; }

.term-fgx48 { color: #00ff87; }

.term-fgx49 { color: #00ffaf; }

.term-fgx50 { color: #00ffd7; }

.term-fgx51 { color: #00ffff; }

.term-fgx52 { color: #5f0000; }

.term-fgx53 { color: #5f005f; }

.term-fgx54 { color: #5f0087; }

.term-fgx55 { color: #5f00af; }

.term-fgx56 { color: #5f00d7; }

.term-fgx57 { color: #5f00ff; }

.term-fgx58 { color: #5f5f00; }

.term-fgx59 { color: #5f5f5f; }

.term-fgx60 { color: #5f5f87; }

.term-fgx61 { color: #5f5faf; }

.term-fgx62 { color: #5f5fd7; }

.term-fgx63 { color: #5f5fff; }

.term-fgx64 { color: #5f8700; }

.term-fgx65 { color: #5f875f; }

.term-fgx66 { color: #5f8787; }

.term-fgx67 { color: #5f87af; }

.term-fgx68 { color: #5f87d7; }

.term-fgx69 { color: #5f87ff; }

.term-fgx70 { color: #5faf00; }

.term-fgx71 { color: #5faf5f; }

.term-fgx72 { color: #5faf87; }

.term-fgx73 { color: #5fafaf; }

.term-fgx74 { color: #5fafd7; }

.term-fgx75 { color: #5fafff; }

.term-fgx76 { color: #5fd700; }

.term-fgx77 { color: #5fd75f; }

.term-fgx78 { color: #5fd787; }

.term-fgx79 { color: #5fd7af; }

.term-fgx80 { color: #5fd7d7; }

.term-fgx81 { color: #5fd7ff; }

.term-fgx82 { color: #5fff00; }

.term-fgx83 { color: #5fff5f; }

.term-fgx84 { color: #5fff87; }

.term-fgx85 { color: #5fffaf; }

.term-fgx86 { color: #5fffd7; }

.term-fgx87 { color: #5fffff; }

.term-fgx88 { color: #870000; }

.term-fgx89 { color: #87005f; }

.term-fgx90 { color: #870087; }

.term-fgx91 { color: #8700af; }

.term-fgx92 { color: #8700d7; }

.term-fgx93 { color: #8700ff; }

.term-fgx94 { color: #875f00; }

.term-fgx95 { color: #875f5f; }

.term-fgx96 { color: #875f87; }

.term-fgx97 { color: #875faf; }

.term-fgx98 { color: #875fd7; }

.term-fgx99 { color: #875fff; }

.term-fgx100 { color: #878700; }

.term-fgx101 { color: #87875f; }

.term-fgx102 { color: #878787; }

.term-fgx103 { color: #8787af; }

.term-fgx104 { color: #8787d7; }

.term-fgx105 { color: #8787ff; }

.term-fgx106 { color: #87af00; }

.term-fgx107 { color: #87af5f; }

.term-fgx108 { color: #87af87; }

.term-fgx109 { color: #87afaf; }

.term-fgx110 { color: #87afd7; }

.term-fgx111 { color: #87afff; }

.term-fgx112 { color: #87d700; }

.term-fgx113 { color: #87d75f; }

.term-fgx114 { color: #87d787; }

.term-fgx115 { color: #87d7af; }

.term-fgx116 { color: #87d7d7; }

.term-fgx117 { color: #87d7ff; }

.term-fgx118 { color: #87ff00; }

.term-fgx119 { color: #87ff5f; }

.term-fgx120 { color: #87ff87; }

.term-fgx121 { color: #87ffaf; }

.term-fgx122 { color: #87ffd7; }

.term-fgx123 { color: #87ffff; }

.term-fgx124 { color: #af0000; }

.term-fgx125 { color: #af005f; }

.term-fgx126 { color: #af0087; }

.term-fgx127 { color: #af00af; }

.term-fgx128 { color: #af00d7; }

.term-fgx129 { color: #af00ff; }

.term-fgx130 { color: #af5f00; }

.term-fgx131 { color: #af5f5f; }

.term-fgx132 { color: #af5f87; }

.term-fgx133 { color: #af5faf; }

.term-fgx134 { color: #af5fd7; }

.term-fgx135 { color: #af5fff; }

.term-fgx136 { color: #af8700; }

.term-fgx137 { color: #af875f; }

.term-fgx138 { color: #af8787; }

.term-fgx139 { color: #af87af; }

.term-fgx140 { color: #af87d7; }

.term-fgx141 { color: #af87ff; }

.term-fgx142 { color: #afaf00; }

.term-fgx143 { color: #afaf5f; }

.term-fgx144 { color: #afaf87; }

.term-fgx145 { color: #afafaf; }

.term-fgx146 { color: #afafd7; }

.term-fgx147 { color: #afafff; }

.term-fgx148 { color: #afd700; }

.term-fgx149 { color: #afd75f; }

.term-fgx150 { color: #afd787; }

.term-fgx151 { color: #afd7af; }

.term-fgx152 { color: #afd7d7; }

.term-fgx153 { color: #afd7ff; }

.term-fgx154 { color: #afff00; }

.term-fgx155 { color: #afff5f; }

.term-fgx156 { color: #afff87; }

.term-fgx157 { color: #afffaf; }

.term-fgx158 { color: #afffd7; }

.term-fgx159 { color: #afffff; }

.term-fgx160 { color: #d70000; }

.term-fgx161 { color: #d7005f; }

.term-fgx162 { color: #d70087; }

.term-fgx163 { color: #d700af; }

.term-fgx164 { color: #d700d7; }

.term-fgx165 { color: #d700ff; }

.term-fgx166 { color: #d75f00; }

.term-fgx167 { color: #d75f5f; }

.term-fgx168 { color: #d75f87; }

.term-fgx169 { color: #d75faf; }

.term-fgx170 { color: #d75fd7; }

.term-fgx171 { color: #d75fff; }

.term-fgx172 { color: #d78700; }

.term-fgx173 { color: #d7875f; }

.term-fgx174 { color: #d78787; }

.term-fgx175 { color: #d787af; }

.term-fgx176 { color: #d787d7; }

.term-fgx177 { color: #d787ff; }

.term-fgx178 { color: #d7af00; }

.term-fgx179 { color: #d7af5f; }

.term-fgx180 { color: #d7af87; }

.term-fgx181 { color: #d7afaf; }

.term-fgx182 { color: #d7afd7; }

.term-fgx183 { color: #d7afff; }

.term-fgx184 { color: #d7d700; }

.term-fgx185 { color: #d7d75f; }

.term-fgx186 { color: #d7d787; }

.term-fgx187 { color: #d7d7af; }

.term-fgx188 { color: #d7d7d7; }

.term-fgx189 { color: #d7d7ff; }

.term-fgx190 { color: #d7ff00; }

.term-fgx191 { color: #d7ff5f; }

.term-fgx192 { color: #d7ff87; }

.term-fgx193 { color: #d7ffaf; }

.term-fgx194 { color: #d7ffd7; }

.term-fgx195 { color: #d7ffff; }

.term-fgx196 { color: #ff0000; }

.term-fgx197 { color: #ff005f; }

.term-fgx198 { color: #ff0087; }

.term-fgx199 { color: #ff00af; }

.term-fgx200 { color: #ff00d7; }

.term-fgx201 { color: #ff00ff; }

.term-fgx202 { color: #ff5f00; }

.term-fgx203 { color: #ff5f5f; }

.term-fgx204 { color: #ff5f87; }

.term-fgx205 { color: #ff5faf; }

.term-fgx206 { color: #ff5fd7; }

.term-fgx207 { color: #ff5fff; }

.term-fgx208 { color: #ff8700; }

.term-fgx209 { color: #ff875f; }

.term-fgx210 { color: #ff8787; }

.term-fgx211 { color: #ff87af; }

.term-fgx212 { color: #ff87d7; }

.term-fgx213 { color: #ff87ff; }

.term-fgx214 { color: #ffaf00; }

.term-fgx215 { color: #ffaf5f; }

.term-fgx216 { color: #ffaf87; }

.term-fgx217 { color: #ffafaf; }

.term-fgx218 { color: #ffafd7; }

.term-fgx219 { color: #ffafff; }

.term-fgx220 { color: #ffd700; }

.term-fgx221 { color: #ffd75f; }

.term-fgx222 { color: #ffd787; }

.term-fgx223 { color: #ffd7af; }

.term-fgx224 { color: #ffd7d7; }

.term-fgx225 { color: #ffd7ff; }

.term-fgx226 { color: #ffff00; }

.term-fgx227 { color: #ffff5f; }

.term-fgx228 { color: #ffff87; }

.term-fgx229 { color: #ffffaf; }

.term-fgx230 { color: #ffffd7; }

.term-fgx231 { color: #ffffff; }

.term-fgx232 { color: #080808; }

.term-fgx233 { color: #121212; }

.term-fgx234 { color: #1c1c1c; }

.term-fgx235 { color: #262626; }

.term-fgx236 { color: #303030; }

.term-fgx237 { color: #3a3a3a; }

.term-fgx238 { color: #444444; }

.term-fgx239 { color: #4e4e4e; }

.term-fgx240 { color: #585858; }

.term-fgx241 { color: #626262; }

.term-fgx242 { color: #6c6c6c; }

.term-fgx243 { color: #767676; }

.term-fgx244 { color: #808080; }

.term-fgx245 { color: #8a8a8a; }

.term-fgx246 { color: #949494; }

.term-fgx247 { color: #9e9e9e; }

.term-fgx248 { color: #a8a8a8; }

.term-fgx249 { color: #b2b2b2; }

.term-fgx250 { color: #bcbcbc; }

.term-fgx251 { color: #c6c6c6; }

.term-fgx252 { color: #d0d0d0; }

.term-fgx253 { color: #dadada; }

.term-fgx254 { color: #e4e4e4; }

.term-fgx255 { color: #eeeeee; }

.m-captcha-style {
  width: 100%;
  height: 5em;
  vertical-align: middle;
  display: inline-block;
}

@media (min-width: 768px) {
  .g-recaptcha-style,
  .h-captcha-style {
    margin: 0 auto !important;
    width: 304px;
    padding-left: 30px;
  }
  .g-recaptcha-style iframe,
  .h-captcha-style iframe {
    border-radius: var(--border-radius) !important;
    width: 302px !important;
    height: 76px !important;
  }
  .m-captcha-style {
    max-width: 450px;
  }
}

@media (max-height: 575px) {
  #rc-imageselect, /* google recaptcha */
  .g-recaptcha-style,
  .h-captcha-style {
    transform: scale(0.77);
    transform-origin: 0 0;
  }
}

.markup {
  overflow: hidden;
  font-size: 14px; /* 14px for comments, overridden to 16px for .file-view below. */
  line-height: 1.5 !important;
  overflow-wrap: break-word;
}

.markup > *:first-child {
  margin-top: 0 !important;
}

.markup > *:last-child {
  margin-bottom: 0 !important;
}

.markup a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markup .absent {
  color: var(--color-red);
}

.markup .anchor {
  float: left;
  padding-inline-end: 4px;
  margin-inline-start: -20px;
  color: inherit;
}

.markup .anchor .svg {
  vertical-align: middle;
}

.markup .anchor:focus {
  outline: none;
}

.markup h1 .anchor {
  margin-top: -2px; /* re-align to center */
}

.markup h1 .anchor .svg,
.markup h2 .anchor .svg,
.markup h3 .anchor .svg,
.markup h4 .anchor .svg,
.markup h5 .anchor .svg,
.markup h6 .anchor .svg {
  visibility: hidden;
}

.markup h1:hover .anchor .svg,
.markup h2:hover .anchor .svg,
.markup h3:hover .anchor .svg,
.markup h4:hover .anchor .svg,
.markup h5:hover .anchor .svg,
.markup h6:hover .anchor .svg {
  visibility: visible;
}

.markup h2 .anchor .svg,
.markup h3 .anchor .svg,
.markup h4 .anchor .svg {
  position: relative;
  top: -2px;
}

.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.markup h1 tt,
.markup h1 code,
.markup h2 tt,
.markup h2 code,
.markup h3 tt,
.markup h3 code,
.markup h4 tt,
.markup h4 code,
.markup h5 tt,
.markup h5 code,
.markup h6 tt,
.markup h6 code {
  font-size: inherit;
}

.markup h1 {
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-secondary);
}

.markup h2 {
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-secondary);
}

.markup h3 {
  font-size: 1.25em;
}

.markup h4 {
  font-size: 1em;
}

.markup h5 {
  font-size: 0.875em;
}

.markup h6 {
  font-size: 0.85em;
  color: var(--color-text-light-2);
}

.markup p,
.markup blockquote,
.markup details,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
  margin-top: 0;
  margin-bottom: 16px;
}

/* override p:last-child from base.css.
Fomantic assumes that <p>/<hX> elements only have margins between elements, but not for the first's top or last's bottom.
In markup content, we always use bottom margin for all elements */

.markup p:last-child {
  margin-bottom: 16px;
}

.markup hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: var(--color-secondary);
  border: 0;
}

.markup ul,
.markup ol {
  padding-inline-start: 2em;
}

.markup .task-list-item {
  list-style-type: none;
}

.markup .task-list-item > ul {
  margin-top: 4px;
}

.markup .task-list-item p + ul {
  margin-top: 16px;
}

.markup .task-list-item input[type="checkbox"] {
  margin-bottom: 0.25em;
  margin-inline: -1.4em 0.6em;
  vertical-align: middle;
  padding: 0;
}

.markup .task-list-item input[type="checkbox"] + p {
  margin-inline-start: -0.2em;
  display: inline;
}

.markup .task-list-item > p {
  margin-inline: 16px;
}

.markup .task-list-item + .task-list-item {
  margin-top: 4px;
}

.markup input[type="checkbox"] {
  margin-inline-end: .25em;
  margin-bottom: .25em;
  cursor: default;
  opacity: 1 !important; /* override fomantic on edit preview */
  pointer-events: auto !important; /* override fomantic on edit preview */
  vertical-align: middle !important; /* override fomantic on edit preview */
}

.markup ul ul,
.markup ul ol,
.markup ol ol,
.markup ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markup ol ol,
.markup ul ol {
  list-style-type: lower-roman;
}

.markup li > p {
  margin-top: 16px;
}

.markup li + li {
  margin-top: 0.25em;
}

.markup dl {
  padding: 0;
}

.markup dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: var(--font-weight-semibold);
}

.markup dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.markup blockquote {
  margin-inline-start: 0;
  padding: 0 15px;
  color: var(--color-text-light-2);
  border-left: 0.25em solid var(--color-secondary);
}

.markup blockquote > :first-child {
  margin-top: 0;
}

.markup blockquote > :last-child {
  margin-bottom: 0;
}

.markup table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.markup table th {
  font-weight: var(--font-weight-semibold);
}

.markup table th,
.markup table td {
  padding: 6px 13px !important;
  border: 1px solid var(--color-secondary) !important;
}

.markup table tr {
  border-top: 1px solid var(--color-secondary);
}

.markup table tr:nth-child(2n) {
  background-color: var(--color-markup-table-row);
}

.markup img,
.markup video {
  max-width: 100%;
  box-sizing: initial;
}

/* GitHub-style dark/light image switching.
   These fragments are kept in the rendered HTML as part of the `src` attribute.
   We decide which to show via `data-gitea-theme-dark` on `<html>`, which is
   mirrored from `--is-dark-theme` in JS (so it also works with auto/custom themes).
*/

html[data-gitea-theme-dark="true"] .markup a[href*="#gh-light-mode-only"],
html[data-gitea-theme-dark="true"] .markup img[src*="#gh-light-mode-only"],
html[data-gitea-theme-dark="false"] .markup a[href*="#gh-dark-mode-only"],
html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
  display: none;
}

.file-view.markup {
  padding: 1em 2em;
  font-size: 16px;
}

.file-view.markup:has(.file-not-rendered-prompt) {
  padding: 0; /* let the file-not-rendered-prompt layout itself */
}

/* this background ensures images can break <hr>. We can only do this on
   cases where the background is known and not transparent. */

.file-view.markup img,
.file-view.markup video,
.comment-body .markup img, /* regular comment */
.comment-body .markup video,
.comment-content .markup img, /* code comment */
.comment-content .markup video,
.wiki .markup img,
.wiki .markup video {
  background: var(--color-box-body);
}

.markup img[align="right"],
.markup video[align="right"] {
  padding-inline-start: 20px;
}

.markup img[align="left"],
.markup video[align="left"] {
  padding-inline-end: 28px;
}

.markup span.frame {
  display: block;
  overflow: hidden;
}

.markup span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-secondary);
}

.markup span.frame span img,
.markup span.frame span video {
  display: block;
  float: left;
}

.markup span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-text);
}

.markup code,
.markup tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: var(--color-markup-code-inline);
  border-radius: var(--border-radius);
}

.markup code br,
.markup tt br {
  display: none;
}

.markup del code {
  text-decoration: inherit;
}

.markup pre > code {
  font-size: 100%;
}

.markup .code-block,
.markup .code-block-container {
  position: relative;
}

.markup .code-block-container.code-overflow-wrap pre > code {
  white-space: pre-wrap;
}

.markup .code-block-container.code-overflow-scroll pre {
  overflow-x: auto;
}

.markup .code-block-container.code-overflow-scroll pre > code {
  white-space: pre;
  overflow-wrap: normal;
}

.markup .highlight {
  margin-bottom: 16px;
}

.markup .highlight pre,
.markup pre {
  padding: 16px;
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-markup-code-block);
  border-radius: var(--border-radius);
}

.markup .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markup pre code,
.markup pre tt {
  display: inline;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: 0;
}

.markup pre code::before,
.markup pre code::after,
.markup pre tt::before,
.markup pre tt::after {
  content: normal;
}

.markup kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: var(--color-text-light);
  vertical-align: middle;
  background-color: var(--color-markup-code-inline);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-kbd);
}

.markup .ui.list .list,
.markup ol.ui.list ol,
.markup ul.ui.list ul {
  padding-inline-start: 2em;
}

.markup details.frontmatter-content summary {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0.25em;
}

.markup details.frontmatter-content svg {
  vertical-align: middle;
  margin: 0 0.25em;
}

.external-render-iframe {
  display: block; /* removes the inline baseline gap below the iframe */
  width: 100%;
  height: max(300px, 80vh);
  border: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.markup-content-iframe {
  display: block;
  border: none;
  width: 100%;
  height: var(--height-loading); /* actual height is set in JS after loading */
  overflow: hidden;
  color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */
}

.markup-block-error {
  display: block !important; /* override fomantic .ui.form .error.message {display: none} */
  border: none !important;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  font-size: 85% !important;
  white-space: pre-wrap !important;
  padding: 0.5rem 1rem !important;
  text-align: left !important;
}

.markup-block-error + pre {
  border-top: none !important;
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.file-view.markup.orgmode li.unchecked::before {
  content: "[ ] ";
}

.file-view.markup.orgmode li.checked::before {
  content: "[x] ";
}

.file-view.markup.orgmode li.indeterminate::before {
  content: "[-] ";
}

/* This is only needed for <p> because they are literally acting as paragraphs,
 * and thus having an ::before on the same line would force the paragraph to
 * move to the next line. This can be avoided by an inline-block display that
 * avoids that property while still having the other properties of the block
 * display. */

.file-view.markup.orgmode li.unchecked > p,
.file-view.markup.orgmode li.checked > p,
.file-view.markup.orgmode li.indeterminate > p {
  display: inline-block;
}

/* auto-hide-control is a control element or a container for control elements,
   it floats over the code-block and only shows when the code-block is hovered. */

.markup .auto-hide-control {
  position: absolute;
  z-index: 1;
  visibility: hidden; /* prevent from click events even opacity=0 */
  opacity: 0;
  transition: var(--transition-hover-fade);
}

/* all rendered code-block elements are in their container,
the manually written code-block elements on "packages" pages don't have the container */

.markup .code-block-container:hover .auto-hide-control,
.markup .code-block:hover .auto-hide-control {
  visibility: visible;
  opacity: 1;
}

@media (hover: none) {
  .markup .auto-hide-control {
    visibility: visible;
    opacity: 1;
  }
}

/* can not use regular transparent button colors for hover and active states
   because we need opaque colors here as code can appear behind the button */

.markup .auto-hide-control.ui.button:hover,
.markup .auto-hide-control .ui.button:hover {
  background: var(--color-secondary) !important;
}

.markup .auto-hide-control.ui.button:active,
.markup .auto-hide-control .ui.button:active {
  background: var(--color-secondary-dark-1) !important;
}

.markup .ui.button.code-copy {
  top: 8px;
  right: 6px;
  margin: 0;
}

.markup .mermaid-block .view-controller {
  right: 6px;
  bottom: 5px;
}

.markup .code-preview-container {
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  margin: 0.25em 0;
}

.markup .code-preview-container .code-preview-header {
  color: var(--color-text-light-1);
  border-bottom: 1px solid var(--color-secondary);
  padding: 0.5em;
  font-size: 12px;
}

.markup .code-preview-container table {
  width: 100%;
  max-height: 240px; /* 12 lines at 20px per line */
  overflow-y: auto;
  margin: 0; /* override ".markup table {margin}" */
}

/* workaround to hide empty p before container - more details are in "html_codepreview.go" */

.markup p:empty:has(+ .code-preview-container) {
  display: none;
}

/* override the polluted styles from the content.css: ".markup table ..." */

.markup .code-preview-container table tr {
  border: 0 !important;
}

.markup .code-preview-container table th,
.markup .code-preview-container table td {
  border: 0 !important;
  padding: 0 0 0 5px !important;
}

.markup .code-preview-container table tr:nth-child(2n) {
  background: none !important;
}

.asciinema-player-container {
  width: 100%;
  height: auto;
}

/* Related: https://github.com/asciinema/asciinema-player/blob/develop/src/components/Terminal.js : <div class="ap-term" ...>
Old PR: Fix UI regression of asciinema player https://github.com/go-gitea/gitea/pull/26159 */

.ap-term {
  overflow: hidden !important;
}

:root :lang(ja) {
  --fonts-override: var(--fonts-default-override-ja);
}

:root :lang(zh-CN) {
  --fonts-override: var(--fonts-default-override-zh-cn);
}

:root :lang(zh-TW) {
  --fonts-override: var(--fonts-default-override-zh-tw);
}

:root :lang(zh-HK) {
  --fonts-override: var(--fonts-default-override-zh-hk);
}

:root :lang(ko) {
  --fonts-override: var(--fonts-default-override-ko);
}

[lang] {
  font-family: var(--fonts-regular);
}

:root {
  --fonts-default-override-ja: system-ui-ja, var(--fonts-proportional);
  --fonts-default-override-zh-cn: system-ui-zh-cn, var(--fonts-proportional);
  --fonts-default-override-zh-tw: system-ui-zh-tw, var(--fonts-proportional);
  --fonts-default-override-zh-hk: system-ui-zh-hk, var(--fonts-proportional);
  --fonts-default-override-ko: system-ui-ko, var(--fonts-proportional);
}

/* Special handling for Firefox on Windows/Linux */

@supports (-moz-appearance: none) {
  :root {
    --fonts-default-override-ja: var(--fonts-proportional), system-ui-ja;
    --fonts-default-override-zh-cn: var(--fonts-proportional), system-ui-zh-cn;
    --fonts-default-override-zh-tw: var(--fonts-proportional), system-ui-zh-tw;
    --fonts-default-override-zh-hk: var(--fonts-proportional), system-ui-zh-hk;
    --fonts-default-override-ko: var(--fonts-proportional), system-ui-ko;
  }
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
    local("HiraginoSans-W2"), local("Source Han Sans JP Light"),
    local("SourceHanSansJP-Light"), local("Source Han Sans J Light"),
    local("SourceHanSansJ-Light"), local("Noto Sans CJK JP Light"),
    local("NotoSansCJKJP-Light"), local("Source Han Sans Light"),
    local("SourceHanSans-Light"), local("Yu Gothic Regular"),
    local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
    local("MS PGothic");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
    local("HiraginoSans-W4"), local("Source Han Sans JP Regular"),
    local("SourceHanSansJP-Regular"), local("Source Han Sans J Regular"),
    local("SourceHanSansJ-Regular"), local("Noto Sans CJK JP Regular"),
    local("NotoSansCJKJP-Regular"), local("Source Han Sans Regular"),
    local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
    local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
    local("MS PGothic");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
    local("HiraginoSans-W5"), local("Source Han Sans JP Medium"),
    local("SourceHanSansJP-Medium"), local("Source Han Sans J Medium"),
    local("SourceHanSansJ-Medium"), local("Noto Sans CJK JP Medium"),
    local("NotoSansCJKJP-Medium"), local("Source Han Sans Medium"),
    local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
    local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
    local("MS PGothic");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W6"), local("Hiragino Kaku Gothic ProN W6"),
    local("HiraginoSans-W6"), local("Source Han Sans JP Bold"),
    local("SourceHanSansJP-Bold"), local("Source Han Sans J Bold"),
    local("SourceHanSansJ-Bold"), local("Noto Sans CJK JP Bold"),
    local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
    local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
    local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */

@font-face {
  font-family: system-ui-ja;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */

@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-ja;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Light"), local("Source Han Sans CN Light"),
    local("SourceHanSansCN-Light"), local("Source Han Sans SC Light"),
    local("SourceHanSansSC-Light"), local("Noto Sans CJK SC Light"),
    local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
    local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
    local("Heiti SC Light"), local("SimHei");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Regular"), local("Source Han Sans CN Regular"),
    local("SourceHanSansCN-Regular"), local("Source Han Sans SC Regular"),
    local("SourceHanSansSC-Regular"), local("Noto Sans CJK SC Regular"),
    local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
    local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
    local("Heiti SC Light"), local("SimHei");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Medium"), local("Source Han Sans CN Medium"),
    local("SourceHanSansCN-Medium"), local("Source Han Sans SC Medium"),
    local("SourceHanSansSC-Medium"), local("Noto Sans CJK SC Medium"),
    local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
    local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
    local("Heiti SC Light"), local("SimHei");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Semibold"), local("Source Han Sans CN Bold"),
    local("SourceHanSansCN-Bold"), local("Source Han Sans SC Bold"),
    local("SourceHanSansSC-Bold"), local("Noto Sans CJK SC Bold"),
    local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
    local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
    local("Heiti SC Medium"), local("SimHei");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */

@font-face {
  font-family: system-ui-zh-cn;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */

@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-zh-cn;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Light"), local("Source Han Sans TW Light"),
    local("SourceHanSansTW-Light"), local("Source Han Sans TC Light"),
    local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
    local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
    local("Heiti TC Light"), local("PMingLiU");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Regular"), local("Source Han Sans TW Regular"),
    local("SourceHanSansTW-Regular"), local("Source Han Sans TC Regular"),
    local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
    local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Medium"), local("Source Han Sans TW Medium"),
    local("SourceHanSansTW-Medium"), local("Source Han Sans TC Medium"),
    local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
    local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Semibold"), local("Source Han Sans TW Bold"),
    local("SourceHanSansTW-Bold"), local("Source Han Sans TC Bold"),
    local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
    local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
    local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
    local("Heiti TC Medium"), local("PMingLiU");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */

@font-face {
  font-family: system-ui-zh-tw;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */

@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-zh-tw;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Light"), local("Source Han Sans HK Light"),
    local("SourceHanSansHK-Light"), local("Source Han Sans HC Light"),
    local("SourceHanSansHC-Light"), local("Noto Sans CJK HK Light"),
    local("NotoSansCJKHK-Light"), local("Source Han Sans TC Light"),
    local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
    local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Regular"), local("Source Han Sans HK Regular"),
    local("SourceHanSansHK-Regular"), local("Source Han Sans HC Regular"),
    local("SourceHanSansHC-Regular"), local("Noto Sans CJK HK Regular"),
    local("NotoSansCJKHK-Regular"), local("Source Han Sans TC Regular"),
    local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
    local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Medium"), local("Source Han Sans HK Medium"),
    local("SourceHanSansHK-Medium"), local("Source Han Sans HC Medium"),
    local("SourceHanSansHC-Medium"), local("Noto Sans CJK HK Medium"),
    local("NotoSansCJKHK-Medium"), local("Source Han Sans TC Medium"),
    local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
    local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Semibold"), local("Source Han Sans HK Bold"),
    local("SourceHanSansHK-Bold"), local("Source Han Sans HC Bold"),
    local("SourceHanSansHC-Bold"), local("Noto Sans CJK HK Bold"),
    local("NotoSansCJKHK-Bold"), local("Source Han Sans TC Bold"),
    local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
    local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
    local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
    local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */

@font-face {
  font-family: system-ui-zh-hk;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */

@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-zh-hk;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-Light"), local("Source Han Sans KR Light"),
    local("SourceHanSansKR-Light"), local("Source Han Sans K Light"),
    local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
    local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
    local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-Regular"), local("Source Han Sans KR Regular"),
    local("SourceHanSansKR-Regular"), local("Source Han Sans K Regular"),
    local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
    local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
    local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-Medium"), local("Source Han Sans KR Medium"),
    local("SourceHanSansKR-Medium"), local("Source Han Sans K Medium"),
    local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
    local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
    local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-SemiBold"), local("Source Han Sans KR Bold"),
    local("SourceHanSansKR-Bold"), local("Source Han Sans K Bold"),
    local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
    local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
    local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */

@font-face {
  font-family: system-ui-ko;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */

@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-ko;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

:root {
  /* fonts */
  --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
  --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
  /* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
  Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
  So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
  --fonts-emoji: -emoji-fallback;
  /* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-default: normal; /* line-height: use the default value as "modules/normalize.css" */
  --line-height-code: 20px; /* line-height for code, also used by the editor */
  /* images */
  --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill-rule="evenodd" d="M11.78.22a.75.75 0 0 1 0 1.061L4.52 8.541a.75.75 0 0 1-1.062 0L.202 5.285a.75.75 0 0 1 1.061-1.061l2.725 2.723L10.718.22a.75.75 0 0 1 1.062 0"/></svg>');
  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>');
  --octicon-alert-fill: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"/></svg>');
  --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
  --octicon-x: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.75.75 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215L8 9.06l-3.22 3.22a.75.75 0 0 1-1.042-.018.75.75 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06"/></svg>');
  --select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
  /* other variables */
  --border-radius: 4px;
  --border-radius-medium: 6px;
  --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
  --opacity-disabled: 0.55;
  --height-loading: 16rem;
  --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
  --tab-size: 4;
  --checkbox-size: 14px; /* height and width of checkbox and radio inputs */
  --page-spacing: 16px; /* space between page elements */
  --page-margin-x: 32px; /* minimum space on left and right side of page */
  --page-space-bottom: 64px; /* space between last page element and footer */
  --transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */

  /* z-index */
  --z-index-modal: 1001; /* modal dialog */
  --z-index-toast: 1002; /* should be larger than modal */

  --font-size-label: 12px; /* font size of individual labels */

  --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
  --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */

  --background-view-image: repeating-conic-gradient(var(--color-transparency-grid-dark) 0 25%, var(--color-transparency-grid-light) 0 50%) 0 0 / 18px 18px;
  --box-shadow-kbd: inset 0 -1px 0 var(--color-secondary);
}

@media (min-width: 768px) and (max-width: 1200px) {
  :root {
    --page-margin-x: 16px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --page-margin-x: 8px;
  }
}

:root * {
  --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
}

*, ::before, ::after {
  /* these are needed for tailwind borders to work because we do not load tailwind's base
     https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
  border-width: 0;
  border-style: solid;
  border-color: currentcolor;
}

html, body {
  height: 100%;
  font-size: 14px;
}

body {
  line-height: 20px;
  font-family: var(--fonts-regular);
  color: var(--color-text);
  background-color: var(--color-body);
  tab-size: var(--tab-size);
  display: flex;
  flex-direction: column;
  overflow-x: visible;
  overflow-wrap: break-word;
}

textarea {
  font-family: var(--fonts-regular);
}

pre,
code,
kbd,
samp {
  font-family: var(--fonts-monospace);
}

pre,
code,
samp,
.tw-font-mono {
  font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
}

/* there are many <code> blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers, for example: translation strings, etc,
so we need to make <code> have default global styles, ".markup code" has its own styles and these styles sometimes conflict.
TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line, then drop this ":not" patch */

code:where(:not(.code-inner)) {
  padding: 1px 4px;
  border-radius: var(--border-radius);
  background-color: var(--color-markup-code-inline);
}

b,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.28571429;
  margin: calc(2rem - 0.1428571428571429em) 0 1rem;
  font-weight: var(--font-weight-medium);
  padding: 0;
}

h1 {
  min-height: 1rem;
  font-size: 2rem;
}

h2 {
  font-size: 1.71428571rem;
}

h3 {
  font-size: 1.28571429rem;
}

h4 {
  font-size: 1.07142857rem;
}

h5 {
  font-size: 1rem;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
  margin-bottom: 0;
}

p {
  margin: 0 0 1em;
  line-height: 1.4285;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

table {
  border-collapse: collapse;
}

ul {
  margin: 0.5em 0;
  padding: 0 0 0 1.5em;
}

button {
  cursor: pointer;
}

details summary {
  cursor: pointer;
}

progress {
  background: var(--color-secondary-dark-1);
  border-radius: var(--border-radius);
  border: none;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--color-secondary-dark-1);
}

progress::-webkit-progress-value {
  background-color: var(--color-accent);
}

progress::-moz-progress-bar {
  background-color: var(--color-accent);
}

* {
  caret-color: var(--color-caret);
}

::file-selector-button {
  border: 1px solid var(--color-light-border);
  color: var(--color-text-light);
  background: var(--color-light);
  border-radius: var(--border-radius);
}

::file-selector-button:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

::selection,
relative-time::part(root)::selection {
  background: var(--color-primary-light-1);
  color: var(--color-white);
}

::placeholder {
  color: var(--color-placeholder-text) !important;
  opacity: 1 !important;
}

.unselectable,
.btn,
.button,
.lines-num,
.lines-commit,
.lines-commit .blame-info,
.ellipsis-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.container-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  user-select: none;
}

a {
  color: var(--color-primary);
  cursor: pointer;
  text-decoration-line: none;
  text-decoration-skip-ink: all;
}

a:hover {
  text-decoration-line: underline;
}

/* a = always colored, underlined on hover */

/* a.muted = colored on hover, underlined on hover */

/* a.suppressed = never colored, underlined on hover */

/* a.silenced = never colored, never underlined */

a.muted,
a.suppressed,
a.silenced,
.muted-links a {
  color: inherit;
}

a:hover,
a.suppressed:hover,
a.muted:hover,
a.muted:hover [class*="color-text"],
.muted-links a:hover {
  color: var(--color-primary);
}

a.silenced:hover,
a.suppressed:hover {
  color: inherit;
}

a.silenced:hover {
  text-decoration-line: none;
}

a.label,
.ui.search .results a,
.ui .menu a,
.ui.cards a.card,
.issue-keyword a {
  text-decoration-line: none !important;
}

.native-select {
  position: relative;
}

.native-select > select {
  appearance: none; /* hide default triangle */
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--color-light-border) !important;
  color: var(--color-text);
  border-radius: var(--border-radius);
}

/* ::before and ::after pseudo elements don't work on select elements,
   so we need to put it on the parent wrapper element. */

.native-select::after {
  position: absolute;
  pointer-events: none; /* make the click event can pass through the svg to the select element */
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  content: "";
  width: 16px;
  height: 16px;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-image: var(--select-arrows);
  -webkit-mask-image: var(--select-arrows);
  background: currentcolor;
}

.empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  text-wrap: balance;
}

.inline-code-block {
  padding: 2px 4px;
  border-radius: .24em;
  background-color: var(--color-label-bg);
}

.ui.menu .dropdown.item:hover,
.ui.menu a.item:hover,
.ui.menu details.item summary:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

/* slightly more contrast for filters on issue list */

.ui.ui.menu .dropdown.item.disabled {
  color: var(--color-text-light-2);
}

/* styles from removed fomantic transition module */

.hidden.transition {
  visibility: hidden;
  display: none;
}

.visible.transition {
  display: block !important;
  visibility: visible !important;
}

.ui.comments .comment .metadata {
  color: var(--color-text-light-2);
}

img.ui.avatar,
.ui.avatar img,
.ui.avatar svg {
  border-radius: var(--border-radius);
  object-fit: contain;
  aspect-ratio: 1;
}

.full.height {
  flex-grow: 1;
  padding-bottom: var(--page-space-bottom);
}

.status-page-error {
  margin-top: max(45vh - 90px, 80px);
  margin-bottom: 80px;
}

.status-page-error-title {
  font-size: 48px;
  margin-bottom: 14px; /* some elements below may use tw-my-4 or tw-my-8, so use 14px as a minimal margin */
  line-height: initial;
  text-align: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light-2);
}

/* add margin below .secondary nav when it is the first child */

.page-content > :first-child.secondary-nav {
  margin-bottom: 14px;
}

/* add margin to all pages when there is no .secondary.nav */

.page-content > :first-child:not(.secondary-nav) {
  margin-top: var(--page-spacing);
}

/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
   to compensate here */

.page-content > :first-child.ui.grid {
  margin-top: calc(var(--page-spacing) - 1rem);
}

.ui .message.flash-message {
  text-align: center;
}

.ui .header > i + .content {
  padding-left: 0.75rem;
  vertical-align: middle;
}

.ui .sha.label {
  font-family: var(--fonts-monospace);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  flex-shrink: 0;
}

.ui .button.truncate {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
  margin-right: 6px;
}

.ui.status.buttons .svg {
  margin-right: 4px;
}

.ui.inline.delete-button {
  padding: 8px 15px;
  font-weight: var(--font-weight-normal);
}

.ui .migrate {
  color: var(--color-text-light-2) !important;
}

.ui .migrate a {
  color: var(--color-text-light) !important;
}

.ui .migrate a:hover {
  color: var(--color-text) !important;
}

.ui .border {
  border: 1px solid;
}

.user-menu > .item {
  width: 100%;
  border-radius: 0 !important;
}

.color-preview {
  display: inline-block;
  margin-left: 0.4em;
  height: 0.67em;
  width: 0.67em;
  border-radius: var(--border-radius);
}

.attention-icon {
  margin: 2px 6px 0 0;
}

blockquote.attention-note {
  border-left-color: var(--color-blue-dark-1);
}

strong.attention-note, svg.attention-note {
  color: var(--color-blue-dark-1);
}

blockquote.attention-tip {
  border-left-color: var(--color-success-text);
}

strong.attention-tip, svg.attention-tip {
  color: var(--color-success-text);
}

blockquote.attention-important {
  border-left-color: var(--color-violet-dark-1);
}

strong.attention-important, svg.attention-important {
  color: var(--color-violet-dark-1);
}

blockquote.attention-warning {
  border-left-color: var(--color-warning-text);
}

strong.attention-warning, svg.attention-warning {
  color: var(--color-warning-text);
}

blockquote.attention-caution {
  border-left-color: var(--color-red-dark-1);
}

strong.attention-caution, svg.attention-caution {
  color: var(--color-red-dark-1);
}

/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */

.center {
  text-align: center;
}

overflow-menu {
  border-bottom: 1px solid var(--color-secondary) !important;
  display: flex;
  position: relative;
}

overflow-menu .overflow-menu-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  background-color: var(--color-menu);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  box-shadow: 0 6px 18px var(--color-shadow);
  padding: 4px 0;
}

overflow-menu .overflow-menu-popup::before,
overflow-menu .overflow-menu-popup::after {
  content: "";
  position: absolute;
  right: 10px;
  border: 8px solid transparent;
}

overflow-menu .overflow-menu-popup::before {
  bottom: 100%;
  border-bottom-color: var(--color-secondary);
}

overflow-menu .overflow-menu-popup::after {
  bottom: calc(100% - 1px);
  border-bottom-color: var(--color-menu);
}

overflow-menu .overflow-menu-popup > .item {
  display: flex;
  align-items: center;
  padding: 9px 18px !important;
  color: var(--color-text) !important;
  background: transparent !important;
  text-decoration: none;
  gap: 10px;
  width: 100%;
}

overflow-menu .overflow-menu-popup > .item:hover,
overflow-menu .overflow-menu-popup > .item:focus {
  background: var(--color-hover) !important;
}

overflow-menu .overflow-menu-popup > .item.active {
  background: var(--color-active) !important;
}

overflow-menu .overflow-menu-items {
  display: flex;
  flex: 1;
}

overflow-menu .overflow-menu-items .item {
  margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
}

overflow-menu .overflow-menu-items .item-flex-space {
  flex: 1;
}

overflow-menu .overflow-menu-button {
  background: transparent;
  border: none;
  color: inherit;
  text-align: center;
  width: 32px;
  padding: 0;
}

/* match the styles of ".ui.secondary.pointing.menu .active.item" */

overflow-menu.ui.secondary.pointing.menu .overflow-menu-button.active {
  padding: 2px 0 0;
  border-bottom: 2px solid currentcolor;
  background-color: transparent;
  font-weight: var(--font-weight-medium);
}

overflow-menu .overflow-menu-button:hover {
  color: var(--color-text-dark);
}

overflow-menu .ui.label {
  margin-left: 7px !important; /* save some space */
}

.activity-bar-graph {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.activity-bar-graph-alt {
  color: var(--color-primary-contrast);
}

.oauth2-authorize-application-box {
  margin-top: 3em !important;
}

.lines-blame-btn {
  padding: 0 0 0 5px;
  display: flex;
  justify-content: center;
}

.lines-num {
  padding: 0 8px;
  text-align: right !important;
  color: var(--color-text-light-2);
  width: 1%; /* this apparently needs to be a percentage so that code column stretches in diffs */
  min-width: 72px;
  white-space: nowrap;
}

.code-diff .lines-num {
  min-width: 50px;
}

.lines-num span::after {
  content: attr(data-line-number);
  line-height: var(--line-height-code) !important;
  padding: 0 10px;
  display: block;
}

.lines-type-marker {
  vertical-align: top;
  white-space: nowrap;
}

.lines-num,
.lines-escape,
.lines-code {
  font-size: 12px;
  font-family: var(--fonts-monospace);
  line-height: var(--line-height-code);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: top;
}

.lines-num pre,
.lines-code pre,
.lines-num ol,
.lines-code ol {
  background-color: inherit;
  margin: 0;
  padding: 0 !important;
}

.lines-num pre li,
.lines-code pre li,
.lines-num ol li,
.lines-code ol li {
  display: block;
  width: calc(100% - 1ch);
  padding-left: 1ch;
}

.lines-escape {
  width: 0;
  white-space: nowrap;
  padding: 0;
}

.lines-code {
  padding-left: 5px;
}

.code-inner {
  font: 12px var(--fonts-monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: inherit; /* needed for inline code preview in markup */
}

.blame .code-inner {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lines-commit {
  vertical-align: top;
  color: var(--color-text-light-1);
  padding: 0 !important;
  width: 1%;
}

.lines-commit .blame-info {
  width: min(26vw, 300px);
  display: block;
  padding: 0 0 0 6px;
  line-height: var(--line-height-code);
  box-sizing: content-box;
}

.lines-commit .blame-info .blame-data {
  display: flex;
  font-family: var(--fonts-regular);
}

.lines-commit .blame-info .blame-data .blame-message {
  flex-grow: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lines-commit .blame-info .blame-data .blame-time,
.lines-commit .blame-info .blame-data .blame-avatar {
  flex-shrink: 0;
}

.blame-avatar {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

tr.top-line-blame {
  border-top: 1px solid var(--color-secondary);
}

tr.top-line-blame:first-of-type {
  border-top: none; /* merge code lines belonging to the same commit into one block */
}

.migrate .svg.gitea-git {
  color: var(--color-git);
}

.color-icon {
  display: inline-block;
  border-radius: var(--border-radius-full);
  height: 14px;
  width: 14px;
}

.rss-icon {
  display: inline-flex;
  color: var(--color-text-light-1);
}

table th[data-sortt-asc]:hover,
table th[data-sortt-desc]:hover {
  background: var(--color-hover) !important;
  cursor: pointer !important;
}

table th[data-sortt-asc] .svg,
table th[data-sortt-desc] .svg {
  margin-left: 0.25rem;
}

/* for "image" emojis like ":git:"  ":gitea:" and ":github:" (see CUSTOM_EMOJIS config option) */

.emoji img {
  border-width: 0 !important;
  margin: 0 !important;
  width: 1em !important;
  height: 1em !important;
  vertical-align: -0.15em;
}

.ui.tabular.menu .item,
.ui.secondary.pointing.menu .item {
  padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
  color: var(--color-text-light-2);
}

.ui.tabular.menu .item:hover,
.ui.secondary.pointing.menu a.item:hover {
  color: var(--color-text);
}

.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item,
.resize-for-semibold::before {
  font-weight: var(--font-weight-semibold);
}

.resize-for-semibold::before {
  content: attr(data-text);
  visibility: hidden;
  display: block;
  height: 0;
}

.flash-error details code,
.flash-warning details code {
  display: block;
  text-align: left;
}

.ui.button.ellipsis-button {
  padding: 0 5px 8px;
  display: inline-block;
  font-weight: var(--font-weight-semibold);
  line-height: 8px;
  vertical-align: middle;
  min-height: 0;
}

.btn,
.ui.ui.dropdown,
.flex-text-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  vertical-align: middle;
  min-width: 0; /* make ellipsis work */
}

.ui.ui.labeled.button {
  gap: 0;
  align-items: stretch;
}

.ui.list.flex-items-block > .item,
.ui.vertical.menu.flex-items-block > .item,
.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
.flex-items-block > .item,
.flex-text-block {
  display: flex;
  align-items: center;
  gap: var(--gap-block);
  min-width: 0;
}

.flex-text-block > .ui.button,
.flex-text-inline > .ui.button {
  margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
}

.svg.octicon-file-directory-fill,
.svg.octicon-file-directory-open-fill,
.svg.octicon-file-submodule {
  color: var(--color-primary);
}

.svg.octicon-file,
.svg.octicon-file-symlink-file,
.svg.octicon-file-directory-symlink {
  color: var(--color-secondary-dark-7);
}

.home .logo {
  max-width: 220px;
}

@media (max-width: 767.98px) {
  .home .hero h1 {
    font-size: 3.5em;
  }
  .home .hero h2 {
    font-size: 2em;
  }
}

@media (min-width: 768px) {
  .home .hero h1 {
    font-size: 5.5em;
  }
  .home .hero h2 {
    font-size: 3em;
  }
}

.home .hero .svg {
  color: var(--color-logo);
  height: 40px;
  width: 50px;
  vertical-align: bottom;
}

.home .hero.header {
  font-size: 20px;
}

.home p.large {
  font-size: 16px;
}

.home .stackable {
  padding-top: 30px;
}

.home a {
  color: var(--color-logo);
}

.page-footer {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-footer);
  border-top: 1px solid var(--color-secondary);
  padding: 8px 20px;
}

.page-footer .left-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.page-footer .right-links {
  min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.page-footer .right-links > a {
  border-left: 1px solid var(--color-secondary-dark-1);
  padding-left: 1em;
}

/* the theme item is also used for the menu's "default text" display */

.page-footer .ui.dropdown .theme-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Fomantic UI dropdown "remote items by API" can't change parent "item" element,
so we use "theme-menu-item" in the "item" and add tooltip to the inner one.
Then the inner one needs to get padding and parent "item" padding needs to be removed */

.page-footer .menu.theme-menu > .item {
  padding: 0 !important;
}

.page-footer .menu.theme-menu > .item > .theme-menu-item {
  padding: 11px 16px;
}

.page-footer .ui.dropdown .menu.language-menu,
.page-footer .ui.dropdown .menu.theme-menu {
  max-height: min(500px, calc(100vh - 60px));
  overflow-y: auto;
  margin-bottom: 10px;
}

@media (max-width: 880px) {
  .page-footer {
    flex-direction: column;
    gap: 0.5em;
  }
}

.page-content.install .install-config-container {
  max-width: 900px;
  margin: auto;
}

.page-content.install form.ui.form .inline.field > label {
  text-align: right;
  width: 30%;
  padding-right: 10px;
  margin-right: 0;
}

.page-content.install .ui.form .field > .help,
.page-content.install .ui.form .field > .ui.checkbox:first-child,
.page-content.install .ui.form .field > .right-content {
  margin-left: calc(30% + 5px);
  width: auto;
}

.page-content.install form.ui.form input:not([type="checkbox"],[type="radio"]),
.page-content.install form.ui.form .ui.selection.dropdown {
  width: 60%;
}

.page-content.install form.ui.form details.optional.field[open] {
  padding-bottom: 10px;
}

.page-content.install form.ui.form details.optional.field[open]:not(:last-child) {
  border-bottom: 1px dashed var(--color-secondary);
}

.page-content.install form.ui.form details.optional.field[open] summary {
  margin-bottom: 10px;
}

.page-content.install form.ui.form details.optional.field * {
  box-sizing: border-box;
}

.page-content.install form.ui.form .field {
  text-align: left;
}

.page-content.install .ui .reinstall-message {
  width: 70%;
  margin: 20px auto;
  color: var(--color-red);
  text-align: left;
  font-weight: var(--font-weight-semibold);
}

.page-content.install .ui .reinstall-confirm {
  width: 70%;
  text-align: left;
  margin: 10px auto;
}

.repository .data-table .line-num,
.repository .diff-file-box .file-body.file-code .lines-num,
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
  user-select: none;
}

.repository .owner.dropdown {
  min-width: 40% !important;
}

.issue-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

@media (max-width: 767.98px) {
  .issue-content {
    flex-direction: column;
  }
}

.issue-content-left {
  margin: 0 !important;
  width: calc(100% - 316px);
}

.issue-content-right {
  margin: 0 !important;
  width: 300px;
}

.issue-content-right .ui.dropdown.full-width {
  width: 100%;
}

.issue-content-right .ui.dropdown.full-width > .fixed-text {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}

.issue-content-right .ui.dropdown > .menu {
  max-width: 270px;
  min-width: 0;
  max-height: 500px;
  overflow-x: auto;
}

.issue-content-right .ui.dropdown > .menu .item-secondary-info small {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.issue-content-right .ui.list {
  margin: 0.5em 0;
  max-width: 100%;
}

.issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark {
  visibility: hidden;
}

.issue-content-right .ui.list.labels-list {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .issue-content-left,
  .issue-content-right {
    width: 100%;
  }
}

/* make all issue filter dropdown (user dashboard, repo issue list) menus popup leftward, to avoid go out the viewport (right side) */

.list-header-filters .ui.dropdown .menu,
.issue-list-toolbar .ui.dropdown .menu {
  max-height: 500px;
  max-width: 300px;
  overflow-x: hidden;
  right: 0;
  left: auto;
}

/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */

.list-header-filters .ui.dropdown.label-filter .menu,
.issue-list-toolbar .ui.dropdown.label-filter .menu {
  min-width: max-content;
  right: unset;
  left: 0;
}

/* For the secondary pointing menu, respect its own border-bottom */

/* style reference: https://semantic-ui.com/collections/menu.html#pointing */

.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
  border-bottom: 0;
}

.repository .ui.tabs.divider {
  margin-top: -1px;
  margin-bottom: 12px;
}

.commit-summary {
  flex: 1;
  overflow-wrap: anywhere;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.commit-header .commit-summary,
td .commit-summary {
  white-space: normal;
}

.latest-commit {
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  gap: 0.5em;
}

@media (max-width: 767.98px) {
  .latest-commit .commit-id-short {
    display: none;
  }
}

.non-diff-file-content .header .icon {
  font-size: 1em;
}

.non-diff-file-content .header .small.icon {
  font-size: 0.75em;
}

.non-diff-file-content .header .tiny.icon {
  font-size: 0.5em;
}

.non-diff-file-content .header .file-actions .btn-octicon {
  line-height: var(--line-height-default);
  padding: 8px;
  vertical-align: middle;
  color: var(--color-text);
}

.non-diff-file-content .header .file-actions .btn-octicon:hover {
  color: var(--color-primary);
}

.non-diff-file-content .header .file-actions .btn-octicon-danger:hover {
  color: var(--color-red);
}

.non-diff-file-content .header .file-actions .btn-octicon.disabled {
  color: inherit;
  opacity: var(--opacity-disabled);
  cursor: default;
}

.non-diff-file-content .plain-text {
  padding: 1em 2em;
}

.non-diff-file-content .plain-text pre {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.non-diff-file-content .csv {
  overflow-x: auto;
  padding: 0 !important;
}

.non-diff-file-content pre {
  overflow: auto;
}

.non-diff-file-content .asciicast {
  padding: 0 !important;
}

.repo-editor-menu {
  min-height: auto !important;
}

.repo-editor-header {
  /* it should match ".repo-button-row" so the tree toggle button stays aligned */
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.repo-editor-header input {
  vertical-align: middle !important;
  width: auto !important;
  height: 30px !important;
  padding: 5px 8px !important;
  margin-right: 5px !important;
}

.repository.file.editor .commit-form-wrapper {
  padding-left: 58px;
}

.repository.file.editor .commit-form-wrapper .commit-avatar {
  float: left;
  margin-left: -58px;
}

.repository.file.editor .commit-form-wrapper .commit-form {
  position: relative;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid var(--color-secondary);
  background: var(--color-box-body);
  border-radius: var(--border-radius);
}

.avatar-content-left-arrow::before,
.avatar-content-left-arrow::after {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.avatar-content-left-arrow::before {
  border-right-color: var(--color-secondary);
  border-width: 9px;
  margin-top: -9px;
}

.avatar-content-left-arrow::after {
  border-right-color: var(--color-box-body);
  border-width: 8px;
  margin-top: -8px;
}

@media (max-width: 767.98px) {
  .avatar-content-left-arrow::before,
  .avatar-content-left-arrow::after {
    display: none;
  }
}

.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name {
  display: inline-block;
  padding: 2px 4px;
  font: 12px var(--fonts-monospace);
  color: var(--color-text);
  background: var(--color-secondary);
  border-radius: var(--border-radius);
  margin: 0 2px;
}

.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
  position: relative;
  margin-left: 25px;
}

.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
  width: 240px !important;
  padding-left: 26px !important;
}

.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
  position: absolute;
  top: 9px;
  left: 10px;
  color: var(--color-grey);
}

.repository.options #interval {
  width: 100px !important;
  min-width: 100px;
}

/* issue title & meta & edit */

.issue-title-header {
  width: 100%;
  padding-bottom: 4px;
  margin-bottom: 1rem;
}

.issue-title-meta {
  display: flex;
  align-items: center;
}

.repository.view.issue .issue-title-buttons {
  display: flex;
  gap: 0.5em;
}

.repository.view.issue .issue-title-buttons > .ui.button {
  margin: 0;
  height: 35px;
}

.repository.view.issue .issue-title {
  display: flex;
  gap: 0.5em;
  margin-bottom: 8px;
  min-height: 36px; /* avoid layout shift on edit */
}

.repository.view.issue .issue-title h1 {
  flex: 1;
  width: 100%;
  font-weight: var(--font-weight-normal);
  font-size: 32px;
  line-height: 36px; /* vertically center single-line text with .issue-title-buttons */
  margin: 0;
  padding-right: 0.25rem;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .repository.view.issue .issue-title {
    flex-direction: column;
  }
  .repository.view.issue .issue-title-buttons {
    width: 100%;
    justify-content: space-between;
  }
}

.repository.view.issue .issue-title .ui.input {
  width: 100%;
  height: 35px;
}

.repository.view.issue .issue-title .ui.input input {
  font-size: 1.5em;
  padding: 2px .5rem;
}

.issue-title .index {
  color: var(--color-text-light-2);
}

.issue-title .label {
  margin-right: 10px;
}

.issue-state-label {
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  padding: 7px 10px !important;
  border-radius: var(--border-radius-medium) !important;
  flex-shrink: 0;
}

.issue-state-label .svg {
  margin-right: 4px;
}

.repository.view.issue .pull-desc code {
  color: var(--color-primary);
  background: transparent;
}

.repository.view.issue .pull-desc a[data-clipboard-text] {
  cursor: pointer;
}

.repository.view.issue .pull-desc a[data-clipboard-text] svg {
  vertical-align: middle;
  position: relative;
  top: -2px;
  right: 1px;
}

.repository.view.issue .pull.tabs.container {
  width: 100%;
  max-width: 100%;
}

.repository.view.issue .pull.tabular.menu {
  margin-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.repository.view.issue .pull.tabular.menu .svg {
  margin-right: 5px;
}

.repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
  display: block;
  content: "";
  position: absolute;
  margin-top: 12px;
  margin-bottom: 14px;
  top: 0;
  bottom: 0;
  left: 96px;
  width: 2px;
  background-color: var(--color-timeline);
  z-index: -1;
}

.repository.view.issue .comment-list .timeline {
  position: relative;
  display: block;
  margin-left: 40px;
  padding-left: 16px;
}

.repository.view.issue .comment-list .timeline::before { /* ciara */
  display: block;
  content: "";
  position: absolute;
  margin-top: 12px;
  margin-bottom: 14px;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 2px;
  background-color: var(--color-timeline);
  z-index: -1;
}

.repository.view.issue .comment-list .timeline-item,
.repository.view.issue .comment-list .timeline-item-group {
  padding: 8px 0;
}

.repository.view.issue .comment-list .timeline-item-group .timeline-item {
  padding-top: 8px;
  padding-bottom: 8px;
}

.repository.view.issue .comment-list .timeline-avatar-offset {
  top: 51px;
}

.repository.view.issue .comment-list .timeline-item {
  margin-left: 16px;
  position: relative;
}

.repository.view.issue .comment-list .timeline-item .timeline-avatar {
  position: absolute;
  left: -68px;
}

/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */

.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
  display: none;
}

.repository.view.issue .comment-list .timeline-item:first-child:not(.commit) {
  padding-top: 0 !important;
}

.repository.view.issue .comment-list .timeline-item:last-child:not(.commit) {
  padding-bottom: 0 !important;
}

.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
  border-color: transparent;
  background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
}

.repository.view.issue .comment-list .timeline-item .badge {
  width: 34px;
  height: 34px;
  background-color: var(--color-timeline);
  border-radius: var(--border-radius-full);
  display: flex;
  flex-shrink: 0;
  margin-left: -33px;
  margin-right: 4px;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
}

.repository.view.issue .comment-list .timeline-item.commits-list .badge {
  margin-right: 0;
  height: 28px;
}

.repository.view.issue .comment-list .timeline-item .badge .svg {
  width: 22px;
  height: 22px;
  padding: 3px;
}

.repository.view.issue .comment-list .timeline-item.comment > .content {
  margin-left: -16px;
}

.repository.view.issue .comment-list .timeline-item .comment-text-line {
  /* TODO: this "line-height" is not ideal (actually it is abused), many layouts depend on this magic value,
      for example: alignment of the header arrow and the avatar, view PR commit list left icon layout, dismiss review with reason, etc */
  line-height: 32px;
  color: var(--color-text-light);
  min-width: 0;
}

.repository.view.issue .comment-list .timeline-item .comment-text-line .ui.label {
  line-height: 1.5; /* label has background, so it can't use parent's line-height */
}

.repository.view.issue .comment-list .timeline-item .comment-text-line a {
  color: inherit;
}

.repository.view.issue .comment-list .timeline-item.commits-list {
  padding-left: 15px;
  padding-top: 0;
}

.repository.view.issue .comment-list .timeline-item .comment-text-label {
  border: 1px solid var(--color-light-border);
  height: 26px;
  margin: 4px 0; /* because this label is beside the comment line, which has "line-height: 34px" */
}

@media (max-width: 767.98px) {
  .repository.view.issue .comment-list .timeline-item .ui.segments {
    margin-left: -2rem;
  }
}

.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 {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.repository.view.issue .comment-list .comment > .content > div:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.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) {
  .repository.view.issue .comment-list .comment .content .form .button {
    width: 100%;
    margin: 0;
  }
}

.repository.view.issue .comment-list .comment .merge-section {
  background-color: var(--color-box-body);
}

.repository.view.issue .comment-list .comment .merge-section .item-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: 0.5em;
}

.repository.view.issue .comment-list .comment .merge-section .divider {
  margin-left: -1rem;
  width: calc(100% + 2rem);
}

.merge-section-info code {
  border: 1px solid var(--color-light-border);
  border-radius: var(--border-radius);
  padding: 2px 4px;
  background: var(--color-light);
}

.repository.view.issue .comment-list .comment .no-content {
  color: var(--color-text-light-2);
  font-style: italic;
}

.repository.view.issue .comment-list .comment .ui.form .field:first-child {
  clear: none;
}

.repository.view.issue .comment-list .comment .ui.form .field.footer {
  overflow: hidden;
}

.repository.view.issue .comment-list .comment .ui.form .field .tab.markup {
  min-height: 5rem;
}

.repository.view.issue .comment-list .comment .edit.buttons {
  margin-top: 10px;
}

.repository.view.issue .comment-list .code-comment {
  border: 1px solid transparent;
  padding: 8px;
}

.repository.view.issue .comment-list .code-comment .comment-header {
  background: transparent;
  border-bottom: 0;
  padding: 0;
}

.repository.view.issue .comment-list .code-comment .comment-content {
  margin-top: 6px;
  margin-left: 24px;
}

.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
  margin: 0;
}

.repository.view.issue .comment-list .event {
  padding-left: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.repository.view.issue .comment-list .event.code-comments-list {
  display: block;
}

.repository.view.issue .comment-list .event > .badge {
  align-self: flex-start;
}

.repository.view.issue .comment-list .event > .avatar-with-link {
  align-self: flex-start;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

.repository.view.issue .comment-list .event > .comment-text-line {
  flex: 1;
  min-width: 0;
}

.repository.view.issue .comment-list .event > .detail {
  margin-left: 15px;
  width: 100%;
}

.repository.view.issue .ui.depending .item.is-closed .issue-dependency-title {
  text-decoration: line-through;
}

.repository .comment.form .content .field:first-child {
  clear: none;
}

.repository.new.milestone textarea {
  height: 200px;
}

.milestone-progress-big {
  width: min(420px, 96vw);
  height: 10px;
}

.repository .choose.branch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.repository .choose .compare-separator {
  width: 100%;
  margin-top: -1rem;
  text-align: center;
}

.repository.branches .commit-divergence .bar-group {
  position: relative;
  float: left;
  padding-bottom: 6px;
  width: 50%;
  max-width: 90px;
}

.repository.branches .commit-divergence .bar-group:last-child {
  border-left: 1px solid var(--color-secondary-dark-2);
}

.repository.branches .commit-divergence .count {
  margin: 0 3px;
}

.repository.branches .commit-divergence .count.count-ahead {
  text-align: left;
}

.repository.branches .commit-divergence .count.count-behind {
  text-align: right;
}

.repository.branches .commit-divergence .bar {
  height: 4px;
  position: absolute;
  background-color: var(--color-secondary-dark-2);
}

.repository.branches .commit-divergence .bar.bar-behind {
  right: 0;
}

.repository.branches .commit-divergence .bar.bar-ahead {
  left: 0;
}

.repository.commits .header .search input {
  font-weight: var(--font-weight-normal);
  padding: 5px 10px;
}

.repository #commits-table td:not(.message) {
  white-space: nowrap;
}

.repository #commits-table thead .sha {
  width: 200px;
}

.repository .data-table {
  width: 100%;
}

.repository .data-table tr {
  border-top: 0;
  background: none !important;
}

.repository .data-table td,
.repository .data-table th {
  padding: 5px !important;
  overflow: hidden;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  border: 1px solid var(--color-secondary);
}

/* the border css competes with .markup where all tables have outer border which would add a double
   border here, remove only the outer borders from this table */

.repository .data-table tr:first-child :is(td,th) {
  border-top: none !important;
}

.repository .data-table tr:last-child :is(td,th) {
  border-bottom: none !important;
}

.repository .data-table tr :is(td,th):first-child {
  border-left: none !important;
}

.repository .data-table tr :is(td,th):last-child {
  border-right: none !important;
}

.repository .data-table td {
  white-space: pre-line;
}

.repository .data-table th {
  font-weight: var(--font-weight-semibold);
  background: var(--color-box-header);
  border-top: 0;
}

.repository .data-table td.added,
.repository .data-table th.added,
.repository .data-table tr.added {
  background-color: var(--color-diff-added-row-bg) !important;
}

.repository .data-table td.removed,
.repository .data-table th.removed,
.repository .data-table tr.removed {
  background-color: var(--color-diff-removed-row-bg) !important;
}

.repository .data-table td.moved,
.repository .data-table th.moved,
.repository .data-table tr.moved {
  background-color: var(--color-diff-moved-row-bg) !important;
}

.repository .data-table tbody.section {
  border-top: 2px solid var(--color-secondary);
}

.repository .data-table .line-num {
  width: 1%;
  min-width: 50px;
  font-family: monospace;
  line-height: var(--line-height-code);
  color: var(--color-text-light-1);
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  text-align: right;
  background: var(--color-body);
  border: 0;
}

.repository .diff-detail-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 7px 5px;
  margin: 0 -5px; /* negative margin so it covers active file shadow */
  height: 44px; /* this height should match sticky-2nd-row */
  background: var(--color-body);
}

@media (max-width: 480px) {
  .repository .diff-detail-box {
    flex-wrap: wrap;
  }
}

.repository .diff-detail-box .diff-detail-stats strong {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* Because the translations contain the <strong> we need to style with nth-of-type */

.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
  color: var(--color-yellow);
}

.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
  color: var(--color-green);
}

.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
  color: var(--color-red);
}

@media (max-width: 800px) {
  .repository .diff-detail-box .diff-detail-stats {
    display: none !important;
  }
}

.diff-detail-actions {
  display: flex;
  align-items: center;
  gap: 0.25em;
  justify-content: end;
}

.diff-detail-actions > *,
.diff-detail-actions .button {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.repository .diff-detail-box span.status {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: middle;
}

.repository .diff-detail-box span.status.modify {
  background-color: var(--color-yellow);
}

.repository .diff-detail-box span.status.add {
  background-color: var(--color-green);
}

.repository .diff-detail-box span.status.del {
  background-color: var(--color-red);
}

.repository .diff-detail-box span.status.rename {
  background-color: var(--color-teal);
}

.repository .diff-detail-box .ui.button {
  padding: 0 12px;
  height: 30px;
}

.repository .diff-file-box .header {
  background-color: var(--color-box-header);
}

.repository .diff-file-box .file-body.file-code {
  background: var(--color-code-bg);
  border-radius: var(--border-radius);
}

.repository .diff-file-box .file-body.file-code .lines-num {
  text-align: right;
}

.repository .diff-file-box .file-body.file-code .lines-num span.fold {
  display: block;
  text-align: center;
}

.repository .diff-file-box .code-diff td {
  padding: 0 0 0 10px !important;
  border-top: 0;
}

.repository .diff-file-box .code-diff .lines-num {
  padding: 0 5px !important;
}

.repository .diff-file-box .code-diff .tag-code .lines-num,
.repository .diff-file-box .code-diff .tag-code td {
  padding: 0 !important;
}

.repository .diff-file-box .code-diff table {
  table-layout: fixed;
}

.repository .diff-file-box .code-diff tbody tr td.center {
  text-align: center;
}

.repository .diff-file-box .code-diff tbody tr [data-line-num]::before {
  content: attr(data-line-num);
  text-align: right;
}

.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
  width: 10px;
  min-width: 10px;
}

.repository .diff-file-box .code-diff tbody tr [data-type-marker]::before {
  content: attr(data-type-marker);
  text-align: right;
  display: inline-block;
}

.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner {
  padding-left: 10px !important;
}

.repository .diff-file-box .code-diff-split table,
.repository .diff-file-box .code-diff-split tbody {
  width: 100%;
}

.repository .diff-file-box.file-content {
  clear: right;
}

.repository .diff-file-box.file-content .image-diff img {
  max-width: 100%;
  padding: 0;
  border-radius: 0;
}

.repository .diff-file-box .ui.bottom.attached.table.segment {
  padding-top: 5px;
  padding-bottom: 5px;
}

.diff-file-box {
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  scroll-margin-top: 47px; /* match .repository .diff-detail-box */
}

.file.editor .diff-file-box {
  border: none;
}

.file.editor .diff-file-box .ui.attached.table {
  border: none;
}

/* TODO: this can potentially be made "global" by removing the class prefix */

.diff-file-box .ui.attached.header,
.diff-file-box .ui.attached.table {
  margin: 0; /* remove fomantic negative margins */
  width: initial; /* remove fomantic over 100% width */
  max-width: initial; /* remove fomantic over 100% width */
}

.repository .diff-stats {
  clear: both;
  margin-bottom: 5px;
  max-height: 200px;
  height: fit-content;
  overflow: auto;
  padding-left: 0;
}

.repository .diff-stats li {
  list-style: none;
  padding-bottom: 4px;
  margin-bottom: 4px;
  padding-left: 6px;
}

.repository .diff-stats li + li {
  border-top: 1px solid var(--color-secondary);
}

.repository .repo-search-result {
  padding-top: 10px;
  padding-bottom: 10px;
}

.repository .repo-search-result .lines-num a {
  color: inherit;
}

.repository.quickstart .guide .item {
  padding: 1em;
}

.repository.quickstart .guide .item small {
  font-weight: var(--font-weight-normal);
}

.repository .activity-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */

.repository.settings.branches .branch-protection .ui.checkbox .help,
.repository.settings.branches .branch-protection .checkbox-sub-item {
  padding-left: 26px;
}

.repository.settings.branches .branch-protection .status-check-matched-mark {
  font-weight: var(--font-weight-semibold);
  font-style: italic;
}

.repository.settings.webhook .events .column {
  padding-bottom: 0;
}

.repository.settings.webhook .events .help {
  font-size: 13px;
  margin-left: 26px;
  padding-top: 0;
}

.repository .ui.fluid.action.input .ui.search.action.input {
  flex: auto;
}

.repository .repository-summary {
  box-shadow: none;
}

.repository .repository-summary .segment.sub-menu {
  border: none;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.repository .repository-summary .sub-menu .item {
  flex: 1;
  height: 33px; /* match search bar height, need to be improved in the future to use some consistent methods */
  line-height: var(--line-height-default);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
  text-decoration: none;
}

.repository .repository-summary .sub-menu .item.active {
  background: var(--color-secondary);
}

#cite-repo-modal #citation-panel {
  display: flex;
  width: 100%;
}

#cite-repo-modal #citation-panel input {
  border-radius: 0;
  padding: 5px 10px;
  width: 50%;
  line-height: 1.4;
}

#cite-repo-modal #citation-panel .citation.button {
  font-size: 13px;
  padding: 7.5px 5px;
}

#cite-repo-modal #citation-panel #citation-copy-content {
  border-radius: 0;
  padding: 5px 10px;
  font-size: 1.2em;
  line-height: 1.4;
  flex: 1;
}

#cite-repo-modal #citation-panel #citation-copy-apa,
#cite-repo-modal #citation-panel #citation-copy-bibtex {
  border-right: none;
}

#cite-repo-modal #citation-panel #goto-citation-btn {
  border-left: none;
}

#cite-repo-modal #citation-panel > :first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

#cite-repo-modal #citation-panel > :last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

#cite-repo-modal #citation-panel .icon.button {
  padding: 0 10px;
}

.user-cards .list {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.user-cards .list .item {
  list-style: none;
  width: 32%;
  margin: 10px 10px 10px 0;
  padding-bottom: 14px;
  float: left;
}

.user-cards .list .item .avatar {
  float: left;
  display: block;
  margin-right: 10px;
}

.user-cards .list .item .name {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: var(--font-weight-normal);
}

.user-cards .list .item .meta {
  margin-top: 5px;
}

#search-user-box .results .result .image {
  order: 0;
  margin-right: 12px;
  width: 2em;
  height: 2em;
  min-width: 2em;
  min-height: 2em;
}

#search-user-box .results .result .content {
  margin: 0; /* remove margin reserved for avatar because we move it to left via `order: 0` */
}

.ui.menu .item > img:not(.ui) {
  width: auto;
}

.page.buttons {
  padding-top: 15px;
}

.commit-header-buttons {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .commit-header-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

.settings.webhooks .list > .item:not(:first-child),
.settings.githooks .list > .item:not(:first-child),
.settings.actions .list > .item:not(:first-child) {
  padding: 0.25rem 1rem;
  margin: 12px -1rem -1rem;
}

.settings .list > .item:not(:first-child) {
  border-top: 1px solid var(--color-secondary);
  padding: 1rem;
  margin: 16px -1rem -1rem;
}

.settings .list > .item > .svg {
  display: table-cell;
}

.settings .list > .item > .svg + .content {
  display: table-cell;
  padding: 0 0 0 0.5em;
  vertical-align: top;
}

.settings .list > .item .info {
  margin-top: 10px;
}

.settings .list > .item .info .tab.segment {
  border: 0;
  padding: 10px 0 0;
}

.comment:target .comment-container {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}

.comment:target .comment-header::before {
  border-right-color: var(--color-primary) !important;
  filter: drop-shadow(-4px 0 0 var(--color-primary-alpha-30)) !important;
}

.code-comment:target {
  border-color: var(--color-primary) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}

.code-comment:target .content {
  box-shadow: none !important;
}

.comment-header {
  background: var(--color-box-header);
  border-bottom: 1px solid var(--color-secondary);
  padding: 0.5em 1rem;
  position: relative;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
}

.comment-header.avatar-content-left-arrow {
  min-height: 41px; /* for a comment header with left arrow, the arrow is absolutely positioned, but the header content varies (for example: no "roles", etc), so it needs a min-height */
}

.comment-header.avatar-content-left-arrow::after {
  border-right-color: var(--color-box-header);
}

.comment-header.arrow-top::before,
.comment-header.arrow-top::after {
  transform: rotate(90deg);
}

.comment-header.arrow-top::before {
  top: -9px;
  left: 6px;
}

.comment-header.arrow-top::after {
  top: -8px;
  left: 7px;
}

.comment-header-left,
.comment-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-header-right {
  flex: 1;
  justify-content: end;
}

.comment-header-right > .item.action {
  padding: 4px; /* add some padding to make click area larger for the "item action ... ui dropdown" items */
}

.comment-body {
  background: var(--color-box-body);
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 1em;
}

.stats-table {
  display: table;
  width: 100%;
  margin: 6px 0;
  border-spacing: 2px;
}

.stats-table .table-cell {
  display: table-cell;
}

.stats-table .table-cell.tiny {
  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;
}

.repo-button-row {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.repo-button-row-left,
.repo-button-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.repo-button-row-left {
  flex-grow: 1;
}

.repo-button-row .ui.button,
.repo-view-container .ui.button.repo-view-file-tree-toggle {
  flex-shrink: 0;
  margin: 0;
  min-height: 30px;
}

.repo-view-container .ui.button.repo-view-file-tree-toggle {
  padding: 0 6px;
}

.repo-button-row .repo-file-search-container .ui.input {
  height: 30px;
}

.repo-button-row .ui.dropdown > .menu {
  margin-top: 4px;
}

tbody.commit-list {
  vertical-align: baseline;
}

.message-wrapper,
.author-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.author-wrapper {
  max-width: 180px;
  align-self: center;
  white-space: nowrap;
}

.latest-commit .message-wrapper {
  max-width: calc(100% - 2.5rem);
}

/* in the commit list, messages can wrap so we can use inline */

.commit-list .message-wrapper {
  display: inline;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  tr.commit-list {
    width: 100%;
  }
  .author-wrapper {
    max-width: 80px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  tr.commit-list {
    width: 723px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  tr.commit-list {
    width: 933px;
  }
}

@media (min-width: 1201px) {
  tr.commit-list {
    width: 1127px;
  }
}

.commit-body {
  margin: 0.25em 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: initial;
}

.commit-body a.commit code,
.commit-summary a.commit code {
  /* these links are generated by the render: <a class="commit" href="...">...</a> */
  background: inherit;
}

.git-notes.top {
  text-align: left;
}

.comment-diff-data {
  background: var(--color-code-bg);
  min-height: 12em;
  max-height: calc(100vh - 10.5rem);
  overflow-y: auto;
  tab-size: 4;
}

.comment-diff-data pre {
  line-height: 18px;
  margin: 1em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.content-history-detail-dialog .header .ui.avatar {
  position: relative;
  top: -2px;
}

#repo-topics .repo-topic {
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  margin: 0;
  display: inline-block !important;
}

#new-dependency-drop-list.ui.selection.dropdown {
  min-width: 0;
  width: 100%;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border-right: 0;
  white-space: nowrap;
}

#new-dependency-drop-list .text {
  width: 100%;
  overflow: hidden;
}

.tag-code {
  height: 28px;
}

.tag-code,
.tag-code td,
.tag-code.line-expanded {
  background-color: var(--color-box-body-highlight);
  vertical-align: middle;
}

/* fix bottom border radius on diff files */

.diff-file-body tr.tag-code:last-child {
  background: none;
}

.diff-file-body tr.tag-code:last-child > td {
  background: var(--color-box-body-highlight);
}

.diff-file-body tr.tag-code:last-child td:first-child,
.diff-file-body tr.tag-code:last-child td:first-child * {
  border-bottom-left-radius: 3px;
}

.diff-file-body tr.tag-code:last-child td:last-child,
.diff-file-body tr.tag-code:last-child td:last-child * {
  border-bottom-right-radius: 3px;
}

.resolved-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px;
  padding: 8px;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  background: var(--color-box-header);
}

.resolved-placeholder + .comment-code-cloud {
  padding-top: 0 !important;
}

.line-expanded {
  background-color: var(--color-secondary-alpha-20);
}

.issue-keyword {
  border-bottom: 1px dotted var(--color-text-light-3) !important;
}

.issue-keyword:hover {
  border-bottom: none !important;
}

.file-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  padding: 6px 12px !important;
  font-size: 13px !important;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-info-entry {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0.25em;
}

.file-info-entry + .file-info-entry {
  border-left: 1px solid currentcolor;
  margin-left: 8px;
  padding-left: 8px;
}

#diff-container {
  display: flex;
}

#diff-file-boxes {
  flex: 1;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#diff-file-tree {
  flex: 0 0 20%;
  max-width: 380px;
  line-height: inherit;
  position: sticky;
  padding-top: 0;
  top: 47px;
  max-height: calc(100vh - 47px);
  height: 100%;
  overflow-y: auto;
}

.ui.message.unicode-escape-prompt {
  margin-bottom: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* fomantic's last-child selector does not work with hidden last child */

.ui.buttons .unescape-button {
  border-top-right-radius: 0.28571429rem;
  border-bottom-right-radius: 0.28571429rem;
}

.webhook-info {
  padding: 7px 12px;
  margin: 10px 0;
  background-color: var(--color-markup-code-block);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  font-size: 13px;
  line-height: 1.5;
  overflow: auto;
}

.title_wip_desc {
  margin-top: 1em;
}

.diff-file-box:target {
  border-color: var(--color-primary) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}

.diff-file-header {
  padding: 5px 8px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;

  /* prevent borders from being visible behind top corners when sticky and scrolled,
  this "shadow" is used to use body's color to cover the scrolled-up left and right borders at corners */
  box-shadow: 0 -1px 0 1px var(--color-body);
}

.diff-file-box:target .diff-file-header {
  box-shadow: unset; /* when targeted, still use the parent's box-shadow, remove the patched above */
}

.diff-file-header .file-link {
  max-width: fit-content;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.diff-file-header .button {
  padding: 0 12px;
  flex: 0 0 auto;
  margin-right: 0;
  height: 30px;
}

@media (max-width: 767.98px) {
  .diff-file-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}

.diff-file-box[data-folded="true"] .diff-file-body {
  display: none;
}

.diff-file-box[data-folded="true"] .diff-file-header {
  border-radius: var(--border-radius) !important;
}

.ui.attached.header.diff-file-header.sticky-2nd-row {
  position: sticky;
  top: 44px; /* match .repository .diff-detail-box */
  z-index: 7;
}

.diff-file-name {
  flex: auto;
  min-width: 100px;
}

.diff-file-name .ui.label {
  margin-left: 0 !important;
}

.diff-stats-bar {
  display: inline-block;
  background-color: var(--color-diff-removed-fg); /* the background is used as "text foreground color" */
  height: 12px;
  width: 44px;
}

.diff-stats-bar .diff-stats-add-bar {
  background-color: var(--color-diff-added-fg);
  height: 100%;
}

.ui.form .right .ui.button {
  margin-left: 0.25em;
  margin-right: 0;
}

.removed-code {
  color: var(--color-text);
  background: var(--color-diff-removed-word-bg);
}

.removed-code span {
  color: inherit !important;
}

.added-code {
  color: var(--color-text);
  background: var(--color-diff-added-word-bg);
}

.added-code span {
  color: inherit !important;
}

.code-diff-unified .del-code,
.code-diff-unified .del-code td,
.code-diff-split .del-code .lines-num-old,
.code-diff-split .del-code .lines-escape-old,
.code-diff-split .del-code .lines-type-marker-old,
.code-diff-split .del-code .lines-code-old {
  background: var(--color-diff-removed-row-bg);
  border-color: var(--color-diff-removed-row-border);
}

.code-diff-unified .add-code,
.code-diff-unified .add-code td,
.code-diff-split .add-code .lines-type-marker-new,
.code-diff-split .add-code .lines-escape-new,
.code-diff-split .add-code .lines-code-new,
.code-diff-split .del-code .add-code.lines-type-marker-new,
.code-diff-split .del-code .add-code.lines-escape-new,
.code-diff-split .del-code .add-code.lines-code-new {
  background: var(--color-diff-added-row-bg);
  border-color: var(--color-diff-added-row-border);
}

.code-diff-split .del-code .lines-type-marker-new,
.code-diff-split .del-code .lines-code-new,
.code-diff-split .del-code .lines-escape-new,
.code-diff-split .add-code .lines-escape-old,
.code-diff-split .add-code .lines-type-marker-old,
.code-diff-split .add-code .lines-code-old {
  background: var(--color-diff-inactive);
}

.code-diff-split .add-code .lines-num.lines-num-old,
.code-diff-split .del-code .lines-num.lines-num-new {
  background: var(--color-diff-inactive);
}

.code-diff-unified .del-code .lines-num,
.code-diff-split .del-code .lines-num {
  background: var(--color-diff-removed-linenum-bg);
  color: var(--color-text);
}

.code-diff-unified .add-code .lines-num,
.code-diff-split .add-code .lines-num,
.code-diff-split .del-code .add-code.lines-num {
  background: var(--color-diff-added-linenum-bg);
  color: var(--color-text);
}

.code-diff-split tbody tr td:nth-child(5),
.code-diff-split tbody tr td.add-comment-right {
  border-left: 1px solid var(--color-secondary);
}

.migrate-entries {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  .migrate-entries {
    grid-template-columns: repeat(1, 1fr);
  }
}

.migrate-entry {
  transition: all 0.1s ease-in-out;
  box-shadow: none !important;
  border: 1px solid var(--color-secondary);
  color: var(--color-text) !important;
  width: auto !important;
  margin: 0 !important;
}

.migrate-entry:hover {
  transform: scale(105%);
  box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
}

.commits-table .commits-table-right form {
  display: flex;
  align-items: center;
  gap: 0.75em;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .repository.view.issue .comment-list .timeline,
  .repository.view.issue .comment-list .timeline-item {
    margin-left: 0;
  }
  .repository.view.issue .comment-list .timeline::before {
    left: 14px;
  }
  .repository.view.issue .comment-list .timeline .inline-timeline-avatar {
    display: flex;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 2px;
  }
  .repository.view.issue .comment-list .timeline .comment-header {
    padding-left: 4px;
  }
  /* Don't show the general avatar, we show the inline avatar on mobile.
   * And don't show the role labels, there's no place for that. */
  .repository.view.issue .comment-list .timeline .timeline-avatar,
  .repository.view.issue .comment-list .timeline .comment-header-right .role-label {
    display: none;
  }
  .commit-header h3 {
    flex-basis: auto !important;
    margin-bottom: 0.5rem !important;
  }
  .commits-table {
    flex-direction: column;
  }
  .commits-table .commits-table-left {
    align-items: initial !important;
    margin-bottom: 6px;
  }
  .commits-table .commits-table-right form > div:nth-child(1) {
    order: 1; /* the "commit search" input */
  }
  .commits-table .commits-table-right form > div:nth-child(2) {
    order: 3; /* the "search all" checkbox */
  }
  .commits-table .commits-table-right form > button:nth-child(3) {
    order: 2; /* the "search" button */
  }
  .commit-table {
    overflow-x: auto;
  }
  .commit-table td.sha,
  .commit-table th.sha {
    display: none !important;
  }
}

.commit-status-header {
  /* reset the default ".ui.attached.header" styles, to use the outer border */
  border: none !important;
  /* add a bottom border to make sure the there is always a divider between the header and list when the list is scrolling */
  border-bottom: 1px solid var(--color-secondary) !important;
  /* use negative margin to avoid the newly added border conflict with the list's top border */
  margin: 0 0 -1px !important;
}

.commit-status-list {
  max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */
  overflow-x: hidden;
  transition: max-height .2s;
}

.commit-status-item {
  height: 40px;
  padding: 0 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.commit-status-item + .commit-status-item {
  border-top: 1px solid var(--color-secondary);
}

.commit-status-item .commit-status {
  flex-shrink: 0;
}

.commit-status-item .status-context {
  color: var(--color-text);
  flex: 1;
}

.commit-status-item .status-details {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767.98px) {
  .commit-status-item .status-details {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }
}

.commit-status-item .status-details > span {
  padding-right: 0.5em; /* To match the alignment with the "required" label */
}

.username-display {
  max-width: 100%; /* the inner part might have "gt-ellipsis" */
  min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
  display: inline-flex;
  gap: var(--gap-inline);
  align-items: center;
}

.username-display > .username-fullname {
  color: var(--color-text-light-2);
}

#issue-pins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 767.98px) {
  #issue-pins {
    grid-template-columns: repeat(1, 1fr);
  }
}

#cherry-pick-modal .scrolling.menu {
  max-height: 200px;
}

.branch-selector-dropdown {
  max-width: 100%;
}

.ui.dropdown.branch-selector-dropdown > .menu {
  margin-top: 4px;
}

.ui.dropdown.branch-selector-dropdown .scrolling.menu {
  max-width: min(400px, 90vw);
}

.branch-selector-dropdown .ui.button.branch-dropdown-button {
  margin: 0;
  max-width: 340px;
  line-height: var(--line-height-default);
  padding: 0 0.5em 0 0.75em;
}

/* FIXME: These media selectors are not ideal (just keep them from old code).
    There are many different pages, some need the max-width while some others don't,
    they should be tested and improved in the future. */

@media (min-width: 768px) and (max-width: 1235px) {
  .branch-selector-dropdown .branch-dropdown-button {
    max-width: 301px;
  }
}

@media (max-width: 767.98px) {
  .branch-selector-dropdown .branch-dropdown-button {
    max-width: 165px;
  }
}

.branch-selector-dropdown .branch-tag-tab {
  padding: 0 10px;
}

.branch-selector-dropdown .branch-tag-item {
  display: inline-block;
  padding: 10px;
  border: 1px solid transparent;
  border-bottom: none;
}

.branch-selector-dropdown .branch-tag-item.active {
  border-color: var(--color-secondary);
  background: var(--color-menu);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.branch-selector-dropdown .branch-tag-divider {
  margin-top: -1px !important;
  border-top: 1px solid var(--color-secondary);
}

.branch-selector-dropdown .scrolling.menu {
  border-top: none !important;
}

.branch-selector-dropdown .menu .item .rss-icon {
  position: absolute;
  right: 4px;
  visibility: hidden; /* only show RSS icon on hover */
}

.branch-selector-dropdown .menu .item:hover .rss-icon {
  visibility: visible;
}

.branch-selector-dropdown .scrolling.menu .loading-indicator {
  height: 4em;
}

#release-list {
  display: flex;
  flex-direction: column;
  gap: var(--page-spacing);
  padding-left: 0;
}

#release-list .release-list-title {
  font-size: 2rem;
  font-weight: var(--font-weight-normal);
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
}

#release-list .release-entry {
  display: flex;
  gap: var(--page-spacing);
}

#release-list .release-entry .meta {
  flex: 0 0 150px;
  position: relative;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#release-list .release-entry .detail {
  flex: 1;
  margin: 0;
  min-width: 0;
}

@media (max-width: 767.98px) {
  #release-list .release-entry {
    flex-direction: column;
    gap: var(--page-spacing);
  }
  #release-list .release-entry .meta {
    margin-left: 6px;
    flex-direction: row;
    flex-basis: auto;
    display: flex;
    align-items: center;
  }
  #release-list .release-branch-tag-selector {
    margin-left: auto;
  }
  #release-list .branch-selector-dropdown .menu { /* open menu to left */
    right: 0;
    left: auto;
  }
}

#release-list .release-entry .detail .author img {
  margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */
}

#release-list .release-entry .attachment-list {
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
}

#release-list .release-entry .attachment-list > .item {
  display: flex;
  padding: 8px;
  flex-wrap: wrap;
}

#release-list .release-entry .attachment-list > .item a {
  min-width: 300px;
}

#release-list .release-entry .attachment-list .attachment-right-info {
  flex-shrink: 0;
  min-width: 300px;
}

#release-list .release-entry .detail .download[open] summary {
  margin-bottom: 10px;
}

#release-list .download-icon {
  color: var(--color-text-light-1);
}

#release-list .release-entry .detail .download .list li:last-child {
  border-bottom: none;
}

#tags-table .tag-list-row-title {
  font-size: 18px;
  font-weight: var(--font-weight-normal);
}

.issue-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  border-radius: var(--border-radius);
  padding: 8px 10px;
  border: 1px solid var(--color-secondary);
  background: var(--color-card);
  color: var(--color-text); /* it can't inherit from parent because the card already has its own background */
}

.issue-card-icon,
.issue-card-unpin {
  margin-top: 1px;
  flex-shrink: 0;
}

.issue-card-title {
  flex: 1;
  font-size: 14px;
}

.issue-card.sortable-chosen .issue-card-title {
  cursor: inherit;
}

.issue-card-bottom {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1em;
}

.issue-card-bottom-part {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.25em;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: fit-content;
  max-height: fit-content;
}

.issue-label-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.issue-label-list > .item {
  border-bottom: 1px solid var(--color-secondary);
  display: flex;
  padding: 1em 0;
  margin: 0;
}

.issue-label-list > .item:first-child {
  padding-top: 0;
}

.issue-label-list > .item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.issue-label-list > .item .label-title {
  width: 33%;
  padding-right: 1em;
}

.issue-label-list > .item .label-issues {
  width: 33%;
  padding-right: 1em;
}

.issue-label-list > .item .label-operation {
  width: 33%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: end;
  align-items: center;
}

.issue-label-list > .item .label-operation a {
  font-size: 12px;
}

.issue-label-list > .item.org-label {
  opacity: 0.7;
}

.label-operation .label {
  height: fit-content;
}

.archived-label-hint {
  position: absolute;
  top: 10px;
  right: 5px;
}

.issue-list-toolbar {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

.issue-list-toolbar-left {
  display: flex;
  align-items: center;
}

.issue-list-toolbar-right .filter.menu {
  flex-direction: row;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .issue-list-toolbar-right .dropdown .menu {
    left: auto !important;
    right: auto !important;
  }
  .issue-list-navbar {
    order: 0;
  }
  .issue-list-new {
    order: 1;
    margin-left: auto !important;
  }
  .issue-list-search {
    order: 2 !important;
  }
}

#issue-list .flex-item-body .branches {
  display: inline-flex;
}

#issue-list .flex-item-body .branches .branch {
  background-color: var(--color-secondary-alpha-50);
  border-radius: var(--border-radius);
  padding: 0 4px;
}

#issue-list .flex-item-body .branches .truncated-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  vertical-align: top;
}

#issue-list .flex-item-body .checklist progress {
  margin-left: 2px;
  width: 80px;
  height: 6px;
  display: inline-block;
}

#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
  background-color: var(--color-secondary-dark-4);
}

#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
  background-color: var(--color-secondary-dark-4);
}

.label-filter-archived-toggle {
  margin: 8px 10px;
  font-size: 12px;
  min-width: fit-content;
}

.label-filter-exclude-info {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 12px;
  width: 100%;
  white-space: nowrap;
  margin-left: 10px;
  margin-right: 8px;
  text-align: left;
}

.list-header {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .5rem;
}

.list-header-search {
  display: flex;
  flex: 1;
  align-items: stretch;
  flex-wrap: wrap;
  min-width: 200px; /* to enable flexbox wrapping on mobile */
}

.list-header-search > .ui.input {
  flex: 1;
  min-width: 100px !important;
}

.list-header-search > .ui.input .ui.dropdown {
  min-width: auto !important;
}

.list-header-filters {
  display: flex;
  align-items: center;
}

.list-header-filters > .item {
  padding: 5px 0 5px 10px;
}

@media (max-width: 767.98px) {
  .list-header-search {
    order: 0;
  }
  .list-header-toggle {
    order: 1;
  }
  .list-header-filters {
    order: 2;
  }
}

.file-view tr.active .lines-num,
.file-view tr.active .lines-escape,
.file-view tr.active .lines-code {
  background: var(--color-highlight-bg);
}

/* set correct border radius on the last active lines, to avoid border overflow */

.file-view tr.active:last-of-type .lines-code {
  border-bottom-right-radius: var(--border-radius);
}

.file-view tr.active .lines-num {
  position: relative;
}

/* add a darker "handler" at the beginning of the active line */

.file-view tr.active .lines-num::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--color-highlight-fg);
}

.file-view .file-not-rendered-prompt {
  padding: 1rem;
  text-align: center;
  font-size: 1rem !important; /* use consistent styles for various containers (code, markup, etc) */
  line-height: var(--line-height-default) !important; /* same as above */
}

/* ".code-view" is always used with ".file-view", to show the code of a file */

.file-view.code-view {
  background: var(--color-code-bg);
  border-radius: var(--border-radius);
}

.file-view.code-view table {
  width: 100%;
}

.file-view.code-view .lines-num span::after {
  cursor: pointer;
}

.file-view.code-view .lines-num:hover {
  color: var(--color-text-dark);
}

.file-view.code-view .ui.button.code-line-button {
  border: 1px solid var(--color-secondary);
  padding: 1px 4px;
  margin: 0;
  min-height: 0;
  position: absolute;
  left: 6px;
}

.file-view.code-view .ui.button.code-line-button:hover {
  background: var(--color-secondary);
}

.view-raw {
  display: flex;
  justify-content: center;
}

.view-raw > * {
  max-width: 100%;
}

.view-raw audio,
.view-raw video,
.view-raw img {
  margin: 1rem;
  border-radius: 0;
  object-fit: contain;
}

.view-raw img[src$=".svg" i] {
  max-height: 600px !important;
  max-width: 600px !important;
  background: var(--background-view-image);
}

.file-view-render-container {
  width: 100%;
}

.file-view-render-container :last-child {
  border-radius: 0 0 var(--border-radius) var(--border-radius); /* to match the "ui segment" bottom radius */
}

.repository.wiki .wiki-pages-list .wiki-git-entry {
  margin-left: 10px;
  display: none;
}

.repository.wiki .wiki-pages-list tr:hover .wiki-git-entry {
  display: inline-block;
}

.repository.wiki .markup {
  overflow: visible;
}

.repository.wiki .markup[data-tab-panel="markdown-previewer"] {
  min-height: 340px; /* This height matches the markdown editor's height */
}

.repository.wiki .wiki-content-parts .markup {
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  padding: 1em;
  margin-top: 1em;
  font-size: 1em;
}

.repository.wiki .wiki-content-main.with-sidebar {
  float: left;
  width: 80%;
  max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */
}

.repository.wiki .wiki-content-sidebar {
  float: right;
  width: calc(20% - 1em);
  min-width: 150px;
}

.repository.wiki .wiki-content-footer {
  margin-top: 1em;
}

.repository.wiki .wiki-content-toc ul {
  margin: 0;
  list-style: none;
  padding: 5px 0 5px 1em;
}

.repository.wiki .wiki-content-toc ul ul {
  border-left: 1px var(--color-secondary);
  border-left-style: dashed;
}

@media (max-width: 767.98px) {
  .repository.wiki .wiki-content-main.with-sidebar,
  .repository.wiki .wiki-content-sidebar {
    float: none;
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
}

.repository .secondary-nav {
  padding-top: 12px;
}

.repository .secondary-nav .fork-flag {
  margin-top: 0.5rem;
  font-size: 12px;
}

.repo-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 4px;
}

.repo-header .flex-item {
  padding: 0;
}

.repo-header .flex-item-main {
  flex: 0;
  flex-basis: unset;
}

.repo-header .flex-item-trailing {
  flex-wrap: nowrap;
}

.repo-grid-filelist-sidebar {
  display: grid;
  grid-template-columns: auto 280px;
  grid-template-rows: auto auto 1fr;
  gap: var(--page-spacing);
}

.repo-home-filelist {
  min-width: 0;
  grid-column: 1;
  grid-row: 1 / 4;
}

.repo-home-sidebar-top {
  grid-column: 2;
  grid-row: 1;
}

.repo-home-sidebar-bottom {
  grid-column: 2;
  grid-row: 2;
}

.repo-home-sidebar-bottom .flex-list > :first-child {
  border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
}

@media (max-width: 767.98px) {
  .repo-grid-filelist-sidebar {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
  }
  .repo-home-filelist {
    grid-column: 1;
    grid-row: 2;
  }
  .repo-home-sidebar-top {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
  }
  .repo-home-sidebar-bottom {
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
  }
  .repo-home-sidebar-bottom .flex-list > :first-child {
    border-top: 0;
  }
}

.repo-view-container {
  display: flex;
  gap: var(--page-spacing);
}

.repo-view-file-tree-container {
  display: flex;
  flex-direction: column;
  flex: 0 0 15%;
  min-width: 0;
  max-height: 100vh;
  position: sticky;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: hidden;
}

@media (max-width: 767.98px) {
  .repo-view-file-tree-container {
    display: none;
  }
}

.repo-view-content {
  flex: 1;
  min-width: 0;
}

.language-stats {
  display: flex;
  gap: 2px;
  padding: 0;
  height: 10px;
  white-space: nowrap;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 5px;
}

.language-stats-details {
  display: flex;
  flex-wrap: wrap;
}

.language-stats-details .item {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
  text-decoration: none;
}

#repo-files-table {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr auto;
  border: 1px solid var(--color-secondary);
  background: var(--color-box-body);
  border-radius: var(--border-radius);
  margin: 10px 0; /* match the "clone-panel-popup" margin to avoid "visual double-border" */
}

@media (max-width: 767.98px) {
  #repo-files-table {
    grid-template-columns: auto 1fr auto;
  }
}

#repo-files-table .repo-file-item {
  display: contents;
}

#repo-files-table .repo-file-item:hover > .repo-file-cell,
#repo-files-table .parent-link:hover {
  background: var(--color-hover-opaque);
}

#repo-files-table .repo-file-line,
#repo-files-table .repo-file-cell {
  border-top: 1px solid var(--color-secondary);
  padding: 8px 10px;
}

#repo-files-table .repo-file-line:first-child {
  border-top: none;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

#repo-files-table .repo-file-item:last-child .repo-file-cell:first-child {
  border-bottom-left-radius: calc(var(--border-radius) - 1px);
}

#repo-files-table .repo-file-item:last-child .repo-file-cell:last-child {
  border-bottom-right-radius: calc(var(--border-radius) - 1px);
}

#repo-files-table .repo-file-line {
  grid-column: 1 / span 3;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

#repo-files-table .repo-file-last-commit {
  min-width: 0; /* otherwise the flex axis is not limited and the text might overflow in Pale Moon */
  background: var(--color-box-header);
}

#repo-files-table .repo-file-cell.name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  overflow: hidden;
}

#repo-files-table .repo-file-cell.name > a,
#repo-files-table .repo-file-cell.name > span {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#repo-files-table .repo-file-cell.name .entry-name {
  flex-shrink: 1;
  min-width: 1ch; /* leave about one letter space when shrinking, need to fine tune the "shrinks" in this grid in the future */
}

@media (max-width: 767.98px) {
  #repo-files-table .repo-file-cell.name {
    max-width: 35vw;
  }
}

#repo-files-table .repo-file-cell.message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-light-1);
}

#repo-files-table .repo-file-cell.age {
  text-align: right;
  white-space: nowrap;
  color: var(--color-text-light-1);
}

.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.visible {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
}

.ui.dropdown.select-reaction .menu > .item {
  width: 34px;
  height: 34px;
  font-size: 16px;
  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;
}

/* only used by "repo/empty.tmpl" */

.clone-buttons-combo {
  display: flex;
  align-items: stretch;
  flex: 1;
}

.clone-buttons-combo > .ui.button:not(:last-child) {
  border-right: none;
}

.ui.action.input.clone-buttons-combo input {
  border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */
}

/* used by the clone-panel popup */

.clone-panel-field,
.clone-panel-list {
  margin: 10px;
}

.clone-panel-tab .item {
  padding: 5px 10px;
  background: none;
  color: var(--color-text-light-2);
}

.clone-panel-tab .item.active {
  color: var(--color-text-dark);
  border-bottom: 3px solid currentcolor;
}

.clone-panel-tab + .divider {
  margin: -1px 0 0;
}

.clone-panel-list .item {
  margin: 5px 0;
}

.ui.label.commit-id-short,
.ui.label.commit-sign-badge {
  border: 1px solid var(--color-light-border);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  padding: 3px 5px;
  flex-shrink: 0;
}

.ui.label.commit-sign-badge > * {
  display: flex;
}

.ui.label.commit-id-short {
  font-family: var(--fonts-monospace);
  height: 24px;
}

.ui.label.commit-id-short > .commit-sign-badge {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}

.ui.label.commit-id-short > .commit-sign-badge:hover {
  background: transparent !important;
}

.commit-is-signed.sign-trusted {
  border: 1px solid var(--color-green-badge) !important;
  background: var(--color-green-badge-bg) !important;
}

.commit-is-signed.sign-trusted:hover {
  background: var(--color-green-badge-hover-bg) !important;
}

.commit-is-signed.sign-untrusted {
  border: 1px solid var(--color-yellow-badge) !important;
  background: var(--color-yellow-badge-bg) !important;
}

.commit-is-signed.sign-untrusted:hover {
  background: var(--color-yellow-badge-hover-bg) !important;
}

.commit-is-signed.sign-unmatched {
  border: 1px solid var(--color-orange-badge) !important;
  background: var(--color-orange-badge-bg) !important;
}

.commit-is-signed.sign-unmatched:hover {
  background: var(--color-orange-badge-hover-bg) !important;
}

.commit-is-signed.sign-warning {
  border: 1px solid var(--color-red-badge) !important;
  background: var(--color-red-badge-bg) !important;
}

.commit-is-signed.sign-warning:hover {
  background: var(--color-red-badge-hover-bg) !important;
}

.packages-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.packages-content-left {
  margin: 0 !important;
  width: calc(100% - 250px - 16px);
}

.packages-content-right {
  margin: 0 !important;
  width: 250px;
}

@media (max-width: 767.98px) {
  .packages-content {
    flex-direction: column;
  }
  .packages-content-left,
  .packages-content-right {
    width: 100%;
  }
}

.combo-markdown-editor {
  width: 100%;
}

.combo-markdown-editor markdown-toolbar {
  cursor: default;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.combo-markdown-editor .markdown-toolbar-group {
  display: flex;
  border-left: 1px solid var(--color-secondary);
  padding: 0 0.5em;
}

.combo-markdown-editor .markdown-toolbar-group:first-child {
  border-left: 0;
  padding-left: 0;
}

.combo-markdown-editor .markdown-toolbar-group:last-child {
  flex: 1;
  justify-content: flex-end;
  border-right: none;
  border-left: 0;
  padding-right: 0;
}

.combo-markdown-editor .markdown-toolbar-button {
  border: none;
  background: none;
  user-select: none;
  padding: 5px;
  cursor: pointer;
  color: var(--color-text);
}

.combo-markdown-editor .markdown-toolbar-button:hover {
  color: var(--color-primary);
}

.combo-markdown-editor md-header {
  position: relative;
}

.combo-markdown-editor md-header::after {
  font-size: 10px;
  position: absolute;
  top: 7px;
}

.combo-markdown-editor md-header[level="1"]::after {
  content: "1";
}

.combo-markdown-editor md-header[level="2"]::after {
  content: "2";
}

.combo-markdown-editor md-header[level="3"]::after {
  content: "3";
}

.ui.form .combo-markdown-editor textarea.markdown-text-editor,
.combo-markdown-editor textarea.markdown-text-editor {
  display: block;
  width: 100%;
  max-height: calc(100vh - var(--min-height-textarea));
  resize: vertical;
}

.combo-markdown-editor .CodeMirror-scroll {
  max-height: calc(100vh - var(--min-height-textarea));
}

/* use the same styles as markup/content.css */

.combo-markdown-editor .CodeMirror-scroll .cm-header-1 {
  font-size: 2em;
}

.combo-markdown-editor .CodeMirror-scroll .cm-header-2 {
  font-size: 1.5em;
}

.combo-markdown-editor .CodeMirror-scroll .cm-header-3 {
  font-size: 1.25em;
}

.combo-markdown-editor .CodeMirror-scroll .cm-header-4 {
  font-size: 1em;
}

.combo-markdown-editor .CodeMirror-scroll .cm-header-5 {
  font-size: 0.875em;
}

.combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
  font-size: 0.85em;
}

.combo-markdown-editor .ui.tab.markup[data-tab-panel="markdown-previewer"] {
  border-bottom: 1px solid var(--color-secondary);
  padding-bottom: 1rem;
}

.organization .head .ui.header .ui.right {
  margin-top: 5px;
}

.page-content.organization .org-avatar {
  margin-right: 15px;
}

.page-content.organization #org-info .ui.header {
  display: flex;
  align-items: center;
  font-size: 36px;
  margin-bottom: 0;
}

.page-content.organization #org-info .desc {
  font-size: 16px;
  margin-bottom: 10px;
}

.page-content.organization #org-info .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.page-content.organization .ui.top.header .ui.right {
  margin-top: 0;
}

.page-content.organization .teams .item {
  padding: 10px 15px;
}

.page-content.organization .members .ui.avatar {
  margin-right: 5px;
  margin-bottom: 5px;
}

.organization.invite #invite-box {
  margin: 50px auto auto;
  width: 500px !important;
}

.organization.invite #invite-box #search-user-box input {
  margin-left: 0;
  width: 300px;
}

.organization.invite #invite-box .ui.button {
  margin-left: 5px;
  margin-top: -3px;
}

.organization.invite .ui.avatar {
  width: 100%;
  height: 100%;
}

.organization.teams .detail .item {
  padding: 10px 15px;
}

.organization.teams .detail .item:not(:last-child) {
  border-bottom: 1px solid var(--color-secondary);
}

.org-team-navbar .active.item {
  background: var(--color-box-body) !important;
}

.user.profile .ui.card .header {
  display: block;
  font-weight: var(--font-weight-semibold);
  font-size: 1.3rem;
  margin-top: -0.2rem;
  line-height: 1.3rem;
}

.user.profile .ui.card .profile-avatar-name {
  border-top: none;
  text-align: center;
}

.user.profile .ui.card .extra.content {
  padding: 0;
}

.user.profile .ui.card .extra.content > ul {
  margin: 0;
  padding: 0;
}

.user.profile .ui.card .extra.content > ul > li {
  padding: 10px;
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0.25em;
}

.user.profile .ui.card .extra.content > ul > li:not(:last-child) {
  border-bottom: 1px solid var(--color-secondary);
}

.user.profile .ui.card .extra.content > ul > li.follow .ui.button {
  width: 100%;
}

.user.profile .ui.card #profile-avatar {
  padding: 1rem 1rem 0.25rem;
  justify-content: center;
}

.user.profile .ui.card #profile-avatar img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .user.profile .ui.card #profile-avatar img {
    width: 30vw;
  }
  .user.profile .ui.card {
    width: 100%;
  }
}

.user.profile .ui.secondary.stackable.pointing.menu {
  flex-wrap: wrap;
}

.user.followers .header.name {
  font-size: 20px;
  line-height: 24px;
  vertical-align: middle;
}

.user.followers .follow .ui.button {
  padding: 8px 15px;
}

.user.link-account:not(.icon) {
  padding-top: 15px;
  padding-bottom: 5px;
}

.user-orgs {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  margin: -3px !important;
}

.user-orgs > li {
  display: flex;
  border-bottom: 0 !important;
  padding: 3px !important;
  max-width: 60px;
}

.user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
}

.user-badge-item {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: max-content;
}

.user-badges img {
  object-fit: contain;
}

.user-badge-chip {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
  min-width: max-content;
}

#readme_profile {
  padding: 1em 2em;
  border-radius: var(--border-radius);
  background: var(--color-card);
  border: 1px solid var(--color-secondary);
}

#notification_table {
  background: var(--color-box-body);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
}

.notifications-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.5em 1em;
  overflow-wrap: anywhere;
}

.notifications-item:hover {
  background: var(--color-hover);
}

.notifications-buttons {
  display: none;
  min-width: 74px;
}

.notifications-updated {
  display: flex;
}

.notifications-item:hover .notifications-buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.25em;
}

.notifications-item:hover .notifications-updated {
  display: none;
}

.dashboard.feeds .context.user.menu,
.dashboard.issues .context.user.menu {
  z-index: 101;
  min-width: 200px;
}

.dashboard.feeds .context.user.menu .ui.header,
.dashboard.issues .context.user.menu .ui.header {
  font-size: 1rem;
}

.dashboard.feeds .filter.menu,
.dashboard.issues .filter.menu {
  width: initial;
}

.dashboard.feeds .filter.menu .item,
.dashboard.issues .filter.menu .item {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sort */

.dashboard.feeds .filter.menu .jump.item,
.dashboard.issues .filter.menu .jump.item {
  margin: 1px;
  padding-right: 0;
}

.dashboard.feeds .filter.menu .menu,
.dashboard.issues .filter.menu .menu {
  max-height: 300px;
  overflow-x: auto;
  right: 0 !important;
  left: auto !important;
}

@media (max-width: 767.98px) {
  .dashboard.feeds .filter.menu,
  .dashboard.issues .filter.menu {
    width: 100%;
  }
}

.dashboard.feeds .right.stackable.menu > .item.active,
.dashboard.issues .right.stackable.menu > .item.active {
  color: var(--color-red);
}

.dashboard .dashboard-repos,
.dashboard .dashboard-orgs {
  margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
}

.dashboard .secondary-nav {
  padding: 1px 12px; /* match .overflow-menu-items in height */
}

.dashboard .secondary-nav .org-visibility .label {
  margin-left: 5px;
}

.dashboard .secondary-nav .ui.dropdown {
  max-width: 100%;
}

.admin.hooks .list > .item:not(:first-child) {
  border-top: 1px solid var(--color-secondary);
  padding: 0.25rem 1rem;
  margin: 12px -1rem -1rem;
}

.admin dl.admin-dl-horizontal {
  padding: 1em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.admin dl.admin-dl-horizontal dt,
.admin dl.admin-dl-horizontal dd {
  line-height: var(--line-height-default);
  padding: 5px 0;
}

.admin dl.admin-dl-horizontal dt {
  width: 300px;
  max-width: calc(100% - 100px - 1em);
  font-weight: var(--font-weight-semibold);
}

.admin dl.admin-dl-horizontal dd {
  margin-left: auto;
  width: calc(100% - 300px - 1em);
  min-width: 100px;
}

.admin code,
.admin pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.admin .ui.table.segment {
  overflow-x: auto; /* if the screen width is small, many wide tables (eg: user list) need scroll bars */
}

.admin .table th {
  white-space: nowrap;
}

.admin-responsive-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.web-banner-content-editor .render-content.render-preview {
  /* use the styles from ".ui.message" */
  padding: 1em 1.5em;
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* FIXME: need to refactor the repo branches list page and move these styles to proper place */

.ui.repository.branches .info {
  font-size: 12px;
  color: var(--color-text-light);
  display: flex;
  white-space: pre;
}

.ui.repository.branches .info .commit-message {
  max-width: 72em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui.button.add-code-comment {
  padding: 2px;
  position: absolute;
  margin-left: -22px;
  min-height: 0;
  z-index: 5;
  opacity: 0;
  transition: transform 0.1s ease-in-out;
  transform: scale(1);
  box-shadow: none !important;
  border: none !important;
}

.ui.button.add-code-comment:hover {
  transform: scale(1.1);
}

.lines-escape .toggle-escape-button {
  margin: -1px 2px 0;
}

.lines-escape .toggle-escape-button::before {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-color: var(--color-yellow); /* TODO: maybe it needs a new kind of color, there is no suitable "warning" color in the current palette */
  mask-image: var(--octicon-alert-fill);
  -webkit-mask-image: var(--octicon-alert-fill);
  mask-size: contain;
  -webkit-mask-size: contain;
}

.repository .diff-file-box .code-diff td.lines-escape {
  padding-left: 0 !important;
}

.diff-file-box .lines-code:hover .ui.button.add-code-comment {
  opacity: 1;
}

.ui.button.add-code-comment:focus {
  opacity: 1;
}

.repository .diff-file-box .code-diff .add-comment-left,
.repository .diff-file-box .code-diff .add-comment-right,
.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.add-comment-left.add-comment-right .ui.attached.header {
  border: 1px solid var(--color-secondary);
}

.add-comment-left.add-comment-right .ui.attached.header:not(.top) {
  margin-bottom: 0.5em;
}

.comment-code-cloud {
  padding: 0.5rem !important;
  position: relative;
}

.code-diff .conversation-holder .comment-code-cloud {
  max-width: 820px;
}

.comment-code-cloud .comments .comment {
  padding: 0;
}

.comment-code-cloud .attached.tab {
  border: 0;
  padding: 0;
  margin: 0;
}

.comment-code-cloud .attached.header {
  padding: 1px 8px 1px 12px;
}

@media (max-width: 767.98px) {
  .comment-code-cloud .attached.header {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.comment-code-cloud .attached.header .text {
  margin: 0;
}

.comment-code-cloud .right.menu.options .item {
  padding: 0.85714286em 0.442857em;
  cursor: pointer;
}

.comment-code-cloud .ui.active.tab.markup {
  padding: 1em;
  min-height: 168px;
}

.comment-code-cloud .editor-statusbar {
  display: none;
}

.comment-code-cloud .footer {
  padding: 10px 0;
}

.diff-file-body .comment-form {
  margin: 0 0 0 3em;
}

.diff-file-body.binary {
  padding: 5px 10px;
}

.file-comment {
  color: var(--color-text);
}

.code-expander-buttons {
  position: relative;
}

.code-expander-buttons .code-comment-more {
  position: absolute;
  line-height: 12px;
  padding: 2px 4px;
  font-size: 10px;
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: 8px !important;
  left: -12px;
  top: 6px;
  text-align: center;
}

.code-expander-button {
  border: none;
  color: var(--color-text-light);
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--color-expand-button);
  flex: 1;
}

/* expand direction "updown" is both ways with two buttons */

.code-expander-buttons[data-expand-direction="updown"] .code-expander-button {
  height: 18px;
}

.code-expander-button:hover {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.review-box-panel .ui.segment {
  border: none;
}

/* See the comment of createCommentEasyMDE() for the review editor */

/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */

.review-box-panel .CodeMirror-scroll {
  min-height: 80px;
  max-height: calc(100vh - 360px);
}

.review-box-panel .combo-markdown-editor {
  width: 730px; /* this width matches current EasyMDE's toolbar's width */
  max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
}

#review-box {
  position: relative;
}

#review-box .review-comments-counter {
  background-color: var(--color-primary-light-4);
  color: var(--color-primary-contrast);
}

#review-box:hover .review-comments-counter {
  background-color: var(--color-primary-light-5);
}

#review-box .review-comments-counter[data-pending-comment-number="0"] {
  display: none;
}

.pull.files.diff .comment {
  scroll-margin-top: 99px;
}

@media (max-width: 991.98px) {
  .pull.files.diff .comment {
    scroll-margin-top: 130px;
  }
}

.changed-since-last-review {
  border: 1px var(--color-accent) solid;
  background-color: var(--color-small-accent);
  border-radius: var(--border-radius);
  padding: 4px 8px;
  margin: -8px 0; /* just like other buttons in the diff box header */
  font-size: 0.857rem; /* just like .ui.tiny.button */
}

.viewed-file-form {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  font-size: 0.857rem; /* just like .ui.tiny.button */
}

@media (max-width: 767.98px) {
  .viewed-file-form {
    margin-left: auto;
  }
}

.viewed-file-form input {
  margin-right: 4px;
}

.viewed-file-checked-form {
  background-color: var(--color-small-accent);
  border-color: var(--color-accent);
}

#viewed-files-summary {
  width: 100%;
  height: 8px;
}

.runner-container {
  padding-bottom: 30px;
}

.runner-container .ui.table.segment {
  overflow-x: auto;
}

.runner-container .task-status-success {
  background-color: var(--color-green);
  color: var(--color-white);
}

.runner-container .task-status-failure {
  background-color: var(--color-red-light);
  color: var(--color-white);
}

.runner-container .task-status-running {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.runner-container .task-status-cancelled,
.runner-container .task-status-blocked {
  background-color: var(--color-yellow);
  color: var(--color-white);
}

.run-list-item-right {
  width: 130px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 3px;
  color: var(--color-text-light);
}

.run-list-item-right .run-list-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  align-items: center;
}

.run-list .flex-item-trailing {
  flex-wrap: nowrap;
  width: 280px;
  flex: 0 0 280px;
}

.run-list-ref {
  display: inline-block !important;
  max-width: 105px;
}

@media (max-width: 767.98px) {
  .run-list .flex-item-trailing {
    flex-direction: column;
    align-items: flex-end;
    width: auto;
    flex-basis: auto;
  }
  .run-list-item-right,
  .run-list-ref {
    max-width: 110px;
  }
}

/*
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
Gitea's private styles use `g-` prefix.
*/

.gt-ellipsis {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.g-table-auto-ellipsis td.auto-ellipsis {
  position: relative;
}

.g-table-auto-ellipsis td.auto-ellipsis span {
  position: absolute;
  inset: 0;
  padding: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.interact-fg { color: inherit !important; }

.interact-fg:hover { color: var(--color-primary) !important; }

.interact-fg:active { color: var(--color-primary-active) !important; }

.interact-bg { background: transparent !important; }

.interact-bg:hover { background: var(--color-hover) !important; }

.interact-bg:active { background: var(--color-active) !important; }

@media (max-width: 767.98px) {
  /* double selector so it wins over .tw-flex (old .gt-df) etc */
  .not-mobile.not-mobile {
    display: none !important;
  }
}

@media (min-width: 767.98px) {
  .only-mobile.only-mobile {
    display: none !important;
  }
}

.tab-size-1 { tab-size: 1 !important; }

.tab-size-2 { tab-size: 2 !important; }

.tab-size-3 { tab-size: 3 !important; }

.tab-size-4 { tab-size: 4 !important; }

.tab-size-5 { tab-size: 5 !important; }

.tab-size-6 { tab-size: 6 !important; }

.tab-size-7 { tab-size: 7 !important; }

.tab-size-8 { tab-size: 8 !important; }

.tab-size-9 { tab-size: 9 !important; }

.tab-size-10 { tab-size: 10 !important; }

.tab-size-11 { tab-size: 11 !important; }

.tab-size-12 { tab-size: 12 !important; }

.tab-size-13 { tab-size: 13 !important; }

.tab-size-14 { tab-size: 14 !important; }

.tab-size-15 { tab-size: 15 !important; }

.tab-size-16 { tab-size: 16 !important; }

.tw-pointer-events-none {
  pointer-events: none !important;
}

.tw-invisible {
  visibility: hidden !important;
}

.tw-relative {
  position: relative !important;
}

.tw-z-1 {
  z-index: 1 !important;
}

.tw-float-right {
  float: right !important;
}

.tw-clear-both {
  clear: both !important;
}

.tw-m-0 {
  margin: 0px !important;
}

.tw-m-1 {
  margin: 0.25rem !important;
}

.tw-m-auto {
  margin: auto !important;
}

.tw-mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.tw-mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.tw-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.tw-my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.tw-my-0\.5 {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

.tw-my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.tw-my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.tw-my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.tw-my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.tw-my-5 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.tw-my-\[--page-spacing\] {
  margin-top: var(--page-spacing) !important;
  margin-bottom: var(--page-spacing) !important;
}

.tw-my-\[2em\] {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}

.tw-my-\[40px\] {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.tw-mb-0 {
  margin-bottom: 0px !important;
}

.tw-mb-1 {
  margin-bottom: 0.25rem !important;
}

.tw-mb-2 {
  margin-bottom: 0.5rem !important;
}

.tw-mb-4 {
  margin-bottom: 1rem !important;
}

.tw-mb-8 {
  margin-bottom: 2rem !important;
}

.tw-mb-\[--page-spacing\] {
  margin-bottom: var(--page-spacing) !important;
}

.tw-ml-0 {
  margin-left: 0px !important;
}

.tw-ml-0\.5 {
  margin-left: 0.125rem !important;
}

.tw-ml-1 {
  margin-left: 0.25rem !important;
}

.tw-ml-2 {
  margin-left: 0.5rem !important;
}

.tw-ml-4 {
  margin-left: 1rem !important;
}

.tw-ml-6 {
  margin-left: 1.5rem !important;
}

.tw-ml-\[-30px\] {
  margin-left: -30px !important;
}

.tw-ml-\[21px\] {
  margin-left: 21px !important;
}

.tw-ml-\[33px\] {
  margin-left: 33px !important;
}

.tw-ml-auto {
  margin-left: auto !important;
}

.tw-mr-0 {
  margin-right: 0px !important;
}

.tw-mr-1 {
  margin-right: 0.25rem !important;
}

.tw-mr-2 {
  margin-right: 0.5rem !important;
}

.tw-mr-4 {
  margin-right: 1rem !important;
}

.tw-mr-5 {
  margin-right: 1.25rem !important;
}

.tw-mr-8 {
  margin-right: 2rem !important;
}

.tw-mr-\[-1px\] {
  margin-right: -1px !important;
}

.tw-mr-\[14px\] {
  margin-right: 14px !important;
}

.tw-mt-0 {
  margin-top: 0px !important;
}

.tw-mt-0\.5 {
  margin-top: 0.125rem !important;
}

.tw-mt-1 {
  margin-top: 0.25rem !important;
}

.tw-mt-2 {
  margin-top: 0.5rem !important;
}

.tw-mt-4 {
  margin-top: 1rem !important;
}

.tw-mt-5 {
  margin-top: 1.25rem !important;
}

.tw-mt-8 {
  margin-top: 2rem !important;
}

.tw-mt-\[2px\] {
  margin-top: 2px !important;
}

.tw-mt-\[3px\] {
  margin-top: 3px !important;
}

.tw-block {
  display: block !important;
}

.tw-inline-block {
  display: inline-block !important;
}

.tw-inline {
  display: inline !important;
}

.tw-flex {
  display: flex !important;
}

.tw-inline-flex {
  display: inline-flex !important;
}

.tw-grid {
  display: grid !important;
}

.tw-contents {
  display: contents !important;
}

.tw-hidden {
  display: none !important;
}

.tw-h-0 {
  height: 0px !important;
}

.tw-h-12 {
  height: 3rem !important;
}

.tw-h-\[40px\] {
  height: 40px !important;
}

.tw-h-\[60px\] {
  height: 60px !important;
}

.tw-h-full {
  height: 100% !important;
}

.tw-min-h-16 {
  min-height: 4rem !important;
}

.tw-min-h-\[40px\] {
  min-height: 40px !important;
}

.tw-w-0 {
  width: 0px !important;
}

.tw-w-1\/5 {
  width: 20% !important;
}

.tw-w-12 {
  width: 3rem !important;
}

.tw-w-2\/5 {
  width: 40% !important;
}

.tw-w-24 {
  width: 6rem !important;
}

.tw-w-3\/4 {
  width: 75% !important;
}

.tw-w-4\/5 {
  width: 80% !important;
}

.tw-w-\[100px\] {
  width: 100px !important;
}

.tw-w-\[40px\] {
  width: 40px !important;
}

.tw-w-\[50\%\] {
  width: 50% !important;
}

.tw-w-auto {
  width: auto !important;
}

.tw-w-full {
  width: 100% !important;
}

.tw-min-w-\[120px\] {
  min-width: 120px !important;
}

.tw-min-w-\[300px\] {
  min-width: 300px !important;
}

.tw-max-w-2xl {
  max-width: 42rem !important;
}

.tw-max-w-48 {
  max-width: 12rem !important;
}

.tw-max-w-96 {
  max-width: 24rem !important;
}

.tw-max-w-\[160px\] {
  max-width: 160px !important;
}

.tw-max-w-\[220px\] {
  max-width: 220px !important;
}

.tw-max-w-\[300px\] {
  max-width: 300px !important;
}

.tw-max-w-\[48em\] {
  max-width: 48em !important;
}

.tw-max-w-\[500px\] {
  max-width: 500px !important;
}

.tw-max-w-\[8em\] {
  max-width: 8em !important;
}

.tw-max-w-full {
  max-width: 100% !important;
}

.tw-flex-1 {
  flex: 1 1 0% !important;
}

.tw-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.tw-shrink-0 {
  flex-shrink: 0 !important;
}

.tw-grow {
  flex-grow: 1 !important;
}

.tw-cursor-default {
  cursor: default !important;
}

.tw-cursor-grab {
  cursor: grab !important;
}

.tw-cursor-grabbing {
  cursor: grabbing !important;
}

.tw-cursor-pointer {
  cursor: pointer !important;
}

.tw-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.tw-flex-col {
  flex-direction: column !important;
}

.tw-flex-wrap {
  flex-wrap: wrap !important;
}

.tw-items-start {
  align-items: flex-start !important;
}

.tw-items-center {
  align-items: center !important;
}

.tw-justify-end {
  justify-content: flex-end !important;
}

.tw-justify-center {
  justify-content: center !important;
}

.tw-justify-between {
  justify-content: space-between !important;
}

.tw-gap-1 {
  gap: 0.25rem !important;
}

.tw-gap-2 {
  gap: 0.5rem !important;
}

.tw-gap-3 {
  gap: 0.75rem !important;
}

.tw-gap-4 {
  gap: 1rem !important;
}

.tw-gap-5 {
  gap: 1.25rem !important;
}

.tw-gap-\[5px\] {
  gap: 5px !important;
}

.tw-gap-x-1 {
  column-gap: 0.25rem !important;
}

.tw-gap-x-2 {
  column-gap: 0.5rem !important;
}

.tw-gap-y-2 {
  row-gap: 0.5rem !important;
}

.tw-self-start {
  align-self: flex-start !important;
}

.tw-overflow-auto {
  overflow: auto !important;
}

.tw-overflow-hidden {
  overflow: hidden !important;
}

.tw-overflow-visible {
  overflow: visible !important;
}

.tw-overflow-x-scroll {
  overflow-x: scroll !important;
}

.tw-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tw-whitespace-nowrap {
  white-space: nowrap !important;
}

.tw-whitespace-pre {
  white-space: pre !important;
}

.tw-whitespace-pre-line {
  white-space: pre-line !important;
}

.tw-whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

.tw-text-balance {
  text-wrap: balance !important;
}

.tw-rounded {
  border-radius: var(--border-radius) !important;
}

.tw-rounded-b {
  border-bottom-right-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.tw-border {
  border-width: 1px !important;
}

.tw-border-b {
  border-bottom-width: 1px !important;
}

.tw-border-dashed {
  border-style: dashed !important;
}

.tw-border-error-border {
  border-color: var(--color-error-border) !important;
}

.tw-border-info-border {
  border-color: var(--color-info-border) !important;
}

.tw-border-red {
  border-color: var(--color-red) !important;
}

.tw-border-secondary {
  border-color: var(--color-secondary) !important;
}

.tw-border-success-border {
  border-color: var(--color-success-border) !important;
}

.tw-border-warning-border {
  border-color: var(--color-warning-border) !important;
}

.tw-border-b-secondary {
  border-bottom-color: var(--color-secondary) !important;
}

.tw-bg-blue {
  background-color: var(--color-blue) !important;
}

.tw-bg-box-body {
  background-color: var(--color-box-body) !important;
}

.tw-bg-error-bg {
  background-color: var(--color-error-bg) !important;
}

.tw-bg-error-bg-active {
  background-color: var(--color-error-bg-active) !important;
}

.tw-bg-error-bg-hover {
  background-color: var(--color-error-bg-hover) !important;
}

.tw-bg-green {
  background-color: var(--color-green) !important;
}

.tw-bg-grey {
  background-color: var(--color-grey) !important;
}

.tw-bg-info-bg {
  background-color: var(--color-info-bg) !important;
}

.tw-bg-purple {
  background-color: var(--color-purple) !important;
}

.tw-bg-red {
  background-color: var(--color-red) !important;
}

.tw-bg-success-bg {
  background-color: var(--color-success-bg) !important;
}

.tw-bg-transparent {
  background-color: transparent !important;
}

.tw-bg-warning-bg {
  background-color: var(--color-warning-bg) !important;
}

.tw-object-contain {
  object-fit: contain !important;
}

.tw-p-0 {
  padding: 0px !important;
}

.tw-p-1 {
  padding: 0.25rem !important;
}

.tw-p-16 {
  padding: 4rem !important;
}

.tw-p-2 {
  padding: 0.5rem !important;
}

.tw-p-3 {
  padding: 0.75rem !important;
}

.tw-p-4 {
  padding: 1rem !important;
}

.tw-p-5 {
  padding: 1.25rem !important;
}

.tw-p-6 {
  padding: 1.5rem !important;
}

.tw-p-8 {
  padding: 2rem !important;
}

.tw-px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.tw-px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.tw-px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.tw-px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.tw-py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.tw-py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}

.tw-py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.tw-py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.tw-py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.tw-py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.tw-py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.tw-pb-0 {
  padding-bottom: 0px !important;
}

.tw-pl-2 {
  padding-left: 0.5rem !important;
}

.tw-pl-3 {
  padding-left: 0.75rem !important;
}

.tw-pl-4 {
  padding-left: 1rem !important;
}

.tw-pl-5 {
  padding-left: 1.25rem !important;
}

.tw-pl-\[20px\] {
  padding-left: 20px !important;
}

.tw-pl-\[26px\] {
  padding-left: 26px !important;
}

.tw-pr-1 {
  padding-right: 0.25rem !important;
}

.tw-pr-4 {
  padding-right: 1rem !important;
}

.tw-pt-2 {
  padding-top: 0.5rem !important;
}

.tw-text-left {
  text-align: left !important;
}

.tw-text-center {
  text-align: center !important;
}

.tw-text-right {
  text-align: right !important;
}

.tw-align-baseline {
  vertical-align: baseline !important;
}

.tw-align-top {
  vertical-align: top !important;
}

.tw-align-middle {
  vertical-align: middle !important;
}

.tw-font-mono {
  font-family: var(--fonts-monospace) !important;
}

.tw-font-sans {
  font-family: var(--fonts-regular) !important;
}

.tw-text-12 {
  font-size: 12px !important;
}

.tw-text-15 {
  font-size: 15px !important;
}

.tw-text-16 {
  font-size: 16px !important;
}

.tw-text-18 {
  font-size: 18px !important;
}

.tw-text-\[0\.95em\] {
  font-size: 0.95em !important;
}

.tw-text-\[13px\] {
  font-size: 13px !important;
}

.tw-text-\[18px\] {
  font-size: 18px !important;
}

.tw-text-base {
  font-size: 14px !important;
}

.tw-text-xs {
  font-size: 11px !important;
}

.tw-font-normal {
  font-weight: var(--font-weight-normal) !important;
}

.tw-font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.tw-italic {
  font-style: italic !important;
}

.tw-text-blue {
  color: var(--color-blue) !important;
}

.tw-text-danger {
  color: var(--color-danger) !important;
}

.tw-text-diff-added-fg {
  color: var(--color-diff-added-fg) !important;
}

.tw-text-diff-removed-fg {
  color: var(--color-diff-removed-fg) !important;
}

.tw-text-error-text {
  color: var(--color-error-text) !important;
}

.tw-text-gold {
  color: var(--color-gold) !important;
}

.tw-text-green {
  color: var(--color-green) !important;
}

.tw-text-grey-light {
  color: var(--color-grey-light) !important;
}

.tw-text-info-text {
  color: var(--color-info-text) !important;
}

.tw-text-orange {
  color: var(--color-orange) !important;
}

.tw-text-placeholder-text {
  color: var(--color-placeholder-text) !important;
}

.tw-text-primary {
  color: var(--color-primary) !important;
}

.tw-text-purple {
  color: var(--color-purple) !important;
}

.tw-text-red {
  color: var(--color-red) !important;
}

.tw-text-success-text {
  color: var(--color-success-text) !important;
}

.tw-text-teal {
  color: var(--color-teal) !important;
}

.tw-text-text {
  color: var(--color-text) !important;
}

.tw-text-text-light {
  color: var(--color-text-light) !important;
}

.tw-text-text-light-2 {
  color: var(--color-text-light-2) !important;
}

.tw-text-text-light-3 {
  color: var(--color-text-light-3) !important;
}

.tw-text-warning-text {
  color: var(--color-warning-text) !important;
}

.tw-text-white {
  color: var(--color-white) !important;
}

.tw-text-yellow {
  color: var(--color-yellow) !important;
}

.tw-line-through {
  text-decoration-line: line-through !important;
}

.tw-no-underline {
  text-decoration-line: none !important;
}

.tw-hidden.tw-hidden {
  display: none !important;
}

.tw-break-anywhere {
  overflow-wrap: anywhere !important;
}

.\[begin\:end\] {
  begin: end !important;
}

.\[blobPos\:blobPos\+needWrite\] {
  blob-pos: blobPos+needWrite !important;
}

.\[blobPos\:blobPos\+realRead\] {
  blob-pos: blobPos+realRead !important;
}

.\[exprStart\:pos\+exprEnd\] {
  expr-start: pos+exprEnd !important;
}

.\[frontMatterStart\:start\] {
  front-matter-start: start !important;
}

.\[i\:chunk\] {
  i: chunk !important;
}

.\[i\:i\+1\] {
  i: i+1 !important;
}

.\[i\:i\+4\] {
  i: i+4 !important;
}

.\[idx\:length\] {
  idx: length !important;
}

.\[lastEnd\:lastEnd\+start\] {
  last-end: lastEnd+start !important;
}

.\[lastIndex\:i\] {
  last-index: i !important;
}

.\[left\:left\+right\] {
  left: left+right !important;
}

.\[messageStart\:msgEnd\] {
  message-start: msgEnd !important;
}

.\[openActiveIndex\:closeActiveIndex\] {
  open-active-index: closeActiveIndex !important;
}

.\[pageStart\:pageEnd\] {
  page-start: pageEnd !important;
}

.\[pos1\:end1\] {
  pos1: end1 !important;
}

.\[pos1\:pos1\+pos2\+1\] {
  pos1: pos1+pos2+1 !important;
}

.\[pos2\:end2\] {
  pos2: end2 !important;
}

.\[pos\:curPartEnd\] {
  pos: curPartEnd !important;
}

.\[pos\:endPos\] {
  pos: endPos !important;
}

.\[pos\:end\] {
  pos: end !important;
}

.\[pos\:pos\+right\] {
  pos: pos+right !important;
}

.\[pos\:posEnd\] {
  pos: posEnd !important;
}

.\[posBegin\:posEnd\] {
  pos-begin: posEnd !important;
}

.\[sepAtPos\:sepEndPos\] {
  sep-at-pos: sepEndPos !important;
}

.\[signStart\:signEnd\] {
  sign-start: signEnd !important;
}

.\[start\:end\] {
  start: end !important;
}

.\[startIndex\:endIndex\] {
  start-index: endIndex !important;
}

.\[username\:password\@\] {
  username: password@ !important;
}

.hover\:tw-bg-blue:hover {
  background-color: var(--color-blue) !important;
}

.active\:tw-bg-yellow:active {
  background-color: var(--color-yellow) !important;
}

ul[data-v-04154bd6] {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
ul li[data-v-04154bd6] {
  padding: 0 10px;
}
ul li[data-v-04154bd6]:not(:last-child) {
  border-bottom: 1px solid var(--color-secondary);
}
.repos-search[data-v-04154bd6] {
  padding-bottom: 0 !important;
}
.repos-filter[data-v-04154bd6] {
  margin-top: 0 !important;
  border-bottom-width: 0 !important;
}
.repos-filter .item[data-v-04154bd6] {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.repo-list-link[data-v-04154bd6] {
  min-width: 0; /* for text truncation */
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}
.repo-list-link .svg[data-v-04154bd6] {
  color: var(--color-text-light-2);
}
.repo-list-icon[data-v-04154bd6] {
  min-width: 16px;
  margin-right: 2px;
}

/* octicon-mirror has no padding inside the SVG */
.repo-list-icon.octicon-mirror[data-v-04154bd6] {
  width: 14px;
  min-width: 14px;
  margin-left: 1px;
  margin-right: 3px;
}
.repo-owner-name-list li.active[data-v-04154bd6] {
  background: var(--color-hover);
}
.empty-repo-or-org[data-v-04154bd6] {
  margin-top: 1em;
  text-align: center;
  color: var(--color-placeholder-text);
}
.empty-repo-or-org p[data-v-04154bd6] {
  margin: 1em auto;
}

a[data-v-00e30e2d],
a[data-v-00e30e2d]:hover {
  text-decoration: none;
  color: var(--color-text);
}
.sub-items[data-v-00e30e2d] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 13px;
  border-left: 1px solid var(--color-secondary);
}
.sub-items .item-file[data-v-00e30e2d] {
  padding-left: 18px;
}
.item-file.selected[data-v-00e30e2d] {
  color: var(--color-text);
  background: var(--color-active);
  border-radius: 4px;
}
.item-file.viewed[data-v-00e30e2d],
.item-directory.viewed[data-v-00e30e2d] {
  color: var(--color-text-light-3);
}
.item-directory[data-v-00e30e2d] {
  user-select: none;
}
.item-file[data-v-00e30e2d],
.item-directory[data-v-00e30e2d] {
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 6px;
}
.item-file[data-v-00e30e2d]:hover,
.item-directory[data-v-00e30e2d]:hover {
  color: var(--color-text);
  background: var(--color-hover);
  border-radius: 4px;
  cursor: pointer;
}

.diff-file-tree-items[data-v-92304f2e] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: .5rem;
}

.ui.dropdown.diff-commit-selector .menu[data-v-b39612da] {
    margin-top: 0.25em;
    overflow-x: hidden;
    max-height: 450px;
}
.ui.dropdown.diff-commit-selector .menu .loading-indicator[data-v-b39612da] {
    height: 200px;
    width: 350px;
}
.ui.dropdown.diff-commit-selector .menu > .item[data-v-b39612da],
  .ui.dropdown.diff-commit-selector .menu > .info[data-v-b39612da] {
    display: flex;
    flex-direction: row;
    line-height: 1.4;
    gap: 0.25em;
    padding: 7px 14px !important;
}
.ui.dropdown.diff-commit-selector .menu > .item[data-v-b39612da]:not(:first-child),
  .ui.dropdown.diff-commit-selector .menu > .info[data-v-b39612da]:not(:first-child) {
    border-top: 1px solid var(--color-secondary) !important;
}
.ui.dropdown.diff-commit-selector .menu > .item[data-v-b39612da]:focus {
    background: var(--color-active);
}
.ui.dropdown.diff-commit-selector .menu > .item.hovered[data-v-b39612da] {
    background-color: var(--color-small-accent);
}
.ui.dropdown.diff-commit-selector .menu > .item.selected[data-v-b39612da] {
    background-color: var(--color-accent);
}
.ui.dropdown.diff-commit-selector .menu .commit-list-summary[data-v-b39612da] {
    max-width: min(380px, 96vw);
}

.workflow-graph[data-v-9fd6d978] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.graph-header[data-v-9fd6d978] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--color-box-header);
  border-bottom: 1px solid var(--color-secondary);
  gap: var(--gap-block);
  flex-wrap: wrap;
}
.graph-title[data-v-9fd6d978] {
  margin: 0;
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  flex: 1;
  min-width: 200px;
}
.graph-stats[data-v-9fd6d978] {
  display: flex;
  align-items: baseline;
  column-gap: 8px;
  color: var(--color-text-light-1);
  font-size: 13px;
  white-space: nowrap;
}
.graph-metrics[data-v-9fd6d978] {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}
.graph-container[data-v-9fd6d978] {
  flex: 1;
  overflow: hidden;
  padding: 12px 16px 20px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  cursor: grab;
  position: relative;
  background: var(--color-box-body);
}
.graph-container.dragging[data-v-9fd6d978] {
  cursor: grabbing;
}
.graph-svg[data-v-9fd6d978] {
  display: block;
  will-change: transform;
}
.graph-svg path[data-v-9fd6d978] {
  transition: all 0.2s ease;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.highlighted-edge[data-v-9fd6d978] {
  stroke-width: 2.25 !important;
  stroke: var(--color-workflow-edge-hover) !important;
}
.job-node-group[data-v-9fd6d978] {
  cursor: pointer;
  transition: all 0.2s ease;
}
.job-node-group:hover .job-rect[data-v-9fd6d978] {
  /* due to SVG rendering limitation, only one of fill and drop-shadow can work */
  fill: var(--color-hover);
  /* filter: drop-shadow(0 1px 3px var(--color-shadow-opaque)); */
}
.job-text-wrap[data-v-9fd6d978] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-right: 8px;
}
.job-name[data-v-9fd6d978] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  user-select: none;
  pointer-events: none;
}
.job-duration[data-v-9fd6d978] {
  font-size: 11px;
  color: var(--color-text-light-2);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}
.job-status-fg-obj[data-v-9fd6d978],
.job-status-icon-wrap[data-v-9fd6d978] {
  pointer-events: none;
}
.job-status-icon-wrap[data-v-9fd6d978] {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-port[data-v-9fd6d978] {
  fill: var(--color-box-body);
  stroke: var(--color-light-border);
  stroke-width: 1.5;
  pointer-events: none;
}
.node-edge[data-v-9fd6d978] {
  transition: stroke-width 0.2s ease, opacity 0.2s ease;
}

.action-run-summary-view[data-v-2694e540] {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--color-text-light-1);
}
.action-run-summary-block[data-v-2694e540] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--color-secondary);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background: var(--color-box-header);
}

/* begin fomantic dropdown menu overrides */
.action-view-right .ui.dropdown .menu[data-v-aa16672e] {
  background: var(--color-console-menu-bg);
  border-color: var(--color-console-menu-border);
}
.action-view-right .ui.dropdown .menu > .item[data-v-aa16672e] {
  color: var(--color-console-fg);
}
.action-view-right .ui.dropdown .menu > .item[data-v-aa16672e]:hover {
  color: var(--color-console-fg);
  background: var(--color-console-hover-bg);
}
.action-view-right .ui.dropdown .menu > .item[data-v-aa16672e]:active {
  color: var(--color-console-fg);
  background: var(--color-console-active-bg);
}
.action-view-right .ui.dropdown .menu > .divider[data-v-aa16672e] {
  border-top-color: var(--color-console-menu-border);
}
.action-view-right .ui.pointing.dropdown > .menu[data-v-aa16672e]:not(.hidden)::after {
  background: var(--color-console-menu-bg);
  box-shadow: -1px -1px 0 0 var(--color-console-menu-border);
}

/* end fomantic dropdown menu overrides */
.job-info-header[data-v-aa16672e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  position: sticky;
  top: 0;
  height: 60px;
  z-index: 1; /* above .job-step-container */
  background: var(--color-console-bg);
  border-radius: 3px;
}
.job-info-header[data-v-aa16672e]:has(+ .job-step-container) {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.job-info-header .job-info-header-title[data-v-aa16672e] {
  color: var(--color-console-fg);
  font-size: 16px;
  margin: 0;
}
.job-info-header .job-info-header-detail[data-v-aa16672e] {
  color: var(--color-console-fg-subtle);
  font-size: 12px;
}
.job-info-header-left[data-v-aa16672e] {
  flex: 1;
}
.job-step-container[data-v-aa16672e] {
  max-height: 100%;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  border-top: 1px solid var(--color-console-border);
  z-index: 0;
}
.job-step-container .job-step-summary[data-v-aa16672e] {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
}
.job-step-container .job-step-summary.step-expandable[data-v-aa16672e] {
  cursor: pointer;
}
.job-step-container .job-step-summary.step-expandable[data-v-aa16672e]:hover {
  color: var(--color-console-fg);
  background: var(--color-console-hover-bg);
}
.job-step-container .job-step-summary .step-summary-msg[data-v-aa16672e] {
  flex: 1;
}
.job-step-container .job-step-summary .step-summary-duration[data-v-aa16672e] {
  margin-left: 16px;
}
.job-step-container .job-step-summary.selected[data-v-aa16672e] {
  color: var(--color-console-fg);
  background-color: var(--color-console-active-bg);
  position: sticky;
  top: 60px;
  /* workaround ansi_up issue related to faintStyle generating a CSS stacking context via `opacity`
     inline style which caused such elements to render above the .job-step-summary header. */
  z-index: 1;
}
 /* eslint-disable-line vue-scoped-css/enforce-style-type */
/* some elements are not managed by vue, so we need to use global style */
.job-step-section {
  margin: 10px;
}
.job-step-section .job-step-logs {
  font-family: var(--fonts-monospace);
  margin: 8px 0;
  font-size: 12px;
}
.job-step-section .job-step-logs .job-log-line {
  display: flex;
}
.job-log-line:hover,
.job-log-line:target {
  background-color: var(--color-console-hover-bg);
}
.job-log-line:target {
  scroll-margin-top: 95px;
}

/* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */
.job-log-line .line-num, .log-time-seconds {
  width: 48px;
  color: var(--color-text-light-3);
  text-align: right;
  user-select: none;
}
.job-log-line:target > .line-num {
  color: var(--color-primary);
  text-decoration: underline;
}
.log-time-seconds {
  padding-right: 2px;
}
.job-log-line .log-time,
.log-time-stamp {
  color: var(--color-text-light-3);
  margin-left: 10px;
  white-space: nowrap;
}
.job-step-logs .job-log-line .log-msg {
  flex: 1;
  white-space: break-spaces;
  margin-left: 10px;
  overflow-wrap: anywhere;
}
.job-step-logs .log-msg a {
  color: var(--color-console-link) !important;
  text-decoration: underline;
}
.job-step-logs .job-log-line .log-cmd-command {
  color: var(--color-ansi-blue);
}
.job-step-logs .log-msg-label {
  font-weight: var(--font-weight-semibold);
}
.job-step-logs .log-line-error {
  background: var(--color-error-bg);
}
.job-step-logs .log-line-warning {
  background: var(--color-warning-bg);
}
.job-step-logs .log-cmd-error > .log-msg-label {
  color: var(--color-error-text);
}
.job-step-logs .log-cmd-warning > .log-msg-label {
  color: var(--color-warning-text);
}
.job-step-logs .log-cmd-debug {
  color: var(--color-violet);
}

/* selectors here are intentionally exact to only match fullscreen */
.full.height > .action-view-right {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
}
.full.height > .action-view-right > .job-info-header {
  border-radius: 0;
}
.full.height > .action-view-right > .job-step-container {
  height: calc(100% - 60px);
  border-radius: 0;
}
.job-log-group .job-log-list .job-log-line .log-msg {
  margin-left: 2em;
}
.job-log-group-summary {
  position: relative;
}
.job-log-group-summary > .job-log-line {
  position: absolute;
  inset: 0;
  z-index: -1; /* to avoid hiding the triangle of the "details" element */
  overflow: hidden;
}

.action-view-body[data-v-c3422631] {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  gap: 12px;
}

/* ================ */
/* action view header */
.action-view-header[data-v-c3422631] {
  margin-top: 8px;
}
.action-info-summary[data-v-c3422631] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.action-info-summary-title[data-v-c3422631] {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.action-info-summary-title-text[data-v-c3422631] {
  font-size: 20px;
  margin: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
.action-info-summary .ui.button[data-v-c3422631] {
  margin: 0;
  white-space: nowrap;
}
.action-commit-summary[data-v-c3422631] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 28px;
}
@media (max-width: 767.98px) {
.action-commit-summary[data-v-c3422631] {
    margin-left: 0;
    margin-top: 8px;
}
}

/* ================ */
/* action view left */
.action-view-left[data-v-c3422631] {
  width: 30%;
  max-width: 400px;
  position: sticky;
  top: 12px;

  /* about 12px top padding + 12px bottom padding + 37px footer height,
  TODO: need to use JS to calculate the height for better scrolling experience*/
  max-height: calc(100vh - 62px);

  overflow-y: auto;
  background: var(--color-body);
  z-index: 2; /* above .job-info-header */
}
@media (max-width: 767.98px) {
.action-view-left[data-v-c3422631] {
    position: static; /* can not sticky because multiple jobs would overlap into right view */
    max-height: unset;
}
}
.left-list-header[data-v-c3422631] {
  font-size: 13px;
  color: var(--color-text-light-2);
}
.action-view-left .ui.relaxed.list[data-v-c3422631] {
  margin: var(--gap-block) 0;
  padding-left: 10px;
}
.job-brief-item[data-v-c3422631] {
  padding: 6px 10px;
  border-radius: var(--border-radius);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--gap-block);
}
.job-brief-item[data-v-c3422631]:hover {
  background-color: var(--color-hover);
}
.job-brief-item.selected[data-v-c3422631] {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-active);
}

/* ================ */
/* action view right */
.action-view-right[data-v-c3422631] {
  flex: 1;
  color: var(--color-console-fg-subtle);
  max-height: 100%;
  width: 70%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-console-border);
  border-radius: var(--border-radius);
  background: var(--color-console-bg);
}

/* begin fomantic button overrides */
.action-view-right .ui.button[data-v-c3422631],
.action-view-right .ui.button[data-v-c3422631]:focus {
  background: transparent;
  color: var(--color-console-fg-subtle);
}
.action-view-right .ui.button[data-v-c3422631]:hover {
  background: var(--color-console-hover-bg);
  color: var(--color-console-fg);
}
.action-view-right .ui.button[data-v-c3422631]:active {
  background: var(--color-console-active-bg);
  color: var(--color-console-fg);
}

/* end fomantic button overrides */
@media (max-width: 767.98px) {
.action-view-body[data-v-c3422631] {
    flex-direction: column;
}
.action-view-left[data-v-c3422631], .action-view-right[data-v-c3422631] {
    width: 100%;
}
.action-view-left[data-v-c3422631] {
    max-width: none;
}
}

.sub-items[data-v-5a462e31] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 14px;
  border-left: 1px solid var(--color-secondary);
}
.tree-item.selected[data-v-5a462e31] {
  color: var(--color-text);
  background: var(--color-active);
  border-radius: 4px;
}
.tree-item.type-directory[data-v-5a462e31] {
  user-select: none;
}
.tree-item[data-v-5a462e31] {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-areas: "toggle content";
  gap: 0.25em;
  padding: 6px;
}
.tree-item[data-v-5a462e31]:hover {
  color: var(--color-text);
  background: var(--color-hover);
  border-radius: 4px;
  cursor: pointer;
}
.item-toggle[data-v-5a462e31] {
  grid-area: toggle;
  display: flex;
  align-items: center;
}
.item-content[data-v-5a462e31] {
  grid-area: content;
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-overflow: ellipsis;
  min-width: 0;
}

.view-file-tree-items[data-v-f1e7a984] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: .5rem;
}