:root {
    --blue: #1e90ff;
    --red: #e64e4e;
    --gray:#bab0ac;
    --green:#59a14f;
    --orange:#edc948;
  }


  #container {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    border: 2px dashed #ff6b81;
    background-color: #281e36;
  }
 

  #container::before,
  #container::after {
    content: '';
    display: block;
    width: 1px;
    height: 600px;
  }
  
  #tooltip {
    display: inline-block;    
    padding: 5px 10px;
    font-size: 1rem;
    border-radius: 4px;    
    z-index: 3;
    background-color: #f0f2f9;
    color: black;
    border-radius: 1rem;
    max-width:15rem;
  }
  
  #arrow,
  #arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
  }
  
  #arrow {
    visibility: hidden;
  }
  
  #arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }
  
  #tooltip[data-popper-placement^='top'] > #arrow {
    bottom: -4px;
  }
  
  #tooltip[data-popper-placement^='bottom'] > #arrow {
    top: -6px;
  }
  
  #tooltip[data-popper-placement^='left'] > #arrow {
    right: -4px;
  }
  
  #tooltip[data-popper-placement^='right'] > #arrow {
    left: -6px;
  }
  #tooltip {
    display: none;
  }
  
  #tooltip[data-show] {
    display: block;
  }
#tooltip table tr td{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;    
}
#tooltip table tr td:nth-child(1){
    font-weight: bold;
}
#tooltip table tr td:nth-child(2){
    font-weight: normal;
}
#tooltip>#arrow::before {border-top:2px solid ;border-left: 2px solid;border-color:var(--gray);}

  .red-indicator{border-color: var(--red)!important;}
  .red-indicator>#arrow::before{border-left-color: var(--red)!important;border-top-color:  var(--red)!important;}

  .gray-indicator{border-color: var(--gray)!important;}
  .gray-indicator>#arrow::before{border-top-color: var(--gray)!important;border-left-color: var(--gray)!important;}

  .green-indicator{border-color: var(--green)!important;}
  .green-indicator>#arrow::before{border-top-color: var(--green)!important;border-left-color: var(--green)!important;}

  .orange-indicator{border-color: var(--orange)!important;}
  .orange-indicator>#arrow::before{border-top-color: var(--orange)!important;border-left-color: var(--orange)!important;}