:root {
    --cellsize: 32px;
    --cellinput: 25px;
}


.statusText
  {
   padding-top: 10px;
   padding-bottom: 10px;
  }
  
  .controlDiv
  {
   padding-top: 10px;
   padding-bottom: 10px;
  }
  
  .groupheader
  {
	font-weight: bold;
  }
  
div.controlgroup {
    margin-top:10px;
    border: 1px solid lightsteelblue;
    border-radius: 10px;
    padding:10px;
}


div.controlsrow {
    margin-top:10px;
}

div.groupheader {
    margin-top:10px;
}

.solutionfound {
    background-color:lightgreen;
    margin-top:10px;
    border: 1px solid lightsteelblue;
    border-radius: 10px;
    padding:10px;
}
.solutionnotfound {
    margin-top:10px;
    border: 1px solid lightsteelblue;
    border-radius: 10px;
    padding:10px;
}


#controlsblock {
    margin-top:0px;
    border-radius: 0px;
    padding:0px;
}

#grid_div {
    margin-top:10px;
    margin-bottom:20px;
}

#layoutblock {
    margin-top:10px;
    border: 0px solid lightsteelblue;
    border-radius: 10px;
    padding:10px;
}

#frontier {
    margin-top:10px;
    border: 1px solid lightsteelblue;
    border-radius: 10px;
    padding:10px;
}


#exploredblock {
    margin-top:10px;
}

#explored {
    margin-top:10px;
    border: 1px solid lightsteelblue;
    border-radius: 10px;
    padding:10px;
}

.gridInput {
    border: none;
    width: var(--cellinput);
}


table.grid {
    border-spacing:0px;    
    padding-bottom:10px;
    margin:0px;
}

tr.grid{
    border-spacing:0px;
    padding:0px;
    margin:0px;
}

td.grid {
    width: var(--cellsize);
    height: var(--cellsize);
    padding:0px;
    margin:0px;
}

td.wall {
    width: var(--cellsize);
    height: var(--cellsize);
    padding:0px;
    margin:0px;
}

td.sand {
    width: var(--cellsize);
    height: var(--cellsize);
    padding:0px;
    margin:0px;
}

td.magic_sand {
    width: var(--cellsize);
    height: var(--cellsize);
    padding:0px;
    margin:0px;
}


table.value_grid {    
    border: 1px solid black;
    padding:0px;
    margin:0px;
}
td.value_grid_empty {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:white;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_sand {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:orange;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_magic_sand {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:lightblue;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}


td.value_grid_goal {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:green;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_wall {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:gray;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_current {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:red;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_visited {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:lightcoral;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_frontier {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:lightgreen;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

td.value_grid_path {
    width: var(--cellsize);
    height: var(--cellsize);
    background-color:gold;
    border: 1px solid black;
    text-align: center;
    padding:0px;
    margin:0px;
}

table.current_info {
        text-align: center;                        
}

th.ci {
            padding:5px;
            margin:5px;
            border: 1px solid lightsteelblue;
}
td.ci {
            padding:5px;
            margin:5px;
            border: 1px solid lightsteelblue;
}

.size_button { 
    width: 100px; 
    
} 

tt,pre {
	font-weight: bold;
}


.legend_max {  
  background-color:#008000; 
  border: 1px solid steelblue;
  color: white;
  width: 10px;
  height: 10px;  
  display: inline-block;
}
.legend_min {  
  background-color:#F08080; 
  border: 1px solid steelblue;
  color: white;
  width: 10px;
  height: 10px;  
  display: inline-block;
}
.legend_terminal {  
  background-color:#00F; 
  border: 1px solid steelblue;
  color: white;
  width: 10px;
  height: 10px;  
  display: inline-block;
}
.legend_pruned {  
  background-color:#AAA; 
  border: 1px solid steelblue;
  color: white;
  width: 10px;
  height: 10px;  
  display: inline-block;
}
.legend_current {  
  background-color:#FFFF00; 
  border: 1px solid steelblue;
  color: white;
  width: 10px;
  height: 10px;  
  display: inline-block;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.nodef circle {
  fill: #000;
  stroke: steelblue;
  stroke-width: 3px;
}

.my_scroll_div{    
    overflow:scroll;   
    margin: 10px;
    padding: 30px;
    background-color:#EEE;
    border-radius: 10px;
    resize: both;
    overflow: auto;
    height: 400px; 
}


.node text { font: 12px sans-serif; }

.link {
  fill: none;
  stroke: #aaa;
  stroke-width: 2px;
}