@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro:400,700);

html, body, #container {
  height: 100%;
  min-height: 100%;
  background:#f6f6f6;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  background: #f6f6f6;
  font-weight: 400;
  color: #333;
  overflow:hidden;
}

h1 {
  margin-top: 0;
  padding-bottom: 0.25em;
  margin-bottom: 0.25em;
  border-bottom: 1px solid #333;
}

h3 {
  margin: 0;
}

input {
  margin-top: 0;
  margin-bottom: 0.5em;
}

a {
  color: #bd0329;
  text-decoration: none;
  fill: rgb(189, 3, 41)
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

table a {
  color: inherit;
  display: block;
  padding: 0.5ex 1ex;
}

table {
  border-collapse: collapse;
}

table.hidden {
  display: none;
}

th, td {
  border: 1px solid #333;
}

th {
  padding: 0.5ex 1ex;
}

th {
  font-weight: 700;
  color: #bd0329;
  background: #e0e0e0;
}

.even {
  background: #eaeaea;
}

.odd:hover, .even:hover {
  background: #ffeaea;
}

.big-center-box {
  width: 100%;
  background: #f6f6f6;
  /*border: 2px solid #bd0329;
  border-radius: 1.25em/1em;*/
  overflow:hidden;
}

.box-inner {
  margin:50px auto;
  width:50%;
}

.box-inner h1 {padding-left:200px;}

.menu {
  float: left;
  border: 1px solid #ccc;
  background: #f1f1f1;
  padding: 0.5ex 2ex;
}

button {
  border: 1px solid #bd0329;
  background: transparent;
  color: #bd0329;
  padding: 0.75ex 2ex;
  border-radius: 1ex/0.8ex;
  font-size: 1.125em;
  outline:none;
  min-height:39px;
}
button:hover, button:active, button:focus {
  background: #bd0329;
  color: #fff
}

form table {
  border-collapse: collapse;
  width:100%;
}

form table th, form table td {
  border: 0;
}

form table p {
  margin: 0;
}

.text {
  font-size: 1.125em;
}

.right {
  text-align: right;
}

.nowrap {
  white-space: nowrap !important;
}

#container {
  position: relative;
  margin: 0 auto;
  box-sizing:border-box;
}

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 99%;
  background-color: #f6f6f6;
  visibility:hidden;
}

#sidebar-header { padding: 0 2px 2px 10px;}
#sidebar-header img {height:24px;width:24px;vertical-align:text-top;}
.top-links {font-family:sans-serif;color:#bd0329;font-size:100%;margin-top:10px;}
.top-links img {margin-top:-4px;}
#alerts-link img {max-height:18px;max-width:18px;margin-top:1px;}
#dump, #alerts-link img {color:#bd0329;cursor:pointer;}

#sidebar.hidden {
  width: 1.3em;
}

#sidebar.hidden #sidebar-accordion {
  display: none;
}

#sidebar.hidden #sidebar-header {
  display: none;
}

#sidebar h3 {
  font-size: inherit;
  margin: 0.5ex 0.5ex 0.5ex 0.5ex;
  padding: 0.5ex 0.75ex;
  cursor: pointer;
  color: #bd0329;
  border: 1px solid #bd0329;
  border-radius: 1ex/0.8ex;
  outline:none;
}

#sidebar h3:hover {
  background: #bd0329;
  color: #eaeaea;
}

#sidebar-accordion > div {
  margin: 0.5ex 0.5ex 0.5ex 0.5ex;
  padding: 0;
}

#test-info p {
  margin: 0;
  height:80%;
}

.big-center-box #test-info {
  width: 33%;
  float: right;
}

#channels table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: .5em;
}

#channels td {
  border: 1px solid #333;
}

#channels .axis {
  width: 15%;
}

#channels .channel-name {
  width: 70%;
  font-weight: 700;
  text-align: center;
}

#channels td.selected.color0 {
  background: #36a;
}

#channels td.selected.color1 {
  background: #e72;
}

#channels td.selected.color2 {
  background: #1a9;
}

#channels td.selected.color3 {
  background: #e33;
}

#channels td.selected.color4 {
  background: #6a5;
}

#channels td.selected.color5 {
  background: #928;
}

#channels td.selected.color6 {
  background: #cc5;
}

#channels td.selected.color7 {
  background: #fe3;
}

#channels td.selected.color8 {
  background: #777;
}

#channels p {
  margin: 0;
}

#view-start-time {
  font-weight:bold;
  position:absolute;
  bottom:0;
  left:19em;
}

#view-end-time {
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0.3em;
}

#main {
  margin-left: 300px;
  height: 100%;
  min-height: 100%;
  background: #fff;
}

#chart {
  width: 100%;
  height: 99%;
  cursor: -webkit-crosshair;
  cursor: crosshair;
}

#chart.shift-key {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

#chart.control-key {
  cursor: crosshair;
}

#chart.mouse-down {
  cursor: -webkit-grab;
  cursor: grab;  
}

#chart.panning {
  cursor: -webkit-grab;
  cursor: grab;  
}

#chart path.area {
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

#chart path.line {
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

#chart .output text {
  text-anchor: middle;
}

#chart .output text a {
  cursor: -webkit-grab;
  cursor: grab;
  cursor: pointer;
  }

#chart rect.selection {
  fill: #00b21e;
  opacity: 0.25;
}

#chart rect.hidden {
  fill: none;
}

.axis path, .axis line {
  fill: none;
  stroke: #333;
  shape-rendering: crispEdges;
}

.area.color0 {
  stroke: #36a;
  fill: #36a;
}

.area.color1 {
  stroke: #e72;
  fill: #e72;
}

.area.color2 {
  stroke: #1a9;
  fill: #1a9;
}

.area.color3 {
  stroke: #e33;
  fill: #e33;
}

.area.color4 {
  stroke: #6a5;
  fill: #6a5;
}

.area.color5 {
  stroke: #928;
  fill: #928;
}

.area.color6 {
  stroke: #cc5;
  fill: #cc5;
}

.area.color7 {
  stroke: #fe3;
  fill: #fe3;
}

.area.color8 {
  stroke: #777;
  fill: #777;
}

.line.color0 {
  stroke: #36a;
  fill: transparent;
}

.line.color1 {
  stroke: #e72;
  fill: transparent;
}

.line.color2 {
  stroke: #1a9;
  fill: transparent;
}

.line.color3 {
  stroke: #e33;
  fill: transparent;
}

.line.color4 {
  stroke: #6a5;
  fill: transparent;
}

.line.color5 {
  stroke: #928;
  fill: transparent;
}

.line.color6 {
  stroke: #cc5;
  fill: transparent;
}

.line.color7 {
  stroke: #fe3;
  fill: transparent;
}

.line.color8 {
  stroke: #777;
  fill: transparent;
}

.attachment {
  cursor: pointer;
}

#sidebar.hidden + #main {
  margin-left: 1.3em;
}

.note-wrapper {
  margin-top: 0;
  margin-bottom: 0.6em;
  border-bottom: 1px solid #333;
  overflow:hidden;
  word-wrap:break-word;
}

.note-wrapper p {
  margin:0 0;
}

.note-edit {float:right;margin-right:5px;}

/* See: http://blog.raventools.com/create-a-modal-dialog-using-css-and-javascript/ */
#overlay {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-image: url("/static/img/transparent.png ");
}

#overlay > div {
  width: 50%;
  margin: 10% auto;
  background: #fff;
  border: 2px solid #333;
  border-radius: 1.25em/1em;
  padding: 1em;
  text-align: center;
}

#overlay p {
  margin: 0;
}

#overlay h1 {
  margin: 0 0 1ex 0;
}

#overlay textarea {
  margin: 0 0 1ex 0;
}

#overlay input {
  margin-bottom: 0;
}

#dataset-card-overlay {
  display:none;
  position: absolute;
  left: 0px;
  top: 0px;
  height:100%;
  width:100%;
  text-align: center;
  box-sizing:border-box;
  z-index: 950;
  background-image: url("/static/img/transparent.png ");
  padding:150px 0px 0 0px ;
  overflow:scroll;
}

#dataset-card-container {
  display:none;
  width:85%;
  position:absolute;
  top:35px;
  left:5px;
}

.minicard {box-shadow: 1px 1px 1px 1px #e0e0e0;box-sizing:border-box;background:white;margin:5px 5px 0 -5px;padding:5px;}

.sidebar-name {font-weight:bold;}

#share-overlay {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-image: url("/static/img/transparent.png ");
}

#share-overlay > div {
  width: 50%;
  margin: 10% auto;
  background: #fff;
  border: 1px solid #333;
  padding: 1em;
  text-align: center;
}

#share-overlay p {
  margin: 0;
}

#share-overlay h1 {
  margin: 0 0 1ex 0;
}

#share-overlay input {
  margin-bottom: 0;
}

#fileupload-overlay {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: left;
  z-index: 1000;
  background-image: url("/static/img/transparent.png ");
}

#fileupload-overlay-container {
  width: 50%;
  margin: 10% auto;
  background: #fff;
  border: 2px solid #333;
  border-radius: 1.25em/1em;
  padding: 1em;
  text-align: center;
}

#fileupload-overlay p {
  margin: 0;
}

#fileupload-overlay h1 {
  margin: 0 0 1ex 0;
}

#fileupload-content {
  overflow:hidden;
  text-align:left;
}

.fileupload-form-wrapper {  
  border:1px solid rgb(169,169,169);
  padding:15px 10px;
  margin-bottom:15px;
  overflow:hidden;
}

.fileupload-form-wrapper textarea {
  width:100%;
}

#file-input {display:none;}
.fileupload-form-wrapper label {font-size:1em;}

#fileupload-button {  
  outline:none;
  margin:0 auto;
}

.fileupload-wrapper {
  padding:10px 10px;
  border-bottom:1px solid #333;
}

#feedback-overlay {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-image: url("/static/img/transparent.png ");
}

#feedback-overlay > div {
  width: 50%;
  margin: 10% auto;
  background: #fff;
  border: 1px solid #333;
  padding: 1em;
  text-align: center;
}

#feedback-overlay p {
  margin: 0;
}

#feedback-overlay h1 {
  margin: 0 0 1ex 0;
}

#feedback-overlay textarea {
  margin: 0 0 1ex 0;
}

#feedback-overlay input {
  margin-bottom: 0;
}

#thank-you, #submitted {
  padding-left:15px;
  font-weight:bold;
}

.submitted-message {
  padding-left:15px;
  font-weight:bold;
  float:left;
}

.progress-bar {
  float:left;
  width:300px;
  height:20px;
  visibility:visible;
  border:1px solid #bd0329;
  padding:0px;
  margin-left:40px;
}

#spinner {
  z-index: 2000;
  max-height: 200px;
  max-width: 200px;
  position: absolute;
  top: 300px;
  left: 476px;
  visibility:hidden;
}

#problem-message {
  z-index: 2001;
  position: absolute;
  top: 450px;
  left: 650px;
  background-color: black;
  color: white;
  padding: 20px;
  visibility:hidden;  
}

.tags {
  background:white;
  padding:0.3em 0px;
  margin: 0 0;
  overflow:hidden;
}

.tagBox {
  background: #bd0329;
  color: #eaeaea;
  margin-right: 5px;
  padding: 3px 5px;
  float:left;
  margin-bottom:3px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.tagBox2 {
  background: #bd0329;
  color: #eaeaea;
  margin-right: 5px;
  padding: 3px 5px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

#link-overlay {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: left;
  z-index: 1000;
  background-image: url("/static/img/transparent.png ");
}

#link-overlay-container {
  top:0px;
  width: 50%;
  margin: 10% auto;
  background: #fff;
  border: 2px solid #333;
  border-radius: 1.25em/1em;
  padding: 1em;
  text-align: center;
}

#link-overlay p {
  margin: 0;
}

#link-overlay h1 {
  margin: 0 0 1ex 0;
}

#link-content {
  overflow:hidden;
  text-align:left;
}

#link-button-wrapper {
  width:100%;
  padding: 10px 0 15px 0;
  text-align:center;
  color:black;
  border-bottom:1px solid #333;
  overflow:hidden;
  margin-bottom:20px;
}

#link-button-wrapper button {
  float:left;
  margin-left:20px;
}

.link-form-wrapper {  
  border:1px solid rgb(169,169,169);
  padding:15px 10px;
  margin-bottom:15px;
}

.link-form-wrapper textarea {
  width:100%;
}

#link-button {  
  outline:none;
  margin:0 auto;
}

.link-wrapper, .file-wrapper {
  padding:10px 10px;
  border-bottom:1px solid #333;
}

.external-link {
  color: #0329bd;
  text-decoration: underline;
}

.external-link img {
  height:14px;
  margin-left:10px;
}

#channel-description {
  display:none;
  position:absolute;
  left:280px;
  background-color:#eaeaea;
  border:1px solid #333;
  border-radius: 1.25em/1em;
  width:200px;
  max-width:400px;
  z-index:20;
  padding:10px;
}

#include-signals input {
  margin:10px 0 0 45px;
}

#show-grid input {
  margin:10px 0 0 45px;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}

.wide-rule {
  position:absolute;
  z-index:19;
  height:91%;
  top:36px;
  bottom:30px;
  left:0px;
  visibility:hidden;
  background:black;
  width:5px;
  opacity:0.2;
}


.overlay {background:rgba(0,0,0,0.3);width:100%;height:100%;position:absolute;top:0;left:0;display:none;z-index:1000;}
.overlay-container {width:50%;min-width:600px;min-height:30%;margin:0 auto;padding:20px;background-color:white;margin-top:50px;}
.overlay-header {margin:0 0 10px 0;overflow:hidden;border-bottom:1px solid black;position:relative;}
.overlay-title {width:100%;text-align:center;}
.overlay-title h2 {font-family:arial;}
.overlay-cancel {position:absolute;top:15px;right:0;}
.overlay-times {overflow:hidden;width:80%;margin:10px auto 15px auto;display:none;}
.overlay-time {float:left; margin-right:20px;}
.overlay-end { }
#selected-times {text-align:center;font-weight:bold;font-family:arial;margin:10px 0 15px;}
.overlay-type {float:right;margin-right:30px;}
.time-container {overflow:hidden;clear:both;}
.time-checkboxes {float:left;margin-top:10px;}
.dt-segments {float:left;border:1px solid lightgrey;overflow:hidden;padding:4px;}
.dt-segment {float:left;text-align:center;padding-right:5px;}
.dt-segment input {border:0px !important;background-color:#f9f9f9;text-align:center;font-size:90%;}
.dt-input.dt-month {width:1.7em;}
.dt-input.dt-2digit {width:1.3em;}
.dt-input.dt-4digit {width:2.3em;}
.dt-meridian input {width:1.8em;}
.dt-checkbox {float:left;padding:10px 5px 0;}
.dt-checkbox-label {float:left;padding-top:5px;text-align:left;}
.uparrow, .downarrow {font-size:85%;}
.uparrow:hover, .downarrow:hover {background: #bd0329;color: #fff}
.dt-label {width:4.2em;text-align:right;margin-right:10px;padding-top:1em;}
.punctuation {padding-top:0.9em;font-weight:bold;float:left;margin-left:-5px;}
#content-title {font-size:100%;}
.overlay-content {border:1px solid black;min-height:20%;padding:10px;clear:both;}
.overlay-content textarea {width:100%;height:4em;}
.textarea {width:95%;margin:10px auto;}
.fileupload-label {margin-bottom:10px;}
.file-selector {margin:0 0 10px 20px;float:left;width:50%;}
.overlay-footer {overflow:hidden;margin:20px 0 10px;}
#overlay-delete {float:left;}
#overlay-message {float:left;margin-left:20px;color:#bd0329;}
#overlay-submit {float:right;}
.hide {display:none;}
.tabs {font-family:arial;margin-top:20px;}
.overlay-tab {float:left;border:1px solid grey;padding:10px;}
.overlay-tab:hover {background-color:lightgrey;cursor:pointer;}
.tab-selected {color:white;background-color:darkgrey;}
.attachment-title {color:#bd0329;font-size:16px;font-style:italic;font-weight:bold;}
.fileupload-edit, .link-edit {display:none;margin:10px 0 20px;}
#filedrag
{ float:right;
  font-weight: bold;
  text-align: center;
  padding: 2em 0;
  color: #555;
  border: 2px dashed #555;
  border-radius: 7px;
  cursor: default;
  width:20%;
  margin-top:-40px;
}

#filedrag.file-drag-hover
{
  color: #f00;
  border-color: #f00;
  border-style: solid;
  box-shadow: inset 0 3px 4px #e0e0e0;
}
#filelist {width:80%;}
#filelist td {border:none;padding:0 5px;}

.button {
  border: 1px solid #bd0329;
  background: transparent;
  color: #bd0329;
  padding: 0.75ex 2ex;
  border-radius: 1ex/0.8ex;
  font-size: 1.125em;
  outline:none;
  min-height:39px;
  font-family:arial !important;
  margin-top:20px;
  cursor:pointer;
}

.button:hover, .button:active, .button:focus {
  background: #bd0329;
  color: #fff
}
#t-readonly div {height:16em;}
.dot {margin-right:5px; height:8px;}
.white-dot {display:none;}
/*.add-tag, #cancel-tags, .new-tag {font-size:150%;font-weight:bold;color:#bd0329;line-height:100%;margin-left:10px;float:left;}
.add-tag:hover, #cancel-tags:hover, .new-tag:hover {cursor:pointer;}
.add-a-tag {font-size:100% !important;}
#tag-select, #added-tag, .new-tags {float:left;}*/
.add-tag {display:none;}

.dataset-wrapper {
  clear:both;
  background-color:white;
  color:black;
  width:96%;
  margin:0 auto;
  padding:10px;
  overflow:hidden;
  -webkit-box-shadow: 2px 2px 3px 3px #e0e0e0;
  -moz-box-shadow:    2px 2px 3px 3px #e0e0e0;
  box-shadow:         2px 2px 3px 3px #e0e0e0;
}

.dataset-wrapper-sidebar {
  clear:both;
  background-color:white;
  color:black;
  width:100%;
  padding:10px;
  min-height:150px;
  overflow:hidden;
}

.name-line {
  overflow:hidden;
  margin-bottom:5px;
}

.dataset-name {
  float:left;
  font-weight:bold;
  font-size:110%;
  margin-right:20px;
  color:#bd0329;
}

.times-line {
  clear:both;
  overflow:hidden; 
}

.boundary-time {
  float:left;
}

.last-accessed { float:right; }

.dataset-id {
  float:right;
}

.tags-line {
  float:left;
  overflow:hidden;
  margin: 5px 0;
}

.max-bold {
  font-weight:bold;
}

.properties-container { overflow:hidden;clear:both;}

.properties-left {
  width:45%;
  min-width:320px;
  float:left;
  border-right:1px solid black;
  margin-right:20px;
}

.properties-right {
  width:45%;
  min-width:320px;
  float:left;
}

.property-block {
  width:100%;
  float:left;
  margin-right:20px;
  overflow:hidden;
}

.property-key {
  width:35%;
  min-width:110px;
  white-space:normal !important;
  overflow:hidden;
  float:left;
  text-align:left;
}

.property-value {
  width:62%;
  white-space:normal !important;
  overflow:hidden;
  float:left;
  padding-left:2px;
  text-align:left;
}

.edit-dataset {clear:both;float:right;margin-top:-20px;}

.stretchRight{
  animation-name: stretchRight; 

  animation-duration: 0.1s;

  animation-timing-function: ease-out; 

  transform-origin: 0% 0%;  
}

@keyframes stretchRight {
  0% {
    transform: scale(0.3, 0.3);
  }
  100% {
    transform: scale(1, 1);
  }             
}

.dots-box {float:left;text-align:center;margin: 0 0 10px 25px;}
.dots-label {margin-bottom:10px;}

#reset-form, #reset-confirm {display:none;}
#reset-form > input {width:500px;margin-right:15px;}
#reset-confirm {width:40%;margin:100px auto 0 auto;}
.show-full-metadata {float:left;}
.full-metadata {text-align:left;}
.group-name {color:black;font-weight: bold;}
.group-toggle {width:10px;cursor:pointer;position:absolute;right:10px;top:6px;}
.channel-group {background-color:rgb(224,224,224);text-align:center;}
.channel-group td {position:relative;}
#asterisk {color:black;padding:20px;margin-top:20px;}
.inline {display:inline;padding-left:0;padding-right:0; margin-left:5px;}
#real-time-note {display:none;}
#real-time-note textarea {width:96%;height:65px;padding:2px 4px 0 4px;}
#add-real-time-note {text-align:center;border-bottom:1px solid black;}
.being-updated {text-align:center;margin-top:20px;}
.tag-in-list {border-top:1px solid darkgrey;}
.display-card {background-color:white;color:black;padding:10px;overflow:hidden;margin:10px 10px;-webkit-box-shadow: 2px 2px 3px 3px #e0e0e0;-moz-box-shadow:2px 2px 3px 3px #e0e0e0;box-shadow:2px 2px 3px 3px #e0e0e0;
}