.ab {
    background-color:rgb(160,160,160);
    color:white;
    position:relative;
  }

  .open-list::before {
    position:absolute;
    top:8px;
    right:13px;
    font-family: FontAwesome; 
    content: "\f10c";
    transform: scale(0.5);
  }  

  .close-list::before {
    position:absolute;
    top:8px;
    right:13px;
    font-family: FontAwesome; 
    content: "\f111";
    transform: scale(0.5);
  }  

  .parent::before {
    color: rgb(100,100,100);
    -font-family: FontAwesome; 
    content: "I"; /*"\f062";*/
  }  

  .N {
    transform: rotate(0deg) translateY(6px) scale(0.7);
  }
  .NE {
    transform: rotate(45deg) translateY(6px) scale(0.7);
  }
  .E {
    transform: rotate(90deg) translateY(6px) scale(0.7);
  }
  .SE {
    transform: rotate(135deg) translateY(6px) scale(0.7);
  }
  .S {
    transform: rotate(180deg) translateY(6px) scale(0.7);
  }
  .SW {
    transform: rotate(225deg) translateY(6px) scale(0.7);
  }
  .W {
    transform: rotate(270deg) translateY(6px) scale(0.7);
  }
  .NW {
    transform: rotate(315deg) translateY(6px) scale(0.7);
  }

  .L {
    position:absolute;
    top:-2px;
    right:4px;
  } 
  
  .G {
    position:absolute;
    bottom:-3px;
    left:3px;
    font-size:70%;
    color:red;
  }

  .H {
    position:absolute;
    bottom:-3px;
    right:3px;
    font-size:70%;
    color:blue;
  }

  .F {
    position:absolute;
    top:-3px;
    left:3px;
    font-size:70%;
  }

 
  table.head, table.head tr, table.head td,
  table.heap, table.heap tr, table.heap td {
    border: none;
    table-layout:fixed; /* to make masonry working on small screens */ 
    border-collapse:collapse;
    padding: 5px 0;   
  }

  table.head, table.heap {
    width:100%;
  }


  table.tools, table.tools tr, table.tools td {
    border: 1px solid white;
    table-layout:fixed; /* to make masonry working on small screens */ 
  }

  table.tools {
    padding:3px;
    margin:0 auto;
  }

  table.tools td {
    width:40px;
    padding:3px;
    text-align:center;
    cursor:pointer;
    box-shadow: 1px 1px 3px grey;
  }


  table.tools td#tA, .tA, table.tools td#tB, .tB {
    background-color:rgb(255, 255, 255);
  }

  table.tools td#tA {
    border:1px solid black;
  }
 
  table.tools td#t0, .t0 {
    background-color:rgb(255, 255, 255);
  }
  
  table.tools td#t0 {
    font-size:90%;
  }

  table.tools td#t10, .t10 {
    background-color:rgb(220, 220, 220);
  }
  
  table.tools td#t10 {
    font-size:90%;
  }

  table.tools td#t50, .t50 {
    background-color:rgb(185, 185, 185);
  }

  table.tools td#t50 {
    font-size:90%;
  }
  
  table.tools td#t100, .t100 {
    background-color:rgb(150, 150, 150);
  }

  table.tools td#t100 {
    font-size:80%;
  }

  table.tools td#t500, .t500 {
    background-color:rgb(115, 115, 115);
  }

  table.tools td#t500 {
    font-size:80%;
  }

  table.tools td#tN, .tN {
    background-color:rgb(0, 0, 0);
  }

  table.tools td#tN {
   background-color:rgb(0, 0, 0);
   color:grey;
  }

  table.body, table.body tr, table.body td {
    table-layout:fixed; /* to make masonry working on small screens */ 
    border:1px solid #C0C0C0;
    border-collapse:collapse;
  }
  
  table.body td {
    text-align:center;
    border:1px solid #C0C0C0;
    min-width:40px;
    max-width:40px;
    width:40px;
    min-height:40px;
    max-height:40px;
    height:40px;
    padding:0;
    cursor:pointer;
    position:relative;
  }

  .path {
    -webkit-animation: flash linear 2s infinite;
    animation: flash linear 2s infinite;
    -webkit-box-shadow:inset 0px 0px 2px 2px grey;
    -moz-box-shadow:inset 0px 0px 2px 2px grey;
    box-shadow:inset 0px 0px 2px 2px grey;
  }
 
  @-webkit-keyframes flash {
    0% { opacity: 1; } 
    50% { opacity: .5; } 
    100% { opacity: 1; }
  }
  @keyframes flash {
    0% { opacity: 1; } 
    50% { opacity: .5; } 
    100% { opacity: 1; }
  }

  .updated {
    -webkit-animation: flash linear 2s infinite;
    animation: flash linear 2s infinite;
    -webkit-box-shadow:inset 0px 0px 2px 2px blue;
    -moz-box-shadow:inset 0px 0px 2px 2px blue;
    box-shadow:inset 0px 0px 2px 2px blue;
  }

  .wrong {
    -webkit-animation: flash linear 2s infinite;
    animation: flash linear 2s infinite;
    -webkit-box-shadow:inset 0px 0px 2px 2px red;
    -moz-box-shadow:inset 0px 0px 2px 2px red;
    box-shadow:inset 0px 0px 2px 2px red;
  }

  .highlight {
    -webkit-box-shadow:inset 0px 0px 1px 1px black;
    -moz-box-shadow:inset 0px 0px 1px 1px black;
    box-shadow:inset 0px 0px 1px 1px black;
  }