body{
background-color: lightgrey;
font-family: Arial, Helvetica, sans-serif;
}

  .axis path,
  .axis line{
    fill: none;
    stroke: black;
  }




div.tooltip {     position: absolute;             text-align: left;           
  width: auto;                    height: auto;                 
  padding: 5px;               font: 16px sans-serif;          background: lightsteelblue;     border-width: 2px;      
  border-radius: 8px;             pointer-events: none; border-style:solid; border-color:#ff9900;        
 }

div2.tool {     position: absolute;             text-align: center;           
  width: auto;                    height: auto;                 
  padding: 2px;               font: 16px sans-serif;          background: coral;     border-width: 2px;      
  border-radius: 8px;             pointer-events: none;  border-style:solid; border-color:green;        
 }


.overlay {
  fill: none;
  pointer-events: all;
}

circle {
        stroke: white;
        fill: #05668D;
        opacity: 0.3;
        stroke-width: 2px;
    }

select {
width:90%;
}



h4{
text-align: center;
font-size:1.25vw;
margin-bottom:5px;
}

.stat{
text-align: left;
font-size:1.1vw;
}

.dosaX path,
.dosaX line {
	  fill: none;
	  stroke: white;
	  shape-rendering: crispEdges;
	stroke-width: 2px;
	}
.dosaY path,
.dosaY line {
	  fill: none;
	  stroke: white;
	  shape-rendering: crispEdges;
	stroke-width: 2px;
	}

.dosaX .tick text,
.dosaY .tick text{
fill:white;
}

button {
  background: blue;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
width: 80%;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 1.25vw;
  padding: 5px 5px 5px 5px;
text-align: center;
  text-decoration: none;
}

button:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
cursor:pointer;
}

#oblastGrafu {
  font: sans-serif; 
	left: 1%;
	top: 1%;
	width:80%;
	height:98%;
	position:absolute;
background-color: white;
}

#oblastOvladani {
  font: sans-serif; 
	left: 82%;
	top: 1%;
	width:17%;
	height:98%;
	position:absolute;
background-color: white;
text-align: center;
}

.legendaDiv{
	left: 10%;
	top: 5%;
	width:64%;
	height:88%;
	position:absolute;
background-color: white;
font-family: Verdana, Geneva, sans-serif;
overflow:auto;
border-width: 2px;      
border-radius: 8px;
border-style:solid;
border-color:red;  
font-size: calc(0.4vw + 8px);
}

.closeButton{
position:absolute;
right: 1%;
top: 1%;
}