.tip {
    position: relative !important;
    display: inline-block !important;
    /* border-bottom: 1px dotted black !important; */
  }
  

  .tip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #2196f3;
    border-style: solid;
  border-width: 1px;
    border-color: #555;
    color: #fff;
    font-size:1vw;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1031;
    bottom: 125%;
    left: 50%;
    margin-left: -200px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }


  .tip .tooltiptext1 {
    visibility: hidden;
    width: 100px;
    background-color:white;
    border-style: solid;
    border-width: 1px;
    border-color: #555;
    color:black;
    font-size:small;
    text-align: center;
    border-radius: 3px;
    padding: 5px 0;
    position: absolute;
    z-index: 1031;
    bottom: 125%;
    left: 50%;
    margin-left:-20px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow:" 0 4px 8px 0  grey";
  }
  
  .tip .tooltiptext1::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    /* border-style: solid; */
    /* border-color: #555 transparent transparent transparent; */
    box-shadow:" 0 4px 8px 0 grey";
  }
  
  .tip:hover .tooltiptext1 {
    visibility: visible;
    opacity: 1;
  }

  .tip .tooltiptextright /* for right tooltips*/{
    visibility: hidden;
    width: 100px;
    background-color:white;
    border-style: solid;
    border-width: 1px;
    border-color: #555;
    color:black;
    font-size:small;
    text-align: center;
    border-radius: 3px;
    padding: 5px 0;
    position: absolute;
    z-index: 1031;
    bottom: 0%;
    left: 45px;
    margin-left:-20px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow:" 0 4px 8px 0  grey";
  }
  
  .tip .tooltiptextright::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    /* border-style: solid; */
    /* border-color: #555 transparent transparent transparent; */
    box-shadow:" 0 4px 8px 0 grey";
  }
  
  .tip:hover .tooltiptextright {
    visibility: visible;
    opacity: 1;
  }


  .table-responsive {
    min-height: .01%;
    overflow-x: unset !important;
  }

  .vl {
    border-left: 1px solid #2196f3;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    /* top: 0; */
  }

  .vl1 {
    border-left: 1px solid #2196f3;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    /* top: 0; */
  }


  /* .tip {
    position: relative !important;
    display: inline-block !important;
    border-bottom: 1px dotted black !important; 
  }
  

  .tip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #2196f3;
    border-style: solid;
    border-width: 1px;
    border-color: #555;
    color: #fff;
    font-size:1vw;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1031;
    bottom: 125%;
    left: 50%;
    margin-left: -200px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  } */