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

#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:#addbdf;
}

.graph2 {
 background-color:#67c4d6;
}

.graph3 {
 background-color:#2db3c6;
}

.graph4 {
 background-color:#0d9da8;
}

.graph5 {
 background-color:#108e93;
}

.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_prelabel {
  height:5vw; /* 60px */
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  color:white;
  padding:0.5vw 2vw ; /* 6px 24px */
  text-align:left;
  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_start { 
  font-weight:600;
  padding-right:3vw;     /* 36px */
  font-size:1.75vw;         /* 21px */  
}

.graph_bar_m {
  height:5vw; /* 60px */
  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:15vw; /* 180px */
  line-height:15vw; /* 180px */ 
}
.gm_3 {
 height:10vw;       /* 120px */
 line-height:10vw;  /* 120px */
}

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

.graph_bgbar_gm_2 {
  margin-top:-14vw; /* 168px */
}

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

.blackdot_gm_2 {
  top:5.75vw; /* 69px */
}

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

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

#button_box {
  padding-left:40px;
}

#caption_center {
  text-align:center;
  font-weight: 800;
}

#caption_right {
  text-align:left;
  padding-left:6px;
  font-weight: 800;
}

.caption_button {
  margin:0px 10px;
  text-align:center;
  width:90px;
  display:inline-block;
  font-weight: 800;
}

.caption_small {
  font-weight:300;
  font-size:12px;
}

.clear {
  clear:both;
}

.button_img {
  width:90px;
  height:90px;
  display:inline-block;
  margin:0px 10px;
  cursor:pointer;
}

#button_sz_sm { background-image: url('../img/small.png'); }
#button_sz_md { background-image: url('../img/medium_size.png'); }
#button_sz_bg { background-image: url('../img/big.png'); }
#button_sp_sl { background-image: url('../img/slow.png'); }
#button_sp_md { background-image: url('../img/medium_speed.png'); }
#button_sp_fa { background-image: url('../img/fast.png'); }

#button_sz_sm.selected,#button_sz_sm:hover { background-image: url('../img/small_selected.png'); }
#button_sz_md.selected,#button_sz_md:hover { background-image: url('../img/medium_size_selected.png'); }
#button_sz_bg.selected,#button_sz_bg:hover { background-image: url('../img/big_selected.png'); }
#button_sp_sl.selected,#button_sp_sl:hover { background-image: url('../img/slow_selected.png'); }
#button_sp_md.selected,#button_sp_md:hover { background-image: url('../img/medium_speed_selected.png'); }
#button_sp_fa.selected,#button_sp_fa:hover { background-image: url('../img/fast_selected.png'); }

.td_legend {
  width:32%;
  vertical-align:top;
  font-size:1.25vw; /* 15px; */
  line-height:2vw;  /* 24px; */
}

.le_graph1 {
  color:#addbdf;
  font-weight:600;
}

.le_graph2 {
  color:#67c4d6;
  font-weight:600;
}

.le_graph3 {
  color:#2db3c6;
  font-weight:600; 
}

.le_graph4 {
  color:#0d9da8;
  font-weight:600;
}

.le_graph5 {
  color:#108e93;
  font-weight:600;
}


/* FLUID */

@media screen and (min-width: 1200px) {

  .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:180px;
    line-height:180px;
  }
  .gm_3 {
    height:120px;
    line-height:120px;
  }

  .graph_start {
    padding-right:36px;
    font-size:21px;
  }  
  
  .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_prelabel {
    height: 60px;
    padding: 6px 24px;
    font-size: 18px;
    line-height: 18px;
  }
  
  .graph_bgbar_gm_1 {
    margin-top:-138px;
  }

  .graph_bgbar_gm_2 {
    margin-top:-168px;
  }

  .graph_blackdot {
    top:39px;
    margin-left:-21px;
    left:15%;
  }
  
  .graph_blackbar {
    margin-left:5px;
    left:-15%;
    top:24px;
  }

  .blackdot_gm_1 {
    top: 54px;
  }

  .blackdot_gm_2 {
    top: 69px;
  }

  .blackbar_gm_1 {
    top: 39px;
  }

  .blackbar_gm_2 {
    top: 54px;
  }
  
  .td_legend {
    font-size: 15px;
    line-height: 24px;
  }
  
  
}