:root {

  --gr-width: 500px;
  --gr-line-height: 10%;
  --gr-height: calc(var(--gr-line-height) * 6);

  --gr-color-1: #58B9E5;
  --gr-color-2: var(--gray-dark);

}


.my_graph{
    position: relative;
    margin: 0 auto;
    max-width: var(--gr-width);
    height:var(--gr-height);
    margin:40px 0 40px 10px;
}

.my_graph_info{ /*position: absolute;*/ display: flex; margin: 10px 20px}
.my_graph_info .info_{ margin: 0 15px; position: relative;}
.my_graph_info .info_::before { content: "";  padding: 5px;  background: var(--gr-color-1);  position: absolute;  left: -17px;  margin: 8px 0;  border-radius: 5px;}
.my_graph_info .info_industry::before{background: var(--gr-color-2);}

.gr_values{ display: flex; margin: 0 5px; align-items: flex-end; padding-top: 0;}
.gr_val{ margin: 0 7px; width: 25%;  }

.gr_values,
.gr_,
.gr_val{ height: 100%}



.gr_val .gr_{ display: flex; width: 100%;  align-items: flex-end;}
.gr_animation{height: 100%; width: 100%; display: flex; align-items: flex-end;}

.gr_text{ margin: 10px 0 0 0}


.gr_ .gr_camper,
.gr_ .gr_industry{ width: 50%; height:0%; background: var(--gr-color-2); border-radius: 10px 10px 0 0}
.gr_ .gr_camper{ width: 100%; background: var(--gr-color-1); height:0%; margin: 0 1px}

.gr_coordinates{ position: absolute; z-index: -1; width: 100%}
.gr_coordinates div{ position: relative; height: var(--gr-line-height); text-align: left; width: 100%; border-bottom: 1px solid #EAEAEA}
.gr_coordinates div span{ position: absolute; margin: 6% 0px 0 -15px}


/*
.gr_coordinates div:first-child{ height: 0px;}
.gr_coordinates div:first-child span{ margin: -15px 0px 0 -15px}
*/



/* ..................................... */
.gr_val .gr_{ position: relative;}

.my_graph._anim_items .gr_val .gr_animation_add { position: absolute; top: 0; width: 100%; }
.my_graph._anim_items .gr_val.negative .gr_animation_add { top: auto; bottom: 0; }
.my_graph._anim_items .gr_val .gr_animation_add {height: 50% !important; /* background: #ccc;*/ }

.my_graph._anim_items .gr_val .gr_animation { position: absolute; height: 0;}
.my_graph._anim_items._active .gr_val .gr_animation { height: 100% !important;  }
.my_graph._anim_items .gr_val.positive .gr_animation { top: auto; bottom: 0; margin-bottom: 3px;  }
.my_graph._anim_items .gr_val.negative .gr_animation {   margin-top: 3px; }

.gr_animation .gr_text{ opacity: 0; font-size: 14px;}

.positive .gr_animation .gr_text{ opacity: 0; margin-bottom: -20px;}
.negative .gr_animation .gr_text{ opacity: 0; margin-top: -20px;}
._active .positive .gr_animation .gr_text{ opacity: 1; margin: 0 !important;}
._active .negative .gr_animation .gr_text{ opacity: 1; margin: 0 !important;}

.gr_base{ background-color:#57B9E4; opacity: 0.5; height: 6px; display: block; width: 100%; bottom: 0; position: absolute; margin-bottom: -6px; }
.negative .gr_base{ background-color:#FFB600; bottom: auto; top: 0; margin: 0; margin-top: -6px;}



.gr_coordinates div.gr_line{display: block; position: relative; color: #606A70; border:0; background: #606A70; height: 6px; width: 100%; /* transform: translateY(-50%); */ }
.gr_coordinates div.gr_line p{ position: absolute; left: calc(100% + 10px); top: calc(-200% - 10px); margin-top: 6px; font-size: 14px; line-height: 120%; /*white-space: nowrap;*/ }

.gr_val.negative .gr_animation .gr_camper { background: #FFB600; position: absolute; top: 0; border-radius: 0px 0px 10px 10px;}
.gr_val.negative .gr_animation div span{ color: black;}

.gr_text{ position: absolute; margin: 0 auto; left: 0; right:0;}
.positive .gr_text{ bottom: -35px;}
.negative .gr_text{ top: -35px;}

.gr_ .gr_camper{ position: relative; }


.gr_animation .gr_text,
.gr_ .gr_camper,
.gr_camper .gr_info { transition:all 0.5s cubic-bezier(.49,-0.18,0,1.68) 0s; }

.my_graph._anim_items._active .gr_val_1 .gr_animation .gr_text {  transition-delay: 0.4s;}
.my_graph._anim_items._active .gr_val_2 .gr_animation .gr_text {  transition-delay: 0.5s;}
.my_graph._anim_items._active .gr_val_3 .gr_animation .gr_text {  transition-delay: 0.6s;}
.my_graph._anim_items._active .gr_val_4 .gr_animation .gr_text {  transition-delay: 0.7s;}

._active .gr_val_1 .gr_camper .gr_info {  transition-delay: 0.8s; }
._active .gr_val_2 .gr_camper .gr_info {  transition-delay: 0.9s; }
._active .gr_val_3 .gr_camper .gr_info {  transition-delay: 1.0s; }
._active .gr_val_4 .gr_camper .gr_info {  transition-delay: 1.1s; }


.gr_camper .gr_info{ opacity: 0; display: flex; flex-direction: column; align-items: center; position: absolute; left: 0; right: 0; font-size: 14px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35); width: 100%; background: #fff; padding: 0px; margin: 0; border-radius: 15px; color: #606A70 !important; }
.gr_camper .gr_info span{ color: #606A70 !important; display: inline-block; font-size: 14px !important; padding: 0px 7px 10px 7px; text-align: center; line-height: 120%;}
.gr_camper .gr_info b{ font-size: 20px; display: inline-block; padding: 3px 5px 0 5px; line-height: 1.5;}
.gr_camper .gr_info hr{ margin: 0; width: 80%;}

.positive .gr_camper .gr_info{ bottom:0}
.negative .gr_camper .gr_info{ top:0}

.gr_camper .gr_info b{ color: #57B9E4; }
.negative .gr_camper .gr_info b{ color: #FFB600; }

/* .gr_camper:hover */
._active .gr_camper .gr_info{ opacity: 1;}
._active .positive .gr_camper .gr_info{ bottom:100%; margin-bottom: 10px;}
._active .negative .gr_camper .gr_info{ top:100%; margin-top: 10px;}


.gr_camper .gr_info::after{ position: absolute; bottom: -9px; margin: 0 auto; content: ""; width: 23px; height: 9px; background-image: url(images/diagram/pointer.svg); background-size: contain; }
.negative .gr_camper .gr_info::after{ top: -9px; bottom: auto; background-image: url(images/diagram/pointer_top.svg?1);}


.gr_coordinates{ height: 100%; display: flex; flex-direction: column; justify-content: center;}
.gr_coordinates div{ height: 10%; border: 0; border-top: 1px solid #EAEAEA;}
.gr_coordinates div.gr_bot { border: 0; border-bottom: 1px solid #EAEAEA;} 


p.cur_rating{ letter-spacing: -1px;}
.qzero_rate .qzero_text h3{ font-size: 33px !important;}

/* ..................................... */

@media (max-width: 576px) {
  .gr_text { font-size: 10px; }

  .my_graph_info{
    display: block;
    text-align: left;
    margin-top: -10px;
  }

  .qzero_rate .qzero_text h3{ font-size: 24px !important;}
}


@media (max-width: 615px) {
  .gr_text { font-size: 10px; }
  .gr_coordinates div.gr_line p{ display: none;}
  .gr_animation .gr_text{ font-size: 11px;}
}