/*

This file controls the CSS of the maps, essentially for the HTML tooltips. 
The maps are generated using the Google Visualization API, specificaly the Geochart:
https://developers.google.com/chart/interactive/docs/gallery/geochart 

Here some of the default CSS rules for the tooltips are overwritten. 
You can customize the visual of the tooltips further editing the classes below.

The tooltips might also inherit some rules from your theme's CSS. 

You can customize your map further with extra CSS. Read more about it here:
http://cmoreira.net/interactive-world-maps-demo/advanced-customization/
In case you need to add custom styles, include them below:

CUSTOM STYLES START
*/

.iwm_map_canvas {

  /*overflow:hidden;*/
 
}


/* .iwm_map_canvas svg { display:none; } */

/* 
Placeholder before the map is loaded
When Visual Composer are being used the 
opacity changes to 1
*/

.iwm_placeholder {
  opacity: 0;
  background-color:#f5f5f5;
  width:100%;
 position: relative;
 list-style: none;
 text-align: center;
 vertical-align: middle;
 padding-top:25%;
 font-size: 0.8em;
}

.iwm_placeholder:after {
    padding-top: 25%; 
    display: block;
    content: '';
}

.elementor-shortcode .iwm_placeholder {
  opacity:1;
}

/* Slightly different placeholder for Cornerstone */
.cs_iwm_placeholder {
  opacity: 1;
  background-color:#f5f5f5;
  width:100%;
 position: relative;
 list-style: none;
 text-align: center;
 vertical-align: middle;
 padding-top:25%;
 font-size: 0.8em;
}

.cs_iwm_placeholder:after {
    padding-top: 25%; 
    display: block;
    content: '';
}


/* CUSTOM STYLES END */

.iwm_map_canvas li {
list-style: none !important;
}

.iwm_map_canvas text {
  stroke-width:0;
  cursor: default;
}

/* Reset for images used in the tooltip */

.iwm_map_canvas img {
 border:none;
 padding: 0;
 margin: 0;
 box-shadow: none;
}

/* workaround to prevent blinking when tooltip is hovered 
will make tooltip not clickable, so if you have html links, don't use this
*/
/*
.iwm_map_canvas .google-visualization-tooltip {
 pointer-events:none;
}
*/

/* Overlay maps, make background transparent */
/*.iwm_data rect { fill:none; } */
.iwm_data svg > g > rect:first-child { fill:none; }

/* overlay maps, mag lens background */
.iwm_data g g g[clip-path*='url(#_ABSTRACT_RENDERER_ID_'] g path {
  display:block !important;
  
}



/* This is the main tooltip class. It's the tooltip wrapper div */
.iwm_map_canvas .google-visualization-tooltip {
  z-index: 9999;
  margin:0;
  padding:8px;
  color:#444;
  word-wrap: normal;
  font-family: inherit;
  margin-right:-50px;
  margin-bottom:-50px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  font-family: 'Arial';
}
/* overlay fix */
.iwm_map_canvas .google-visualization-tooltip {
  pointer-events:all;
}

.iwm_map_canvas .google-visualization-tooltip ul, 
.iwm_map_canvas .google-visualization-tooltip li, 
.iwm_map_canvas .google-visualization-tooltip img {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 1.5em;
  font-size: 1em;
  text-decoration: none;
  vertical-align: baseline;
  list-style: none;
}

.iwm-list li {
  cursor: pointer;
}

.iwm-controls {
  position:absolute;
  z-index: 10;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  background:rgba(255,255,255,0.5);
  border-radius: 2px;
  padding: 2px;
}

.iwm-controls-top-left {

  top:1%;
  left:1%;

}

.iwm-controls-center-left {

  bottom:50%;
  left:1%;

}

.iwm-controls-top-right {

  top:1%;
  right:1%;

}

.iwm-controls-bottom-right {

  bottom:1%;
  right:1%;

}

.iwm-controls-bottom-left {

  bottom:1%;
  left:1%;

}


.iwm-controls-zoom-in, .iwm-controls-zoom-out {
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 2px;
    background: #292929;
    padding: 3px;
    /* margin:3px; */
    color: white;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    opacity: 0.7;
}
.iwm-controls-zoom-in {
  margin-bottom:3px;
}

.iwm-controls-zoom-in:hover, .iwm-controls-zoom-out:hover {

  opacity:1;
  background: #303030;

 }

/* zoom styles for overlay maps */
div[id*='iwm_control_'] {
     width:100%;
     display: inline-block;
     position: relative;
     list-style: none;
}

div[id*='iwm_control_']:after {
    padding-top: 61.7%; 
    display: block;
    content: '';
}

div[id*='iwm_control_'] div[id*='iwm_pan_container_'] {

    position: absolute;
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 

}

/*The content of the tooltip is rendered by the API in an unordered list 
With 2 li entries, one for the title and other for the actual tooltip info.
*/

.iwm_map_canvas .google-visualization-tooltip-item-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.iwm_map_canvas  ul.google-visualization-tooltip-item-list {
  list-style: none;
  margin:0;
  padding:0;
}

.iwm_map_canvas li.google-visualization-tooltip-item {
  list-style: none;
  margin:0;
  padding:0;

}

.iwm_map_canvas .google-visualization-tooltip-item * {
  margin:0;
  padding:0;
  list-style: none;
}

/* This rule controls the Title info */
.iwm_map_canvas .google-visualization-tooltip-item-list,
.iwm_map_canvas .google-visualization-tooltip-item:first-child {
  list-style: none;
  margin:0;
  padding:0;
}

/* Columns to display content on the sides */
.iwm_2_3_column,
.iwm_1_3_column,
.iwm_3_4_column,
.iwm_1_4_column,
.iwm_1_2_column {
  display:inline-block;
  vertical-align: top;
}

.iwm_1_2_column {
  width:50%;
}

.iwm_2_3_column {
  width:66%;
}
.iwm_3_4_column {
  width:75%;
}
.iwm_1_3_column {
  width:33%;
  padding-left:5px;
}
.iwm_1_4_column {
  width:25%;
  padding-left:5px;
}

.iwm_1_3_column img,
.iwm_1_4_column img,
.iwm_1_2_column img {
  max-width:100%;
}

/* Hide empty tooltip? It hides the title also 
.iwm_map_canvas .google-visualization-tooltip  {
  border:none;
  background:none;
}
.iwm_map_canvas .google-visualization-tooltip-item:first-child {
  display:none;
}
.iwm_map_canvas li.google-visualization-tooltip-item {
  background:#FFF !important;
  border:1px solid #CCC !important;
  padding:10px !important;
}

OR without hiding title, adding box shadow

.iwm_map_canvas .google-visualization-tooltip  {
  border:none;
  background:none;
}

.iwm_map_canvas li.google-visualization-tooltip-item {
  background:#FFF !important;
  padding:10px !important;
  box-shadow:1px 1px 1px 0px #888888;
}
*/

/*

@media only screen and (max-width: 768px) {
  .google-visualization-tooltip img {
    max-width:40px;
  }
}

*/

@media only screen and (max-width: 768px) {
   .iwm-controls {
      vertical-align: middle;
      text-align: center;
   }
   .iwm-controls-zoom-in, .iwm-controls-zoom-out {
        font-size:2em;
        padding: 10px 5px;
        text-align: center;
        width:auto;
        height:auto;

    }

    /* set columns to take 100% */
    .iwm_2_3_column,
    .iwm_1_3_column,
    .iwm_3_4_column,
    .iwm_1_4_column,
    .iwm_1_2_column {
      width:100%;
    }

}

/* to hide tooltip title */
/*
.iwm_map_canvas .google-visualization-tooltip-item:first-child { display:none;}
*/


/* Google Defaults */

/*
.google-visualization-tooltip-action: hover {
  background-color: #eeeeee;
}
.google-visualization-tooltip {
  border:solid 1px #bdbdbd;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  font-size: 12px;
  padding: 0px;
  box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
  -moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
  -webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
}

.google-visualization-tooltip-item-list {
  list-style-type: none;
  margin: 1em 0 1em 0;
  padding: 0em;
}
.google-visualization-tooltip-item {
  margin: 0.65em 0em 0.65em 0em;
  padding: 0em 2em 0em 1em;
}
.google-visualization-tooltip-item-list
.google-visualization-tooltip-item:first-child {
  margin: 1em 0em 1em 0em;
}


*/