/* General elements */

body {
  background: white;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100dvh;
  margin: 0;

  /* Disable browser's text-size modifications on mobile */
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none
}

a {
  color: var(--thinlinc-darkblue);
}
a:hover {
  color: var(--thinlinc-darkblue); /* Don't change color */
  text-decoration: none;
}
a:visited {
  color: hsl(276 100% 31% / 1); /* thinlinc-darkblue but with 50 higher hue */
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--thinlinc-lightgrey);
}

fieldset {
  border-radius: var(--small-border-radius);
  border: var(--border-width) solid var(--thinlinc-darkgrey-50);
}

input.required,
select.required,
span.required_explanation {
  /* Don't show Bugzilla's ugly yellow color for required fields,
     the red asterisk is enough. */
  background-color: white;
}

/* Tables */

table {
  background-color: var(--thinlinc-lightgrey-25);
  border-radius: var(--small-border-radius);
  border: none;
  border-spacing: 0px;
  overflow: clip; /* Needed for properly rounded corners */
}

table td,
table th {
  border: none;
  padding: 6px 12px;
  vertical-align: baseline;
}
table tr:not(:last-child) {
  border-bottom: var(--border-width) solid var(--thinlinc-lightgrey);
}
table tr.bz_row_odd {
  background-color: var(--thinlinc-lightgrey-25); /* Disable the odd/even styling */
}

table tr.column_header {
  background-color: var(--thinlinc-lightgrey-50);
  border-bottom: none;
}

/* Workaround for https://bugs.webkit.org/show_bug.cgi?id=251909 */
/* :empty currently does nothing as of 2023 since our "empty" elements contain
 whitespaces, but the intention is that :empty will match even on whitespaces
 in the future */
table > :nth-child(1 of :is(thead, tbody, tfoot):not(:empty)),
table > :nth-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:first-child,
table > :nth-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:first-child > :is(th,td):first-child {
  border-top-left-radius: var(--small-border-radius);
}
table > :nth-child(1 of :is(thead, tbody, tfoot):not(:empty)),
table > :nth-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:first-child,
table > :nth-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:first-child > :is(th,td):last-child {
  border-top-right-radius: var(--small-border-radius);
}
table > :nth-last-child(1 of :is(thead, tbody, tfoot):not(:empty)),
table > :nth-last-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:last-child,
table > :nth-last-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:last-child > :is(th,td):first-child {
  border-bottom-left-radius: var(--small-border-radius);
}
table > :nth-last-child(1 of :is(thead, tbody, tfoot):not(:empty)),
table > :nth-last-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:last-child,
table > :nth-last-child(1 of :is(thead, tbody, tfoot):not(:empty)) > tr:last-child > :is(th,td):last-child {
  border-bottom-right-radius: var(--small-border-radius);
}

/* Main bugzilla page elements */

#bugzilla-body {
  background: white;
  border: none;
  padding: unset;
  margin: 24px;
  margin-bottom: auto;
  width: 1050px; /* Don't fill entire page on large screens */
  overflow-x: auto; /* Allow horizontal scrolling in case content overflows */
}
/* content width 1050px + 2*24 margin = 1098px */
@media (max-width: 1098px) {
  /* Hide border and remove margin on smaller screens */
  #bugzilla-body {
    margin-left: 12px;
    margin-right: 12px;
    width: calc(100% - 12px - 12px);
  }
}
#bugzilla-body .edit_form th,
#bugzilla-body .edit_form td {
  vertical-align: baseline;
}
#bugzilla-body .edit_form tr {
  border-bottom: none;
}

#message {
  border-radius: var(--small-border-radius);
  margin-bottom: 2em;
  padding: 0.5em 1em;
}
#error_msg {
  border-radius: var(--small-border-radius);
  background-color: var(--thinlinc-darkred);
  color: white;
}

#header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: sticky;
  top: 0;
  z-index: 99;
  box-sizing: border-box;
  padding: 0 12px;

  /* Since we want to avoid modifying the HTML, we re-arrange the header
     using a grid with calculated sizes for the areas instead. */
  display: grid;
  align-items: center;
  column-gap: 18px;
  grid-template-areas:
    ". banner links ."
    ". titles titles .";

  /* We want the combined width of the banner and the links to look the same
     as the content width, disregarding the margins.

     Banner is 94px wide, the grid gap is 18px, content is max 1050px wide.
     Space remaining for links column = 1050px - 94px - 18px = 938px
     Internal padding is 2*12px, this needs to be taken into account as well.
  */
  grid-template-columns: auto 94px min(calc(100% - 24px - 94px), 938px) auto;

  background-color: white;
  width: 100%;
}
:target {
  /* Offset for sticky header when scrolling to anchors */
  scroll-margin-top: 130px;
}
/* content width 1050px + 2*24 margin = 1098px */
@media (max-width: 1098px) {
  #header {
    /* Remove empty areas */
    grid-template-areas:
      "banner links"
      "titles titles";
    grid-template-columns: 94px calc(100% - 24px - 94px);
  }
}
@media (max-height: 720px) {
  #header {
    /* Turn off sticky header for screens that don't have much
       vertical height available */
    position: static;
  }
  :target {
    /* Remove scroll offset since header is no longer sticky */
    scroll-margin-top: 0px;
  }
}

/* Header elements */

#header #banner {
  padding: 12px 0;
  grid-area: banner;
}

#header #common_links {
  grid-area: links;
  padding: 0;
  /* Right-align */
  display: flex;
  flex-direction: row-reverse;
  text-align: right;
}
/* content width 1050px + 2*24 margin = 1098px */
@media (max-width: 1098px) {
  #header #common_links {
    /* Rules for item placement has changed when we swapped the
       grid layout. We still want this to right-align. */
    flex-direction: row;
    justify-self: end;
  }
}

#header .links {
  border: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 6px 0;
  /* Wrap and right-align */
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  /* Vertically center */
  align-items: center;
}
#header .links li {
  margin: 3px 0; /* Flexbox removes the inherit margins */
}
#header .links li.form {
  padding-left: 6px;
  /* Inherit inwards layout from parent */
  display: inherit;
  align-items: inherit;
}
#header .links li:not(.form) {
  /* Truncate too long header links */
  display: inline-block; /* Required for max-width */
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#header .links li#mini_login_container_top {
  /* Remove width restriction on login container */
  max-width: unset;
}
#header .links .separator {
  /* Hide the separator between the links, replaced by border */
  display: none;
}
#header .links a {
  /* Border instead of separator */
  border-right: var(--border-width) solid var(--thinlinc-lightgrey);
  padding: 0 6px;
}
/* Logout link is connected with the username after, remove "separator" */
#header .links a[href="index.cgi?logout=1"] {
  border: none;
  padding-right: 0;
}
/* Hide links for "Home", "Browse" and "Reports" to save space. */
#header .links a[href="./"],
#header .links a[href="describecomponents.cgi"],
#header .links a[href="report.cgi"] {
  display: none;
}
#header #quicksearch_top {
  width: 180px; /* Increase the width of the search box */
}
/* Hide top search input on very small screens */
@media (max-width: 712px) {
  #header .links li.form {
    display: none;
  }
}

#header #titles {
  grid-area: titles;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 12px 0;
  background-color: transparent;
  color: black;
  border: none;
  border-bottom: var(--border-width) solid var(--thinlinc-lightgrey);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 12px;
}
#header #titles > * {
  padding-left: unset;
  padding-right: unset;
  text-align: center;
}
#header #titles > *:first-child,
#header #titles > *:last-child {
  /* Make the first and last title child grow and use the
     remaining available space. */
  flex-grow: 1;
  flex-basis: 0;
}
#header #titles > *:first-child:not(:only-child) {
  text-align: left;
}
#header #titles > *:last-child:not(:only-child) {
  text-align: right;
}
/* Make header titles smaller on very small screens */
@media (max-width: 712px) {
  #header #titles {
    padding: 3px;
  }
  #header #information {
    font-size: xx-small;
    padding-top: 0;
  }
}

/* Shared between header and footer */

#header .links, #footer {
  background-color: transparent;
  color: black;
}
#header a, #footer a {
  color: black;
}

/* Footer */

#footer {
  border: none;
  border-radius: 0;
  margin-top: 36px;
}

#footer #useful-links {
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto 6px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer #useful-links > * {
  padding: 12px;
  box-sizing: border-box; /* Include padding in size */
  margin: 0;
  width: min(100%, 1050px); /* See explanation for header width */
  border-top: var(--border-width) solid var(--thinlinc-lightgrey);
}

#footer .links {
  margin: 0;
}

#footer .outro {
  /* Use the bottom graphic from Web Access / Web Admin, and place a
     gradiant behind to cover for the edges on really large screens. */
  background-image: url(/extensions/Cendio/web/bottom_graphic.svg),
    linear-gradient(to right, #0025a2 0%, #0025a2 45%,
                    #0029b5 55%, #0029b5 100%);
  background-position: center;
  min-height: 6px;
  height: 3vh;
  max-height: 48px;
}

#footer .separator {
  color: var(--thinlinc-lightgrey);
}

/* Home */

#enter_bug,
#query,
#account,
#help {
  width: 130px;
  height: 130px;
  border-radius: 12px;
  background-color: var(--thinlinc-lightgrey-25);
  background-size: cover;
  margin: 12px;
  margin-bottom: 48px;
}
#enter_bug span,
#query span,
#account span,
#help span {
  top: 110%;
  color: black;
}
#enter_bug {
  background-image: url(/extensions/Cendio/web/enter_bug.png);
}
#query {
  background-image: url(/extensions/Cendio/web/query.png);
}
#account {
  background-image: url(/extensions/Cendio/web/account.png);
}
#help {
  background-image: url(/extensions/Cendio/web/help.png);
}
#enter_bug:hover,
#query:hover,
#account:hover,
#help:hover {
  background-color: var(--thinlinc-lightgrey-50);
}
#enter_bug:hover span,
#query:hover span,
#account:hover span,
#help:hover span {
  text-decoration: underline;
}
.rss {
  border-radius: 5px;
  padding-left: 12px; /* To match the height, for proper rounding */
  /* Get rid of the orange color that doesn't fit our new style */
  filter: grayscale(1);
}

/* New bug */

form#Create > table > tbody > tr > th,
form#Create > table > tbody > tr > td {
  vertical-align: baseline;
}
form#Create #field_label_component,
form#Create #comp_desc_container {
  vertical-align: top;
}

@media (max-width: 900px) {
  form#Create > table {
    /* Prevent table from growing too large */
    table-layout: fixed;
    width: 100%;
  }
  form#Create .field_value .text_input {
    max-width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }
  form#Create #field_container_component,
  form#Create #comp_desc_container {
    /* Place component description below component select */
    display: block;
    width: 65vw;
  }
  form#Create #comment {
    width: calc(100% - 24px - 2px); /* 12px padding, 1px border */
  }
}

#duplicates_table {
  border-collapse: separate;
  margin: 2em 0;
}
#duplicates_table td,
#duplicates_table th {
  border: none;
  padding: 6px 12px;
}
#duplicates_table .resolved {
  background-color: white;
}
form[action="duplicates.cgi"] > table {
  background-color: white;
  margin: 1em 0;
}

table#component_table td {
  border-bottom: 1px solid var(--thinlinc-lightgrey);
}

table#choose_product,
table#component_table,
#Create table {
  background-color: transparent;
  border: none;
}
#possible_duplicates {
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  border-radius: var(--small-border-radius);
}
#possible_duplicates > table {
  width: 100%;
}
#possible_duplicates .yui-dt-odd {
  background-color: var(--thinlinc-lightgrey-25);
}
#possible_duplicates td,
#possible_duplicates th {
  border: none;
}
#possible_duplicates .yui-link-button,
#possible_duplicates .yui-link-button > span {
  border: none;
  background: none;
}
#possible_duplicates .yui-link-button > span > a {
  background-color: white;
  border-radius: var(--small-border-radius);
  border: var(--border-width) solid var(--thinlinc-lightgrey);
}
#possible_duplicates .yui-link-button > span > a:hover {
  background: var(--thinlinc-lightgrey-25);
}

/* Reports */

table#tabular_reports_menu {
  background: white;
}
table#tabular_reports_menu th#reports_menu_multiple_tables {
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  border-radius: var(--small-border-radius);
}

.search_email_fields label {
  line-height: var(--line-height);
}

/* Bug list */

table.bz_buglist {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: white;
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  border-collapse: separate; /* For rounding to work */
}
table.bz_buglist tr {
  margin-top: 1em;
  margin-bottom: 1em;
  border-bottom: none;
}
table.bz_buglist tr.bz_bugitem:hover {
  background-color: var(--thinlinc-lightgrey);
}
@media (max-width: 1098px) {
  /* Enable word-breaking wrapping on small screens */
  table.bz_buglist {
    word-break: break-word;
  }
  table.bz_buglist td:first-child {
    word-break: normal; /* Don't break bug numbers */
  }
}
@media (max-width: 712px) {
  /* On even smaller screens, disable the ".nowrap" class as well */
  table.bz_buglist .nowrap {
    white-space: unset;
  }
}
.buglist_menu img,
.buglist_menu a {
  /* Get rid of the ugly orange color of the XML/CSV/RSS/iCal buttons */
  filter: grayscale(1);
}
.buglist_menu div,
.buglist_menu .bz_query_buttons {
  /* Properly align these buttons next to eachother */
  display: inline-flex;
  column-gap: 5px;
  align-items: center;
}
.buglist_menu .bz_query_buttons #xml {
  /* This one is special, it is a button with an <img> inside.
     The CSV/RSS/iCal ones are <a> elements. */
  vertical-align: middle;
  line-height: 0;
}

.search_description li {
  /* Prevent list item's margin from spilling outside <ul> and creating scroll
     bars. With "white-space: nowrap;" the <li> will instead be placed on the
     next row. */
  white-space: nowrap;
}

.bz_short_desc_column a,
.bz_short_short_desc_column a {
  color: inherit; /* Don't show :visited color here */
}

/* Short bug description */

.bz_short_desc_container {
  /* The column-gap accounts for the ::after element,
     so lets remove that amount from the right-padding. */
  padding: 6px 4px 6px 12px;
  display: grid;
  grid-auto-flow: column;
  grid-template: "number summary button" / auto auto 1fr;
  justify-content: start;
  align-items: center;
  column-gap: 6px;
  background: var(--thinlinc-lightgrey-25);
}
.bz_short_desc_container.edit_form::after {
  /* FIXME: why do we need this? */
  content: "";
  display: block;
  clear: both;
}
.bz_short_desc_container > .knob-buttons {
  float: unset;
  grid-area: button;
  justify-self: end;
}
.bz_short_desc_container > .knob-buttons > input {
  margin-left: 0;
  margin-right: 0;
}
.bz_short_desc_container #summary_input {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  column-gap: 6px;
}
/* Place the save button on a separate row on very small screens */
@media (max-width: 712px) {
  .bz_short_desc_container {
    grid-template-areas: "number summary"
                         "button button";
    grid-template-columns: auto auto;
    row-gap: 6px;
  }
  .bz_short_desc_container > .knob-buttons {
    justify-self: start;
  }
}

#short_desc {
  width: inherit;
}

/* Bug acceptance criteria */

.edit_form #cf_acceptance_readonly {
  max-height: 25em;
  border-radius: var(--small-border-radius);
  font-size: small; /* Match textarea */
}
.edit_form #cf_acceptance {
  width: 30em;
  height: 25em;
  vertical-align: top;
  resize: vertical;
  font-family: monospace;
}

/* Main bug view */

.bz_bug table.edit_form,
.edit_form table {
  background-color: transparent;
  padding: 6px 0;
}
.bz_bug .edit_form  td,
.bz_bug .edit_form  th {
  padding: 3px;
}
/* Prevent edit_form inputs from growing outside boundraries */
.bz_bug .edit_form .text_input,
.bz_bug .edit_form .yui-ac-input {
  box-sizing: border-box;
  max-width: 35em;
}
#keywords_container .yui-ac-content {
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  border-radius: var(--small-border-radius);
  max-height: 6em;
  margin-left: 2px;
}
.bug_urls li {
  margin: 2px 0;
}

#bz_enable_role_visibility div {
  margin-top: 2px;
}

/* content width 1050px + 2*24 margin = 1098px */
@media (max-width: 1098px) {
  /* Ensure width of edit_form is limited to screen */
  .bz_bug table.edit_form {
    table-layout: fixed;
  }
  .bz_bug .edit_form > tbody > tr {
    /* Place edit_form's second column below the first one instead.
       This saves horizontal space which is useful on small screens. */
    display: flex;
    flex-direction: column;
  }
}
/* Remove min-width on edit_form inputs on very small screens */
@media (max-width: 712px) {
  .bz_bug .edit_form .text_input {
    min-width: unset;
  }
}

/* Attachments */

table.attachment_entry {
  background-color: transparent;
}

#attachment_table {
  border: none;
  border-radius: var(--small-border-radius);
  border-spacing: 0;
}

#attachment_table th,
.bz_attach_footer,
.bz_time_tracking_table th,
.dependency_tree_controls {
  color: black;
}
#attachment_table tr {
  background-color: var(--thinlinc-lightgrey-25);
}
#attachment_table tr:not(:last-child) {
  border-bottom: var(--border-width) solid var(--thinlinc-lightgrey);
}
#attachment_table tr:first-child {
  background-color: var(--thinlinc-lightgrey-50);
  border-bottom-color: transparent;
}

#attachment_table td,
#attachment_table th,
.bz_time_tracking_table th,
.bz_time_tracking_table td {
  border: none;
}
#attachment_table th,
#attachment_table td {
  background-color: transparent;
  padding: 6px 12px;
}

#attachment_attributes {
  padding: 12px;
}
#attachment_attributes #comment_tabs {
  padding: 0;
}
#attachment_attributes #attachment_information_read_only {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: var(--small-border-radius);
}

/* View frame */

#viewFrame {
  border-radius: var(--small-border-radius);
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Comment section */

table#bz_big_form_parts,
#comments table {
  background-color: transparent;
}

table.bz_comment_table > tbody > tr > td:first-child,
table#bz_big_form_parts > tbody > tr > td:first-child {
  padding-left: 0;
}
table.bz_comment_table > tbody > tr > td:last-child,
table#bz_big_form_parts > tbody > tr > td:last-child {
  padding-right: 0;
}
/* content width 1050px + 2*24 margin = 1098px */
@media (max-width: 1098px) {
  table.bz_comment_table > tbody > tr > td:first-child,
  table#bz_big_form_parts > tbody > tr > td:first-child,
  table.bz_comment_table > tbody > tr > td:last-child,
  table#bz_big_form_parts > tbody > tr > td:last-child {
    padding-left: 0;
    padding-right: 0;
  }
}

.bz_private_checkbox input[type="checkbox"] {
  margin-left: 0; /* the bz_private_checkbox has its own margins */
  margin-right: 4px; /* Reduce the margin to get better association here */
}

.bz_comment {
  margin: 0 0 12px 0;
  background-color: var(--thinlinc-lightgrey-25);
  border: none;
  border-radius: var(--small-border-radius);
  padding: 6px 12px;
}
.bz_comment_text {
  /* To be more responsive, set a max-width instead of a fixed width */
  width: unset;
  max-width: 50em;
}
.bz_comment_text span.quote {
  /* Needs special handling because line-wrap isn't permitted in quotes.
     Despite "overflow: auto", quotes will become too large. */
  max-width: min(50em, 100%);
  color: hsl(286 100% 31% / 1); /* thinlinc-darkblue but with 60 higher hue */
}
@supports (scrollbar-width: thin) {
  .bz_comment_text span.quote {
    /* Add padding to avoid overlay scrollbars from obscuring content */
    padding-bottom: 12px;
    padding-top: 12px;
  }
}
.bz_comment_text span.quote::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: var(--thinlinc-lightgrey-50);
  border-radius: var(--small-border-radius);
  border: 2px solid transparent;
  background-clip: content-box;
}
.bz_comment_text span.quote::-webkit-scrollbar-thumb {
  background-color: var(--thinlinc-darkgrey-25);
  border-radius: var(--small-border-radius);
  border: 2px solid transparent;
  background-clip: content-box;
}
.bz_comment_text span.quote:hover::-webkit-scrollbar {
  background-color: var(--thinlinc-lightgrey-75);
  border-width: 0;
}
.bz_comment_text span.quote:hover::-webkit-scrollbar-thumb {
  background-color: var(--thinlinc-darkgrey-75);
  border-width: 0;
}

.bz_private {
  color: var(--thinlinc-darkred);
}
.bz_comment.bz_private,
textarea.bz_private {
  /* thinlinc-darkred-25 with 10 higher lightness */
  background-color: hsl(0 45% 93% / 1);
  border-color: var(--thinlinc-darkred-25);
}
.bz_comment .ih_inlinehistory,
.bz_comment .ih_history_change {
  max-width: 50em; /* Match comment text width */
}
.bz_comment.bz_private .ih_inlinehistory,
.bz_comment.bz_private .ih_history_change {
  color: var(--thinlinc-darkred);
}
/* content width 1050px + 2*24 margin = 1098px */
@media (max-width: 1098px) {
  #comments {
    padding-top: 12px;
    /* pseudo - <hr> */
    border-top: var(--border-width) solid var(--thinlinc-lightgrey);
  }
  .bz_comment_table > tbody > tr,
  #bz_big_form_parts > tbody > tr {
    /* Place visibility below attachements in big_form_parts,
       and comment actions above the comment table */
    display: flex;
    flex-direction: column-reverse;
  }
  .bz_collapse_expand_comments {
    margin-bottom: 12px;
    padding-bottom: 6px;
    /* pseudo - <hr> */
    border-bottom: var(--border-width) solid var(--thinlinc-lightgrey);
    border-radius: 0;
  }
}
/* 50em = 650px with our font size, textbox padding is 2*12px, textbox
   border is 2*1px, body margins are 2*12px, furthermore, the browser
   might have scrollbars with a width of ~12px which we must account
   for in the media rule, this gives a cut-off-point of 712px. */
@media (max-width: 712px) {
  table.bz_comment_table {
    width: 100%;
    table-layout: fixed; /* Prevent table from growing */
  }
  .bz_comment_text,
  .bz_comment .quote,
  .bz_comment .ih_inlinehistory,
  .bz_comment .ih_history_change {
    max-width: unset;
    width: calc(100% - 24px); /* 12px padding on each side */
  }
}

/* New comment */

#add_comment table {
  background-color: transparent;
}
#add_comment > table > tbody > tr > td {
  padding: 12px 0;
}
.comment_tab {
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  border-top-left-radius: var(--small-border-radius);
  border-top-right-radius: var(--small-border-radius);
  background-color: var(--thinlinc-lightgrey-50);
  /* Obscure the part of the textarea border below the active tab,
     This makes the tab look more attached to the textarea. */
  position: relative;
  bottom: -1px;
  z-index: 1;
}
.comment_tab:not(:first-child) {
  border-left: none;
}

/* Class active_comment_tab is applied through JavaScript */
#comment_tab.active_comment_tab,
#comment_preview_tab.active_comment_tab {
  border-bottom: none;
}
#comment_tab.active_comment_tab {
  background-color: white;
}
#comment_preview_tab.active_comment_tab {
  background-color: var(--thinlinc-lightgrey-25);
}

/* Class comment_private is applied through JavaScript */
#comment_tab.comment_private,
#comment_preview_tab.comment_private {
  color: var(--thinlinc-darkred);
  /* thinlinc-darkred-25 with 5 higher lightness */
  background-color: hsl(0 45% 88% / 1);
  border-color: var(--thinlinc-darkred-25);
}
#comment_tab.active_comment_tab.comment_private,
#comment_preview_tab.active_comment_tab.comment_private {
  /* thinlinc-darkred-25 with 10 higher lightness */
  background-color: hsl(0 45% 93% / 1);
}

/* Class comment_focused is applied through JavaScript */
#comment_tab.comment_focused {
  border-color: var(--thinlinc-darkblue);
}
#comment_preview_tab.comment_focused {
  border-bottom-color: var(--thinlinc-darkblue);
}

#comment {
  /* Remove top-left rounded corner to make the tabs above the
     textbox feel more attached to it. */
  border-top-left-radius: 0;
  resize: vertical; /* Only allow vertical resize */
  /* Prevent the comment textbox from being too small to use */
  min-height: 50px;
  /* Match comment */
  width: 50em;
  padding: 6px 12px;
  font-size: 13px;
  font-family: monospace;
}
@media (max-width: 712px) {
  #comment {
    width: calc(100% - 24px - 2px); /* 12px padding, 1px border */
  }
}

#comment_preview.bz_comment {
  /* Match the comment <textarea> */
  padding: 6px 12px;
  font-size: 13px;
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  border-top-left-radius: 0;
}
#comment_preview.bz_comment.comment_private { /* Class applied through JavaScript */
  color: var(--thinlinc-darkred);
  /* thinlinc-darkred-25 with 10 higher lightness */
  background-color: hsl(0 45% 93% / 1);
  border-color: var(--thinlinc-darkred-25);
}

#bug_status_bottom > tbody > tr > th,
#bug_status_bottom > tbody > tr > td {
  /* Align with save button to the right */
  padding-top: 0;
  vertical-align: baseline;
}

/* Field explanations */

.field_value_explanation tbody td {
  border: none;
}

/* Search page */

#summary_field {
  border: none;
  border-radius: var(--small-border-radius);
}
.tabbody #summary_field {
  border: var(--border-width) solid var(--thinlinc-lightgrey);
  white-space: unset; /* Allow wrapping on small screens */
}
.bz_search_section .search_field_row {
  white-space: unset;
}
@media (max-width: 900px) {
  .tabbody #summary_field .field_label {
    width: auto;
  }
  .tabbody #short_desc {
    width: 200px;
  }
  .bz_search_section .field_label,
  .bz_search_section #container_target_milestone .field_label {
    width: 7em;
  }
  .bz_search_section .search_field_row select {
    width: 170px;
  }
  .bz_search_section .search_field_row input {
    width: 265px;
  }
  .bz_search_section .search_field_row select,
  .bz_search_section .search_field_row input {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bz_search_section #bug_id_type {
    width: auto;
  }
}

.bz_simple_search_form #content {
  width: 100%;
  box-sizing: border-box;
}

.calendar_button {
  vertical-align: baseline;
  width: 26px;
  height: 26px;
  padding: 7px;
  border-radius: var(--small-border-radius);
  background:
    white
    center center
    url("/skins/standard/global/calendar.png")
    no-repeat;
}
.calendar_button:hover:not(:disabled) {
  background:
    var(--thinlinc-lightgrey-50)
    center center
    url("/skins/standard/global/calendar.png")
    no-repeat;
}

/* Mimic 'search_field_row' to make the target milestone select fit better */
#container_target_milestone .field_label {
  width: 14em;
  display: inline-block;
  line-height: 2em;
  margin-right: 0.8em;
}
#container_target_milestone .field_label .field_help_link {
  text-align: right;
}

/* tabs */

.tabbed .tabbody {
  background: var(--thinlinc-lightgrey-25);
  border-radius: var(--large-border-radius);
  border: none;
}
.tabs {
  border-collapse: separate;
  border-spacing: 6px 0;
  background-color: transparent;
}
.tabs td {
  background: var(--thinlinc-lightgrey);
  border-top-left-radius: var(--small-border-radius);
  border-top-right-radius: var(--small-border-radius);
  border: none;
  font-weight: bold;
  overflow-wrap: anywhere; /* allow wrapping to break words to fit */
}
/* Remove spacing and padding on small screens */
@media (max-width: 712px) {
  .tabs {
    border-spacing: 1px 0;
  }
  .tabs td {
    padding: 1em 0.5em;
  }
}
.tabs td.selected {
  background: var(--thinlinc-lightgrey-25);
}
.tabs td.spacer {
  background: transparent;
  border: none;
}

.tabbody table#admin_table_edit,
.tabbody table#email_prefs,
.tabbody table#saved_search_prefs,
.tabbody table tr.bz_row_odd {
  /* Tables have lightgrey-25 background, but the tabbody is also
     lightgrey-25, so they need to be differentiated */
  background-color: white;
}
.tabbody table#admin_table_edit tr.column_header,
.tabbody table#email_prefs tr.column_header,
.tabbody table#saved_search_prefs tr.column_header,
.tabbody table tr.bz_row_odd.column_header {
  background-color: var(--thinlinc-lightgrey);
}

.tabbody label {
  line-height: var(--line-height);
}
.tabbody select,
.tabbody input {
  max-width: 100%;
  box-sizing: border-box;
}

/* Preferences */

@media (max-width: 712px) {
  form[name="userprefsform"] > table {
    table-layout: fixed;
    width: 100%;
  }
}

#permissions {
  /* Replace width with max-width to make it responsive */
  width: unset;
  max-width: 40em;
}

/* Administation */

#admin_table,
#flag_types_bugs,
#flag_types_attachments,
#email_prefs,
#saved_search_prefs {
  border: none;
}
#admin_table th,
#admin_table td,
#flag_types_bugs th,
#flag_types_bugs td,
#flag_types_attachments th,
#flag_types_attachments td,
#email_prefs th,
#email_prefs td,
#shared_search_prefs th,
#shared_search_prefs td,
#saved_search_prefs th,
#saved_search_prefs td,
#bug_activity td,
.req_table th,
.req_table td {
  border: none;
}
#admin_table_edit,
#admin_table_edit table {
  background-color: transparent;
}
td.admin_links {
  background-color: white;
}

@media (max-width: 712px) {
  /* Make default preferences table adapt to small screens */
  #admin_table input,
  #admin_table select,
  #admin_table textarea {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (max-width: 1098px) {
  /* Enable word-breaking wrapping on small screens */
  #admin_table {
    word-break: break-word;
  }
}

/* Allow wrapping anywhere in parameters page */
div.cell li,
div.cell dd {
  overflow-wrap: anywhere;
}

/* Don't let inputs on parameters page grow too much */
div.cell input,
div.cell textarea,
div.cell select {
  max-width: 35vw;
}

#contribute {
  border-radius: var(--small-border-radius);
  border: var(--border-width) dashed var(--thinlinc-darkgrey);
  padding: 12px;
}

/* Configuration menu */

#menu {
  margin-right: 24px;
  background-color: var(--thinlinc-lightgrey-25);
  border: none;
}
#menu td {
  border: none;
  padding: 0.4em 1em;
}
#menu td.index {
  background-color: var(--thinlinc-darkblue);
}
#menu td a {
  color: var(--thinlinc-darkblue);
}
#menu td a:active,
#menu td a:hover {
  color: var(--thinlinc-darkblue);
}

#menu td.index a {
  color: white;
}
#menu td.index a:active,
#menu td.index a:hover {
  color: white;
}

#menu td.selected_section {
  color: black;
}

#menu tr:first-child {
  border-bottom-color: transparent;
}