.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 !important;
  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: 20px;
}

.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;
}