/*Time Slider*/
.timesliderParentDiv {
  height: 4.5rem;
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  margin: 0;
}

.timeslider {
  width: 100%;
  height:2.2rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: rgba(0,0,0,0.7);
}

.timesliderdimmer {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 4.5rem;
  z-index: 10000;
  background: rgba(255,255,255,0.7);
}

.timeslider .timepoint {
  width: 0.25rem;
  border-radius: 0.1rem;
  height: 1.6rem;
  position: absolute;
  top:0.8rem;
  background: rgba(255,255,255,0.9);
  transform: translateX(-50%);
}
.timeslider .hover.timepoint {
  box-shadow: 0 0 0.1rem 0.15rem rgba(130,210,255,0.9);
  background: rgba(255,255,255,0.7);
  z-index: 1000;
}
.timeslider .hovering.timepoint, .timeslider .ui-selecting.timepoint {
  box-shadow: 0 0 0.1rem 0.15rem rgba(255,255,255,0.9);
  background: rgba(130,210,255,0.8);
  z-index: 1000;
}
.timeslider .pending.timepoint {
  width: 0.5rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(235,168,54,1);
  background: rgba(235,168,54,1);
  z-index: 1000;
}
.timeslider .done.timepoint {
  width: 0.5rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(60,210,80,1);
  background: rgba(60,210,80,1);
  z-index: 1000;
}
.timeslider .active.timepoint {
  width: 0.5rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(130,210,255,1);
  background: rgba(130,210,255,1);
  z-index: 1000;
}



.timeslider .tickmarker {
  width: 1px;
  height: 0.6rem;
  position: absolute;
  top: 2.4rem;
  background: rgba(255,255,255,0.9);
  transform: translateX(-50%);
  mix-blend-mode: difference;
}


.timeslider .ticklegend {
  font-size: 1rem;
  position: absolute;
  top: 2.7rem;
  transform: translateX(-50%);
  color: rgba(0,0,0,0.6);
}

.pulse {

  position: relative;
  width: 100px;
  height: 100px;
  border: none;
  box-shadow: 0 0 0 0 rgba(235,168,54,1);
  border-radius: 50%;
  background-color: #e84c3d;
  background-image: url(YOUR-URL-IMAGE.png);
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 0.75s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 0.75s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 0.75s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 0.75s infinite cubic-bezier(0.66, 0, 0, 1);
}


@-webkit-keyframes pulse {to {box-shadow: 0 0 0 0.25rem rgba(235,168,54,1);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 0.25rem rgba(235,168,54,1);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 0.25rem rgba(235,168,54,1);}}
@keyframes pulse {to {box-shadow: 0 0 0 0.25rem rgba(235,168,54,1);}}