/* Load with all pages in Redmine */

:root {
  --invoice-status-draft: var(--oc-grape-9);
  --invoice-status-sent: var(--oc-cyan-5);
  --invoice-status-paid: var(--oc-green-8);
  --invoice-status-canceled: var(--oc-pink-6);
  --invoice-status-estimate: var(--oc-orange-4);
}

div.contact-issues h3 a {
  color: inherit;
}

div.filters h2 .scope_title a {
  color: var(--a-color-dark);
  text-decoration: none;
}

table.list.contacts td a {
  color: var(--a-color-dark);
}

table.contacts.index th {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid var(--oc-gray-2);
  vertical-align: top;
}

.flyout-menu .sidebar-attributes span.label {
  font-size: var(--a-font-size-xs);
}

.contact.card .entity-header h2 a {
  font-size: var(--a-font-size-xl);
  font-weight: normal;
}

.small-card .contact.card h2 a {
  font-size: var(--a-font-size-lg);
  font-weight: inherit;
  color: inherit;
}

div.filters h2 .scope_title a:hover {
  text-decoration: none;
  display: inline;
  color: var(--a-color-disabled);
}

.controller-contacts #sidebar {
  background: var(--a-color-white);
}

.controller-contacts input#submit_add_note_form {
  background-image: none;
  border: 1px solid;
  border-color: rgb(var(--oc-gray-9-rgb), 0.35);
  box-shadow: inset 0 0.15em 0.3em rgb(var(--oc-gray-9-rgb), 0.15);
  border-radius: 3px;
  padding: 4px 7px;
  margin-top: 5px;
}

.conroller-contacts fieldset.extended-attributes {
  background: var(--a-color-white) !important;
  border-radius: 3px !important;
  color: var(--a-color-muted);
}

.contact-relations ul { padding-left: 0; }
.contact-relations ul li { list-style: none; }

#contact_issues .contextual a,
#contact_projects .contextual a,
#customer_profile .contextual a,
#issue_contacts .contextual a {
  background-color: var(--a-color-bg-subtle);
  border-radius: 5px;
  padding: 3px 8px;
  font-weight: bold;
  border: 1px solid var(--a-color-list-border);
}

.contact-cards-grid .contact.card {
  display: flex;
  flex-direction: column;
}

#sidebar .contact.card {
  width: 95%;
  padding: 4px;
  border: 1px solid var(--a-color-list-border);
  border-radius: 3px;
}

/* min() keeps the track from staying 400px wide on a phone, where that is wider
   than the screen and the card would be cut off at the right. */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 8px;
}

.contact-cards-grid .entity-header {
  column-gap: 10px;
  padding: 8px;
}

/* The card carries background and hover, not the header inside it: cards of one grid row are
   stretched to the same height, while the header stays as high as its content - an inner
   background would end mid card. */
body.controller-contacts #query-result-list .contact.card {
  background: var(--a-color-even);
  box-shadow: 1px 2px 5px var(--oc-gray-3);
}

.metrics td {
  padding: 25px 0;
  border-top: 1px solid var(--a-color-list-border);
  text-align: left;
}

table.contacts.index td {
  vertical-align: top;
  color: var(--a-color-dark);
  padding: 8px 0;
  border-bottom: 1px solid var(--oc-gray-2);
}

.index tbody tr.group td {
  padding: 0.8em 0 0.5em 0.3em;
  font-weight: bold;
  border-bottom: 1px solid var(--a-color-input-border);
}

table.contacts.index tr.context-menu-selection td {
  color: var(--a-color-white) !important;
}

.contact.sidebar-attributes.vcard li.birthday {
  padding-top: 12px;
}

#content div.contact {
  border: 1px solid var(--a-color-list-border);
  background: var(--a-color-even);
  padding: 5px;
  border-radius: 3px;
}

form#add_issue_form {
  background: var(--a-color-white);
  display: block;
  padding: 6px;
  margin-bottom: 6px;
  border: 1px solid var(--a-color-list-border);
  width: 92%;
}

/* CONTACTS COMMON */
span.contact { display: inline-block; }

div.contact.details p.author {
  margin-top: 0;
  margin-bottom: 4px;
  color: var(--a-color-info);
  opacity: 0.8;
}

table.list.issue td.contacts img.gravatar {
  vertical-align: middle;
  margin: 0 4px 2px 0;
}

table.list.issue td.last_message img.gravatar {
  vertical-align: middle;
  margin: 0 4px 2px 0;
}

#contact_issues img.gravatar {
  vertical-align: middle;
  margin-left: 5px;
}

div.contact-issues { margin-right: 4px; }

p.invoice-info-line span.contact {
  padding-left: 5px;
}

/* Avatar and its delete icon are one row. The block used to carry core's
   `watchers` id, which lent it the spacing of the watcher box of an issue -
   a rule that has nothing to do with this form and can change at any time. */
p.contact-avatar-edit {
  display: flex;
  align-items: center;
  gap: 4px;
}

#contact_data img.avatar,
#contact_data a.icon-del {
  vertical-align: middle;
}

div.contact-issues td.done_checkbox {
  width: 10px;
  vertical-align: top;
  padding-top: 4px;
}

div.contact-issues td.issue_subject {
  vertical-align: top;
  width: 100%;
}

.note-custom-fields label { margin-right: 10px; }

#contacts_for_issue {
  height: 200px;
  overflow: auto;
}

.date-period label {
  margin-left: 10px;
  margin-right: 5px;
}

#contacts_for_issue label { display: block; }
input#contact_search { width: 100%; }
div.contact.details .entity-header h1 { margin-bottom: 0; }

/* Search */
div.filters h2 { margin-bottom: 5px; }

.contact.card .entity-header-main h2 {
  border-bottom: none;
  padding-top: 0;
  margin: 0 0 4px;
}

div.search_and_filters { margin-bottom: 10px; }
div.live_search { font-size: var(--a-font-size-lg); }
div.filters .live_search { position: relative; }
.live_search input.live_search_field { font-size: var(--a-font-size-lg); }

table.list.contacts td.id {
  padding-right: 6px;
  padding-left: 6px;
}

table.metrics {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

/* notes */

div.add-note {
  margin-left: 5px;
  margin-right: 6px;
  margin-bottom: 20px;
}

div.add-note p {
  margin-bottom: 5px;
  margin-top: 5px;
}

.notes div.contextual { vertical-align: top; }

div#sidebar div.contextual { margin-right: 8px; }

span.note-info {
  font-size: var(--a-font-size-xs);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: var(--a-color-info);
}

table.list.contacts td.name,
table.list td.emails,
table.list td.phones {
  white-space: nowrap;
}

table.list td.address,
table.list td.tags,
table.list td.street1,
table.list td.street2,
table.list td.background {
  text-align: left;
}

table.list tr td.tags { white-space: normal; }

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

table.contacts.index {
  border-top: 1px solid var(--a-color-list-border);
  border-right: 1px solid var(--a-color-list-border);
  border-left: 1px solid var(--a-color-list-border);
  width: 100%;
  border-spacing: 0 0;
  margin-bottom: 10px;
}

table.contacts.index tbody tr:hover,
body.controller-contacts #query-result-list .contact.card:hover {
  background-color: var(--a-color-hover-highlight);
}

table.contacts.index td.checkbox { padding: 12px 0 0 5px; }

table.contacts.index td.name {
  width: 50%;
  padding-right: 10px;
  height: 60px;
}

table.contacts.index td.info {
  width: 50%;
  padding-right: 5px;
}

table.contacts.index td.avatar {
  padding: 10px 10px 10px 5px;
}

table.contacts.index th.title { text-align: right; }
table.contacts.index th.sum { text-align: left; }

table.contacts.index td.name h1 {
  font-size: var(--a-font-size-lg);
  margin: 0;
  padding: 0;
}

div#sidebar div.contact.card {
  margin-right: 10px;
  overflow-x: hidden;
}

div.contact.card div.tags {
  margin-top: 5px;
}

span.attachment img { vertical-align: middle; }

.small-card .contact.card .avatar img {
  width: 50px;
  height: 50px;
}

/*                   THUMBNAILS																*/

div.wiki img.tumbnail {
  border: 1px solid var(--a-color-list-border);
  height: 150px;
  padding: 4px;
  vertical-align: middle;
  width: 150px;
  background: var(--a-color-white);
}

/* Company contacts: compact contact rows side by side, as many per row as the
   tab is wide. */
#company_contacts .contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 5px;
  padding-left: 0;
  list-style: none;
}

#company_contacts .entity-header-main h4 {
  margin: 7px 0 5px;
  padding: 0;
  border-bottom: none;
  color: var(--a-color-info);
  font-weight: normal;
}

.splitcontent.address p {
  padding-left: 0;
}

.contact.card .entity-header-main p {
  margin: 2px 0;
}

h2.note_title { margin-bottom: 0; }

/*     Thumbnails    	*/

div.wiki p.thumbnails { margin-top: 12px; }

img.thumbnail {
  border: 1px solid var(--a-color-list-border);
  padding: 4px;
  margin: 4px;
  vertical-align: middle;
}

#duplicates ul {
  margin: 0;
  padding: 0;
}

#duplicates li {
  list-style-type: none;
  margin: 0 2px 0 0;
  padding: 0;
}

#duplicates img.gravatar {
  vertical-align: middle;
  margin: 0 4px 2px 0;
}

#bulk-selection img.gravatar {
  margin: initial;
}

#duplicates ul.box {
  padding: 10px;
  background-color: var(--a-color-warning-bg);
}

#contact_projects ul {
  margin: 0;
  padding: 0;
}

#contact_projects li {
  list-style-type: none;
  margin: 0 2px 0 0;
  padding: 0;
}

#contact_projects select {
  width: 95%;
  display: block;
}

#contact_projects img.gravatar {
  vertical-align: middle;
  margin: 0 4px 2px 0;
}

.tooltip span.tip.contact {
  line-height: 11px !important;
  font-size: var(--a-font-size-xs) !important;
  width: 200px !important;
}

/* CONTACT ATTRIBUTES SIDEBAR */
table.contact.attributes .gravatar {
  vertical-align: middle;
  margin: 0 0.5em 0 0;
}

.tab-placeholder { display: none; }
.tab-placeholder.active { display: block !important; }

#issue_contacts ul {
  margin: 0;
  padding: 0;
}

#issue_contacts li {
  list-style-type: none;
  margin: 0 2px 0 0;
  padding: 0;
}

#issue_contacts select {
  width: 95%;
  display: block;
}

#issue_contacts img.gravatar {
  vertical-align: middle;
  margin: 0 4px 2px 0;
}

div#contacts_previous_issues { margin-bottom: 20px; }

span.helpdesk-message-date {
  font-size: var(--a-font-size-md);
  color: var(--a-color-info);
}

/* Tells apart duplicates that carry the very same name in the contact merge list. */
span.contact-reference,
span.contact-email {
  font-size: var(--a-font-size-md);
  color: var(--a-color-muted);
}

form#ticket_data_form {
  background: var(--a-color-white);
  display: block;
  padding: 6px;
  margin-bottom: 6px;
  margin-right: 10px;
  border: 1px solid var(--a-color-list-border);
}

@media screen and (min-width: 899px) {
  form#ticket_data_form {
    color: var(--a-color-black);
  }
}

.contact_auto_complete > span {
  font-weight: bold;
}

.helpdesk_ticket_relation a.avatar {
  margin-right: 2px;
}

table.list.issues td.helpdesk_ticket_relation {
  white-space: normal;
  text-align: left;
}

table.list.issues td.helpdesk_ticket_relation .gravatar { float: left; }
table.list.issues td.helpdesk_ticket_relation .ticket-data { margin-left: 45px; }

table.list.issues td.helpdesk_ticket_relation .ticket-data .ticket-name {
  margin: 0;
  font-weight: bold;
}

tr.issue td.last_message {
  text-align: left;
  white-space: normal;
  padding: 5px;
}

table.list.issues td.last_message { vertical-align: top; }
div.ticket-history div.journal { overflow: visible; }

div.ticket-history div.journal.incoming,
div.ticket-history div.journal.outgoing {
  padding: 6px;
  margin-bottom: 6px;
  border: 1px solid var(--a-color-list-border);
  position: relative;
}

div.ticket-history div.journal.incoming {
  background: var(--oc-gray-2);
  margin-right: 30px;
  margin-left: 4px;
}

div.ticket-history div.journal.outgoing {
  background: var(--oc-blue-0);
  margin-left: 30px;
  margin-right: 4px;
}

div.ticket-history div.journal.incoming::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: -7px;
  width: 10px;
  height: 10px;
  background: var(--oc-gray-2);
  border-left: 1px solid var(--a-color-list-border);
  border-bottom: 1px solid var(--a-color-list-border);
  transform: rotate(45deg);
}

div.ticket-history div.journal.outgoing::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  right: -7px;
  width: 10px;
  height: 10px;
  background: var(--oc-blue-0);
  border-right: 1px solid var(--a-color-list-border);
  border-bottom: 1px solid var(--a-color-list-border);
  transform: rotate(-45deg);
}

div#ticket_data > div.contextual {
  margin-top: initial;
}

/* Helpdesk Doctor */

tr.doctor-error svg.icon-svg { stroke: var(--a-color-alert); }
tr.doctor-warning svg.icon-svg { stroke: var(--a-color-warning-dark); }
tr.doctor-ok svg.icon-svg { stroke: var(--a-color-success); }
tr.doctor-info svg.icon-svg { stroke: var(--a-color-info); }

.note-message-head .icon-mail-sent svg.icon-svg,
#ticket_data svg.icon-svg {
  stroke: var(--a-color-dark);
}

#ticket_data span.attachment {
  white-space: nowrap;
  display: inline-block;
}

.notes_with-send .email-template {
  background-color: initial;
  border: initial;
  min-height: 1em;
}

.helpdesk-ticket-line {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgb(0 0 0 / 0%),
      rgb(0 0 0 / 0%) 10px,
      rgb(0 0 0 / 5%) 10px,
      rgb(0 0 0 / 5%) 20px
    );
  height: 12px;
  min-height: 12px;
  margin: -12px -10px 5px;
  position: relative;
}

form.new_issue .email-template {
  padding: 10px;
  background-color: var(--a-color-info-bg);
}

form.new_issue .email-template .helpdesk-ticket-line {
  margin: -10px -10px 5px;
}

#ticket-history .ticket-avatar { float: left; }
#ticket-history .ticket-note-content { margin-left: 50px; }

#ticket-history .ticket-note {
  border-top: 1px solid var(--a-color-list-border);
  padding-top: 8px;
}

.notes_with-send {
  background-color: var(--a-color-info-bg);
}

/* stylelint-disable selector-class-pattern */
.notes_with-send .jstTabs.tabs {
  width: auto;
}
/* stylelint-enable selector-class-pattern */

.notes_with-send .email-canned-responses {
  float: right;
  margin-right: 14px;
}

.notes_with-send .helpdesk-send-response {
  margin-bottom: 5px;
}

.notes_with-send .helpdesk-ticket-to {
  margin-top: 2px;
}

.notes_with-send .response-list-edit {
  margin-top: 0;
  margin-bottom: 5px;
}

.response-list-edit .is-cc {
  float: left;
  min-width: 29px;
  margin-top: 4px;
}

.response-list-edit .select2 {
  margin-left: 60px;
  width: 90% !important;
  border-radius: 0;
  background: var(--a-color-white);
  padding: 0;
}

.response-list-edit .select2 .select2-selection__choice {
  background-color: var(--a-color-highlight);
  color: var(--a-color-black);
}

.select2-contact__avatar { float: left; }

.select2-contact__name {
  margin-bottom: 2px;
  margin-left: 43px;
}

.select2-contact__email {
  margin-bottom: 2px;
  margin-left: 43px;
  min-height: 14px;
  color: var(--a-color-disabled);
}

tr.issue td.customer,
tr.issue td.customer_company {
  white-space: normal;
  text-align: left;
}

div.email-template {
  background-color: var(--a-color-hover-highlight);
  border: 1px solid var(--oc-gray-2);
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
}

tr.issue td.last_message_date {
  text-align: left;
  white-space: normal;
}

tr.issue.context-menu-selection td.last_message span.description {
  color: inherit;
}

.invoice-statistics.invoiced {
  display: flex;
}

.invoice-statistics .stats-block {
  border: 1px solid var(--a-color-input-border);
  padding: 5px;
  background: var(--a-color-white);
  border-radius: 5px;
  margin-bottom: 5px;
  margin-right: 3px;
  width: 90%;
  border-left-width: 4px;
  border-left-style: solid;
}

.invoice-statistics .stats-block.week {
  border-left-color: var(--a-color-stats-week);
}

.invoice-statistics .stats-block.month {
  border-left-color: var(--a-color-stats-month);
}

.invoice-statistics .stats-block.year {
  border-left-color: var(--a-color-stats-year);
}

.invoice-statistics .sum-current,
.invoice-statistics .sum-prev {
  font-size: var(--a-font-size-xl);
  font-weight: bold;
  margin-bottom: 5px;
}

.invoice-statistics .sum-prev,
.invoice-statistics .title-prev {
  opacity: 0.5;
  font-size: var(--a-font-size-md);
}

span.invoice-status {
  white-space: nowrap;
  margin-right: 4px;
  color: var(--a-color-white);
}

.invoice-status.draft {
  background-color: var(--invoice-status-draft);
}

.invoice-status.sent {
  background-color: var(--invoice-status-sent);
}

.invoice-status.paid {
  background-color: var(--invoice-status-paid);
}

.invoice-status.canceled {
  background-color: var(--invoice-status-canceled);
}

.invoice-status.estimate {
  background-color: var(--invoice-status-estimate);
}

.invoice-statistics .stats-block.draft {
  border-left-color: var(--invoice-status-draft);
}

.invoice-statistics .stats-block.sent {
  border-left-color: var(--invoice-status-sent);
}

.invoice-statistics .stats-block.paid {
  border-left-color: var(--invoice-status-paid);
}

.invoice-statistics .stats-block.canceled {
  border-left-color: var(--invoice-status-canceled);
}

.invoice-statistics .stats-block.estimate {
  border-left-color: var(--invoice-status-estimate);
}

@media screen and (max-width: 899px) {
  .flyout-menu .contact-card h2 a {
    color: var(--a-color-white) !important;
  }

  .flyout-menu .invoice-statistics .title-current a,
  .flyout-menu .invoice-statistics .sum-current {
    color: var(--a-color-black);
  }
}

.vote_form {
  text-align: center;
}

.submit,
#vote_comment {
  margin-top: 5px;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

.not-too-wide {
  margin: auto;
  max-width: 1000px;
}

.helpdesk-charts-layout {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  max-width: 450px;
  margin: auto;
}

.helpdesk-charts-layout .chart {
  margin-bottom: 2rem;
  width: 100%;
}

@media screen and (min-width: 899px) {
  .helpdesk-charts-layout {
    justify-content: space-between;
    max-width: 100%;
  }

  .helpdesk-charts-layout .chart {
    width: 33%;
  }
}

#existing-attachments label {
  float: none;
  margin-left: auto;
}

div#helpdesk_send_response_gpg_new label {
  float: none;
  margin-left: 0;
  width: auto;
}

.helpdesk_chart {
  text-align: center;
  width: 100%;
}

.center { text-align: center; }

.chart_table {
  margin: auto;
  border-collapse: collapse;
  text-align: center;
}

.chart_table .header {
  height: 50px;
  background-color: var(--a-color-bg-light);
}

.chart_table .header .column_data {
  border: 1px solid var(--oc-gray-4);
  padding: 0;
}

.chart_table .header .column_data .issues_count { font-weight: bold; }
.chart_table .main_block { height: 200px; }

.chart_table .main_block .column_data {
  vertical-align: bottom;
  width: 80px;
  border: 1px solid var(--oc-gray-4);
  padding: 0;
}

.chart_table .main_block .column_data .percents {
  background-color: var(--a-color-orange);
  border-radius: 3px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
}

.chart_table .footer { height: 50px; }

.chart_table .footer .column_data {
  font-weight: bold;
  padding: 0;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid var(--oc-gray-9);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: '';
}

.change > .caret {
  border-width: 6px;
  display: block;
  margin: 0 auto 4px;
}

.change > .neg {
  border-top-color: var(--a-color-alert);
}

.change > .pos {
  border-top: 0;
  border-bottom: 6px solid var(--a-color-success);
}

.change > .mirror_pos {
  border-top: 0;
  border-bottom: 6px solid var(--a-color-alert);
}

.change > .mirror_neg {
  border-top-color: var(--a-color-success);
}

.metrics .num > span {
  font-size: var(--a-font-size-lg);
}

div#customer_issues {
  margin-top: 10px;
}

#customer_issues ul {
  margin: 0;
  padding: 0;
}

#customer_issues ul li {
  position: relative;
  margin-bottom: 10px;
}

#customer_issues ul li .ticket-meta {
  color: var(--a-color-info);
  font-size: var(--a-font-size-md);
  display: block;
}

#customer_profile_and_issues .ajax-loading {
  background-color: var(--a-color-bg-light);
  background-position: 33% 50%;
  background-repeat: no-repeat;
  background-image: url("/assets/loading-5fb375e6.gif");
  border: 1px solid var(--oc-gray-5);
  font-weight: bold;
  text-align: center;
  padding: 0.6em;
  margin-right: 10px;
  opacity: 0.5;
}

.mail_rule_block {
  margin-bottom: 10px;
}

.mail_rule_block #actions-table {
  width: 60%;
  float: left;
}

.mail_rule_block #filters-table .field { width: 15%; }
.mail_rule_block #filters-table .values { width: 70%; }
.mail_rule_block #actions-table .field { width: 15%; }
.mail_rule_block #actions-table .values { width: 70%; }

.tabular.settings p.helpdesk_mail_rule_condition {
  padding-left: 20px;
  text-align: left;
}

table.list .conditions { width: 50%; }
table.list .actions { width: 50%; }

.jstb_responses { background-image: url("./bt_canned_responses.svg"); }
.canned-responses__menu { position: absolute; }

.helpdesk-message-date.viewed::after {
  content: '\25CF ';
  color: var(--a-color-success);
  padding-left: 2px;
  font-size: var(--a-font-size-xl);
  position: absolute;
  line-height: 15px;
}

#tab-content-history .journal-header .journal-info span.received.icon {
  margin-right: 4px;
}

#tab-content-history .journal-header .journal-info span.separator { margin: 0 4px 0 0; }

#tab-content-history .journal-header .journal-info .lined-text {
  margin-left: initial;
}

#tab-content-history .journal-info .lined-text img.gravatar { margin: initial; }

#tab-content-history .journal_message { margin: inherit; }

#tab-content-history .helpdesk-message-date {
  margin-left: 4px;
  margin-right: 4px;
}

p.helpdesk_mail_rule_condition.red {
  color: var(--a-color-alert);
}

.plugin-redmine_servicedesk input[type='text'],
.plugin-redmine_servicedesk input[type='email'],
.plugin-redmine_servicedesk input[type='url'],
.plugin-redmine_servicedesk input[type='password'],
fieldset.project-settings textarea,
fieldset.project-settings input[type='text'],
fieldset.project-settings input[type='email'],
fieldset.project-settings input[type='url'],
fieldset.project-settings input[type='password'] {
  width: 100%;
}

#message-form span.mail-value {
  line-height: 24px;
}

.icon.icon-euro { background-image: url("/assets/plugin_assets/redmine_servicedesk/currency-euro-c1416285.svg"); }

#add_comment_form {
  display: block;
}

#gpgkeys .gpg_keypair {
  fill: var(--oc-yellow-4);
}

#gpgkeys .gpg_pubkey {
  fill: var(--oc-orange-5);
}

#gpgkeys .gpg_privkey {
  fill: var(--oc-pink-8);
}

#gpgkeys .expired {
  text-decoration: line-through;
}

#gpgkeys .revoked {
  text-decoration: line-through;
  font-style: italic;
}

div#helpdesk_send_response_gpg_new {
  padding: 3px 0 3px 180px;
}

#gpg_decrypt_key {
  width: 100%;
}

.spam-wrapper {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='450px' width='350px'><text transform='translate(50, 230) rotate(-45)' fill='rgb(245,45,45)' font-size='100' opacity='0.5'>SPAM</text></svg>");
}

.spam-ignore-wrapper {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='450px' width='350px'><text transform='translate(50, 230) rotate(-45)' fill='rgb(68,68,68)' font-size='100' opacity='0.5'>SPAM</text></svg>");
}

/* Grey badge marking a replaced (non-accounting-relevant) invoice next to the
   document title in the show and edit views. Reuses Redmine core's .badge base
   (size, padding, uppercase, vertical offset) and only overrides the colour,
   matching the outlined style of the core status badges. The matching diagonal
   watermark is applied as an inline background-image (see InvoicesHelper) so its
   text can be localized. */
.badge.invoice-replaced {
  /* The edit title (h2#page-title) is an inline-flex container, so the core
     badge's `bottom: 4px` lift pushes the badge above the title text. Center it
     in both the flex (edit) and inline (show) title contexts and drop the lift. */
  bottom: 0;
  align-self: center;
  vertical-align: middle;
  color: var(--a-color-muted);
  border: 1px solid var(--a-color-muted);
}

.contact.card .connect {
  padding-left: 10px;
}

.bulk-reply {
  padding: initial;
  padding-bottom: 6px;
}

.duplicate-merge-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
}

.duplicate-merge-container div.source-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 15px;
}

.duplicate-merge-container p.source-from {
  margin: 0 auto;
}

.duplicate-merge-container div.source-container div.source-head {
  margin-left: 20px;
}

div.target-container div.target-list {
  margin-top: 15px;
}

/* Sticky header scroll-margin adjustments for contacts and canned_responses
   (reuses Redmine's sticky-issue-header CSS) */
.controller-contacts.action-show div.wiki a[name],
.controller-contacts.action-show #history div[id^='note-'],
.controller-contacts.action-show #history div[id^='change-'],
.controller-canned_responses.action-show div.wiki a[name],
.controller-canned_responses.action-show #history div[id^='note-'],
.controller-canned_responses.action-show #history div[id^='change-'],
.controller-canned_responses.action-show #add_comment_form {
  scroll-margin-top: var(--sticky-header-scroll-margin);
}

/* The excerpt list stays a table, because query grouping (the group row and its
   toggle) is bound to table rows. Its four columns are wider than a phone screen,
   so the row becomes a flex container and its cells stack: avatar and name side by
   side, company and tags below. Core solves the subtask and relation lists on the
   issue page the same way, by turning cells into blocks. The group rows keep their
   own display, so collapsing a group keeps working. */
@media all and (max-width: 899px) {
  table.index.contacts tr.hascontextmenu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  table.index.contacts tr.hascontextmenu > td {
    display: block;
    width: auto;
    height: auto;
  }

  table.index.contacts tr.hascontextmenu > td.name {
    flex: 1;
    min-width: 0;
  }

  table.index.contacts tr.hascontextmenu > td.info {
    flex-basis: 100%;
    padding-top: 4px;
  }
}

@media all and (max-width: 899px) {
  .controller-contacts.action-show div.wiki a[name],
  .controller-contacts.action-show #history div[id^='note-'],
  .controller-contacts.action-show #history div[id^='change-'],
  .controller-canned_responses.action-show div.wiki a[name],
  .controller-canned_responses.action-show #history div[id^='note-'],
  .controller-canned_responses.action-show #history div[id^='change-'],
  .controller-canned_responses.action-show #add_comment_form {
    scroll-margin-top: var(--sticky-header-scroll-margin-mobile);
  }
}

/* Helpdesk sender row alignment: SVG icons require inline-flex (vertical-align: middle),
 * other inline children default to baseline -- the mismatch causes a sub-pixel vertical
 * offset between the "Von:" / "Erhalten von" label and the email address that sits next
 * to it. Force middle alignment for all direct children and tighten line-height so the
 * row keeps its original height. */
#ticket_data,
.note-message-head {
  line-height: 1.3;
}

/* stylelint-disable no-descending-specificity */
#ticket_data > span,
#ticket_data > a,
.note-message-head > span,
.note-message-head > a,
.note-message-head > img {
  vertical-align: middle;
}
/* stylelint-enable no-descending-specificity */