.btn_control, #game_link {
  background-color: #eef;
  color: #004;
  border: 1px solid green;
  padding: min(1vw, 6px);
  height: min-content;
  font-size: min(2.5vw, 2.5vh, 16px);
  white-space: nowrap;
}

.btn_control:hover {
  background-color: #bbb;
}

.btn_disabled, .btn_disabled:hover {
  background-color: #ddd;
  color: #bbb;
}

/*---------------------- top controls -------------------*/
#top_controls {
  display: flex;
  width: 90%;
  max-width: 800px;
  position: relative;
  margin: 20px;
  user-select: none;  
}

#top_controls > div {
  margin-right: 12px;
}

#new_game_area, #options_area, #save_game_area {    /* parent of button and drop-down */
  position: relative;
  display: inline-block;
  user-select: none;
}

#game_link {
  margin-left: 100px;
}

#help_btn {
  position: absolute;
  margin-right: 0px;
  right: 0px;
}

.menu_group {                    /* container for drop-down content */
  display: none;
  position: absolute;
  width: max-content;
  min-width: 10vw;
  font-size: min(2.5vw, 2.5vh, 16px);
  border: 1px solid #0aa;
  background-color: #eef;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px;
  z-index: 1;
}

.position-to-left {
  position: absolute;
  right: 0px;
}

.menu_group label {        /* menu items */
  display: inline-block;      /* padding is ignored without this line */
  color: black;
  padding: 6px;
}

.menu_group label:hover { background-color: #ddd; }

#new_game_area:hover #new_game_btn { background-color: #bbb; } 
#options_area:hover #options_btn { background-color: #bbb; } 
#save_game_area:hover #save_game_btn { background-color: #bbb; }
#options_area:hover #options_group { display: block; }

#save_name {
  height: 32px;
  width: 240px;
  margin-top: 4px;
  padding: 4px;
  border: 2px solid green;
  background-color: white;
  white-space: nowrap;
}

#save_btn {
  background-color: #eff;
  width: min-content;
  margin-right: 0px;
  margin-left: auto;
  margin-top: 4px;
}

#save_btn:hover {
  background-color: #bbb;
}

#save_as_bookmark_text {
  margin-top: 16px;
}
#save_link {
  display: block;
  white-space: nowrap;
  margin-top: 4px;
  width: min-content;
  margin-right: 0px;
  margin-left: auto;
}

/*----------------- Game list: displayed while game_list btn is active ----------*/

#game_list {
  display: grid;
  grid-template-columns: 25% auto auto;
  grid-auto-rows: 20px;
  grid-gap: 8px;
  user-select: none;  
}

#game_list, #game_edit {
  /*--- game_edit control replaces game_list while edit btn is active ---*/
  font-family: "Lucida Console", monospace;
  height: 80vh;
  overflow: auto;
  padding-left: 4px;
  border: 2px solid green;
  background-color: white;
  white-space: nowrap;
}

.gl_hdr {
  background-color: "rgb(224, 224, 224)";
  border-bottom: 1px solid green;
}

/*----------------- Game board, numpad and side buttons -------------------*/

#game_area {
  display: flex;
  margin-left: 20px;
  max-width: 800px;
  user-select: none;  
}

#game_board {
  display: grid;
  width: min-content;
  height: min-content;
  grid-template-columns: auto auto auto;
  grid-gap: 2px;
  color: #008;
  background-color: green;
  border: 2px solid green;
}

#num_pad {
  display: grid;
  width: min-content;
  height: min-content;
  background-color: white;
  border: 2px solid green;
}

.box33 {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  background-color: white;
}
  
.box33 div {
  width: min(6.5vw, 6.5vh, 60px);
  height: min(6.5vw, 6.5vh, 60px);
  font-size: min(3vw, 3vh, 24px);
  color: #004;
  border: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box33 div:hover {
  background-color: #bbb;
}

.cell_given {
  font-weight: 600;
}

#np0 {
  width: auto;
  grid-column: 1 / span 3;
}

#side_controls {
  margin-left: 16px;
}

#side_controls .btn_control {
  width: min(12vw, 72px);
  height: min-content;
  margin-top: min(1.5vh, 12px);
}

#restart_btn {
  margin-top: 24px;
}

#msg_box, #dbg_log {
  border: 1px solid black;
  background-color: white;
  color: #008;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  font-size: min(2.5vh, 18px);
  padding: 6px;
  overflow: auto;
}

#msg_box {
  height: 15vh;
  max-width: 800px;
}

#dbg_log {
  display: none;
  height: 24vh;
}