#password-rule-box label {
  margin-right: 4px;
  font-weight: bold;
}

#password-rule-box label svg.icon-svg {
  margin-inline-end: 3px;
  vertical-align: middle;
}

/* category icons follow the color of their wrapper (or the text) */
svg.icon-svg.password-category-icon {
  stroke: currentcolor;
}

.password.details .attribute .value {
  word-wrap: break-word;
}

div.password { background: var(--a-color-bg-light); }

input.passwordfield {
  float: left;
}

#generate-password,
#zc_password_password_current,
#toggle-password {
  cursor: pointer;
}

#password_password_current {
  display: none;
}
label[for='password_password_current'] { display: none; }

#random-password {
  font-style: italic;
  padding-left: 5px;
}

.password invalid-age {
  font-weight: bold;
  color: var(--a-color-alert);
}

table.list td.username,
table.list td.mail,
table.list td.website {
  text-align: left;
}

#generate-password {
  padding: 2px 0;
  margin-left: 4px;
  text-align: center;
  border: none;
  background: none;
}

button.toggle-password {
  padding: 2px 0;
  margin-left: 4px;
  text-align: center;
  float: left;
  border: none;
  background: none;
}

.clipboard-button {
  margin-left: 4px;
}

#passwords-for-relation {
  height: 200px;
  overflow: auto;
}

#passwords-for-relation label { display: block; }
div.issue table span.password { float: none; }
div.db-entry table span.password { float: none; }
div.contact table span.password { float: none; }

input#password_search { width: 100%; }

.password-relations ul {
  padding-left: 0;
}

.password-relations ul li {
  list-style: none;
}

input#password_name { width: 99%; }

#password-private-wrap {
  float: right;
  margin-right: 1em;
  margin-left: 1em;
  padding-left: 0;
  padding-bottom: 0;
}

.missing-encryption {
  background-color: var(--a-color-alert);
}

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

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