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

table.note_data {
  width: 99%;
}

body.controller-contacts table.note_data div.note {
  margin-left: 5px;
  border-left: 2px solid var(--a-color-list-border);
  padding: 5px 5px 5px 0;
}

.contact-card-avatar a,
.contact-card-avatar img {
  display: block;
  width: 64px;
  height: 64px;
}

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

table.sidebar.attributes th {
  padding: inherit;
  text-align: right;
  padding-right: 5px;
}

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

.contact.card .subject_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-relations img.gravatar.servicedesk { margin-right: 5px; }

#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,
.contact.sidebar.attributes.vcard {
  width: 95%;
}

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

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 8px;
}

.contact-cards-grid .subject_header {
  display: flex;
  flex: 1;
  gap: 10px;
  padding: 8px;
}

.contact-card-avatar {
  flex-shrink: 0;
  width: 64px;
}

.contact-card-info {
  flex: 1;
  min-width: 0;
}

.contact-card-info p {
  margin: 2px 0;
}

.contact-card-info h2 {
  margin: 0 0 4px;
}

body.controller-contacts #query-result-list .contact.card {
  background: var(--a-color-white);
  box-shadow: 1px 2px 5px var(--oc-gray-3);
}

body.controller-contacts #query-result-list .contact.card .subject_header {
  background: var(--a-color-even);
}

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

table.sidebar.attributes td {
  padding: inherit;
  text-align: left;
}

.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 th.birthday,
.contact.sidebar.attributes.vcard td.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 img.gravatar {
  margin-right: 4px;
}

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

#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%; }
table.subject_header { width: 100%; }
div.contact.details table.subject_header h1 { margin-bottom: 0; }

table.subject_header td.name {
  vertical-align: top;
}

table.subject_header td.subject_info {
  padding-left: 15px;
  padding-right: 15px;
  border-left: 1px solid var(--a-color-list-border);
  min-width: 200px;
  width: 200px;
}

table.subject_header td.subject_info ul {
  list-style: none;
  padding-left: 0;
}

table.subject_header td.subject_info li {
  line-height: 20px;
  white-space: nowrap;
}

h4.contacts_header { border-bottom: 0; }

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

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.note_data td.name {
  padding-left: 0;
  vertical-align: top;
  width: 100%;
}

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 tr.selected {
  background-color: var(--a-color-selection) !important;
  color: var(--a-color-white) !important;
}

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

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

.contact.sidebar.attributes.vcard tr,
#sidebar .contact.card tr {
  vertical-align: top;
}

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.note_data td.avatar {
  padding-right: 4px;
  padding-left: 0;
  vertical-align: top;
  width: 38px;
  padding-top: 10px;
}

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

div.contact.details.issue table.subject_header td.avatar .avatar {
  margin-right: 0;
  float: none;
}

div.contact.details.issue table.subject_header td.avatar {
  float: none;
  margin: 0;
}

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

table.contacts.index td.name h1.selected { background-color: var(--a-color-hover-highlight); }
table.contacts.index td.name h2.selected { background-color: var(--a-color-hover-highlight); }

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

table.contacts.index td.name h2 {
  font-size: var(--a-font-size-md);
  color: var(--a-color-info);
  font-weight: normal;
  line-height: 140%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

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

div.contact.card table.subject_header td.name {
  padding-left: 4px;
  padding-top: 0;
  vertical-align: top;
}

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

.contact.card .subject_header .name h2 {
  border-bottom: none;
  padding-top: 0;
  margin: 0;
}

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

div.note_data_header table.note_data { margin-bottom: 5px; }

#company_contacts table.note_data {
  width: 250px;
  float: left;
}

#company_contacts table.note_data td.name { width: auto; }

.controller-contacts .note_data .name div.custom_fields {
  border-left: 2px solid var(--a-color-list-border);
  margin-left: 15px;
}

.controller-contacts .note_data .name div.wiki {
  margin: 5px 0 0 10px;
  background: var(--a-color-even);
  border-radius: 3px;
  border: 1px solid var(--a-color-list-border);
  border-left: 2px solid var(--a-color-list-border);
  padding: 5px;
}

.controller-contacts .note_data .name div.wiki:hover {
  border-left: 2px solid var(--oc-gray-6);
  box-shadow: 0 8px 8px -5px var(--a-color-border-light);
}

.controller-contacts .note_data .name p.thumbnail,
.controller-contacts .note_data .name div.attachments {
  padding: 8px 0 0 8px;
}

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

table.note_data .wiki.note p { margin: inherit; }

table.note_data .wiki.note div.attachments p {
  margin: 4px 0 2px;
  display: inline-block;
  white-space: nowrap;
}

table.note_data .content.preview {
  margin: 5px 0 0;
  font-size: var(--a-font-size-md);
  color: var(--a-color-info);
  font-style: italic;
}

table.note_data h4 {
  margin-top: 5px;
  border-bottom: none;
}

table.note_data td.name h4 {
  margin: 7px 0 5px;
  padding: 0;
  color: var(--a-color-info);
  font-weight: normal;
}

table.note_data:hover h4 > a.wiki-anchor {
  display: inline;
  color: var(--a-color-border-light);
}

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

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

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