src/viewer/css/index.css
body {
  background-color: white;
  font-size: 14px;
  line-height: 1.428;
  max-width: 1024px;
  margin: 0 auto;
  width: 100vw;
  -moz-user-select: text;
}

h1 {
  font-size: 1.5em;
  margin: 0;
}

h2 {
  font-size: 1.25em;
  margin: 0;
}

/* generic spacing utilities */
.b-0 {
  border: 0;
}

.mt-1 {
  margin-top: .25rem !important;
}

.mt-2 {
  margin-top: .5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.m-5 {
  margin: 3em !important;
}

.certificate .panel-section-header {
  border: 0;
}

.panel-section-subheader {
  display: flex;
  flex-direction: row;
  font-weight: bold;
  padding: 0 16px;
}

.panel-section-subsection {
  font-size: 18px;
  font-weight: 700;
  margin: 14px 0 -8px 16px;
}

.panel-section-subheader span {
  color: #b8b8b8;
  text-align: right;
  width: 11em;
}

.panel-section-subheader:after {
  content: "";
  flex: 1 1;
  border-bottom: solid 1px #b8b8b8;
  margin: auto 3.5em auto 1em;
}

#handshake .panel .panel-section-header {
  margin-bottom: 8px;
}

.panel-list-item ~ .panel-section-subheader {
  margin-top: 1.75em;
}

.panel-list-item div:nth-of-type(1) {
  min-width: 12em;
  max-width: 12em;
}

.panel-list-item div:nth-of-type(1) {
  color: #929292;
  font-weight: bold;
  padding-right: 1em;
  text-align: right;
  word-break: initial;
}

.critical {
  height: 13px;
  margin: 0 4px 2px 0;
  vertical-align: middle;
}

.long-hex {
  flex-grow: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.long-hex-box {
  max-width: 816px;
  margin-right: 4em;
  word-break: break-all;
}

.breakable {
  word-break: break-all;
}

.section {
  margin-bottom: .5em;
}

/* overrides to extension.css */
.panel-list-item {
  border-bottom: solid 1px white;  /* same as background to fix hover issue, see issue #41 */
  border-top: solid 1px white;
  cursor: text;
  height: inherit;
  min-height: 24px;
}

.panel-list-item-separator {
  height: .5em;
}

.panel-section-header {
  padding: 12px 16px;
}

#panel-section-tabs {
  background-color: white;
  border-bottom: solid 4px white;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  cursor: pointer;
}

/* have the tabs be sticky but only on reasonably sized devices */
@media (max-height: 680px) {
  #panel-section-tabs {
    position: auto;
    top: auto;
  }
}

@media (max-width: 576px) {
  #panel-section-tabs {
    flex-direction: column;
  }
}

.panel-section-tabs-button {
  box-shadow: 0 1px 0 rgb(0, 0, 0, .15);

  /* questionable overrides from the chrome.css */
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  margin: 0;  /* default 0 -1 causes x overflow */
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-bottom: 0;
  margin: -1px 0 0 -1px;
}

.panel-section-tabs-button.selected {
  box-shadow: 0 2px 0 #0996f8;
  color: #0996f8;
}

.text-section-header {
  margin: 0 auto;
}

.issuer-link:visited {
    color: blue;
}
