body {
  font-family:"Sans-Serif", Arial, sans-serif;
  /*user-select: none;*/
  cursor: default;
  overflow: hidden;
}

body.done{
  background:#CCC;
}

.mapboxgl-canvas-container { cursor:default;}
.mapboxgl-canvas-container.mapboxgl-interactive{ cursor:default;}

canvas {
  display:block;
  margin:auto auto;
  display:inline-block;
  user-select: none;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#ctxmenu {
  border-collapse: collapse;
}

.land {
  fill: rgba(255,255,255,0.5);
  stroke: #ccc;
}

.state {
  stroke: #444;
}


.menuitem {
  border-collapse: collapse;
  background:#fff;
  border:1px solid black;
  padding:5px;
}

.menuitem:hover {
  background:#eef;
}

.overlay{
  position:absolute;
  width:100%;
  height:100%;
  z-index:0;
}

/* Style the tab */
div.tab {
  display:none;
  margin:auto auto;
  overflow: hidden;
  border: 1px solid #ccc;
  border-bottom: 0px;
  background-color: #CCC;
  position:relative;
  width:100%;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  margin-bottom:-5px;
}
div.foot {
  margin:auto auto;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  position:relative;
  width:100%;
  border-bottom-left-radius:7px;
  border-bottom-right-radius:7px;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: #CCC;
    float: left;
    border: none;
    outline: none;
    cursor: default;
    padding: 2px 16px;
    transition: 0.3s;
    vertical-align: bottom;
    font-size:16px;
    margin-top:5px;
    box-shadow: inset 0 0 10px #000;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    padding-bottom:5px ;
}
div.tab button div{
  display:inline-block;
}
/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
  background-color: #FFF;
  margin-top:0px;
  margin-bottom:0px;
  padding-bottom:14px ;
}

label {
  white-space: nowrap;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.foot, .tab{
  background-image: url("images/BackgroundMetal.gif");

}
/* table with parameters*/
th{
  vertical-align: top;
}
.cred{
  background:rgba(255,0,0,0.1);
}
.cgreen{
  background:rgba(0,255,0,0.1);
}
.cblue{
  background:rgba(0,0,255,0.1);
}

img.flag:hover{

}
img.flag ~ div{
    display:none;
}
img.flag:hover ~ div{
    display:block;
}
.flagname{
  text-shadow: 0px 0px 4px #FFF;
  background:rgba(255, 255, 255, 0.7);
}

.cartogram .feature {   
  stroke: black;
  stroke-width: 0;
  cursor: default;
}

.state2, .state3 {
  stroke:rgba(0,0,0,1);
  stroke-width: 0.3;
  fill-opacity: 0.0;
}
.state2.labhover, .state3.labhover {   
  stroke:black;
  stroke-width:3px
}

.label{
  fill:black;
  text-shadow: 0px 0px 8px #FFF, 0px 0px 8px #FFF, 0px 0px 8px #FFF, 0px 0px 8px #FFF, 0px 0px 8px #FFF;  
}

.inter1 .label{
  visibility:hidden;
}

.inter2 .label{
  visibility:hidden;
}

.inter1 .labhover{
  visibility:visible;
  text-shadow: 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF;  
}

.highlight{
  fill:#8F8;
  text-shadow: 0px 0px 4px #00F, 0px 0px 4px #00F, 0px 0px 4px #00F, 0px 0px 4px #00F, 0px 0px 4px #00F;  
}

.inter1 .highlight{
  visibility:visible;
  text-shadow: 0px 0px 4px #00F, 0px 0px 4px #00F, 0px 0px 4px #00F, 0px 0px 4px #00F, 0px 0px 4px #00F;  
}

.tabtr, .tabtr1, .tabtr2, .tabtr3, .tabtr4, .tabtr5, .tabtr6, .tabtr7 {
  padding:0px 5px;
  color:#888;
  font-weight:normal;
  padding-bottom:5px;
  padding-top:0px;
}
.selected {
  background-image: url("images/BackgroundMetal.gif");
  margin-top: 1px;
  color:black;
  font-weight:bold;
  padding-bottom:-1px;
  padding-top:5px;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

body {
  margin: 0;
  padding: 0;
}

#wholepage {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

h3{
  margin: 0;
  margin-top: -3px;
  font-size:14px;
}
h4{
  margin: 0;
  font-size:10px;
  font-weight: normal;
  font-style: italic;
}

#trtabs {
  height:25px;
  width:100%;
}
#trtabs td{
  padding:0;
}

#tabs {
  height:25px;
  width:100%;
}

.tabButton{
  height:120%;
}

/* Style the tab */
div#tabs {
  margin:auto auto;
  overflow: hidden;
  border: 1px solid #ccc;
  border-bottom: 0px;
  background-color: #CCC;
  position:relative;
  width:100%;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  margin-bottom:-5px;
}

/* Style the buttons inside the tab */
div#tabs button.tabButton {
    display:none;
    background-color: #CCC;
    float: left;
    border: none;
    outline: none;
    cursor: default;
    padding: 2px 16px;
    transition: 0.3s;
    vertical-align: bottom;
    font-size:12px;
    margin-top:5px;
    box-shadow: inset 0 0 10px #000;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    padding-bottom:5px ;
}
div#tabs button.tabButton div{
  display:inline-block;
}
/* Change background color of buttons on hover */
div#tabs button.tabButton:hover {
    background-color: #fdd;
}

/* Create an active/current tablink class */
div#tabs button.active {
  background-color: #FFF;
  margin-top:0px;
  margin-bottom:0px;
  padding-bottom:14px ;
}

#content {
  position: relative;
  width: 100%;
  height: 100%;
}

#mapa, #mapb {
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  height: 100%;
  box-shadow: 0px 0px 5px black;
}


#menu {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: 170px;
    right: 170px;
    z-index:3;
    border-radius: 3px;
    /*width: 70%;*/
    border: 1px solid rgba(0,0,0,0.6);
    font-family: 'Arial', sans-serif;
    text-align: justify;
}

#menu a {
    color: rgba(128, 128, 128, 0.9);
    display: inline-block;
    margin: 0;
    padding: 10px;
    text-decoration: none;
    border-right: 1px solid rgba(0,0,0,0.25);
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.25);
}

#menu a.active {
    background-color: rgba(128, 128, 255, 0.85);
    color: #ffffff;
    border-right: 0;

}
#menu a.active:before {
    content: '✔';
    margin-right: 5px;
}
/* #menu a:last-child {
    border: none;
}
*/
#menu a:hover {
    background-color: rgba(192, 192, 192, 0.85);
    color: #404040;
}

#transtitle{
  font-weight:bold
}

#transmenu{
  padding:5px;
}

.modal{
  display:flex;
  flex-wrap: wrap; /* Optional. only if you want the items to wrap */
  justify-content: center; /* For horizontal alignment */
  align-items: center; /* For vertical alignment */
  width:100%; 
  height:100%; 
  z-index:10; 
  background-image: linear-gradient(to bottom, #AAF, #AAA);
  position: relative;
}

.modal div
{
  display:inline-block;
}

.modal button
{
  font-style: normal;
  font-size: 30px;
  font-family: Sans-serif;
  border-radius: 8px;  
}

#st{
  background : linear-gradient(80deg, #a0a0ff 0%, #ffffff 2%);  
}

#leftlegend {
  position:absolute;
  bottom:10px;
  left:10px;
  z-index:3;
}
#rightlegend {
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:3;
}

.legend *{
  background: rgba(255, 255, 255, 0.9);
}

.legend2 {
  background: rgba(255, 255, 255, 0.9);
  padding:0px;
  text-align:center;
}

.legend table{
  padding:auto auto;
  background: none;
  min-width:150px;
  table-layout: fixed;
}

.legend table.transplegend *{
  background: none;
}
.legend table tbody{
  width:100%;
  align:center;
}
.legend table tr{
  width:100%;
}
.legend table th{
  background: rgba(255, 255, 255, 0.9);
}
.legend div{
  padding:5px 5px;
}

.legend{
  padding:0px 0px;
  margin:5px;
  border-radius: 0px;
  box-shadow: 0px 0px 5px black;
  text-align:center;
}
.legend table{
  border-spacing: 0;
  border-collapse: collapse;
}
.slid{
  display:none;
  padding: 11.5px 2px;
  border-top: 1px solid rgba(0,0,0,0.25);
  vertical-align: bottom;
}

tr.sel td{
  border-top : 2px solid black;
  border-bottom : 2px solid black;
}
tr.sel td:last-child{
  border-right : 2px solid black;
}
tr.sel td:first-child{
  border-left : 2px solid black;
}
input[type="range" i]{
  margin:0;
}

.target{
  /*background:#00F;*/
  text-shadow: 0px 0px 6px #00F, 0px 0px 6px #00F, 0px 0px 6px #00F, 0px 0px 6px #00F, 0px 0px 6px #00F;
  color:#0F0;
}

a.active + .slid{
  display:inline-block;
  background-color: rgba(128, 128, 255, 0.85);
  border-right: 1px solid rgba(0,0,0,0.25);
}
#menu a.active:hover {
    background: #3074a4;