/* Copyright 2012 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Using 100% width within body should exclude margins. */
html,
body {
  height: 100%;
  width: 100%;
}

body {
  box-sizing: border-box;
  margin: 0;
}

h3 {
  font-size: 100%;
  margin-bottom: 15px;
  margin-top: 17px;
}

#tabbox {
  height: 100%;
  overflow: auto;
  width: 100%;
}

#cert-field-value {
  padding-inline-start: 15px;
  white-space: pre-wrap;
}

#general h3 {
  margin-bottom: 16px;
  margin-top: 32px;
}

.groups {
  display: table;
}

.groups > * {
  display: table-row;
}

.groups > div > div {
  color: #616161;
  line-height: 18px;
  padding-inline-start: 20px;
}

.attribute {
  display: table-cell;
  white-space: nowrap;
}

.value {
  display: table-cell;
  white-space: pre-wrap;
}

.hashvalue {
  display: table-cell;
  overflow-wrap: anywhere;
}

/* Used so that 100% width within tabpanel will correspond to usable space. */
div[slot='panel'] {
  height: 100%;
  overflow: auto;
  position: relative;
}

.vertical-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
}

#hierarchy {
  /* Cert hierarchy tree should be 3 lines tall and does not grow. */
  flex: 0;
  min-height: calc(3 * var(--cr-tree-row-line-height));
}

#cert-fields {
  /* Cert fields tree should be minimum 3 lines tall and grows 2.9x as fast
   * as the field value text box. */
  flex: 2.9;
  min-height: calc(3 * var(--cr-tree-row-line-height));
}

#cert-field-value {
  flex: 1;
  margin-block-end: 10px;
  /* Minimum height enough for 3 lines of text. */
  min-height: 48px;
}

.section-contents {
  background: #fff;
  border: 1px solid #c8c8c8;
  /* Scrolling should be enabled on all tree views and value field. */
  overflow: auto;
}

html {
  --cr-tree-row-selected-color: #f0f0f0;
  --cr-tree-row-selected-image: none;
  --cr-tree-row-border: 0;
  --cr-tree-row-border-radius: 0;
  --cr-tree-row-line-height: 29px;
}

#export {
  float: right;
  margin-bottom: 20px;
  margin-inline-start: 1px;
}