/*
  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
  - Keep the browser's default line-height on html, it is font-dependent and roughly 1.2
  - Keep the hr color that v3 dropped, it keeps the separator colored like the surrounding text
  - Keep the :-moz-focusring outline that v3 dropped, checkboxes and radios have no other focus style
*/

/*! modern-normalize v3.0.1 | 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;
  /* stylelint-disable-next-line property-no-vendor-prefix -- no unprefixed support in Safari or Firefox */
  -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
================
*/

hr {
  color: inherit;
}

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

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

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  border-color: currentcolor;
}

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

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

button,
[type="button"],
[type="reset"],
[type="submit"] {
  /* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
  -webkit-appearance: button;
}

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

/**
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"] {
  /* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

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

::-webkit-search-decoration {
  /* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
  -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 {
  /* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
  -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);
  overflow: hidden;
}

.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.button.hover-opaque:hover {
  /* ".ui.button:hover" uses alpha channel to "highlight", it doesn't work when the background is not body: the inherited color is not right
   for such case, use this opaque color */
  background: var(--color-hover-opaque);
}

.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) {
  margin: 0 0.42857143em 0 -0.21428571em;
  vertical-align: baseline;
}

/* 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 -- deliberate second block for the reference sizes */
  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: 6px 15px;
  min-height: 32px;
}
.ui.compact.icon.buttons .button,
.ui.compact.icon.button {
  padding: 6px 8px;
}

/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
.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.button {
  border-radius: var(--border-radius);
  color: var(--color-text-light);
  background: var(--color-button);
}

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

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

.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.button {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: none;
}

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

.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.button {
  color: var(--color-red);
  border-color: var(--color-red);
  background: none;
}

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

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

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

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

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

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

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

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

/* 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.site-banner-container {
  position: relative;
  margin: 0;
  border-radius: 0;
}

#navbar + .ui.message.site-banner-container,
.ui.message.site-banner-container + .ui.message.site-banner-container {
  border-top: none;
}

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

.ui.message.site-banner-container > button.site-banner-close {
  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 + 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;
}

.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.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.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.input:not(.disabled) input[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.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.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 {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  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 {
  border-radius: 0.28571429rem 0 0 0.28571429rem;
}
.ui.action.input > .dropdown:not(:first-child),
.ui.action.input > .button:not(:first-child) {
  border-radius: 0;
}
.ui.action.input > .dropdown:last-child,
.ui.action.input > .button:last-child {
  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 > .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 > .delete.icon {
  cursor: pointer;
  font-size: 0.92857143em;
  opacity: 0.5;
}
.ui.label > .delete.icon:hover {
  opacity: 1;
}

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

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

@media (forced-colors: active) {
  .ui.label {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
}

/* 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 > .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 > .item > i.icon:only-child {
  display: inline-block;
  min-width: auto;
  vertical-align: top;
}

.ui.list > .item > .image {
  display: table-cell;
  background-color: transparent;
  vertical-align: top;
}
.ui.list > .item > .image:not(:only-child):not(img) {
  padding-right: 0.5em;
}
.ui.list > .item > .image img {
  vertical-align: top;
}
.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 > .item > i.icon + .content {
  display: table-cell;
  width: 100%;
  padding: 0 0 0 0.5em;
  vertical-align: top;
}
.ui.list > .item > img.image + .content {
  display: inline-block;
  width: auto;
}
.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 .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 > .item::before {
  border: none;
  background: none;
}
.ui.menu .ui.list > .item:first-child {
  padding-top: 0;
}
.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 > 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.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.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:last-child,
.ui.attached.segment:has(+ :not(.ui.attached.segment)) {
  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 > .column > img {
  max-width: 100%;
}

.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 {
  width: 100%;
}

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

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

.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 > .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 > [class*="three wide"].column {
  width: 18.75% !important;
}
.ui.grid > [class*="four wide"].column {
  width: 25% !important;
}
.ui.grid > [class*="five wide"].column {
  width: 31.25% !important;
}
.ui.grid > [class*="six wide"].column {
  width: 37.5% !important;
}
.ui.grid > [class*="seven wide"].column {
  width: 43.75% !important;
}
.ui.grid > [class*="eight wide"].column {
  width: 50% !important;
}
.ui.grid > [class*="ten wide"].column {
  width: 62.5% !important;
}
.ui.grid > [class*="eleven wide"].column {
  width: 68.75% !important;
}
.ui.grid > [class*="twelve wide"].column {
  width: 75% !important;
}
.ui.grid > [class*="thirteen wide"].column {
  width: 81.25% !important;
}
.ui.grid > [class*="fourteen wide"].column {
  width: 87.5% !important;
}
.ui.grid > [class*="sixteen wide"].column {
  width: 100% !important;
}

.ui.centered.grid {
  text-align: center;
  justify-content: center;
}
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row) {
  text-align: left;
}
.ui.grid > .centered.column {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

.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 {
    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 > .wide.column,
  .ui.stackable.grid > .column:not(.row) {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    padding: 1rem;
  }

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

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

/* TODO: MENU-ITEM-FLEX-MARGIN: need to refactor: flex menu items don't need svg margin */
.ui.menu:not(.flex-items-block) .item:not(.flex-text-block, .flex-text-inline) > .svg {
  margin-right: 5px;
}

.ui.menu .item > a:not(.ui) {
  line-height: 1.3;
}
.ui.menu .item > p:last-child {
  margin-bottom: 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 > .container {
  display: flex;
  align-items: inherit;
  flex-direction: inherit;
}

.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.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.item .menu .item:not(.filtered) {
  display: block;
}

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

@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.ui.menu .item.disabled {
  cursor: default;
  background-color: transparent;
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

.ui.menu:not(.vertical) .left.menu {
  display: flex;
  margin-right: auto !important;
}

.ui.menu:not(.vertical) .right.menu {
  display: flex;
  margin-left: auto !important;
}
.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
  display: inherit;
}

.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.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.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 .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.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 .dropdown.item:hover,
.ui.secondary.menu a.item:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

.ui.secondary.menu .active.item {
  border-radius: 0.28571429rem;
}

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

.ui.secondary.vertical.menu > .item {
  border: none;
  margin: 0 0 0.35714286em;
  border-radius: 0.28571429rem !important;
}

.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 .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 .item::after {
  display: none;
}

.ui.secondary.pointing.menu a.item:hover {
  background-color: transparent;
  color: var(--color-text);
}

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

@media only screen and (max-width: 767.98px) {
  .ui.stackable.menu {
    flex-direction: column;
  }
  .ui.stackable.menu > .item,
  .ui.stackable.menu > .menu > .item {
    width: 100% !important;
  }
  .ui.stackable.menu .left.menu {
    margin-right: 0 !important;
  }
  .ui.stackable.menu .right.menu {
    margin-left: 0 !important;
  }
  .ui.stackable.menu .right.menu,
  .ui.stackable.menu .left.menu {
    flex-direction: column;
  }
}

.ui.borderless.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 .active.item::after {
  visibility: visible;
}

.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[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.tabular.menu {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.ui.mini.menu {
  font-size: 0.78571429rem;
}
.ui.tiny.menu {
  font-size: 0.85714286rem;
}
.ui.small.menu,
.ui.small.menu .dropdown,
.ui.small.menu .dropdown .menu > .item {
  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.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.positive.message {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

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

.ui.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 {
  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 {
  border-left: none;
}
.ui.table > tfoot > tr:first-child > th:first-child {
  border-radius: 0 0 0 0.28571429rem;
}
.ui.table > tfoot > tr:first-child > th:last-child {
  border-radius: 0 0 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;
}

@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) > 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) > tr > td,
  .ui.table:not(.unstackable) > tbody > tr > td {
    display: block !important;
    width: auto !important;
  }
  .ui.table:not(.unstackable) > thead {
    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 {
    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 {
    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) > tr > td:first-child,
  .ui.table:not(.unstackable) > tbody > 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 {
  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 > 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 > 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 > tr > td,
.ui.celled.table > tbody > 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 > tr > td:first-child,
.ui.celled.table > tbody > tr > td:first-child {
  border-left: none;
}

.ui.compact.table > tr > th,
.ui.compact.table > thead > tr > th,
.ui.compact.table > tbody > tr > th {
  padding-left: 0.7em;
  padding-right: 0.7em;
}
.ui.compact.table > tr > td,
.ui.compact.table > tbody > 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 > .header + .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.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.card > :only-child {
  border-radius: var(--border-radius) !important;
}

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

.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 a.card:hover,
a.ui.card:hover {
  border: 1px solid var(--color-secondary);
  background: var(--color-card);
}

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

@media (forced-colors: active) {
  input[type="checkbox"]:checked,
  input[type="checkbox"]:indeterminate {
    background: CanvasText;
    border-color: CanvasText;
  }
  input[type="checkbox"]:disabled:checked,
  input[type="checkbox"]:disabled:indeterminate {
    background: GrayText;
    border-color: GrayText;
  }
  input[type="radio"]:disabled:checked {
    border-color: GrayText;
  }
  .ui.toggle.checkbox label::before {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  .ui.toggle.checkbox label::after {
    background: CanvasText;
  }
}

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 > .button {
    margin-bottom: 1rem;
  }
}

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

.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 .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.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.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
  margin-top: 0.6em;
}

.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.field > .selection.dropdown {
  width: auto;
}
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
  float: none;
}

.ui.form .field .ui.input {
  width: 100%;
}

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

.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.error .error.message:not(:empty) {
  display: block;
}

.ui.form .field.error .error.message:not(:empty) {
  display: block;
}
.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 .field.error .ui.dropdown {
  border-color: var(--color-error-border);
}
.ui.form .field.error .ui.dropdown:hover {
  border-color: var(--color-error-border);
}

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

.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 {
  opacity: var(--opacity-disabled);
}
.ui.form .field.disabled :disabled {
  opacity: 1;
}

.ui.form .required.field > label::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.field > label::after,
.ui.form label.required::after {
  display: inline-block;
  vertical-align: top;
}
.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 .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.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.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 .field.error .ui.dropdown,
.ui.form .field.error .ui.dropdown:hover {
  border-color: var(--color-error-border) !important;
}

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

.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: 4px 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);
  width: calc(100% - 8px); /* button items do not stretch on their own */
  margin: 0 4px;
  padding: 0.78571429rem 0.85714286rem !important; /* 12px, the margin adds the remaining 4px */
  border-radius: var(--border-radius);
  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.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.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 > .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;
  padding: 0;
  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);
  width: 100%;
  margin: 0;
  padding: 0.78571429rem 1.14285714rem !important;
  border-radius: 0;
  white-space: normal;
  overflow-wrap: normal;
}

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

.ui.dropdown.keyboard-nav .menu .selected.item {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

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

.ui.dropdown:not(.button) > input:focus ~ .default.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 .menu .selected.item {
  color: var(--color-text);
  background: var(--color-active);
}

.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.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 .menu > .item > img {
  margin: -0.25rem 0.78571429rem -0.25rem 0;
  float: none;
  display: inline-block;
  vertical-align: top;
  width: auto;
  max-height: 2em;
}

/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
.ui.dropdown > .text > .img {
  margin-left: 0;
  float: none;
  margin-right: 0.78571429rem;
}

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

/* 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
TODO: rename it to "flex-items-dropdown" in the future since it is only used for dropdown menu items, not for other menu items */
.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;
}

/* TODO: MENU-ITEM-FLEX-MARGIN: need to refactor: flex menu items don't need svg margin, too many patches (see below ...) */
.ui.dropdown .menu:not(.flex-items-menu) > .item:not(.flex-text-block, .flex-text-inline) > .svg {
  margin-right: 10px;
}

.ui.dropdown .menu.flex-items-menu > .item img,
.ui.dropdown .menu.flex-items-menu > .item svg {
  margin: 0;
}

.ui.dropdown .menu.items-width-limit .item {
  max-width: min(500px, calc(100vw - 2em));
}

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

/* opt-in via createTippy's "limitSizeToViewport" */
[data-tippy-limit-size] .tippy-box {
  display: flex;
  flex-direction: column;
  max-width: var(--tippy-max-width, none);
  max-height: var(--tippy-max-height, none);
}

[data-tippy-limit-size] .tippy-content {
  overflow: auto;
}

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

.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;
  margin: 0 4px;
  padding: 9px 14px;
  border-radius: var(--border-radius);
  color: inherit;
  background: inherit;
  text-decoration: none;
  gap: 10px;
  width: calc(100% - 8px); /* button items do not stretch on their own */
}

.tippy-box[data-theme="menu"] .item:hover {
  background: var(--color-hover);
}

.tippy-box[data-theme="menu"] .item.active {
  background: var(--color-active);
}

.tippy-box[data-theme="menu"] .divider {
  margin: 4px 0; /* fit the menu's vertical padding */
}

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

#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 :is(a, button).item:not(.dropdown *):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 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;
  left: auto;
  right: -7px;
  bottom: -5px;
  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-text);
  border: 1px solid var(--color-secondary);
  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-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.toast-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.toast-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.toast-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.toast-success .toast-icon { color: var(--color-success-text); }
.toast-info .toast-icon { color: var(--color-info-text); }
.toast-warning .toast-icon { color: var(--color-warning-text); }
.toast-error .toast-icon { color: var(--color-error-text); }

.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 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.flex-divided-list > .item {
  padding: 10px 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 */
}

/* because dropzone css is imported after our css, so use double class selector to override dropzone styles */
.dropzone.dropzone {
  border: 2px dashed var(--color-secondary);
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: var(--border-radius-medium);
  min-height: 0;
}

.dropzone.dropzone .dz-message {
  margin: 10px 0;
}

.dropzone.dropzone .dz-preview .dz-success-mark svg,
.dropzone.dropzone .dz-preview .dz-error-mark svg {
  fill: currentcolor;
}

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

.dropzone .dz-default.dz-message .dz-button {
  color: var(--color-text-light);
}

.dropzone .dz-default.dz-message .dz-button:hover {
  color: var(--color-text);
}

.dz-custom-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block);
  margin-top: var(--gap-block);
}

.dz-custom-buttons button {
  background: transparent;
  color: var(--color-text-light);
  border: none;
}

.dz-custom-buttons button:hover {
  color: var(--color-primary);
}

.dropzone a.dz-filename,
.dropzone a.dz-filename *,
.dz-custom-buttons button {
  cursor: pointer !important; /* override ".dz-clickable *" */
}

.dropzone .dz-filename span[data-dz-name] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-filename span[data-dz-name]:hover {
  display: inline-block;
  overflow: visible;
}

.dropzone .dz-error-message {
  top: 145px !important;
}

.dropzone .dz-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--border-radius) !important;
}

.dropzone .dz-file-preview .dz-image {
  background: var(--color-secondary-bg) !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;
}

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

/*!
 * Cropper.js v1.6.3
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2026-08-23T09:24:55.184Z
 */

.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 {
  50% {
    color: transparent;
  }
}

/* SGR attributes emitted by web_src/js/render/ansi.ts */

.ansi-bold { font-weight: var(--font-weight-semibold); }
.ansi-italic { font-style: italic; }
.ansi-blink { animation: blink-animation 1s step-end infinite; }
.ansi-faint { color: color-mix(in srgb, currentcolor 70%, transparent); }
.ansi-conceal { color: transparent; }
.ansi-inverse-fg { color: var(--color-console-bg); }
.ansi-inverse-bg { background-color: var(--color-console-fg); }

.ansi-underline { text-decoration-line: underline; }
.ansi-line-through { text-decoration-line: line-through; }
.ansi-overline { text-decoration-line: overline; }
.ansi-underline.ansi-line-through { text-decoration-line: underline line-through; }
.ansi-underline.ansi-overline { text-decoration-line: underline overline; }
.ansi-line-through.ansi-overline { text-decoration-line: line-through overline; }
.ansi-underline.ansi-line-through.ansi-overline { text-decoration-line: underline line-through overline; }

.ansi-double { text-decoration-style: double; }
.ansi-wavy { text-decoration-style: wavy; }
.ansi-dotted { text-decoration-style: dotted; }
.ansi-dashed { text-decoration-style: dashed; }

/* ANSI 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 step-end 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) {
  .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 .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 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 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 */
  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 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;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
    local("HiraginoSans-W4"), local("Source Han Sans JP Regular"),
    local("SourceHanSansJP-Regular"), local("Source Han Sans J Regular"),
    local("SourceHanSansJ-Regular"), local("Noto Sans CJK JP Regular"),
    local("NotoSansCJKJP-Regular"), local("Source Han Sans Regular"),
    local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
    local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
    local("MS PGothic");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
    local("HiraginoSans-W5"), local("Source Han Sans JP Medium"),
    local("SourceHanSansJP-Medium"), local("Source Han Sans J Medium"),
    local("SourceHanSansJ-Medium"), local("Noto Sans CJK JP Medium"),
    local("NotoSansCJKJP-Medium"), local("Source Han Sans Medium"),
    local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
    local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
    local("MS PGothic");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ja;
  src: local("HiraKakuProN-W6"), local("Hiragino Kaku Gothic ProN W6"),
    local("HiraginoSans-W6"), local("Source Han Sans JP Bold"),
    local("SourceHanSansJP-Bold"), local("Source Han Sans J Bold"),
    local("SourceHanSansJ-Bold"), local("Noto Sans CJK JP Bold"),
    local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
    local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
    local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */
@font-face {
  font-family: system-ui-ja;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */
@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-ja;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Light"), local("Source Han Sans CN Light"),
    local("SourceHanSansCN-Light"), local("Source Han Sans SC Light"),
    local("SourceHanSansSC-Light"), local("Noto Sans CJK SC Light"),
    local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
    local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
    local("Heiti SC Light"), local("SimHei");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Regular"), local("Source Han Sans CN Regular"),
    local("SourceHanSansCN-Regular"), local("Source Han Sans SC Regular"),
    local("SourceHanSansSC-Regular"), local("Noto Sans CJK SC Regular"),
    local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
    local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
    local("Heiti SC Light"), local("SimHei");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Medium"), local("Source Han Sans CN Medium"),
    local("SourceHanSansCN-Medium"), local("Source Han Sans SC Medium"),
    local("SourceHanSansSC-Medium"), local("Noto Sans CJK SC Medium"),
    local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
    local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
    local("Heiti SC Light"), local("SimHei");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-cn;
  src: local("PingFangSC-Semibold"), local("Source Han Sans CN Bold"),
    local("SourceHanSansCN-Bold"), local("Source Han Sans SC Bold"),
    local("SourceHanSansSC-Bold"), local("Noto Sans CJK SC Bold"),
    local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
    local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
    local("Heiti SC Medium"), local("SimHei");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */
@font-face {
  font-family: system-ui-zh-cn;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */
@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-zh-cn;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Light"), local("Source Han Sans TW Light"),
    local("SourceHanSansTW-Light"), local("Source Han Sans TC Light"),
    local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
    local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
    local("Heiti TC Light"), local("PMingLiU");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Regular"), local("Source Han Sans TW Regular"),
    local("SourceHanSansTW-Regular"), local("Source Han Sans TC Regular"),
    local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
    local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Medium"), local("Source Han Sans TW Medium"),
    local("SourceHanSansTW-Medium"), local("Source Han Sans TC Medium"),
    local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
    local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-tw;
  src: local("PingFangTC-Semibold"), local("Source Han Sans TW Bold"),
    local("SourceHanSansTW-Bold"), local("Source Han Sans TC Bold"),
    local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
    local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
    local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
    local("Heiti TC Medium"), local("PMingLiU");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */
@font-face {
  font-family: system-ui-zh-tw;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */
@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-zh-tw;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Light"), local("Source Han Sans HK Light"),
    local("SourceHanSansHK-Light"), local("Source Han Sans HC Light"),
    local("SourceHanSansHC-Light"), local("Noto Sans CJK HK Light"),
    local("NotoSansCJKHK-Light"), local("Source Han Sans TC Light"),
    local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
    local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Regular"), local("Source Han Sans HK Regular"),
    local("SourceHanSansHK-Regular"), local("Source Han Sans HC Regular"),
    local("SourceHanSansHC-Regular"), local("Noto Sans CJK HK Regular"),
    local("NotoSansCJKHK-Regular"), local("Source Han Sans TC Regular"),
    local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
    local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Medium"), local("Source Han Sans HK Medium"),
    local("SourceHanSansHK-Medium"), local("Source Han Sans HC Medium"),
    local("SourceHanSansHC-Medium"), local("Noto Sans CJK HK Medium"),
    local("NotoSansCJKHK-Medium"), local("Source Han Sans TC Medium"),
    local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
    local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-zh-hk;
  src: local("PingFangHK-Semibold"), local("Source Han Sans HK Bold"),
    local("SourceHanSansHK-Bold"), local("Source Han Sans HC Bold"),
    local("SourceHanSansHC-Bold"), local("Noto Sans CJK HK Bold"),
    local("NotoSansCJKHK-Bold"), local("Source Han Sans TC Bold"),
    local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
    local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
    local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
    local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */
@font-face {
  font-family: system-ui-zh-hk;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */
@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-zh-hk;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-Light"), local("Source Han Sans KR Light"),
    local("SourceHanSansKR-Light"), local("Source Han Sans K Light"),
    local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
    local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
    local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
  font-weight: 300;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-Regular"), local("Source Han Sans KR Regular"),
    local("SourceHanSansKR-Regular"), local("Source Han Sans K Regular"),
    local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
    local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
    local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
  font-weight: 400;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-Medium"), local("Source Han Sans KR Medium"),
    local("SourceHanSansKR-Medium"), local("Source Han Sans K Medium"),
    local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
    local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
    local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
  font-weight: 500;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

@font-face {
  font-family: system-ui-ko;
  src: local("AppleSDGothicNeo-SemiBold"), local("Source Han Sans KR Bold"),
    local("SourceHanSansKR-Bold"), local("Source Han Sans K Bold"),
    local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
    local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
    local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
  font-weight: 600;
  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

/* Safari on macOS/iOS */
@font-face {
  font-family: system-ui-ko;
  src: local("HelveticaNeue");
  unicode-range: U+A0;
}

/* Other browsers on macOS/iOS */
@supports not (-webkit-hyphens: none) {
  @font-face {
    font-family: system-ui-ko;
    src: local("HelveticaNeue");
    unicode-range: U+20;
  }
}
:root {
  /* fonts */
  --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
  --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
  /* Chromium's "math" is a font Linux and ChromeOS don't ship, so fall back to the math fonts they do, https://issues.chromium.org/issues/40069293 */
  --fonts-math: math, "STIX Two Math", "DejaVu Math TeX Gyre", "Noto Sans Math";
  /* 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 */
}

math {
  font-family: var(--fonts-math);
  font-size-adjust: ex-height 0.52; /* match KaTeX's x-height (0.431 × 1.21em) regardless of math font, https://github.com/w3c/mathml-core/issues/41 */
}

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

@media (forced-colors: active) {
  progress {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  progress::-webkit-progress-value {
    background: CanvasText;
  }
}

* {
  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;
  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.disabled {
  cursor: default;
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

a.label,
.ui .menu a,
.ui.cards a.card {
  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);
}

.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 .sha.label {
  font-family: var(--fonts-monospace);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  flex-shrink: 0;
}

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

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

/* hide until JS has arranged the items, so the un-collapsed menu is never painted */
overflow-menu:not([data-ready]) {
  visibility: hidden;
}

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.ui.menu .overflow-menu-popup > .item.item { /* doubled class beats the host menu's item styles */
  margin: 0 4px;
  padding-inline: 8px !important; /* plus the margin, matches the host's tab padding */
  border: none;
  border-radius: var(--border-radius);
  color: var(--color-text);
  width: calc(100% - 8px);
}

overflow-menu.ui.menu .overflow-menu-popup > .item.item:hover,
overflow-menu.ui.menu .overflow-menu-popup > .item.item:focus {
  background: var(--color-hover);
}

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

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 */
  font-variant-numeric: tabular-nums; /* equal-width digits so counts don't reflow the row */
}

/* count not loaded yet, keep the reserved space so filling it in does not shift the row */
overflow-menu .ui.label:empty {
  visibility: hidden;
}

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

.code-inner:has(.diff-line-truncated) {
  text-decoration: underline dashed 1px;
  text-underline-offset: 4px;
}

.code-inner .diff-line-truncated {
  margin-left: var(--gap-inline);
  padding: 0 4px;
  user-select: none;
}

.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.ui.ui.ui .item.flex-text-block, /* override .ui.list and .ui.vertical.menu */
.ui.ui.ui.ui.flex-items-block > .item,
.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
.flex-items-block > .item,
.flex-text-block {
  display: flex;
  align-items: center;
  gap: var(--gap-block);
  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;
}

.avatar-stack-names > a,
.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;
}

.latest-commit .commit-summary,
.repo-file-item .commit-summary {
  flex: 1;
  overflow-wrap: anywhere;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

.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-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.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 .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.is-closed .issue-dependency-title {
  text-decoration: line-through;
}

.repository.view.issue .ui.depending .item .item-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

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

@media (forced-colors: active) {
  .repository.branches .commit-divergence .bar {
    background: CanvasText;
  }
}

.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 {
  background-color: var(--color-diff-added-row-bg) !important;
}

.repository .data-table td.removed,
.repository .data-table th.removed {
  background-color: var(--color-diff-removed-row-bg) !important;
}

.repository .data-table td.moved,
.repository .data-table th.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: 4px 5px;
  margin: 0 -5px; /* negative margin so it covers active file shadow */
  height: 41px; /* 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 .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 .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 [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 .image-diff img {
  max-width: 100%;
  padding: 0;
  border-radius: 0;
}

.diff-file-box {
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  scroll-margin-top: 44px; /* .diff-detail-box height plus the :target shadow */
}

.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 .repo-search-result {
  padding-top: 10px;
  padding-bottom: 10px;
}

.repository .repo-search-result .lines-num a {
  color: inherit;
}

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

.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-boxes-column {
  flex: 1;
  min-width: 0;
}

#diff-file-boxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#diff-file-tree {
  flex: 0 0 256px;
  min-width: 0;
  line-height: inherit;
  position: sticky;
  padding-top: 0;
  top: 44px; /* match .diff-file-box scroll-margin-top */
  max-height: calc(100vh - 44px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1201px) {
  #diff-file-tree {
    flex-basis: 320px;
  }
}

.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: 41px; /* dock right below .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-table {
    overflow-x: auto;
  }
  .commit-table td.sha,
  .commit-table th.sha {
    display: none !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 is used in the PR merge box and the commit status popup, both are 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;
  border-radius: 0;
}

.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 .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-top a:hover,
.repo-home-sidebar-bottom a:hover {
  text-decoration-line: none;
}

.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-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;
  margin: 0;
  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-left .markup {
  margin: var(--gap-block) 0;
}

.packages-content-left .markup pre.code-block {
  margin: 0;
}

.package-manual-vars {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.package-manual-vars select {
  border-radius: var(--border-radius);
}

.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-editor-container[data-combo-editor-page="previewer"] .form-field-dropzone,
.combo-editor-container[data-combo-editor-page="previewer"] .dropzone {
  display: none;
}

.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 img.profile-avatar-image {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .user.profile img.profile-avatar-image {
    width: 30vw;
  }
}

.user.link-account:not(.icon) {
  padding-top: 15px;
  padding-bottom: 5px;
}

.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.issues .context.user.menu .ui.header {
  font-size: 1rem;
}

.dashboard.issues .filter.menu {
  width: initial;
}

.dashboard.issues .filter.menu .item {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sort */
.dashboard.issues .filter.menu .jump.item {
  margin: 1px;
  padding-right: 0;
}

.dashboard.issues .filter.menu .menu {
  max-height: 300px;
  overflow-x: auto;
  right: 0 !important;
  left: auto !important;
}

@media (max-width: 767.98px) {
  .dashboard.issues .filter.menu {
    width: 100%;
  }
}

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

.site-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 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.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 .editor-statusbar {
  display: none;
}

.comment-code-cloud .footer {
  padding: 10px 0;
}

.diff-file-body .comment-form {
  margin: 0 0 0 3em;
}

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

.action-view-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  min-height: 50px; /* reserve the back link and title height so the body does not shift when the run data arrives */
}

.action-view-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-light-1);
  text-decoration: none;
}

.action-view-back:hover {
  color: var(--color-text);
  text-decoration: none;
}

.action-info-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.action-info-summary-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.action-info-summary-title-text {
  font-size: 20px;
  margin: 0;
  overflow-wrap: anywhere;
}

.action-info-summary-title-index {
  font-size: 20px;
  color: var(--color-text-light-2);
  flex: 1;
}

.action-info-summary .ui.button {
  margin: 0;
  white-space: nowrap;
}

.ui.vertical.menu .artifact-preview-item {
  padding-left: calc(1em + var(--depth, 0) * 1.25em);
}

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

/* primary-color dot centered on the top-right corner of the element */
.indicator-dot {
  position: relative;
}

.indicator-dot::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 1px solid var(--color-secondary);
  transform: translate(50%, -50%);
}

@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-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-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-\[100px\] {
  height: 100px !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-\[16px\] {
  width: 16px !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-\[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;
}
.\[issueStart\:issueEnd\] {
  issue-start: issueEnd !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;
}
.\[windowStart\:start\] {
  window-start: start !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;
}

svg[data-v-e0d68e92] {
  display: block; /* avoid the inline-baseline gap so the reserved container height matches exactly */
}
.axis-line[data-v-e0d68e92] {
  stroke: var(--color-secondary-alpha-60);
  stroke-width: 1;
}

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-ext-filter-menu[data-v-e1926510] {
  min-width: 192px;
  max-width: 320px;
}
.diff-ext-filter-header[data-v-e1926510] {
  padding: 6px 18px;
  color: var(--color-text-light-2);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}
.diff-ext-filter-check[data-v-e1926510] {
  display: flex;
  flex: 0 0 16px;
  color: var(--color-text-light-2);
}
.diff-ext-filter-count[data-v-e1926510] {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--border-radius-full);
  background: var(--color-label-bg);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 12px;
}
.diff-ext-filter-trigger[data-v-e1926510] {
  height: 32px;
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-medium);
  background: var(--color-button);
  color: var(--color-text-light-2);
}
.diff-ext-filter-trigger[data-v-e1926510]:hover {
  background: var(--color-hover);
}

.diff-file-tree-wrapper[data-v-92304f2e] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
}
.diff-file-tree-search-row[data-v-92304f2e] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 1px; /* match .diff-file-box's top border so this row aligns with .diff-file-header */
}
.diff-file-search-wrapper[data-v-92304f2e] {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.diff-file-search-icon[data-v-92304f2e] {
  position: absolute;
  left: 8px;
  color: var(--color-text-light-2);
  pointer-events: none;
}
.diff-file-search-input[data-v-92304f2e] {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 28px;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-medium);
  background: var(--color-input-background);
  color: var(--color-text);
}
.diff-file-search-input[data-v-92304f2e]:focus {
  outline: none;
  border-color: var(--color-primary);
}
.diff-file-search-clear[data-v-92304f2e] {
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  width: 20px;
  background: none;
  border: none;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
  padding: 0;
}
.diff-file-search-clear[data-v-92304f2e]:hover {
  color: var(--color-text);
}
.diff-file-tree-items[data-v-92304f2e] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.ui.dropdown.diff-commit-selector .menu[data-v-b39612da] {
    margin-top: 0.25em;
    padding: 0;
    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;
    width: auto;
    margin: 0;
    padding: 7px 14px !important;
    border-radius: 0;
}
.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;
  gap: var(--gap-block);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-secondary);
}
.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.unlinked-node[data-v-9fd6d978],
.graph-list-row.unlinked-node[data-v-9fd6d978] {
  cursor: default;
}
.graph-list-row.unlinked-node[data-v-9fd6d978]:hover {
  background: none;
}
.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 */
  gap: 8px 48px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-secondary);
}
.action-run-summary-trigger[data-v-2694e540] {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.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;
}
.action-run-summary-stat-divider[data-v-2694e540] {
  display: none;
  flex: 0 0 100%;
  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-block[data-v-2694e540] {
    column-gap: 24px;
}
.action-run-summary-trigger[data-v-2694e540] {
    flex: 0 0 100%;
}
.action-run-summary-stat-divider[data-v-2694e540] {
    display: block;
}
}

.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;
  border-bottom: 1px solid var(--color-secondary);
}
.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);
}
.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;
}
 /* 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 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-secondary);
  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-secondary);
  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-secondary);
}
.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;
}