/* Spawn Toggle */
.db_map_spawn_simple {display:block}
.db_map_spawn_heatmap {
  position:absolute;
  top:0; left:0;
  margin-top:0px;
  margin-bottom:0px;
  height:150px;
  z-index:2;
  display:none}

img.db_map_spawn_heatmap {
  height:150px;
  border:1px solid black;
}

p.db_map_spawn_heatmap {
  font-weight:bold;
  font-size:18px;
  background-color:white;
  text-align:center;
  align-content:center;
  width:100%;
  height:100%;
  opacity:80%;
}

/* Linkranges and Points */
.db_map_link_normal {background-color:#FF3131;}
.db_map_link_special {background-color:#FF4D4D;}

.db_map_link_point_o {outline:1px solid red}
.db_map_link_point_d, .db_map_link_point_s {
  outline:1px solid #4D4DFF;
  background-color:#9A9AFF;}
.db_map_link_point_o, .db_map_link_point_d, .db_map_link_point_s {
  z-index:2;
  position:absolute;
  height:5px; width:5px;
  border-radius:50%}

.db_mapinfo_mon_icon {max-height:24px; max-width:24px;}
.db_mapinfo_mon_td {width:1%}
.db_mapinfo_shop_icon {width:auto}
.db_mapinfo_shop_name {width:100%}

.db_mapinfo_grid {
  grid-template-columns:repeat( auto-fill, minmax(250px, 1fr) );
  margin-left:8px;
  display:grid}

.db_mapinfo_map_div {position:relative}

.db_mapinfo_map_image_main {
  position:relative;
  margin:auto;
  margin-top:5px;
  padding-left:5px;
  padding-right:5px;
  display:grid;
  width:fit-content;
  place-items:center}

.db_mapinfo_map_image_gray,
.db_mapinfo_map_image_large {
  max-width:100%;
  margin-left:auto;
  margin-right:auto}

.db_mapinfo_map_image_large {
  border:1px solid black}

.db_mapinfo_map_image_gray {
  display:none;
  position:absolute;
  top:1px;
  padding-left:5px;
  padding-right:5px;
  z-index:1}

.db_mapinfo_map_image_main:hover .db_mapinfo_map_image_gray {display:block}

.db_mapinfo_npc_image {
  margin-left:10px;
  margin-right:20px;
  vertical-align:middle}

.db_mapinfo_map_image_tooltip {
  width:180px;
  border:1px solid black;
  display:block}

.db_mapinfo_tooltip_obj_map,
.db_mapinfo_tooltip_obj_shop,
.db_mapinfo_tooltip_obj_spawn {position:relative}

.db_mapinfo_tooltip_obj_map:hover .db_mapinfo_tooltip_r_map,
.db_mapinfo_tooltip_obj_shop:hover .db_mapinfo_tooltip_r_shop,
.db_mapinfo_tooltip_obj_spawn:hover .db_mapinfo_tooltip_r_spawn {
  visibility:visible; opacity:1}

.db_mapinfo_tooltip_obj_map:hover .db_mapinfo_tooltip_r_map {
  font-size:12px;
  text-align:left;
}

.db_mapinfo_tooltip_r_map,
.db_mapinfo_tooltip_r_spawn,
.db_mapinfo_tooltip_r_shop {
  background-color:LavenderBlush;
  visibility:hidden;
  transition:opacity 0.3s;
  position:absolute;
  opacity:0;
  z-index:2;
  border-radius:6px;
  padding:2px;
}

.db_mapinfo_tooltip_r_map {
  white-space:nowrap;
  font-size:small;
}

.db_mapinfo_tooltip_r_spawn {
  bottom:120%;
  right:50%;
}

.db_mapinfo_tooltip_r_shop{
  font-weight:normal;
  white-space:nowrap;
  left:-4px;
}

.db_mapinfo_map_image_shop {
  height:100px;
  border:1px solid black;
  margin:auto; display:block;
}

.db_mapinfo_map_image_spawn {
  position:relative;
  height:150px;
  border:1px solid black;
}

.db_mapinfo_image {
  max-width:100%;
  max-height:100%;
  width:auto;
}

.db_mapinfo_icon_skill {
  width:18px; height:18px;
  vertical-align:middle;
  object-fit:scale-down;
}

.db_mapinfo_icon_item {
  width:24px; height:24px;
  vertical-align:middle;
  object-fit:scale-down;
  padding-right:6px;
}

.db_mapinfo_link_map {
  color:black;
  text-decoration:none;
  cursor:pointer;
}

.db_mapinfo_column_left {width:auto}
.db_mapinfo_column_right {width:auto; flex-grow:1}

.db_mapinfo_name {width:auto; text-align:left}
.db_mapinfo_total {width:25px; text-align:right}
.db_mapinfo_timestr {width:80px; text-align:left}
.db_mapinfo_areastr {width:150px; text-align:left}
.db_mapinfo_typestr {width:20px; text-align:center}

.db_mapinfo_td_checkmark {width:50px}

.db_mapinfo_table {
  font-weight:normal;
  vertical-align:top;
  text-align:left;
}
.db_mapinfo_table th {background-color:#D2D2D2}
.db_mapinfo_table tr:nth-child(odd) td {background-color:#E6E6E6}
.db_mapinfo_table tr:nth-child(even) td {background-color:#DCDCDC}

.db_map_asearch_small {display:table}
.db_map_asearch_large {display:none}

/* Screen Adjustments */
.db_mapinfo_flex {
  display:block;
}

@media only screen and (min-width:760px) {
  .db_mapinfo_flex {display:flex}
  .db_map_asearch_small {display:table}
  .db_map_asearch_large {display:none}
}

@media only screen and (min-width:850px) {
  .db_map_asearch_small {display:none}
  .db_map_asearch_large {display:table}
}