:root {
   --color-bg-primary: #fff;
   --color-bg-secondary: #f0f0f0;
   --color-text-primary: #444;
   --color-text-secondary: #444;
   --color-text-tertiary: #666;
   --color-border: #ccc;
   --color-btn-text: #555;
   --color-btn-border: #dedede;
   --color-highlight: #095032;

   --color-shadow: #b3b3b3;
   --color-graph-axis: #000;
   --color-graph-line: #35a2bd;
   --color-link: #35a2bd;
}

html[data-theme='dark'] {
   --color-bg-primary: #161a1e;
   --color-bg-secondary: #242a31;
   --color-text-primary: #f0f0f0;
   --color-text-secondary: #ddd;
   --color-text-tertiary: #888;
   --color-border: #444;
   --color-btn-text: #eee;
   --color-btn-border: #555;
   --color-highlight: #f2f920;

   --color-shadow: #000;
   --color-graph-axis: #fefefe;
   --color-graph-line: #35a2bd;
}

html, body {
	margin: 0px;
   height: 100%;
   background-color: var(--color-bg-primary);
}

body, table, td {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	color: var(--color-text-primary);
}

img {
	border: 0px;
}

.page-content {
   padding: 10px 30px;
   min-height: calc(100% - 20px);
}
.data-title {
   text-align: center;
   font-size: 36px;
}

#dropdiv {
   margin: 0 auto;
   box-sizing: border-box;
   background-color: var(--color-bg-secondary);
   padding: 25px;
}
.dragging {
   background-color: var(--color-bg-secondary) !important;
}
.graphed > .directions {
   display: none;
}
.dragging > .directions {
   display: none;
}
.dragging > .release-directions {
   display: block;
}

.directions {
   margin: 0 auto;
   width: 80%;
   box-sizing: border-box;
   padding: 0px;
}
.release-directions {
   padding-top: 50px;
   display: none;
   min-height: 100%;
   text-align: center;
}

.example-command {
   background-color: var(--color-bg-secondary);
   padding: 16px;
   font-family: 'Courier New', monospace;
}
.example-link {
   color: var(--color-text-primary)
}
.example-output {
   font-size: 12px;
   color: var(--color-text-tertiary);
   padding-left: 20px;
   overflow-x: auto;
}

#graphcontainer {
   position: absolute;
   right: 0px;
   top: 60px;
   left: 0px;
   bottom: 66px;
   text-align: center;
   margin: 0px 45px 0px 45px;
}

.axis path,
.axis line {
  fill: none;
  stroke: var(--color-graph-axis);
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line0 {
  fill: none;
  stroke: rgb(30, 199, 199);
  stroke-width: 1.5px;
}
.line1 {
   fill: none;
   stroke: rgb(30, 149, 199);
   stroke-width: 1.5px;
}
.line2 {
   fill: none;
   stroke: rgb(30, 109, 199);
   stroke-width: 1.5px;
}
.line3 {
   fill: none;
   stroke: rgb(14, 42, 73);
   stroke-width: 1.5px;
 }

text {
   fill: var(--color-text-secondary);
}



/* theme selection */
.theme-selector {
   float: right;
   margin-top: 3px;
   margin-right: 3px;
}
.themetoggle-switch {
   position: relative;
   display: inline-block;
   width: 48px;
   height: 25px;
   line-height: 25px;
   vertical-align: middle;
   margin: 0px 5px 5px 0px;
   overflow: hidden;
}
.themetoggle-switch input {
   display:none;
}
.themetoggle-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #484848;
   background-position-x: 26px;
   background-position-y: center;
   background-repeat: no-repeat;
   background-size: 18px;
   background-image: url("../img/dark_mode.svg");
   -webkit-transition: .4s;
   transition: .4s;
}
.themetoggle-slider:before {
   position: absolute;
   content: "";
   height: 21px;
   width: 21px;
   left: 2px;
   bottom: 2px;
   background-color: #f0f0f0;
   -webkit-transition: .4s;
   transition: .4s;
}
input:checked + .themetoggle-slider {
   background-color: #aaa;
   background-position-x: 4px;
   background-image: url("../img/light_mode.svg");
}
input:focus + .themetoggle-slider {
   box-shadow: 0 0 1px var(--color-highlight);
}
input:checked + .themetoggle-slider:before {
   -webkit-transform: translateX(22px);
   -ms-transform: translateX(22px);
   transform: translateX(22px);
}
.themetoggle-slider.round {
   border-radius: 34px;
}
.themetoggle-slider.round:before {
   border-radius: 50%;
}