:root {
  --rg-color-1: #D30000;
  --rg-color-2: #FF7A00; /*#FF7A00;*/
  --rg-color-3: #FFB800;
  --rg-color-4: #B3C10D;
  --rg-color-5: #73AD2B;

  /*
  --rg-color-1: #C80000;
  --rg-color-2: #FF4D00;
  --rg-color-3: #FF9900;
  --rg-color-4: #7DA800;
  --rg-color-5: #519000;
  */

  --rg-txt-color: #B3B3B3;
  --date-color: #9597A5;
}

.rate_graph{ width: 190px; margin: 0px auto 0 auto;  }

.rg_{ display: flex; align-items: center;}
.rg_ div{ width: 20%; height: 5px; border-radius: 15px; margin: 0 1px}
.rg_ div span{ display: none;}
.rg_ div.active{ opacity: 1; height: auto; /*margin-top: -3px*/ color: #fff;}
.rg_ div.active span{ display: block; position: relative; margin: 0; font-size: 14px; font-weight: bold;}

.rg_text{ /*display: flex; justify-content: space-between;*/ text-align: center; font-size: 12px; margin-top: 3px; color:var(--gray-dark);}

.rg_ div{ opacity: 0.35; position: relative;}
.rg_ .rg_val_1{ background: var(--rg-color-1); color:var(--rg-color-1); }
.rg_ .rg_val_2{ background: var(--rg-color-2); color:var(--rg-color-2);}
.rg_ .rg_val_3{ background: var(--rg-color-3); color:var(--rg-color-3);}
.rg_ .rg_val_4{ background: var(--rg-color-4); color:var(--rg-color-4);}
.rg_ .rg_val_5{ background: var(--rg-color-5); color:var(--rg-color-5);}

.brand_update_date{ font-style: italic; color: var(--date-color);}

.active_1,
.active_2,
.active_3,
.active_4,
.active_5{ font-weight: bold;}

.active_1{ color:var(--rg-color-1);}
.active_2{ color:var(--rg-color-2);}
.active_3{ color:var(--rg-color-3);}
.active_4{ color:var(--rg-color-4);}
.active_5{ color:var(--rg-color-5);}