body {
  background: #222;
  font-family: "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 15pt;
  line-height: 1.42857;
  color: white;
}


/* timeline background */

.vis.timeline.root {
  border: none;

  background: #3e647e url(../img/background-moche.png); /* blue2 */
  background: #e1953f url(../img/background-moche.png); /* orange */
  background: #422a6c url(../img/background-moche.png); /* purple */
  background: #3145B1 url(../img/background-moche.png); /* blue */
}


/* grid styling */

.vis.timeline .timeaxis .text {
  color: white;
  padding-top: 6px;
  padding-left: 6px;
}

.vis.timeline .timeaxis .text.major {
  font-weight: bold;
}

.vis.timeline .timeaxis .grid.minor {
  border-width: 1px;
  border-color: rgba(255,255,255, 0.2);
}

.vis.timeline .timeaxis .grid.major {
  border-width: 1px;
  border-color: rgba(255,255,255, 0.5);
}


/* default item class */

.vis.timeline .item,
.vis.timeline .item.line {
  border-width: 2px;
}

.vis.timeline .item.dot {
  border-width: 6px;
  border-radius: 6px;
}

.vis.timeline .item {
  border-color: lightgray;
  background-color: white;
  color: #222;
}
.vis.timeline .item.selected {
  border-color: lightgray;
  background-color: white;
  box-shadow: 0 0 16px rgba(255,255,255, 0.7);
}


/* custom item classes */

.vis.timeline .item.green {
  background-color: #6dd22f;
  border-color: green;
  color: white;
}

.vis.timeline .item.orange {
  background-color: #ffdb07;
  border-color: orange;
}

.vis.timeline .item.red {
  background-color: #ce0000;
  border-color: darkred;
  color: white;
}

.vis.timeline .item.magenta {
  background-color: #ff00ff;
  border-color: darkmagenta;
  color: white;
}