.assigned-to.attribute a.icon.assign-to-me {
  margin-left: 5px;
}

table.list td.entity-relation {
  text-align: left;
}

.fixed-form input[type='text'],
.fixed-form input[type='password'],
.fixed-form input[type='url'],
.fixed-form input[type='email'],
.fixed-form input[type='search'],
.fixed-form textarea {
  width: var(--a-fixed-width);
}

input[type='search']:focus#search,
input[type='search']:active#search {
  border: 1px solid #5ad;
  outline: none;
}

.query-description,
.dashboard-description {
  color: var(--a-color-dark);
  margin-bottom: 15px;
  font-size: var(--a-font-size-md);
}

span.dashboard-locked {
  stroke: var(--a-color-dark);
}

fieldset.hide-attachments {
  padding-left: 0;
  margin-top: 8px;
}

#my-page.dashboard .settings input[type='text'],
#my-page.dashboard .settings input[type='password'],
#my-page.dashboard .settings input[type='url'] {
  width: var(--a-fixed-width);
}

/* Icons */

.external-links a.external,
em.info a.external {
  background-image: url("/assets/external-093f681f.png");
  padding-left: 14px;
  background-position: 0% 60%;
  background-repeat: no-repeat;
}

.flex-buttons {
  margin-top: 2px;
  margin-bottom: 2px;
}

.flex-center {
  display: flex;
  align-items: center;
}

.icon.icon-padding,
.icon-svg.icon-padding {
  padding-right: 2px;
}

.icon-svg.disabled { stroke: var(--a-color-disabled); }

/* async loading spinner (dashboard blocks) */
svg.icon-svg.additionals-spin {
  transform-origin: center;
  animation: additionals-spin 1s linear infinite;
}

@keyframes additionals-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* {{fa}} wiki macro icon: follow the surrounding text color (or the color
   option set on the wrapper) */
svg.icon-svg.additionals-macro-icon { stroke: currentcolor; }

svg.icon-svg.smiley {
  fill: var(--a-color-smiley);
  stroke-width: 2;
}

svg.icon-svg.info-smiley { stroke-width: 2; }

.icon-smiley-check svg.icon-svg.info-smiley,
.icon-smiley-success svg.icon-svg.info-smiley { stroke: var(--a-color-success); }

.icon-smiley-exclamation svg.icon-svg.info-smiley,
.icon-smiley-failure svg.icon-svg.info-smiley { stroke: var(--a-color-warning); }

.icon-smiley-question svg.icon-svg.info-smiley { stroke: var(--a-color-help); }

ul.dashboard-list {
  padding-left: 20px;
  margin-top: 0;
}

.labeled-list {
  display: table;
  padding-top: 5px;
}

.labeled-list > .line {
  display: table-row;
}

.labeled-list > .line > .label {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  width: 50%;
}

.labeled-list > .line > .value {
  display: table-cell;
  vertical-align: top;
}

.icon-label {
  margin-left: 4px;
}

svg.s64 {
  width: 64px;
  height: 64px;
}

svg.s50 {
  width: 50px;
  height: 50px;
}

svg.s40 {
  width: 40px;
  height: 40px;
}

svg.s32 {
  width: 32px;
  height: 32px;
}

svg.s24 {
  width: 1.5rem;
  height: 1.5rem;
}

svg.s22 {
  width: 22px;
  height: 22px;
}

svg.s16 {
  width: 1rem;
  height: 1rem;
}

svg.suffixed {
  margin-left: 3px;
}

svg.dashboard-system-default.global {
  stroke: var(--a-color-alert);
}

.icon-flipped-color svg {
  stroke: none;
  fill: var(--a-color-default);
}

.icon-flipped-color.a.selected:hover {
  text-decoration: none;
}

/* A table cell carries the name of its column, so `avatar` there means "the
   avatar column" and never "this element is an avatar" - Redmine builds the cell
   class from the column name (Query#css_classes), so the collision can appear
   without anyone writing markup. Core's component rule would take the cell out
   of the table layout with display: inline-flex, which leaves the row
   background and the column below it broken off under the avatar. */
td.avatar,
th.avatar {
  display: table-cell;
  border-radius: 0;
}

/* Core ships .avatar size classes for 13/16/22/24/40/50 only, so an avatar drawn
   at any other size has no size at all. An image avatar carries width and height
   attributes and survives that, but the initials avatar is a bare inline-flex
   span and collapses to the width of its two letters. 14px is the default of
   user_with_avatar, 32px is used all over servicedesk, 250px is the avatar
   upload preview of hrm. */
.avatar.s14 {
  block-size: 14px;
  inline-size: 14px;
}

span[role='img'].avatar.s14 {
  font-size: calc(0.875rem * 0.4);
}

.avatar.s32 {
  block-size: 32px;
  inline-size: 32px;
}

span[role='img'].avatar.s32 {
  font-size: calc(2rem * 0.4);
}

.avatar.s250 {
  block-size: 250px;
  inline-size: 250px;
}

span[role='img'].avatar.s250 {
  font-size: calc(15.625rem * 0.4);
}

.additionals-avatar { margin-right: 0.25em; }

/* An avatar written next to its name is one unit, the margin above spaces it.
   A detail page carries core's issue class, and div.issue .avatar floats every
   avatar below it with the margin of the large author avatar core draws there -
   that would pull the avatar out of the line and tear the pair apart. */
div.issue .additionals-avatar {
  float: none;
  margin: 0 0.25em 0 0;
}

/* A linked avatar carries the class on the link, so the float has to go from the
   image inside it as well - a floated child would leave the link box empty. */
div.issue .additionals-avatar .avatar {
  float: none;
  margin: 0;
}

/* Warning ring around the account avatar while redmine_sudo admin permission is
   active. redmine_sudo adds the `sudo-active` class to #account. */
#account.sudo-active .dropdown-trigger .avatar {
  box-shadow: 0 0 0 2px var(--a-color-alert);
}

.nodata.nodata-left { text-align: left; }

/* Go to top link */
.gototop {
  margin-top: 20px;
  text-align: right;
}

/* Padding on the link itself, so the clickable area is a comfortably sized
   target on the right instead of spanning the full page width */
.gototop a {
  display: inline-block;
  padding: 10px 15px;
}

.gototop a:hover {
  background-color: var(--a-color-bg-subtle);
}

/* Footer */
.additionals-footer {
  text-align: center;
  font-size: var(--a-font-size-sm);
}

.login-additionals {
  margin-left: auto;
  margin-right: auto;
  max-width: 490px;
  font-size: var(--a-font-size-md);
}

/* stylelint-disable selector-class-pattern */
img.inline_emojify {
  width: 20px;
  height: 20px;
}
/* stylelint-enable selector-class-pattern */

/* stylelint-disable selector-type-no-unknown */
additionals-emoji {
  font-style: normal;
  display: inline-flex;
  vertical-align: baseline;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: var(--a-font-size-emoji);
  line-height: 1;
}
/* stylelint-enable selector-type-no-unknown */

div.clear-both { clear: both; }

/* fix problem with tabs */
.default-query-settings-label label {
  width: 250px !important;
  margin-left: 0 !important;
  float: none;
  font-weight: normal;
  text-align: left;
}

.clipboard-button {
  padding-bottom: 2px;
  padding-top: 2px;
  text-align: center;
  float: left;
}

.clipboard-text { cursor: pointer; }

.dashboard-block h3 svg,
#page-title svg {
  stroke: var(--a-color-dark);
  stroke-width: 2;
}

h2#page-title {
  display: inline-flex;
  padding-left: 0;
  align-items: center;
}

h2#page-title input {
  font-size: var(--a-font-size-lg);
}

.with-list-seperator::after {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  content: '»';
}

h2#page-title.live-search input {
  margin-left: 5px;
}

div.macro-box {
  margin-bottom: 15px;
}

div.macro-title {
  font-weight: bold;
}

div.macro-desc {
  border-bottom: 1px solid #eee;
}

/* Top-menu submenu flyouts. On pointer devices they open on hover; touch
   devices toggle the `visible` class via JS (see top_menu_dropdown.js). */
@media (hover: hover) {
  .top-menu li:hover ul.menu-children { display: block; }
}

.top-menu li ul.menu-children.visible { display: block; }

.top-menu .menu-children {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 45;
  background-color: var(--oc-white);
  border: 1px solid var(--oc-gray-4);
  border-radius: 4px;
  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
  top: 17px;
  max-height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  font-size: var(--a-font-size-sm);
}

.top-menu .menu-children li {
  float: left;
  clear: both;
  width: 100%;
}

.top-menu .menu-children li a {
  display: flex;
  gap: 0.4em; /* flex layout trims the whitespace between a leading icon and its label */
  color: var(--oc-blue-9);
  padding: 8px 16px;
  font-weight: normal;
  margin-right: 0;
}

/* submenu icons follow the link text color (the dropdown has a light
   background, so they must not inherit the top-menu bar's white stroke) */
.top-menu .menu-children a svg.icon-svg {
  stroke: currentcolor;
}

.top-menu .menu-children li a:hover {
  color: var(--oc-blue-9);
  background-color: var(--oc-gray-1);
  text-decoration: none;
}

input.livesearch {
  background: #fff url("/assets/plugin_assets/additionals/search-43e82249.svg") no-repeat 2px 50%;
  padding-left: 20px !important;
  stroke: var(--a-color-dark);
  fill: none;
}

.icon.icon-search {
  background-image: url("/assets/plugin_assets/additionals/search-43e82249.svg");
}

/* Wiki icon add */
div.additionals-projects li.project a.icon {
  margin-left: 3px;
}

.relation-links a.icon-del,
.relation-links a.icon-link-break {
  opacity: 0.4;
}

.relation-links a.icon-del:hover,
.relation-links a.icon-link-break:hover {
  opacity: 1;
}

#sidebar .relation-links a.icon-del,
#sidebar .relation-links a.icon-link-break {
  opacity: unset;
}

a.link-remove { margin-left: 5px; }

div.additionals-projects li.project.even,
div.additionals-projects li.project.odd {
  border-bottom: 1px solid #ddd;
  padding: 4px;
  background-color: inherit;
  list-style-position: inside;
}

.additionals-block {
  margin-bottom: 20px;
}

.additionals-chart-wrapper {
  width: 99%;
}

.additionals-chart-left {
  float: left;
  width: 360px;
}

/* has to be same width as additionals-table-of-values */
.additionals-chart-right {
  float: left;
  width: 450px;
}

.additionals-table-of-values > .values {
  float: left;
  width: 450px;
}

table.table-of-values {
  margin-left: 20px;
}

table.table-of-values td {
  padding: 3px;
}

table.table-of-values caption {
  font-weight: bold;
}

.additionals-projects ul {
  padding-left: 0;
}

.additionals-number-positive { color: var(--a-color-success); }
.additionals-number-negative { color: var(--a-color-alert); }

/* Name/value pairs in a sidebar: a list of properties, label in front of the
   value. Shared here so every plugin renders sidebar attributes alike - Redmine
   uses the same list markup for user attributes in its core view.

   Flowing instead of fixed columns on purpose: a sidebar is narrow, and a long
   value (address, link) wraps below its label rather than being squeezed into a
   rest column. Margin, padding and bullets already come from Redmine's
   "#sidebar ul" rules, so only the label needs styling here. */
.sidebar-attributes span.label {
  margin-right: 3px;
  font-weight: bold;
  line-height: 1.3em;
}

/* String and text values are rendered as wiki content, so their paragraph would
   add vertical margins inside the row. Written per field type, like Redmine does
   for issue attributes. */
.sidebar-attributes .string_cf .wiki p,
.sidebar-attributes .link_cf .wiki p {
  margin-block: 0;
}

.sidebar-attributes .text_cf .wiki p:first-of-type {
  margin-block-start: 0;
}

/* stylelint-disable selector-class-pattern */
.jstb_macros {
  background-image: url("/assets/plugin_assets/additionals/bt_macros-c70cb2d3.svg");
}
/* stylelint-enable selector-class-pattern */

/* An instance can hold dozens of macros, so the list scrolls instead of running
   past the window. The stacking order keeps it above the visual editor, whose
   own popups sit at 1300. */
ul.additionals-macro-menu {
  z-index: 1400;
  max-height: 60vh;
  overflow-y: auto;
}

div.relation-list-header {
  background: #eee;
  font-weight: bold;
  padding-bottom: 2px;
}

.splitcontent.dashboard {
  margin-bottom: 20px;
}

.dashboard .splitcontentbottom {
  flex: 1;
  flex-basis: 100%;
}

.dashboard .splitcontenttop,
.dashboard .splitcontentbottom {
  width: 100%;
}

.dashboard .splitcontentright,
.dashboard .splitcontentleft {
  width: 50%;
}

select.dashboard-block-select {
  min-width: 200px;
}

/* stylelint-disable selector-max-id */
#my-page.dashboard #list-left .tabular.settings p,
#my-page.dashboard #list-right .tabular.settings p {
  padding-left: 0;
}

#my-page.dashboard #list-left .tabular.settings label,
#my-page.dashboard #list-right .tabular.settings label {
  margin-left: 0;
  width: 100%;
  text-align: left;
}
/* stylelint-enable selector-max-id */

div.drdn-items a.disabled,
div.drdn-items a.disabled:hover { color: var(--a-color-disabled); }

table.entity-list td.block_column {
  color: var(--a-color-info);
  font-size: var(--a-font-size-sm);
  padding: 4px 4px 4px 2px;
  text-align: left;
  white-space: normal;
}

tr.block-row.idnt-1 td.block_column { padding-left: 24px; }
tr.block-row.idnt-2 td.block_column { padding-left: 40px; }
tr.block-row.idnt-3 td.block_column { padding-left: 56px; }
tr.block-row.idnt-4 td.block_column { padding-left: 72px; }
tr.block-row.idnt-5 td.block_column { padding-left: 88px; }
tr.block-row.idnt-6 td.block_column { padding-left: 104px; }
tr.block-row.idnt-7 td.block_column { padding-left: 120px; }
tr.block-row.idnt-8 td.block_column { padding-left: 136px; }
tr.block-row.idnt-9 td.block_column { padding-left: 152px; }

table.entity-list td.block_column span {
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

table.entity-list td.block_column pre {
  white-space: normal;
}

.badge-author {
  color: var(--a-color-author);
  border: 1px solid var(--a-color-author);
}

#history.entity .journal-header .journal-info span {
  margin-left: 4px;
}

#sidebar div.wiki ul.wiki-flat {
  margin: 0;
  padding: 0;
}

#sidebar div.wiki ul.wiki-flat li {
  list-style-type: none;
  margin: 0 2px 0 0;
  padding: 0;
}

.nowrap { white-space: nowrap; }

/* Dashboard block: summary stats */

/* The value is pushed to the right edge of the label, which lines the figures up
 * in a narrow dashboard column. A block spanning the whole dashboard would tear
 * the pair a page width apart, so the row itself is capped. */
.dashboard-block li.summary-stat {
  display: flex;
  align-items: baseline;
  max-width: 32rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--a-color-border-light);
}

.dashboard-block .summary-stat-label {
  flex: 1;
  color: var(--a-color-text-muted);
}

.dashboard-block .summary-stat-value {
  font-weight: 600;
}

.dashboard-block .summary-section-label {
  display: block;
  font-size: var(--a-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 0 4px;
  color: var(--a-color-text-muted);
}

@media screen and (max-width: 899px) {
  .gototop { display: none; }

  .dashboard .splitcontentleft,
  .dashboard .splitcontentright,
  .dashboard .splitcontentbottom {
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-left: 0;
  }
}

@media print {
  .gototop { display: none; }
}

/* Variable cheat-sheet of a form: the list stays hidden until the user asks
   for it through the "show variables" link. Handler in additionals.js. */
.available-variables.toggle-variables {
  display: none;
}

.available-variables a.var {
  white-space: nowrap;
}