body.loading table.result,
body.loading .navbar-nav .start-time,
body.loading .navbar-nav .duration,
body.loading .navbar-nav .end-time {
  opacity: 0.3;
}

.btn-xs {
  margin: 0 .1rem .1rem 0;
  padding: .01rem .025rem .01rem .025rem;
  font-size: .7rem;
  border-width: 2px;
  border-radius: 4px;
  font-weight: bold;
}

.btn-highlight {
  background-color: yellow !important;
  color: black !important;
}

.hover-xy {
  background-color: #ecf0f1;
  color: #e74c3c;
}

.table th {
  vertical-align: middle;
}

tr.hover-xy > th, th.hover-xy {
  background-color: #cfd9db;
  color: #e74c3c;
}

/* テストの絞り込みは折り返したときにボタンを横へ広げない。 */
#test > .btn {
  flex-grow: 0;
}

/* 比較表は役割 2 段だけなので、画面の幅に収めて結果ボタンを折り返す。 */
#interop, #measurements {
  table-layout: fixed;
  width: 100%;
  /* 狭い画面では列を潰さず、横スクロールで読ませる。 */
  min-width: 60rem;
}

#interop th:first-child, #measurements th:first-child {
  /* 行の見出しは役割と実装名の 2 行になるため、その幅を確保する。 */
  width: 10rem;
}

#interop th, #measurements th {
  overflow-wrap: anywhere;
}

/* 計測値はボタンの外へ出し、折り返して読めるようにする。 */
.measurement {
  margin-bottom: .15rem;
}

.measurement-details {
  font-size: .8rem;
}