/* Global settings */
body, svg {
  margin: 0;
  padding: 0;
  font-family: 'wdr_sansregular', sans-serif;
  background-color: #3f3f4a; /* #00061f; */
  overflow: hidden;
  -webkit-font-smoothing: antialiased !important;
}

/* SVG */
.background {
  fill: none;
  pointer-events: all;
}

a:link {
  color: #fff;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
  color: #fff;
}
a:hover {
  text-decoration: none;
  color: #fff;
}
a:active {
  text-decoration: none;
  color: #ccc;

}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
	color:#fff;
}
th,td {
    padding: 15px;
}

#info{
  background-color: rgba(85, 89, 120, 0.93);
  border: 2px solid #888;
  position:absolute;
  top:25px;
  left:25px;
  color:white;
}

#infobtn{
  margin: 10px;
}

#infobtn:hover{
  cursor: pointer;
}

#infotext{
  display: none;
  width: 510px;
  margin: 10px;
}

#infotext h2{
  margin: 0;
}


/* DETAIL WINDOW */

#detail{
  position: absolute;
  border: 2px solid #888;
  background-color: rgba(85, 89, 120, 0.93);
  color: white;
  padding: 10px;
  right: 25px;
  top:25px;
  width: 430px;
  display:none;
  line-height: 12px;
}

#detail h1.country{
  font-size: 24px;
  margin: 0;
  margin-top: 10px;
  line-height: 24px;
}

#detail hr{
  border: 3px solid rgb(62, 71, 100);
}

#detail h2.theme{
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 100;
}

#detail div.value{
  margin:25px 0 10px 0;
  padding: 0;
  font-size: 22px;
  line-height: 1.2em;
  font-weight: bold;
}

#detail div.value-info{
  /*font-style: italic;*/
  line-height: 24px;
  font-size: 18px;
}

span.symbol{
  margin-right: 10px;
}

#close_detail{
  position: absolute;
  right: 20px;
  top: 0px;
  font-size: 36px;
  line-height: 48px;
  cursor: pointer;
}

#close_detail span{
  padding-top: 10px;
}




/* MAP */

.feature {
  stroke: white;
  stroke-width: 0.5;
  cursor: pointer;
}

/* Cursor type pointer only for country
 * shapes that are clickable (linked to data).
 */
svg .valid   {
  cursor: pointer;
}

/* Country shape hover and active states */
svg .active, svg .hover, .mesh {
	stroke: black;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg .hover{ stroke-width: 0.8px; stroke:rgba(255,255,255,0.5);}
svg .active{ stroke-width: 1px; stroke:rgba(255,255,255,0.5);}

.mesh {
  fill: none;
}


/* COLOR-LEGEND */

#color-legend{
  position: absolute;
  bottom: 25px;
  left: 25px;
  color:#fff;
}

#color-legend div{
  margin-bottom: 5px;
}

#color-legend p{
  display: inline;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

#color-legend svg, #color-legend svg rect {
  width: 20px;
  height: 20px;
}

#color-legend svg {
  margin-right: 5px;
}

#color-legend svg rect {
  stroke: #444;
  stroke-width: 5px;
}

#color-legend h2 {
  color:rgba(255,255,255,0.8);
  margin:0;
  margin-bottom: 10px;
}

#color-legend {
  /* display: none; */
}

/* TOOLTIP */

.tooltip{
  position:absolute;
  color:#fff;
  background-color: #20283c;
  padding:10px;
}

/* UTIL CLASSES */

.hidden{
	display:none;
}