#visualizationWrapper h1{
  padding-left: 25px;
  font-family: Bitter, Georgia, serif;
  float: left;
  width: 82%;
}
#visualizationWrapper h2{
	font-family: Bitter, Georgia, serif;
}



#visualizationWrapper{
  position: relative;
}


#visualizationWrapper h2{
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.books_wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.vis_head{
  padding: 8px;
}

/*Generates three columns for the three kinds of books to inhold their selection buttons*/
.bookkind{
	width: 23%;
	padding:1%;
	text-align: center
}


/*For book buttons*/

.bookChoice {
	 cursor: pointer;
    font-family: Bitter, Georgia, serif;
    font-size: 0.8em;
    text-align: center;
}

.bookChoice input[type="checkbox"]:checked +.bookChoiceButton{
  background-color: #8199C3;
  border-color: #8199C3;
}
.bookChoice input{
	opacity: 0;
  	width: 0;
  	height:0;
}
.bookChoiceButton{
	border-radius:50%;
	border: 1px solid #ccc;
	display: inline-block;
	width: 50px;
  margin-right: 3px;
  margin-bottom: 3px;
}
input:checked + .bookChoiceButton {
  background-color: #3B5074;
}


.switch_desc{
  font-family: Verdana;
  font-size: x-small;
  width: 75px;
  width: 60px;
  display: inline-flex;
  line-height: 1.5;
}

.vis_head_wrapper{

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.switch_wrapper{
  display: flex;
  align-items: center;
}

/*For toggle button*/
/* The switch - the box around the slider */
.switch {
   position: relative;
  width: 60px;
  height: 34px;
  right:6px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.togglebutton {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #124C9C;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.togglebutton:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .togglebutton {
  background-color: #A6DCA3;
}

input:focus + .togglebutton {
  box-shadow: 0 0 1px #A6DCA3;
}

input:checked + .togglebutton:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

#visualisationCanvas{
  position: relative;
}

.tooltip{
    position: absolute;     
    text-align: center;     
    width: 70px;          
    height: 42px;         
    padding: 2px;       
    font: 12px sans-serif;    
    background: lightsteelblue; 
    border: 0px;    
    border-radius: 8px;     
    pointer-events: none;   
}

.tooltip2{
    position: absolute;     
    text-align: center;     
    width: 100px;          
    height: 45px;         
    padding: 2px;       
    font: 12px sans-serif;    
    background: lightgrey; 
    border: 0px;    
    border-radius: 8px;     
    pointer-events: none;   
}

#legendOfHeatmap{
    text-align: right;
    margin-bottom: 5px;
}

#backgroundRect{
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;

}