oneuptime/Accounts/public/assets/css/blockchart.css

/******* Row containing Bar Chart *******/

/******* Simple Bar Chart *******/
div.block-chart-main{
  position: relative;
  height: 75px;
  margin-top:-15px;
  margin-left:10px;
}
.db-Trend-colInformation{
  margin-right: 8px;
}
div.block-chart {
  position: relative;
  height: 75px;
  float: right;
  overflow: hidden;
  width: 101%; /* IE overflow fix */
}

  div.block-chart div.bar {
    float: left;
    position: relative;
    height: 100%;
    width: 6px;
    cursor: pointer;
    /* Border instead of margin so we get the hover behavior we want */
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    /* DEFAULT IS GREEN */
    background: rgb(0, 128, 168);
  }

    div.block-chart div.bar:hover {
      opacity: 1.0;
    }

    div.block-chart div.bar.empty {
      float: left;
      position: relative;
      height: 100%;
      width: 6px;
  
      cursor: pointer;
  
      /* Border instead of margin so we get the hover behavior we want */
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
  
      opacity: 0.6;
  
      /* DEFAULT IS GREEN */
      background: rgb(0, 128, 168);
    }

    div.block-chart div.bar.empty:hover {
      opacity: 1.0;
    }

    div.block-chart div.bar.mid {
      background: #FFDE24;
    }

    div.block-chart div.bar.down {
      background: #FA6D46;
    }

    div.block-chart div.bar:first-child {
      border-left: 0;
    }
    div.block-chart div.bar:last-child {
      border-right: 0;
    }

******* Tipsy Tooltips ******/

.tipsy { 
  font-size: 12px; 
  position: absolute; 
  padding: 5px; 
  z-index: 100000; 
}
  .tipsy-inner { 
    background-color: #4c4c4c; 
    color: #FFF; 
    max-width: 200px; 
    padding: 5px 12px 5px 12px; 
    line-height: 19px; 
    text-align: center; 
  }

/* Rounded corners */
.tipsy-inner { 
  border-radius: 3px; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
}

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { 
  position: absolute; 
  width: 0; 
  height: 0; 
  line-height: 0; 
  border: 5px dashed #4c4c4c; 
}

/* Rules to colour arrows */
.tipsy-arrow-n { 
  border-bottom-color: #4c4c4c; 
}
.tipsy-arrow-s { 
  border-top-color: #4c4c4c; 
}
.tipsy-arrow-e { 
  border-left-color: #4c4c4c; 
}
.tipsy-arrow-w { 
  border-right-color: #4c4c4c; 
}

.tipsy-n .tipsy-arrow { 
  top: 0px; 
  left: 50%; 
  margin-left: -5px; 
  border-bottom-style: solid; 
  border-top: none; 
  border-left-color: transparent; 
  border-right-color: transparent; 
}
.tipsy-nw .tipsy-arrow { 
  top: 0; 
  left: 10px; 
  border-bottom-style: solid; 
  border-top: none; 
  border-left-color: transparent; 
  border-right-color: transparent;
}
.tipsy-ne .tipsy-arrow { 
  top: 0; right: 10px; 
  border-bottom-style: solid; 
  border-top: none;  
  border-left-color: transparent; 
  border-right-color: transparent;
}
.tipsy-s .tipsy-arrow { 
  bottom: 0; 
  left: 50%; 
  margin-left: -5px; 
  border-top-style: solid; 
  border-bottom: none;  
  border-left-color: transparent; 
  border-right-color: transparent; 
}
.tipsy-sw .tipsy-arrow { 
  bottom: 0; left: 10px; 
  border-top-style: solid; 
  border-bottom: none;  
  border-left-color: transparent; 
  border-right-color: transparent; 
}
.tipsy-se .tipsy-arrow { 
  bottom: 0; 
  right: 10px; 
  border-top-style: solid; 
  border-bottom: none; 
  border-left-color: transparent; 
  border-right-color: transparent; 
}
.tipsy-e .tipsy-arrow { 
  right: 0; 
  top: 50%; 
  margin-top: -5px; 
  border-left-style: solid; 
  border-right: none; 
  border-top-color: transparent; 
  border-bottom-color: transparent; 
}
.tipsy-w .tipsy-arrow { 
  left: 0; 
  top: 50%; 
  margin-top: -5px; 
  border-right-style: solid; 
  border-left: none; 
  border-top-color: transparent; 
  border-bottom-color: transparent; 
}

@media only screen and (max-width: 1180px) {
   div.block-chart div.bar {
      width: 5px;
    }
    div.block-chart div.bar.empty {
      width: 5px;
    }
    .chart-font{
      font-size: 90%;
    }
}