/* Menu */
* {
    background-color: #e6d1f2;
    font-family: Arial; 
}
#nav_menu {
    display: grid;
    grid-template-columns: 120px 120px;
    text-align: center;
  }
  
  .menu_item {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 120px;
    text-decoration: none; 
    color: black;
  }
  
  .menu_item:hover {
    background-color: #ddd;
  }
  
  .menu_item a{
    text-decoration: none; 
    color: black;
  }

.title {
    font: 'Courier New';
    font-size: 24;
    font-style: normal;

    margin: auto;
    padding: auto;

    text-align: center;
}

.heatmap {
    width: 500;
    height: 500;
    
    margin: auto;
    padding: 0px;

    border-color: black;
    border-style: solid;
    border-width: 1px;

    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
}
.heatmap-qqq {
    width: 550;
    height: 250;
    
    margin: auto;
    padding: 0px;

    border-color: black;
    border-style: solid;
    border-width: 1px;

    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}
.hmi {
    width: 48;
    height: 48;

    margin: 0;
    padding: 0;
    
    border: black;
    border-width: 1px;
    border-style: solid;

    font-size: 10px;
    text-align: center;
}

.strong-up {
    background-color: green;
}

.strong-down {
    background-color: red;
}

.weak-up {
    background-color: lightgreen;
    opacity: 0.8
}

.weak-down {
    background-color: lightpink;
    opacity: 0.8;
}

.unknown {
	background gray;
}