@font-face {
  font-family: PublicSans;
  src: url("/third_party/publicsans/fonts/otf/PublicSans-Regular.otf") format("opentype");
}

a, a:link, a:visited {
  color: #5050C0;
}

a:hover, a:active {
  color: #202070;
}

dialog {
  max-width: 500px;
  z-index: 1;
  font-size: 14px;
}

dialog h2 {
  margin-top: 0;
  padding-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  font-size: 18px;
  border-bottom: 1px solid #C0C0C0;
}

dialog label {
  font-weight: bold;
}

dialog p {
  color: #505050;
  font-size: 12px;
}

dialog .dialog-buttons {
  padding-top: 15px;
  margin-top: 10px;
  border-top: 1px solid #C0C0C0;
}

dialog .form-group {
  margin-bottom: 15px;
}

dialog .form-group input {
  font-size: 13px;
}

dialog .form-group input.long {
  width: 250px;
}

dialog .form-group input.short {
  width: 100px;
}

dialog .instructions {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #C0C0C0;
  font-size: 12px;
}

dialog .contents .instructions {
  border-bottom: 1px dotted #C0C0C0;
  margin-top: 10px;
}

fieldset div {
  margin-bottom: 5px;
}

footer {
  margin-bottom: 20px;
}

html {
  background-color: #F9F9F9;
  font-family: PublicSans;
  font-size: 15px;
}

header {
  margin-bottom: 40px;
}

main {
  background-color: white;
  padding: 15px;
  border: 1px solid #A0A0A0;
  border-radius: 10px;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.beta-warning {
  background-color: #595959;
  color: white;
  padding: 7px;
  border-radius: 2px;
  border: 1px solid black;
}

.beta-warning a, .beta-warning a:link, .beta-warning a:visited {
  color: white;
}

.beta-warning a:hover, .beta-warning a:active {
  color: white;
}

.buttons-panel {
  margin-top: 20px;
}

.buttons-panel.embed {
  margin-top: 10px;
}

.buttons-panel #loading {
  display: none;
}

.buttons-panel a.primary, .buttons-panel a.primary:link, .buttons-panel a.primary:visited {
  background-color: #7070C0;
  color: white;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.buttons-panel a.primary:focus, .buttons-panel a.primary:hover, .buttons-panel a.primary:active {
  background-color: #5050C0;
}

.buttons-panel a.destructive, .buttons-panel a.destructive:link, .buttons-panel a.destructive:visited {
  background-color: #F0B0B0;
  color: black;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.buttons-panel a.destructive:focus, .buttons-panel a.destructive:hover, .buttons-panel a.destructive:active {
  background-color: #F01010;
  color: white;
}

.buttons-panel a.secondary, .buttons-panel a.secondary:link, .buttons-panel a.secondary:visited {
  background-color: #E0E0E0;
  color: black;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.buttons-panel a.secondary:focus, .buttons-panel a.secondary:hover, .buttons-panel a.secondary:active {
  background-color: #909090;
  color: white;
}

.files-panel {
  margin: 5px;
  padding: 5px;
  border: 1px solid #C0C0C0;
  border-radius: 5px;
  height: 350px;
  overflow-y: auto;
}

.file-upload-active-panel {
  padding: 15px;
  background-color: #E0E0E0;
  border-radius: 5px;
}

.file-upload-input-holder {
  margin-bottom: 15px;
}

.files-panel .file-group {
  border-bottom: 1px dotted #C0C0C0;
}

.files-panel .file-group .delete-holder {
  float: right;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: right;
  font-size: 11px;
  width: 50px;
  padding-top: 2px;
}

.horiz-scroll-area {
  overflow-x: auto;
}

/* Thanks https://codepen.io/code-boxx/pen/RwxbpOz */
/* MIT License */

/* (A) BASICS - HIDE DEFAULT + SHOW CUSTOM ARROW */
.sel.long {
  width: 250px;
}

.sel.mid {
  width: 130px;
}

.sel.short {
  width: 50px;
}

.sel select { appearance: none; }
.sel::after { content: ">"; }

/* (B) DIMENSIONS */
/* (B1) WRAPPER - OPTIONAL */

/* (B2) "EXPAND" SELECT BOX */
.sel {
  display: inline-block;
}

.sel select {
  padding: 5px;
  color: #333;
  border: 1px solid #cfcfcf;
  padding-right: 25px;
  background-color: white;
}

.sel.long select {
  width: 250px;
}

.sel.mid select {
  width: 130px;
}

.sel.short select {
  width: 50px;
}

/* (C) POSITION CUSTOM ARROW */
/* (C1) REQUIRED FOR ABSOLUTE POSITION BELOW */
.sel { position: relative; }

/* (C2) DEFAULT - ARROW ON RIGHT SIDE */
.sel::after {
  position: absolute;
  top: 48%; right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* (D) COSMETICS */
/* (D1) CUSTOM ARROW IS ESSENTIALLY TEXT! */
.sel::after { font-size: 13px; color: #aaa; }

/* (D2) ROTATE ARROW ON HOVER */
.sel::after { transition: all 0.3s; }
.sel:hover::after {
  transform: translateY(-50%) rotate(90deg);
  color: #ff1212;
}

.space-panel {
  text-align: center;
  margin-top: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
}

.status-display {
  margin-bottom: 10px;
}

.tab {
  padding: 5px;
}

.tos section.major {
  border-top: 1px solid #C0C0C0;
  padding-top: 10px;
  margin-top: 10px;
}

.tos section.minor {
  border-top: 1px dotted #C0C0C0;
  padding-top: 10px;
  margin-top: 10px;
}

#code-editor .error-display {
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #77eec6;
  background-color: #7fffd4;
  display: none;
}

#code-editor .inner {
  height: 650px;
  overflow: auto;
  border: 1px solid #C0C0C0;
  border-radius: 2px;
}

#data-selector {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 175%;
}

#editor-tabs {
  margin-bottom: 10px;
}

#loading {
  background-color: white;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #D0D0D0;
}

#loading img {
  height: 20px;
}

#main-holder {
  display: none;
}

#results {
  display: none;
}

#results .center-chart {
  width: 100%;
  min-height: 100px;
}

#results .center-chart-holder bottom-chart-title {
  margin-top: 5px;
  margin-bottom: 20px;
}

#results .center-chart-holder top-chart-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

#results #grid-viz-holder {
  width: 100%;
  text-align: center;
}

#results #grid-legend {
  margin: 20px auto;
  border-collapse: separate;
  border-spacing: 5px;
}

#results #grid-legend .color td {
  height: 10px;
  min-width: 40px;
}

#results #grid-viz {
  width: 100%;
  margin: 0 auto;
}

#results #grid-viz .base-layer {
  opacity: 0.75;
}

#results #grid-viz .glyphs-layer.overlay {
  opacity: 0.65;
}

#results #grid-viz .grid-patch-foreground:hover {
  stroke: #333333;
  stroke-weight: 2;
}

#results #grid-viz-info {
  margin-top: 20px;
  margin-bottom: 20px;
}

#results #grid-viz-info.fixed {
  position: relative;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  border-bottom: 1px sold #C0C0C0;
}

#results #scrub-viz {
  width: 100%;
  height: 100px;
}

#results #scrub-viz .horizontal-tick {
  text-anchor: middle;
  dominant-baseline: hanging;
  font-size: 13px;
  fill: #757575;
}

#results #scrub-viz .scrub-group .display-bar {
  fill: #00B0D0;
}

#results #scrub-viz .scrub-group .horizontal-embed-tick {
  visibility: hidden;
}

#results #scrub-viz .scrub-group .pointer-target {
  fill-opacity: 0;
  stroke-opacity: 0;
}

#results #scrub-viz .scrub-group:hover {
  cursor: pointer;
}

#results #scrub-viz .scrub-group:hover .display-bar {
  fill: #0080A0;
}

#results #scrub-viz .scrub-group:hover .pointer-target {
  stroke-opacity: 1;
  stroke-width: 1;
  stroke: #C0C0C0;
}

#results #scrub-viz .scrub-group.active .display-bar {
  fill: #0080A0;
}

#results #scrub-viz .scrub-group.active .horizontal-embed-tick {
  fill: #333333;
  font-size: 13px;
  visibility: visible;
  text-anchor: middle;
  dominant-baseline: hanging;
  font-weight: bold;
}

#results #scrub-viz .selected-value-display {
  visibility: hidden;
}

#results #scrub-viz .selected-value-display.active {
  fill: #333333;
  font-weight: bold;
  dominant-baseline: auto;
  text-anchor: middle;
  font-size: 11px;
  visibility: visible;
}

#results #scrub-viz .vertical-tick {
  text-anchor: left;
  dominant-baseline: middle;
  font-size: 13px;
  fill: #757575;
}

@media (max-width: 999px) {

  #sim-display-buttons {
    margin-top: 5px;
    margin-bottom: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px dotted #D0D0D0;
    border-bottom: 1px dotted #D0D0D0;
  }
  
  #sim-display-buttons .button-holder {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #sim-display-buttons .button-holder a {
    display: block;
    text-align: center;
  }
  
  #results .dimensions .dimension {
    margin-bottom: 10px;
  }

  #results {
    margin-top: 30px;
    border-top: 1px solid #C0C0C0;
  }
}

@media (min-width: 1000px) {
  main {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  .header-button-grid {
    display: grid;
    grid-template-columns: 20% 80%;
  }

  #results .sim-wide-panel {
    text-align: right;
  }

  #sim-display-buttons {
    text-align: right;
  }

  #sim-display-buttons .button-holder {
    display: inline-block;
    margin-left: 10px;
  }

  #editor {
    padding-right: 10px;
  }

  #results .dimensions {
    display: grid;
    grid-template-columns: 32% 2% 32% 2% 32%;
    margin-top: 10px;
  }

  #results #viz-panel {
    border-top: 1px solid #E0E0E0;
    margin-top: 20px;
  }

  #results #viz-panel pre {
    background-color: #505050;
    color: white;
    font-size: 12px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #33333;
  }

  #results-area {
    border-top: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
    max-height: 650px;
    overflow-y: auto;
  }

  #results {
    padding-left: 10px;
  }
}

@media (min-width: 30em) {
  a[role="tab"], a:link[role="tab"], a:visited[role="tab"] {
    color: #5050C0;
  }

  a[role="tab"][aria-selected="true"], a:link[role="tab"][aria-selected="true"], a:visited[role="tab"][aria-selected="true"] {
    color: #202070;
  }
}