.jsavcanvas {
    font-family: Helvetica, Arial;
  }
  
  /* Mark that an item (such as an array cell) is currently being processed
     by the algorithm. This color is a medium blue. */
  .processing {
    background-color: #ddf !important;
  }
  
  /* For array cells and the like that are unused */
  .unused {
    background-color: #ddd;
  }
  
  /* For marking a node (array cell, etc) as "special". This is a light red. */
  .special {
    background-color: #FFB6C1 !important;
  }
  
  /* For de-emphasizing the label/value of a node (array cell, etc). Light grey. */
  .deemph .jsavvalue {
    color: #ccc;
  }
  
  .invisnode { /* Make a tree node invisible in a slideshow */
    background-color: #eed;
    color: #eed;
    border-color: #eed;
    box-shadow: 2px 2px 2px rgba(120, 120, 120, 0.0);
  }
  
  
  /* Make a node's edge thick */
  .thicknode {
    border-width: 2px;
  }
  
  /* Make a slideshow tree node invisible (except for label) */
  .clearnode {
    background-color: #eed;
    border-color: #eed;
    box-shadow: 2px 2px 2px rgba(120, 120, 120, 0.0);
  }
  
  /* Make font bigger, used typically with click handler setting up swap */
  .enlarge .jsavvalue {
    font-size: 120%;
  }
  
  /* Makes (just) the text of a node or array cell to be green */
  .greentext .jsavvalue {
    color: #0b0;
    font-weight: bold;
  }
  
  .redback {
    background-color: #f00 !important;
  }
  
  .jsavcontainer {
    border: 0;
  }
  
  .jsavnode.sorted {
    background-color: #ffffcc !important;
  }
  
  .jsavautoresize .jsavnode {
    min-width: 30px;
    min-height: 30px;
  }
  
  .jsavhorizontalarray .jsavnode {
    line-height: 30px !important;
    min-width: 30px !important;
    max-width: 30px;
    min-height: 30px !important;
    max-height: 30px !important;
  }
  
  .jsavverticalarray .jsavnode {
    line-height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
  
  .jsavnode.jsavtreenode {
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
  }
  
  .jsavhorizontallist.jsavautoresize .jsavnode {
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    line-height: 30px;
    padding-right: 12px;
  }
  
  .jsavnode .jsavhorizontalarray .jsavvalue { /* Center array cell values vertically */
    height: 30px;
  }
  
  .jsavnode .jsavverticalarray .jsavvalue { /* Center array cell values vertically */
    height: 30px;
  }
  
  .jsavnode .jsavvalue { /* Center tree node values vertically */
    height: 30px;
  }
  
  .jsavlist .jsavvalue { /* Center linked list cell values vertically */
    height: 30px;
  }
  
  .jsavarray .jsavvalue { /* Center array cell values vertically */
    height: 30px;
  }
  
  .jsavcodeline {
    margin-bottom: 1px;
    font-size: 14px;
    line-height: 16px;
  }
  
  /* Put a white border around the code block. Do it this way to
     keep from putting border around the line numbers. */
  .jsavcodeline {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
  }
  
  .jsavcodeline:first-child {
    border-top: 1px solid #fff;
    padding-top: 1px;
  }
  
  .jsavcodeline:last-child {
    border-bottom: 1px solid #fff;
    padding-bottom: 1px;
  }
  
  .jsavcodeline.jsavhighlight {
    background-color: #ccc !important;
  }
  
  .jsavcodeline:hover {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    line-height: 16px;
    padding: 1px 10px;
  }
  
  .jsavbararray .jsavindex {
    background-color: #eee;
  }
  
  .jsavbararray.jsavindexed {
    margin-bottom: 0;
  }
  
  .jsavstack {
    position: relative;
    background-color: inherit;
  }
  
  .jsavstack .jsavstacknode {
    font-size: 120%;
    position: absolute;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    z-index: 100;
  }
  
  .jsavtreenode.emptynode {
    border: 1px dashed #777 !important;
    background-color: #fff !important;
    color: #777 !important;
    cursor: pointer;
  }
  
  .jsavtreenode.rednode {
    background-color: #f00;
    color: #fff;
  }
  
  .jsavtreenode.blacknode {
    background-color: #000;
    color: #fff;
  }
  
  .selected, .selected .jsavvalue, .jsavarray.jsavbararray .jsavindex.selected .jsavvalue {
    font-size: 110%;
    background-color: #ddf;
  }
  
  .jsavtreenode.jsavredblacknode.rednode.selected {
    background-color: #f00;
  }
  
  .jsavtreenode.jsavredblacknode.blacknode.selected {
    background-color: #000;
  }
  
  .jsavtreenode.jsavredblacknode.selected {
    box-shadow: 0 0 5px 10px #ddf;
  }
  
  .greybg, .greybg.jsavvalue, .jsavarray.jsavbararray .jsavindex.greybg .jsavvalue {
    background-color: #eee;
  }
  
  .greenbg, .greenbg.jsavvalue, .jsavarray.jsavbararray .jsavindex.greenbg .jsavvalue {
    background-color: #3f5;
  }
  
  .jsavgraph .jsavedge {
    stroke-width: 1.5px;
  }
  
  
  /* jquery-ui customization */
  .ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a  {
      border: none;
      outline: none;
  }
  
  .ui-state-focus {
      border: none;
      outline: none;
  }
  
  .ui-state-active {
      border: none;
      outline: none;
  }
  .redbg{
    background-color: #FFB6C1 !important;
  }