#menubutton_1,#menubutton_2,#menubutton_3 {
    width:49%;
}

#menubutton_1:hover, #menubutton_1.selected {
  background-color:#2db3c6;
}

#menubutton_2:hover, #menubutton_2.selected {
  background-color:#2db3c6;
}

#menubutton_3:hover, #menubutton_3.selected {
  background-color:#2db3c6;
}

.graph_blackdot {
  top:3.5vw;
  margin-left:-1.666vw;
  left:15%;
}

.graph_blackbar {
  margin-left:5px;
  left:-15%;
  top:2vw;
}

.graph1 {
 background-color:#3ac3d7;
}

.graph2 {
 background: linear-gradient(180deg, #3ac3d7 50%, #1da5b8 50%);
}

.graph3 {
 background-color:#1da5b8;
}

.graph4 {
 background-color:#fece00; /* yellow */
}

.graph5 {
 background-color:#ff9a00;
}

.graph6 {
 background-color:#ff5a00;
}

.graph7 {
 background-color:#ff0100; /* rood */
}

.graph_vp_1 { z-index:10;margin-top:0; }
.graph_vp_2 { z-index:11;margin-top:2.5vw; }
.graph_vp_3 { z-index:12;margin-top:5vw; }
.graph_vp_4 { z-index:13;margin-top:7.5vw; }
.graph_vp_5 { z-index:14;margin-top:10vw; }

.graph_start { 
  font-weight:600;
  padding-right:1vw;     /* 12px */  
  line-height:0 !important;
  z-index:1000 !important;
}

.graph_label {
  font-weight:500;
  font-size:1.25vw;
  line-height:0vw;
  margin-bottom:5vw;
  margin-top:1.25vw;   /*15px */ 
}

.graph_labelb {
  font-weight:500;
  font-size:1.25vw;
  line-height:1.50vw;
  margin-top:.5vw;   /*15px */ 
}

.graph_bar_m {
  height:5vw; /* 150px */
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  color:white;
  padding:0.5vw 0.75vw ; /* 6px 9px */
  text-align:right;
  font-weight:700;
  font-size:1.5vw;   /* 18px */
  line-height:1.5vw; /* 18px */
  margin-left:5px;
  overflow:hidden;
  position:absolute;
  display:inline-block;
  left:15%;
}

.graph_bar_b {
  height:12.5vw; /* 150px */
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  color:white;
  padding:0.5vw 0.75vw ; /* 6px 9px */
  text-align:right;
  font-weight:700;
  font-size:1.5vw;   /* 18px */
  line-height:1.5vw; /* 18px */
  margin-left:5px;
  overflow:hidden;
  position:absolute;
  display:inline-block;
  left:15%;
}

.graph_bar {
  font-weight:700;
  font-size:1.5vw;   /* 18px */
  line-height:1.5vw !important; /* 18px */
  padding:0.5vw 0.75vw ; /* 6px 9px */
}

#graph_bar1 {
  width:10%;
}
#graph_bar2 {
  width:10%;
}
#graph_bar3 {
  width:10%;
}

.gm_1 {
  height:12.5vw; /* 150px */
  line-height:12.5vw; /* 150px */
}
.gm_2 {
  height:5vw; /* 60px */
  line-height:5vw; /* 60px */
  margin-bottom:0.5vw;
}
.gm_3 {
 height:10vw;       /* 120px */
 line-height:10vw;  /* 120px */
}
.gm_4 {
 height:16vw;       /* 120px */
 line-height:10vw;  /* 120px */
}

  .graph_bgbar_gm_1 {
    margin-top:-11.5vw; /* 138px */
  }

.graph_bgbar_gm_3 {
  margin-top:-10vw; /* 138px */
}

.graph_bgbar_gm_4 {
  margin-top:-15.5vw; /* 186px */
}

.graph_blackdot_sm {
  margin-left:-1.25vw;
  left:15%;
}

.graph_blackbar {
  margin-left:0.5vw;
  left:-15%;
  top:2vw;
}

.blackdot_gm_1 {
  top:4.5vw;  /* 54px */
}

.blackdot_gm_2 {
  top: 1vw;
}

.blackdot_gm_3 {
  top: 6.5vw;
}

.blackdot_gm_4 {
  top: 12vw;
}  

.blackbar_gm_1 {
  top:3.25vw;  /* 39px */
}

.blackbar_gm_2 {
  top: 0px;
}

.blackbar_gm_3 {
  top: 5.5vw;
}

.blackbar_gm_4 {
  top: 11vw;
}  

.graph_blackbar_sm {
  font-size: 1.25vw;
  height: 5vw;
  padding: 0.75vw 1.25vw 0.75vw 2.5vw;
  line-height: 1.75vw;
  z-index:500;
}

.graph_blackbar_bg {
  font-size: 1.25vw;
  height: 7.5vw;
  padding: 1vw 1.25vw 1vw 2.5vw;
  line-height: 1.75vw;
  z-index:500;
}

#legend_left,#legend_right {
    width:49%;
}

#legend_right {
  padding:20px 2% 20px 2%;
  vertical-align:top;
  background-color:#2db3c6;
}

#legend_righttitle {
  color:white;
  text-transform:uppercase;
  font-weight:800;
  font-size:2vw;
}

#legend_rightbody {
  color:black;
  font-size:1.5vw;
  line-height:2.25vw;
  padding-top:12px;
  font-weight:500;
}

.legend_caption {
  width:100%;
  margin-bottom:0.3vw;
  height:5vw;
}

.legend_color {
  width:5vw;
  height:5vw;
  margin-right:5vw;
  display:inline-block;
  vertical-align:top;
}

.legend_text {
  vertical-align:top;
  height:5vw;
  display:inline-block;
  line-height:5vw;
  font-weight:600;
  font-size:1.5vw;
}


/* FLUID */

@media screen and (min-width: 1200px) {
  
  #legend_righttitle {
    font-size:24px;
  }
  
  #legend_rightbody {
    font-size:18px;
    line-height:27px;
  }
  .legend_text {
    font-size:18px;
    line-height:60px;
  } 
  .legend_color {
    width:60px;
    height:60px;
    margin-right:60px;
  }  
  .legend_caption {
    margin-bottom:3.6px;
    height:60px;
  }
  .graph_vp_2 { margin-top:30px; }
  .graph_vp_3 { margin-top:60px; }
  .graph_vp_4 { margin-top:90px; }
  .graph_vp_5 { margin-top:120px; }

  .gm_1 {
    height:150px;
    line-height:150px;
  }
  .gm_2 {
    height:60px;
    line-height:60px;
    margin-bottom:6px;
  }
  .gm_3 {
    height:120px;
    line-height:120px;
  }
  .gm_4 {
   height:192px;       
   line-height:120px;  
  }


  .graph_start { 
    padding-right:12px;     
    line-height:0 !important;
  }

  .graph_label {
    line-height:0 !important;
    font-size:15px;
    margin-bottom:60px;
    margin-top:15px;
  }

  .graph_labelb {
    font-size:15px;
    line-height:18px;
    margin-top:6px;  
  }
  
  .graph_bar {
    padding: 6px 9px;
    font-size: 18px;
    line-height: 18px !important;
  }
  
  .graph_bar_m {
    height: 60px;
    padding: 6px 9px;
    font-size: 18px;
    line-height: 18px;
  }
  
  .graph_bar_b {
    height: 150px;
    padding: 6px 9px;
    font-size: 18px;
    line-height: 18px;
  }
  
  .graph_bgbar_gm_1 {
    margin-top:-138px;
  }

  .graph_bgbar_gm_3 {
    margin-top:-120px; 
  }

  .graph_bgbar_gm_4 {
    margin-top:-186px;
  }
  
  .graph_blackdot_sm {
    margin-left:-16px;
    left:15%;
  }
  
  .graph_blackbar {
    margin-left:5px;
    left:-15%;
    top:24px;
  }

  .blackdot_gm_1 {
    top: 54px;
  }

  .blackdot_gm_2 {
    top: 12px;
  }
  
  .blackdot_gm_3 {
    top: 78px;
  }

  .blackdot_gm_4 {
    top: 144px;
  }  

  .blackbar_gm_1 {
    top: 39px;
  }

  .blackbar_gm_2 {
    top: 0px;
  }

  .blackbar_gm_3 {
    top: 66px;
  }

  .blackbar_gm_4 {
    top: 132px;
  }  
  
  .graph_blackbar_sm {
    font-size: 15px;
    height: 60px;
    padding: 9px 15px 9px 30px;
    line-height: 21px;
  }
  
  .graph_blackbar_bg {
    font-size: 15px;
    height: 90px;
    padding: 12px 15px 12px 30px;
    line-height: 21px;
  }
  
}