/*
This CSS file is for styling the tor circuit display, which consists of a title,
a domain, and a bulleted list.

Each bullet in the circuit node list is supposed to represent a Tor circuit node,
and lines drawn between them to represent Tor network inter-relay connections.
*/


#circuit-display-content {
  background-image: url(chrome://torbutton/skin/relay.svg);
  background-position: 1em 1em;
  background-repeat: no-repeat;
  background-size: 24px auto;
  background-color: rgba(255,255,255,0.4);
  background-blend-mode: lighten;
  cursor: default;
  padding: 0.5em 0px 0.5em;
  padding-inline-end: 1em;
  padding-inline-start: calc(2em + 24px);
  width: 100%;
}

#circuit-display-content:dir(rtl) {
  background-position: calc(100% - 1em) 1em;
}

#circuit-reload-content {
  background-color: #f7f7f7;
  cursor: default;
  padding: 1em 0px 1em;
  padding-inline-end: 3em;
  padding-inline-start: calc(2em + 24px);
  width: 100%;
}

/* Format the domain text. */
#circuit-display-domain {
  opacity: 0.8;
}

#circuit-div {
  position: relative;
  margin-inline-start: 6px;
}

/* Format the circuit node list. */
ul#circuit-display-nodes {
 /* font-family: Arial; */
  font-size: 16px;
  line-height: 26px;
 /* color: black;*/
  margin-top: 4px;
  margin-bottom: 2px;
  padding-inline-start: 4px;
}

/* Hide default bullets, and draw our own bullets */
ul#circuit-display-nodes li {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2740%27%3E%3Cg%20style%3D%27stroke%3A%234a4a4a%3Bstroke-width%3A3px%3Bfill%3Awhite%3B%27%3E%3Cline%20x1%3D%2750%25%27%20y1%3D%270%25%27%20x2%3D%2750%25%27%20y2%3D%27100%25%27%2F%3E%3Ccircle%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  background-position: left center;
  background-repeat: no-repeat;
  list-style: none;
  padding-inline-start: 1.5em;
  white-space: nowrap;
}

ul#circuit-display-nodes li:dir(rtl) {
  background-position: right center;
}

ul#circuit-display-nodes li:first-child {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2740%27%3E%3Cg%20style%3D%27stroke%3A%234a4a4a%3Bstroke-width%3A3px%3Bfill%3Awhite%3B%27%3E%3Cline%20x1%3D%2750%25%27%20y1%3D%2750%25%27%20x2%3D%2750%25%27%20y2%3D%27100%25%27%2F%3E%3Ccircle%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}

ul#circuit-display-nodes li:last-child {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2740%27%3E%3Cg%20style%3D%27stroke%3A%234a4a4a%3Bstroke-width%3A3px%3Bfill%3Awhite%3B%27%3E%3Cline%20x1%3D%2750%25%27%20y1%3D%270%25%27%20x2%3D%2750%25%27%20y2%3D%2750%25%27%2F%3E%3Ccircle%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}

.circuit-guard-help {
  -moz-context-properties: fill, stroke;
  fill: #6200a4;
  stroke: #6200a4;
}

.circuit-ip-address {
  font-size: 80%;
  opacity: 0.4;
  padding-inline-start: 3px;
}

.circuit-guard-info {
  font-size: 80%;
  font-weight: bold;
  color: #6200a4;
  padding-inline-start: 3px;
}

#circuit-reload-button {
  background-color: #0060df;
  border-radius: 3px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  padding: 10px;
}

#circuit-reload-button:hover {
  background-color: #0058cf;
}

#circuit-reload-button:active {
  background-color: #0050bf;
}

#circuit-guard-note-container {
  margin-top: 10px;
}

#circuit-guard-note-container div {
  margin-left: 3px;
  margin-right: 3px;
}

.circuit-guard-name {
  font-weight: bold;
  color: #6200a4;
}

.circuit-link {
  cursor: pointer;
  color: #0000ee;
}

.circuit-link:hover {
  text-decoration: underline;
}
