:host {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}
div#ui {
  display: inline-block;
  width: 30em;
  border: 1px solid gray;
  background: #bfbfbf;
  color: black;
}
#ui button {
  width: 2em;
}
div#graphView {
}
div a {
  color: rgb(66, 66, 200);
}
.expander {
  display: inline-block;
  padding: 3px;
}

/* graph view */
@import url("https://fonts.googleapis.com/css?family=Allerta|Dosis|Jura&display=swap");

body.rdfBrowsePage {
  background: black;
  color: white;
  font-family: "Allerta", sans-serif;
  font-size: 12px;
}

body.rdfBrowsePage pre {
  font-family: "Allerta", sans-serif;
}

body.rdfBrowsePage a {
  color: #b1b1fd;
  text-shadow: 1px 1px 0px #0400ff94;
  text-decoration-color: #00007714;
}

section {
  border: 1px solid gray;
  padding: 4px;
  font-family: "Allerta", sans-serif;
}
.spoGrid {
  display: flex;
  flex-direction: column;
}
.subject,
.predicate {
  display: flex;
  align-items: baseline;
}

.predicate,
.object {
  margin-left: 5px;
}
.subject {
  border-top: 1px solid #2f2f2f;
}
.literal {
  border: 1px solid gray;
  border-radius: 9px;
  padding: 4px;
  margin: 3px;
}

.subject > .node {
  border: 2px solid rgb(68, 141, 68);
}
.literalType {
  vertical-align: super;
  font-size: 80%;
}
.literal {
  display: inline-block;
  font-family: monospace;
  font-size: 115%;
}
.resource {
  display: inline-block;
  background: lightblue;
  border-radius: 6px;
  padding: 1px 6px;
  margin: 2px;
}
.predicate > a {
  color: #e49dfb;
}
.predicate > a::before {
  content: "━";
  font-size: 125%;
  font-weight: bolder;
  padding-right: 2px;
}
.predicate > a::after {
  content: "🠪";
}
.comment {
  color: green;
}

table.typeBlock {
  border-collapse: collapse;
}
table.typeBlock th {
  background: #1f1f1f;
  border: 2px #333333 outset;
}
table.typeBlock td {
  white-space: nowrap;
  background: #2b2b2b;
  border: 2px #4a4a4a outset;
}
table.typeBlock td .literal {
  padding-top: 1px;
  padding-bottom: 1px;
}
.typeBlockScroll {
  max-width: 100%;
  overflow-x: auto;
}

/*
for my pages serving rdf data, not necessarily part of browse/
*/
.served-resources {
  margin-top: 4em;
  border-top: 1px solid gray;
  padding-top: 1em;
}
.served-resources a {
  padding-right: 2em;
}