.debug-timeline-panel {
  border: 1px solid #ddd;
  position: relative;
  margin-bottom: 20px;
}
.debug-timeline-panel.inline .debug-timeline-panel__item {
  height: 20px;
  margin-top: -20px;
  border-bottom: 0;
}
.debug-timeline-panel.inline .debug-timeline-panel__item:first-child {
  margin: 0;
}
.debug-timeline-panel.inline .debug-timeline-panel__item:not(.empty):hover {
  background-color: transparent;
}
.debug-timeline-panel.inline .debug-timeline-panel__items .time {
  box-shadow: inset 0px 0 3px -1px rgba(255, 255, 255, 0.7);
}
.debug-timeline-panel.inline .debug-timeline-panel__items .category {
  display: none;
}
.debug-timeline-panel.inline .ruler.ruler-start,
.debug-timeline-panel.inline .ruler.ruler-end{
  display: none;
}
.debug-timeline-panel:not(.inline) .debug-timeline-panel__item a:focus{
  outline: none;
}
.debug-timeline-panel.affix .ruler b {
  z-index: 2;
  position: fixed;
  top: 0;
}
.debug-timeline-panel .category {
  opacity: 1;
  font-size: 10px;
  position: absolute;
  line-height: 20px;
  padding: 0 10px;
  color: #222;
  white-space: nowrap;
  cursor: pointer;
}
.debug-timeline-panel .category span {
  color: #7d7d7d;;
}
.debug-timeline-panel .right > .category {
  right: 100%;
}
.debug-timeline-panel .left > .category {
  left: 100%;
}
.debug-timeline-panel .ruler {
  position: absolute;
  content: '';
  font-size: 10px;
  padding-left: 2px;
  top: 0;
  height: 100%;
  border-left: 1px solid #ddd;
}
.debug-timeline-panel__header .ruler:first-child{
  border-left: none;
}
.debug-timeline-panel .ruler.ruler-start {
  top: auto;
  margin-top: 20px;
}
.debug-timeline-panel .ruler.ruler-end {
  left: -1px;
  top: auto;
}
.debug-timeline-panel .ruler b {
  position: absolute;
  z-index: 2;
  color: black;
  font-weight: bold;
  white-space: nowrap;
  background-color: rgba(255,255,255,.4);
  min-width: 40px;
  line-height: 19px;
  display: block;
  text-align: center;
}
.debug-timeline-panel .time {
  position: relative;
  min-height: 20px;
  display: block;
  min-width: 1px;
  padding: 0;
  background-color: #989898;
}
.debug-timeline-panel .time + .tooltip .tooltip-inner{
  max-width: 300px;
  max-height: 180px;
  overflow: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.debug-timeline-panel__header {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.debug-timeline-panel__header,
.debug-timeline-panel__item {
  min-height: 20px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.debug-timeline-panel__header .control {
  position: absolute;
  margin-left: -20px;
  top:0;
}
.debug-timeline-panel__header .control button {
  display: none;
  padding: 0;
}
.debug-timeline-panel__header .control button:focus{
  outline: none;
}
.debug-timeline-panel__header .control button:hover{
  fill:  #337ab7;
}
.debug-timeline-panel:not(.inline) .debug-timeline-panel__header .control button.inline,
.debug-timeline-panel.inline .debug-timeline-panel__header .control button.open{
  display: block;
}
.debug-timeline-panel.affix .debug-timeline-panel__header .control{
  position: fixed;
}
.debug-timeline-panel__item:last-child {
  border-bottom: 0;
}
.debug-timeline-panel__item:nth-child(2n) {
  background-color: #f9f9f9;
}
.debug-timeline-panel__item:hover {
  background-color: rgba(51, 122, 183, 0.16);
}
.debug-timeline-panel__item.empty {
  background-color: #f9f9f9;
  line-height: 20px;
  padding-left: 10px;
}
.debug-timeline-panel__item.empty span {
  position: absolute;
  background-color: inherit;
}
.debug-timeline-panel__search {
  background-color: #f9f9f9;
  padding: 10px 10px 0px 10px;
  margin-bottom: 10px;
  font-size: 16px;
}
.debug-timeline-panel__search > div {
  display: inline-block;
  margin-bottom: 10px;
}
.debug-timeline-panel__search .duration {
  margin-right: 20px;
}
.debug-timeline-panel__search label {
  width: 80px;
}
.debug-timeline-panel__search input {
  font-size: 16px;
  padding: 4px;
}
.debug-timeline-panel__search input#timeline-duration {
  width: 55px;
  text-align: right;
}
.debug-timeline-panel__search input#timeline-category {
  min-width: 185px;
}
@media (max-width:767px) {
  .debug-timeline-panel .ruler:nth-child(2n) b{
    display: none;
  }
}
@media (max-width: 991px) {
  .debug-timeline-panel__header .control{
    margin-left: -17px;
  }
}