:root {
  --focus-color: #097efb;
  --focus-color-dark-bg: #3b99fc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #3b99fc;
    --focus-color-dark-bg: #097efb;
  }
}
/* General table styles */
/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/
th,
td {
  text-align: left;
  text-align: start;
}
/** Property/Descriptor Definition Tables *************************************/
table.def {
  /* inherits .def box styling, see above */
  width: 100%;
  border-spacing: 0;
}
table.def td,
table.def th {
  padding: 0.5em;
  vertical-align: baseline;
  border-bottom: 1px solid #bbd7e9;
}
table.def > tbody > tr:last-child th,
table.def > tbody > tr:last-child td {
  border-bottom: 0;
}
table.def th {
  font-style: italic;
  font-weight: normal;
  padding-left: 1em;
  width: 3em;
}
/* For when values are extra-complex and need formatting for readability */
table td.pre {
  white-space: pre-wrap;
}
/* A footnote at the bottom of a def table */
table.def td.footnote {
  padding-top: 0.6em;
}
table.def td.footnote::before {
  content: " ";
  display: block;
  height: 0.6em;
  width: 4em;
  border-top: thin solid;
}
/** Data tables (and properly marked-up index tables) *************************/
/*
     <table class="data"> highlights structural relationships in a table
     when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

     Use class="complex data" for particularly complicated tables --
     (This will draw more lines: busier, but clearer.)

     Use class="long" on table cells with paragraph-like contents
     (This will adjust text alignment accordingly.)
     Alternately use class="longlastcol" on tables, to have the last column assume "long".
*/
table {
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: manual;
}
table.data,
table.index {
  margin: 1em auto;
  border-collapse: collapse;
  border: hidden;
  width: 100%;
}
table.data caption,
table.index caption {
  max-width: 50em;
  margin: 0 auto 1em;
}
table.data td,
table.data th,
table.index td,
table.index th {
  padding: 0.5em 1em;
  border-width: 1px;
  border-color: silver;
  border-top-style: solid;
}
table.data thead td:empty {
  padding: 0;
  border: 0;
}
table.data thead,
table.index thead,
table.data tbody,
table.index tbody {
  border-bottom: 2px solid;
}
table.data colgroup,
table.index colgroup {
  border-left: 2px solid;
}
table.data tbody th:first-child,
table.index tbody th:first-child {
  border-right: 2px solid;
  border-top: 1px solid silver;
  padding-right: 1em;
}
table.data th[colspan],
table.data td[colspan] {
  text-align: center;
}
table.complex.data th,
table.complex.data td {
  border: 1px solid silver;
  text-align: center;
}
table.data.longlastcol td:last-child,
table.data td.long {
  vertical-align: baseline;
  text-align: left;
}
table.data img {
  vertical-align: middle;
}
/* specific grid css */
.annotate {
  font-style: italic;
  color: #366ed4;
}
.hidden {
  display: none !important;
}
[role="button"] {
  cursor: pointer;
}
[aria-sort="ascending"] {
  position: relative;
}
[aria-sort="ascending"]::after {
  content: " ";
  border-bottom: 0.4em solid black;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  position: absolute;
  right: 1em;
  top: 0.8em;
}
[aria-sort="descending"] {
  position: relative;
}
[aria-sort="descending"]::after {
  content: " ";
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-top: 0.4em solid black;
  position: absolute;
  right: 1em;
  top: 0.8em;
}
.edit-text-button {
  color: #360;
  display: block;
  position: relative;
}
.edit-text-button::after {
  background-image: url("../imgs/pencil-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 44px;
  content: " ";
  height: 17px;
  opacity: 0.6;
  position: absolute;
  right: -24px;
  top: 0px;
  width: 20px;
}
.edit-text-button:hover,
.edit-text-button:focus {
  color: black;
}
.edit-text-button:hover::after,
.edit-text-button:focus::after {
  opacity: 1;
}
[role="gridcell"]:focus,
[role="gridcell"] *:focus,
[role="grid"] [tabindex="0"]:focus {
  outline: var(--focus-color);
  outline-style: dotted;
  outline-width: 3px;
}
#arrow-keys-indicator {
  bottom: 10px;
  left: 0;
  position: fixed;
  height: 65px;
  width: 85px;
  background: url("../imgs/black_keys.png") no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  #arrow-keys-indicator {
    display: none;
  }
}
/* Menu button */
button {
  cursor: pointer;
  font-size: 1.1rem;
}
.menu-wrapper {
  position: relative;
}
ul[role="menu"] {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 1;
}
ul[role="menu"] li {
  list-style: none;
}
[role="menu"] {
  padding: 0;
  width: 8em;
  border: thin solid black;
  background-color: #eeeeee;
}
[role="menuitem"] {
  padding: 0.25em;
}
[role="menuitem"]:focus,
[role="menuitem"]:hover {
  background-color: #ffffff;
}
/*# sourceMappingURL=grid.css.map */