/*
  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 > *,
.btn-octicon.is-loading > *,
.button.is-loading > * {
  opacity: 0;
}

.is-loading::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  height: var(--loading-size, 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;
}

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

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

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

.inline-divider {
  display: inline-block;
  border-left: 1px solid var(--color-secondary);
  overflow: hidden;
  width: 1px;
  margin: 0 var(--gap-inline);
}

/* 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 .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;
  width: calc(100% + 2px);
  max-width: calc(100% + 2px); /* the same as "ui attached segment" */
  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-input-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 > input {
  padding-right: 2.67142857em;
}

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

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

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

.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 > .icon {
  width: auto;
  margin: 0 0.75em 0 0;
}

.ui.label > .detail {
  font-weight: var(--font-weight-medium);
  margin-left: 0.5em; /* our .ui.label already provides flex gap, so the margin here shouldn't be too large */
  opacity: 0.8;
}

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

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

/* labels-list layout: span.labels-list > a.item > span.ui.label,
by default, the labels list is rendered as "display: inline",
it can also be rendered as flex by adding flex-related classes (the general ".item" selector also applies) */

.labels-list {
  max-width: 100%; /* for ellipsis */
  font-size: var(--font-size-label); /* must match the label font size, otherwise the height mismatches */
}

.labels-list > .item {
  max-width: 100%; /* for ellipsis */
}

.labels-list a:hover {
  text-decoration: none;
}

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

/* to align with different font sizes, these styles need to be written separately */

#issue-list .labels-list > .item {
  margin-right: 4px; /* margin-right (not margin-left) keeps wrapped labels left-aligned */
  vertical-align: 2.5px; /* compensates inline-flex baseline so labels center with text */
}

.timeline-item .labels-list > .item {
  margin-right: 4px;
  vertical-align: 1.5px;
}

/* 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 {
  padding: 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[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 .row + .ui.divider {
  flex-grow: 1;
  margin: 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*="two column"].grid > .row > .column,
.ui[class*="two column"].grid > .column:not(.row) {
  width: 50%;
}

.ui.grid > [class*="two column"].row > .column {
  width: 50% !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*="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*="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 {
  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) {
  text-align: left;
}

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

.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[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.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;
  gap: var(--gap-inline);
}

.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 .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 .right.item::before,
.ui.menu .right.menu > .item::before {
  right: auto;
  left: 0;
}

.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::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.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.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 .right.menu,
  .ui.stackable.menu .left.menu {
    flex-direction: column;
  }
}

.ui.borderless.menu .item::before,
.ui.borderless.menu .item .menu .item::before {
  background: none !important;
}

.ui.compact.menu {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

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

details.ui.message {
  padding: 0;
}

details.ui.message summary {
  padding: 1em 1.5em;
}

details.ui.message pre {
  margin: -1.25em 0 0;
  padding: 0.5em 1.5em;
  white-space: pre-wrap;
}

details.ui.message:not(:has(pre)) summary {
  list-style: none;
  cursor: text;
}

.ui.message.flash-message pre {
  white-space: pre-line;
  margin: 0;
}

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

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

.ui.warning.message,
.ui.attached.warning.message {
  background: var(--color-warning-bg);
  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.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.eight.wide,
.ui.table td.eight.wide {
  width: 50%;
}

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

/* 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);
  mask-size: 75%;
  mask-repeat: no-repeat;
  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);
  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 input,
.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.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.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-input-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-input-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 {
  display: block;
  margin: 0.5em 0;
  padding: 0;
}

.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 .hidden { /* for hidden items and dividers */
  display: none;
}

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

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

.ui.multiple.dropdown > .label img {
  width: auto;
  max-height: 20px;
}

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

/* styles for Fomantic transition (toggle): dimmer, modal, dropdown menu */

/* this is the only place using "hidden" and "visible" classes, it can safely work with tailwind without prefix in the future */

.ui.modal.transition.hidden,
.ui.dropdown > .menu.transition.hidden {
  display: none;
  visibility: hidden;
}

.ui.modal.transition.visible,
.ui.dropdown > .menu.transition.visible {
  display: block;
  visibility: visible;
}

/* dimmer uses "active" but not "hidden/visible" classes, no special classes for it here */

/* only modal and dimmer need animation, dropdown menu doesn't */

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

.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 > .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 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-body pre {
  white-space: pre-wrap; /* online editor, when git hook fails, the rendered message uses "pre" */
}

.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: middle; /* middle is the best choice for different font sizes from 1px to 36px when no flex */
  fill: currentcolor;
}

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

/* when the svg is used in menu or item, it's certain that we don't want it to be shrunk */

.menu .svg,
.item .svg {
  flex-shrink: 0;
}

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

.code-editor-container {
  position: relative; /* for command panel */
  background-color: var(--color-code-bg); /* fully colorize the container and editor */
}

.ui.bottom.attached.segment .code-editor-container,
.ui.bottom.attached.segment .code-editor-container .cm-scroller {
  border-radius: 0 0 var(--border-radius) var(--border-radius); /* avoid overflow parent's border with radius */
}

/* editor layout */

.code-editor-container .cm-editor {
  color: var(--color-text);
  font-family: var(--fonts-monospace);
  font-size: 12px;
  /* it was written as "min-height: 90vh; max-height: 90vh", so maybe the author prefer to always use about 90vh.
     here, minus 80px to keep spaces for the top toolbar */
  height: max(200px, calc(95vh - 80px));
}

.code-editor-container .cm-editor.cm-focused {
  outline: none; /* don't show the default focus outline when the editor gets focused */
}

.code-editor-container .cm-content {
  caret-color: var(--color-caret);
  padding: 0; /* avoid the small top and bottom padding */
}

.code-editor-container .cm-cursor,
.code-editor-container .cm-dropCursor {
  border-left-color: var(--color-caret);
}

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

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

/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */

.flex-relaxed-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  min-width: 0; /* keep the same style as "flex-text-block" etc, make the text content wrap/ellipse correctly */
  max-width: 100%;
}

.flex-relaxed-list > .divider {
  margin: 0;
}

/* items have dividers between them, the dividers align with items */

.flex-divided-list,
.flex-divided-list > .item.flex-divided-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.flex-divided-list > .item {
  padding: 10px 0;
  flex-shrink: 0;
}

.flex-divided-list > .divider {
  margin: 0;
  flex-shrink: 0;
}

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

.items-with-main > .item {
  display: flex;
  gap: var(--gap-block);
  align-items: flex-start;
}

.items-with-main > .item .item-leading {
  display: flex;
  align-items: flex-start;
}

.items-with-main > .item .item-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  flex-grow: 1;
  flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */
  min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
}

.items-with-main > .item .item-header {
  display: flex;
  gap: var(--gap-inline);
  justify-content: space-between;
  flex-wrap: wrap;
}

.items-with-main > .item a:not(.label, .button):hover {
  color: var(--color-primary) !important;
}

.items-with-main > .item .item-trailing {
  display: flex;
  gap: var(--gap-block);
  align-items: center;
  flex-grow: 0;
  flex-wrap: wrap;
  justify-content: end;
}

.items-with-main > .item .item-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  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;
}

.items-with-main > .item .item-title a {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.items-with-main > .item .item-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  color: var(--color-text-light-2);
  overflow-wrap: anywhere;
}

.items-with-main > .item .item-body a {
  color: inherit;
  overflow-wrap: anywhere;
}

/* special rules to make the list work with existing UI elements */

.flex-divided-list.items-px-default > .item {
  padding-left: 1em; /* matches ".ui.segment" padding */
  padding-right: 1em;
}

.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
  padding-top: 0;
}

.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
  padding-bottom: 0;
}

/* If there is a divider besides the flex-list, some padding/margin are not needs */

.divider + .flex-divided-list > .item:first-child {
  padding-top: 0;
}

.flex-divided-list + .divider {
  margin-top: 0;
}

.ui.vertical.menu > details.item {
  user-select: none;
  padding: 0;
}

.ui.vertical.menu > details.item summary {
  display: flex;
  justify-content: space-between; /* make the "::after" right-aligned */
  align-items: center;
  padding: 16px 13px; /* match Fomantic menu item padding */
}

.ui.vertical.menu > details.item > summary::marker, /* Chrome, Edge, Firefox */
.ui.vertical.menu > details.item > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

.ui.vertical.menu > details.item > summary::after {
  transition: transform 0.25s ease;
  content: "";
  width: 14px;
  height: 14px;
  mask-size: cover;
  mask-image: var(--octicon-chevron-right);
  background: currentcolor;
  border: 1px solid var(--color-body); /* workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 */
}

.ui.vertical.menu > details.item[open] > summary::after {
  transform: rotate(90deg);
}

/* default toggleable details menu: items don't have menu item padding, don't change background color on hover or active */

.ui.vertical.menu > details.item > .menu {
  margin: 0 0 10px; /* only need the space between the current details menu and next item */
}

/* full width toggleable details menu: items have menu item padding, change background color on hover and active */

.ui.vertical.menu > details.item > .menu.items-full-width {
  margin: 0;
}

.ui.vertical.menu > details.item > .menu.items-full-width > .item {
  padding: 16px 13px; /* match Fomantic menu item padding */
}

.ui.vertical.menu > details.item > .menu.items-full-width > .item.active {
  background: var(--color-active);
}

.ui.vertical.menu > details.item > .menu.items-full-width > .item:hover {
  background: var(--color-hover); /* ".ui.vertical.menu .menu .item" resets the hover background, so we need to add it again */
}

.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-0 {
  stroke: var(--color-series-16-0);
  fill: var(--color-series-16-0);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
  stroke: var(--color-series-16-1);
  fill: var(--color-series-16-1);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 {
  stroke: var(--color-series-16-2);
  fill: var(--color-series-16-2);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 {
  stroke: var(--color-series-16-3);
  fill: var(--color-series-16-3);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 {
  stroke: var(--color-series-16-4);
  fill: var(--color-series-16-4);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 {
  stroke: var(--color-series-16-5);
  fill: var(--color-series-16-5);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 {
  stroke: var(--color-series-16-6);
  fill: var(--color-series-16-6);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 {
  stroke: var(--color-series-16-7);
  fill: var(--color-series-16-7);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
  stroke: var(--color-series-16-8);
  fill: var(--color-series-16-8);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 {
  stroke: var(--color-series-16-9);
  fill: var(--color-series-16-9);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 {
  stroke: var(--color-series-16-10);
  fill: var(--color-series-16-10);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 {
  stroke: var(--color-series-16-11);
  fill: var(--color-series-16-11);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 {
  stroke: var(--color-series-16-12);
  fill: var(--color-series-16-12);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 {
  stroke: var(--color-series-16-13);
  fill: var(--color-series-16-13);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 {
  stroke: var(--color-series-16-14);
  fill: var(--color-series-16-14);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 {
  stroke: var(--color-series-16-15);
  fill: var(--color-series-16-15);
}

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

#user-heatmap .heatmap-footer {
  display: flex;
  font-size: 11px;
  justify-content: space-between;
}

/* "Less [colors] More" scale */

#user-heatmap .heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: right;
}

#user-heatmap .heatmap-legend-svg {
  margin-right: -12px;
}

#user-heatmap .heatmap-legend > div:first-child,
#user-heatmap .heatmap-legend > div:last-child {
  display: inline-block;
  padding: 0 5px;
}

#user-heatmap .heatmap-day: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 */

/* stylelint-disable scale-unlimited/declaration-strict-value -- terminal ANSI palette uses literal hex values */

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

.markup.jupyter-render {
  padding: 0;
}

.markup .jupyter-notebook {
  padding: 20px;
  background: var(--color-body);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  font-family: var(--fonts-monospace);
  display: flex;
  flex-direction: column;
  gap: 2em;
}

/* cell code */

.markup .jupyter-notebook .cell-line {
  display: flex;
  width: 100%;
  gap: 0.5em;
}

.markup .jupyter-notebook .cell-left {
  width: 100px;
  flex-shrink: 0;
}

.markup .jupyter-notebook .cell-right {
  flex: 1;
}

.markup .jupyter-notebook .cell-prompt {
  padding: 10px 0;
  color: var(--color-text-light-2);
  font-size: 13px;
}

.markup .jupyter-notebook .cell-left.cell-prompt {
  padding-left: 10px;
  text-align: right;
  white-space: nowrap;
  user-select: none;
}

.markup .jupyter-notebook .cell-right.cell-prompt {
  padding-right: 10px;
}

.markup .jupyter-notebook .cell-input,
.markup .jupyter-notebook .cell-output {
  overflow-x: auto;
}

.markup .jupyter-notebook .cell-input pre,
.markup .jupyter-notebook .cell-output pre {
  padding: 10px 16px;
  font-size: 13px;
  min-height: 40px;
  margin: 0;
}

.markup .jupyter-notebook .cell-input pre {
  background-color: var(--color-code-bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.markup .jupyter-notebook .cell-output {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.markup .jupyter-notebook .cell-type-code {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.markup .jupyter-notebook .cell-output-unsupported {
  color: var(--color-text-light-2);
  font-style: italic;
  font-size: 13px;
}

.markup .jupyter-notebook .cell-output-error {
  color: var(--color-red);
}

/* cell markdown */

.markup .jupyter-notebook .cell-right .embedded-markdown {
  padding: 0 16px; /* match cell code right padding */
}

: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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  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;
}

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.muted:hover,
.muted-links a:hover {
  color: var(--color-primary);
}

a.silenced:hover,
a.suppressed:hover {
  color: inherit;
}

/* keyboard focus ring for interactive elements */

a:focus-visible,
button:focus-visible,
.ui.button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

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

.ui.comments .comment .metadata {
  color: var(--color-text-light-2);
}

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

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

strong.attention-note, svg.attention-note {
  color: var(--color-info-text);
}

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-priority-text);
}

strong.attention-important, svg.attention-important {
  color: var(--color-priority-text);
}

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-error-text);
}

strong.attention-caution, svg.attention-caution {
  color: var(--color-error-text);
}

/* 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;
  flex-shrink: 0;
  border-radius: var(--border-radius-full);
  height: 14px;
  width: 14px;
}

.icon-size-8 {
  width: 8px;
  height: 8px;
}

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

.ui.ui.labeled.button {
  gap: 0;
  align-items: stretch;
}

/* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */

.ui.modal .header.flex-left-right,
.flex-left-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-block);
  max-width: 100%;
  min-width: 0;
}

.ui.list.flex-items-block > .item,
.ui.vertical.menu.flex-items-block > .item,
.ui.vertical.menu .item.flex-text-block,
.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);
  max-width: 100%;
  min-width: 0;
}

.flex-left-right > .ui.button,
.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);
}

img.ui.avatar,
.ui.avatar img,
.ui.avatar svg {
  border-radius: var(--border-radius);
  object-fit: contain;
  aspect-ratio: 1;
}

.avatar-stack-names {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

.avatar-stack-names > a.muted,
.avatar-stack-names > .avatar-stack-name,
.avatar-stack-names > .avatar-stack-popup-trigger {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* use semibold for latest commit author */

.latest-commit .avatar-stack-names > a,
.latest-commit .avatar-stack-names > .avatar-stack-popup-trigger {
  font-weight: var(--font-weight-semibold);
}

/* template emits children reversed; row-reverse re-orders visually and keeps the author last-painted (on top) */

.avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
}

.avatar-stack > * {
  margin-left: -16px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  position: relative;
  display: inline-flex;
}

.avatar-stack > *:last-child { margin-left: 0; }

.avatar-stack > *:nth-last-child(2) { margin-left: -14px; }

/* hover spreads via transform (no layout shift); positions count from visual-left = last DOM child = :nth-last-child */

.avatar-stack:hover > *:nth-last-child(2) { transform: translateX(14px); }

.avatar-stack:hover > *:nth-last-child(3) { transform: translateX(30px); }

.avatar-stack:hover > *:nth-last-child(4) { transform: translateX(46px); }

.avatar-stack:hover > *:nth-last-child(5) { transform: translateX(62px); }

.avatar-stack:hover > *:nth-last-child(6) { transform: translateX(78px); }

.avatar-stack:hover > *:nth-last-child(7) { transform: translateX(94px); }

.avatar-stack:hover > *:nth-last-child(8) { transform: translateX(110px); }

.avatar-stack:hover > *:nth-last-child(9) { transform: translateX(126px); }

.avatar-stack:hover > *:nth-last-child(10) { transform: translateX(142px); }

.avatar-stack:hover > *:nth-last-child(11) { transform: translateX(158px); }

.avatar-stack .avatar {
  border: 1px solid var(--color-body);
  background: var(--color-body);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.avatar-stack:hover .avatar {
  background-color: var(--color-body);
}

.avatar-stack-overflow-chip {
  align-items: center;
  justify-content: center;
  width: 0;
  height: 20px;
  margin-left: 0;
  border: 0 solid var(--color-body);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  opacity: 0;
  transition: all 0.15s ease;
}

.avatar-stack:hover .avatar-stack-overflow-chip {
  width: 20px;
  margin-left: -16px;
  border-width: 1px;
  opacity: 1;
}

.avatar-stack-popup-trigger {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

.avatar-stack-popup-trigger:hover {
  color: var(--color-primary);
}

.avatar-stack-popup {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.avatar-stack-popup > a {
  padding: 6px 12px;
  gap: 8px;
}

.avatar-stack-popup > a:hover {
  background: var(--color-hover);
}

@media (max-width: 767.98px) {
  .avatar-stack-names {
    max-width: 80px;
  }
}

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

.repo-header {
  padding: 1em 0 0.25em;
}

.secondary-nav .secondary-info {
  margin-top: 0.25em;
  font-size: 12px;
}

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

.ui.list.issue-sidebar-project-cards > .item {
  display: flex;
  align-items: center;
  gap: var(--gap-block);
}

.ui.list.issue-sidebar-project-cards > .item.sidebar-project-card {
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  padding: 8px;
}

.issue-content-right .ui.list.labels-list {
  display: flex;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

.issue-content-right .empty-list {
  font-size: 12px;
}

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

.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 {
  position: relative;
  display: block;
  margin-left: 40px;
  padding-left: 16px;
}

.repository.view.issue .comment-list::before {
  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;
}

.comment-text-line {
  color: var(--color-text-light);
  flex: 1;
  min-width: 0;
}

.comment-text-line .ui.label {
  line-height: 1.5; /* label has background, so it can't use parent's line-height */
}

.comment-text-line a {
  color: inherit;
}

.comment-text-line a:hover {
  color: var(--color-primary);
}

.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 .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 > .detail {
  margin-left: 15px;
  width: 100%;
}

.repository.view.issue .ui.depending .item.dependency {
  display: flex;
}

.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: 20px;
}

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

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

.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 {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

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

@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;
  gap: var(--page-spacing);
}

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

@media (max-width: 767.98px) {
  .repository.view.issue .comment-list,
  .repository.view.issue .comment-list .timeline-item {
    margin-left: 0;
  }
  .repository.view.issue .comment-list::before {
    left: 14px;
  }
  .repository.view.issue .comment-list .inline-timeline-avatar {
    display: flex;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 2px;
  }
  /* 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-avatar,
  .repository.view.issue .comment-list .comment-header-right .role-label {
    display: none;
  }
  .commit-header h3 {
    flex-basis: auto !important;
    margin-bottom: 0.5rem !important;
  }
  .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;
  width: 100%;
}

.commit-status-item { /* the item can be used at 2 places: PR's merge box (commit-status-list), commit's status popup (no commit-status-list) */
  height: 40px;
  padding-top: 0 !important; /* use "height" + "align items center", don't use padding-y (from the list container) to layout */
  padding-bottom: 0 !important;
  display: flex;
  gap: var(--gap-block);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.username-display {
  display: inline-flex;
  gap: var(--gap-inline);
  align-items: center;
  max-width: 100%; /* min/max widths are for "gt-ellipsis", see the comment of other "flex-xxx" family classes */
  min-width: 0;
  overflow: hidden;
}

.username-display > .username-fullname {
  color: var(--color-text-light-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#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 .branches {
  display: inline-flex;
}

#issue-list .branches .branch {
  background-color: var(--color-secondary-alpha-50);
  border-radius: var(--border-radius);
  padding: 0 4px;
}

#issue-list .branches .truncated-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  vertical-align: top;
}

#issue-list .checklist progress {
  margin-left: 2px;
  width: 80px;
  height: 6px;
  display: inline-block;
}

#issue-list .checklist progress::-webkit-progress-value {
  background-color: var(--color-secondary-dark-4);
}

#issue-list .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;
}

/* for "title (#123)":
  <span "title-full-link-hover">
    <a "title-full-link muted">title (</a>
    <a "muted">#123</a>
    <a "title-full-link muted">)</a>
  </span>
  * hover on "title": also highlight the right parentheses
  * hover on "#123": don't highlight other parts
 */

.title-full-link-hover:not(:has(:not(.title-full-link):hover)):hover > a.title-full-link {
  color: var(--color-primary);
  text-decoration: underline;
}

.list-item-large-title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.list-item-title-progress {
  width: 200px;
  height: 16px;
}

.list-item-secondary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-block);
  justify-content: space-between;
  color: var(--color-text-light-2);
}

.list-item-secondary-bar a {
  color: var(--color-text-light-2);
  text-decoration: none;
}

.list-item-secondary-bar a:hover {
  color: var(--color-text);
}

.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-container {
  padding: 0 !important; /* the file-view itself provides padding */
}

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

.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-header {
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
  margin-top: 0.5em;
}

@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: 5px 0;
}

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

#repo-files-table .repo-file-cell.is-loading::after {
  height: 40%;
  border-width: 2px;
}

.bottom-reactions {
  display: flex;
  gap: 6px;
  margin: 0 1em 1em;
}

.timeline-item .conversation-holder .bottom-reactions {
  margin: 1em 0 0 24px;
  padding-bottom: 8px;
}

.bottom-reactions .ui.label {
  padding: 2px 6px;
  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;
}

.page-content.organization .team-item-box > .team-item-header {
  min-height: 50px; /* the header sometimes contains a mini button, sometimes not, so we set a min-height to make sure the layout is consistent */
}

.page-content.organization .team-item-box .team-item-description {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-light-3);
}

.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 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-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);
  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-item-trailing {
  display: flex;
  gap: var(--gap-block);
  align-items: center;
  justify-content: end;
  flex-wrap: nowrap;
  width: 280px;
  flex: 0 0 280px;
}

.ui.label.run-list-ref {
  display: inline-block;
  max-width: 110px;
}

@media (max-width: 767.98px) {
  .run-list-item-trailing {
    flex-direction: column;
    align-items: flex-end;
    max-width: 30%;
    flex: 0 0 30%;
  }
  .run-list-item-right {
    max-width: 110px;
  }
}

.repository.actions .ui.vertical.menu details.scoped-workflow-group > .item {
  display: flex;
  padding-left: 2.5em;
}

.repository.actions .ui.vertical.menu details.scoped-workflow-group > .item > .gt-ellipsis {
  font-size: 0.85714286em;
}

.repository.actions .ui.vertical.menu details.scoped-workflow-group > .item > .label {
  margin-left: auto;
  flex-shrink: 0;
}

.repository.actions .ui.vertical.menu details.scoped-workflow-group > summary {
  justify-content: flex-start;
  gap: var(--gap-block);
  padding: 0.92857143em 1.14285714em;
}

.repository.actions .ui.vertical.menu details.scoped-workflow-group > summary::after {
  order: 1;
}

.repository.actions .ui.vertical.menu details.scoped-workflow-group > summary > .label {
  order: 2;
  margin-left: auto;
}

/*
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-3 {
  margin: 0.75rem !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-my-\[5px\] {
  margin-top: 5px !important;
  margin-bottom: 5px !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-\[16px\] {
  margin-left: 16px !important;
}

.tw-ml-\[21px\] {
  margin-left: 21px !important;
}

.tw-ml-\[22px\] {
  margin-left: 22px !important;
}

.tw-ml-\[24px\] {
  margin-left: 24px !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-3 {
  margin-top: 0.75rem !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-\[32px\] {
  height: 32px !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-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-8 {
  width: 2rem !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-0 {
  min-width: 0px !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-table-fixed {
  table-layout: fixed !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-\[8px\] {
  gap: 8px !important;
}

.tw-gap-x-1 {
  column-gap: 0.25rem !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-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-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-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-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !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-1 {
  padding-left: 0.25rem !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-pl-\[36px\] {
  padding-left: 36px !important;
}

.tw-pr-1 {
  padding-right: 0.25rem !important;
}

.tw-pr-2 {
  padding-right: 0.5rem !important;
}

.tw-pr-4 {
  padding-right: 1rem !important;
}

.tw-pt-2 {
  padding-top: 0.5rem !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-align-\[1px\] {
  vertical-align: 1px !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-16 {
  font-size: 16px !important;
}

.tw-text-18 {
  font-size: 18px !important;
}

.tw-text-2xl {
  font-size: 24px !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-sm {
  font-size: 12px !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;
}

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

.\[i\:j\] {
  i: j !important;
}

.\[lastEnd\:lastEnd\+start\] {
  last-end: lastEnd+start !important;
}

.\[lastIndex\:i\] {
  last-index: i !important;
}

.\[left\:left\+right\] {
  left: left+right !important;
}

.\[leftPos\:sepAtPos\] {
  left-pos: sepAtPos !important;
}

.\[messageStart\:msgEnd\] {
  message-start: msgEnd !important;
}

.\[openActiveIndex\:closeActiveIndex\] {
  open-active-index: closeActiveIndex !important;
}

.\[p1\:p2\] {
  p1: p2 !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;
}

.\[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: 16px 16px 8px;
  background: var(--color-console-bg);
  gap: var(--gap-block);
  flex-wrap: wrap;
}
.graph-workflow-info[data-v-9fd6d978] {
  min-width: 0;
}
.graph-workflow-name[data-v-9fd6d978] {
  display: block;
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}
.graph-workflow-trigger[data-v-9fd6d978] {
  margin-top: 4px;
  color: var(--color-text-light-2);
  font-size: 12px;
  line-height: 1.4;
}
.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;
  margin-left: auto;
  padding: 0 16px;
}
.graph-controls[data-v-9fd6d978] {
  flex-shrink: 0;
}
.graph-container[data-v-9fd6d978] {
  flex: 1;
  overflow: auto;
  padding: 10px 14px 18px;
  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: stroke-width 0.2s ease, opacity 0.2s ease;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node-edge[data-v-9fd6d978] {
  stroke: var(--color-secondary-dark-2);
  stroke-width: 1.5;
  opacity: 0.9;
}
.highlighted-edge[data-v-9fd6d978] {
  stroke: var(--color-primary);
  stroke-width: 2;
}
.job-node-group[data-v-9fd6d978] {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.job-node-group.caller-node[data-v-9fd6d978] {
  cursor: default;
}
.job-node-group:hover .job-rect[data-v-9fd6d978],
.job-node-group.related-node .job-rect[data-v-9fd6d978] {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  fill: var(--color-primary-alpha-10);
}
.graph-svg.has-hover .job-node-group[data-v-9fd6d978]:not(.related-node) {
  opacity: 0.2;
}
.graph-svg.has-hover .node-edge[data-v-9fd6d978]:not(.highlighted-edge) {
  opacity: 0.15;
}
.highlighted-edge-layer[data-v-9fd6d978] {
  pointer-events: none;
}
.highlighted-port[data-v-9fd6d978] {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}
.job-rect[data-v-9fd6d978] {
  fill: var(--color-box-body);
  stroke: var(--color-secondary);
  stroke-width: 1;
}
.matrix-foreign-object[data-v-9fd6d978] {
  pointer-events: auto;
  overflow: visible;
}
.matrix-panel[data-v-9fd6d978],
.grouped-panel[data-v-9fd6d978] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  background: transparent;
  pointer-events: auto;
  user-select: none;
}
.matrix-panel[data-v-9fd6d978] {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 8px;
}
.matrix-panel-label[data-v-9fd6d978] {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.matrix-panel-collapsed[data-v-9fd6d978] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 0 2px;
  cursor: pointer;
}
.matrix-panel-summary-row[data-v-9fd6d978] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.matrix-panel-summary[data-v-9fd6d978] {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matrix-panel-toggle[data-v-9fd6d978] {
  font-size: 11px;
  color: var(--color-text-light-2);
  padding-left: 24px;
  cursor: pointer;
}
.matrix-panel-toggle[data-v-9fd6d978]:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.matrix-panel-jobs[data-v-9fd6d978] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 0 2px;
  overflow-y: auto;
}
.grouped-panel[data-v-9fd6d978] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px;
  gap: 2px;
}
.graph-list-row[data-v-9fd6d978] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 1px 6px;
  border-radius: 5px;
}
.graph-list-row[data-v-9fd6d978]:hover {
  background: var(--color-hover);
}
.graph-list-row-main[data-v-9fd6d978],
.job-row-main[data-v-9fd6d978] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.graph-list-row-name[data-v-9fd6d978],
.job-name[data-v-9fd6d978] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.graph-list-row-duration[data-v-9fd6d978],
.job-duration[data-v-9fd6d978] {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--color-text-light-2);
  white-space: nowrap;
}
.job-row[data-v-9fd6d978] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.job-card[data-v-9fd6d978] {
  border-radius: 6px;
  padding: 0 2px;
}
.node-port[data-v-9fd6d978] {
  fill: var(--color-secondary-dark-2);
  stroke: var(--color-box-body);
  stroke-width: 1.25;
  opacity: 0.9;
  pointer-events: none;
}
.job-node-group.related-node .node-port[data-v-9fd6d978] {
  fill: var(--color-primary);
}

.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;
  flex-wrap: wrap;
  align-items: stretch; /* equal-height columns so labels align at top and values at bottom */
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-secondary);
  background: var(--color-console-bg);
}
.action-run-summary-trigger[data-v-2694e540] {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-right: 24px;
}
.action-run-summary-label[data-v-2694e540] {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-light-2);
}
.action-run-summary-trigger-content[data-v-2694e540] {
  margin-top: auto; /* pin trigger content to the bottom, aligned with the stat values */
  color: var(--color-text-light-2);
  align-items: center;
}
.action-run-summary-user[data-v-2694e540] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 16px;
}
.action-run-summary-user .ui.avatar[data-v-2694e540] {
  margin: 0;
}
.action-run-summary-pr[data-v-2694e540] {
  color: var(--color-text);
  line-height: 16px;
}
.action-run-summary-branch-label[data-v-2694e540] {
  display: inline-flex;
  align-items: center;
  max-width: 200px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: var(--border-radius);
  background: var(--color-primary-light-6);
  color: var(--color-primary);
  font-size: 12px;
  line-height: 20px;
  font-family: var(--fonts-monospace);
}
.action-run-summary-branch-label a[data-v-2694e540] {
  color: inherit;
}
.action-run-summary-branch-label a[data-v-2694e540]:hover {
  text-decoration: underline;
}
.action-run-summary-user:hover span[data-v-2694e540] {
  color: var(--color-primary);
}
.action-run-summary-stat[data-v-2694e540] {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 72px;
  margin-left: 24px;
  margin-right: 24px;
}
.action-run-summary-stat-last[data-v-2694e540] {
  margin-right: 0;
}
.action-run-summary-stat-divider[data-v-2694e540] {
  display: none;
  flex: 0 0 100%;
  margin: 8px 0;
  border-bottom: 1px solid var(--color-secondary);
}
.action-run-summary-stat-value[data-v-2694e540] {
  display: block;
  margin-top: auto; /* pin value to the bottom so all column values share a baseline */
  font-size: 16px;
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
@media (max-width: 767.98px) {
.action-run-summary-trigger[data-v-2694e540] {
    flex: 0 0 100%;
    margin-right: 0;
}
.action-run-summary-stat[data-v-2694e540] {
    margin-left: 0;
    margin-right: 24px;
}
.action-run-summary-stat-divider[data-v-2694e540] {
    display: block;
}
}

/* 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;
  min-width: 0;
}
.job-info-header-title-row[data-v-aa16672e] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.job-info-header-uses[data-v-aa16672e] {
  display: inline-flex !important;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.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;
  gap: 8px;
  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-chevron[data-v-aa16672e] {
  transition: transform 0.1s ease;
}
.job-step-container .job-step-summary.selected .step-summary-chevron[data-v-aa16672e] {
  transform: rotate(90deg);
}
.job-step-container .job-step-summary .step-summary-msg[data-v-aa16672e] {
  flex: 1;
}
.job-step-container .job-step-summary .step-copy-btn[data-v-aa16672e] {
  visibility: hidden;
  margin: 0 4px;
}
.job-step-container .job-step-summary:hover .step-copy-btn[data-v-aa16672e],
.job-step-container .job-step-summary.selected .step-copy-btn[data-v-aa16672e] {
  visibility: visible;
}
@media (hover: none) {
.job-step-container .job-step-summary:focus-within .step-copy-btn[data-v-aa16672e] {
    visibility: visible;
}
}
.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;
}
.job-log-line .log-time-stamp,
.job-log-line .log-time-seconds {
  display: none;
}
.log-line-show-timestamps .job-log-line .log-time-stamp {
  display: inline;
}
.log-line-show-seconds .job-log-line .log-time-seconds {
  display: inline;
}

/* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */
.job-log-line .line-num,
.job-log-line .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,
.job-log-line .log-time-stamp {
  color: var(--color-text-light-3);
  margin-left: 12px;
  white-space: nowrap;
}
.job-step-logs .job-log-line .log-msg {
  flex: 1;
  white-space: break-spaces; /* decoded commands like "::error::foo%0Abar" contain "\n" */
  margin-left: 12px;
  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-line-notice {
  background: var(--color-info-bg);
}
.job-step-logs .log-line-debug {
  background: var(--color-secondary-alpha-30);
}
.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-notice > .log-msg-label {
  color: var(--color-info-text);
}
.job-step-logs .log-cmd-debug > .log-msg-label {
  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-summary {
  cursor: pointer;
  list-style: none; /* hide the standard disclosure marker (Chrome, Edge, Firefox) */
}
.job-log-group-summary::-webkit-details-marker { /* hide the disclosure marker on Safari */
  display: none;
}
.log-line-group .log-msg::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -2.5px;
  margin-right: 8px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--color-text-light-3);
  transition: transform 0.1s ease;
}
.job-log-group[open] .log-line-group .log-msg::before {
  transform: rotate(90deg);
}

.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] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.action-view-back[data-v-c3422631] {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-light-1);
}
.action-view-back[data-v-c3422631]:hover {
  color: var(--color-primary);
}
.action-view-back-name[data-v-c3422631] {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.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;
  overflow-wrap: anywhere;
}
.action-info-summary-title-index[data-v-c3422631] {
  font-size: 20px;
  color: var(--color-text-light-2);
  flex: 1;
}
.action-info-summary .ui.button[data-v-c3422631] {
  margin: 0;
  white-space: nowrap;
}

/* ================ */
/* 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;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light-2);
}
.action-view-sidebar-list[data-v-c3422631] {
  margin: var(--gap-block) 0;
}
.action-view-sidebar-list[data-v-c3422631]:first-child {
  margin-top: 0;
}
.action-view-sidebar-list > .item[data-v-c3422631] {
  padding: 6px 10px;
  border-radius: var(--border-radius);
}
.action-view-sidebar-list > .item[data-v-c3422631]:hover {
  background-color: var(--color-hover);
}
.action-view-sidebar-list > .item.selected[data-v-c3422631] {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-active);
}
.caller-row-toggle[data-v-c3422631] {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  line-height: inherit; /* buttons don't inherit line-height; match the <a> rows' row height */
  cursor: pointer;
  text-align: inherit;
}
.job-brief-toggle-icon[data-v-c3422631] {
  flex-shrink: 0;
  transition: transform 0.15s ease;
  /* sit between name and duration; duration uses order:2 with margin-left:auto to float right */
  order: 1;
}
.job-brief-toggle-icon[data-v-c3422631]:not(.collapsed) {
  transform: rotate(180deg);
}

/* push rerun/duration to the right edge; only one is visible at a time (hover swap),
   the visible one absorbs the free space via auto-margin */
.action-view-sidebar-list > .item .job-rerun-button[data-v-c3422631],
.action-view-sidebar-list > .item .job-duration[data-v-c3422631] {
  order: 2;
  margin-left: auto;
}

/* the re-run button replaces the duration on hover or job-link focus */
.action-view-sidebar-list > .item .job-rerun-button[data-v-c3422631] {
  display: none;
}
.action-view-sidebar-list > .item:hover .job-rerun-button[data-v-c3422631],
.action-view-sidebar-list > .item:focus .job-rerun-button[data-v-c3422631] {
  display: inline-flex;
}

/* only swap out the duration when a re-run button exists to take its place */
.action-view-sidebar-list > .item:hover .job-rerun-button ~ .job-duration[data-v-c3422631],
.action-view-sidebar-list > .item:focus .job-rerun-button ~ .job-duration[data-v-c3422631] {
  display: none;
}

/* ================ */
/* 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;
  gap: 12px;
}
.action-view-right-panel[data-v-c3422631] {
  flex: 1; /* fill the right column so the summary graph stretches even without a job-summary section */
  border: 1px solid var(--color-console-border);
  border-radius: var(--border-radius);
  background: var(--color-console-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* begin fomantic button overrides */
.action-view-right-panel .ui.button[data-v-c3422631],
.action-view-right-panel .ui.button[data-v-c3422631]:focus {
  background: transparent;
  color: var(--color-console-fg-subtle);
}
.action-view-right-panel .ui.button[data-v-c3422631]:hover {
  background: var(--color-console-hover-bg);
  color: var(--color-console-fg);
}
.action-view-right-panel .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;
}
}
.job-summary-section[data-v-c3422631] {
  flex: 0 0 auto; /* size to its content; let the summary panel keep the remaining height */
  overflow: hidden;
}
.job-summary-section-header[data-v-c3422631] {
  padding: 12px;
  border-bottom: 1px solid var(--color-console-border);
  background: var(--color-console-bg);
  color: var(--color-console-fg);
  font-weight: var(--font-weight-semibold);
}
.job-summary-list[data-v-c3422631] {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.job-summary-item[data-v-c3422631] {
  padding: 12px;
  border-radius: var(--border-radius);
  background: var(--color-console-hover-bg);
  border: 1px solid var(--color-console-border);
}
.job-summary-header[data-v-c3422631] {
  color: var(--color-console-fg);
  margin-bottom: 8px;
}
.job-summary-body[data-v-c3422631] {
  color: var(--color-console-fg);
}

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