.date-range-picker {
  cursor: pointer;
  padding: 10px;
}
.date-range-picker.active {
  font-weight: bold;
}


.padding-row {
  margin-bottom:20px;
}

.timeline-row {

  margin-bottom: 2em;
  background-color: #f8f9fa;
  padding-top:.1em;
  border-bottom: 1px solid #dee2e6;

}

.timeline {

  /*border:1px solid #dee2e6;
  border-radius: 4px;
  padding-top:1.5em;
  padding-right:.5em;
  padding-left:.5em;
  margin-top:2em;
  margin-left:1.5em;
  background-color: #f8f9fa;*/
  padding-right:.5em;
  padding-left:.5em;
}

.timeline-wrapper {
  position: relative;
  width:95%;
  height: 5em;
  left: 0;
  right: 0;
  margin: .5em auto .1em auto;
  /*margin-top:50px;*/
}

.page-link {

  color:

}
.scrollbar {
  width: 98%;
  height: 4em;
  position: absolute;
  left: 0;
  right: 0;
  margin: .8em auto .5em auto;
}
.scrollbar .indicator {
  text-align: center;
  position: absolute;
  display: inline-block;
  height: 2em;
  top: 0;
  right: 0;
  /*background-color: RGBA(255,100,100,.4);*/
  background-color: RGBA(50,50,50,.3);
  border-color: RGBA(195,20,50,.8);
  cursor: move;
}
.scrollbar .indicator span {
  vertical-align: middle;
  display: inline-block;
}


.scrollbar .indicator::before,
.scrollbar .indicator::after
{
  content: ' ';
  background-color: transparent;
  width: 2em;
  height: 100%;
  position: absolute;
  cursor: col-resize;
}

.scrollbar .indicator::before {
  /*content: url('data:image/svg+xml; utf8, <svg class="bi bi-chevron-bar-right" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 000 .708L7.793 8l-3.647 3.646a.5.5 0 00.708.708l4-4a.5.5 0 000-.708l-4-4a.5.5 0 00-.708 0zM11.5 1a.5.5 0 01.5.5v13a.5.5 0 01-1 0v-13a.5.5 0 01.5-.5z" clip-rule="evenodd"/> </svg>');*/
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="2em" height="2em"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>');
  background-color: RGBA(195,20,50,.8);
  width: 2em;
  left: -2em;
  border-radius: 4px 0px 0px 4px;
}

.scrollbar .indicator::after {
  /*content: url('data:image/svg+xml; utf8, <svg class="bi bi-chevron-bar-left" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M11.854 3.646a.5.5 0 010 .708L8.207 8l3.647 3.646a.5.5 0 01-.708.708l-4-4a.5.5 0 010-.708l4-4a.5.5 0 01.708 0zM4.5 1a.5.5 0 00-.5.5v13a.5.5 0 001 0v-13a.5.5 0 00-.5-.5z" clip-rule="evenodd"/> </svg>');*/
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="2em" height="2em"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>');
  background-color: RGBA(195,20,50,.8);
  right: -2em;
  border-radius: 0px 4px 4px 0px;
}

.nav-item.nav-link {
  /*border-width: 3px;
  border-radius: 18px;*/
  border-style: solid;
}
.nav-item.nav-link.ok {
  border-color: green;
}

.nav-item.nav-link.warning {
  border-color: orange;
}

.nav-item.nav-link.error {
  border-color: red;
}


#service-logs-table td, #plot-logs-table td {
  cursor: pointer;
}