/**
 * Progress thermometer
 */

/* Base thermometer style, this is the slate */
.thermometer {
  width:70px;
  position: relative;
  height:230px;
  /*left: 50%;
  margin-left: -35px;*/
  background: #ddd;
  border:1px solid #aaa;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
/*
  -webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  -moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  -ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  -o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
*/
}


/* This represents the track of the thermometer, the linear background
    with a background size set will generate a line every 5% of the track. */
.thermometer .track {
  height:180px;
  top:10px;
  width:20px;
  border: 1px solid #aaa;
  position: relative;
  margin:0 auto;
  background: rgb(255,255,255);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
  background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:      -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:     -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:    -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background:   linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
  background-position: 0 -1px;
  background-size: 100% 5%;
}


/* The progress indicator (the mercury, if you will) */
.thermometer .progress {
  margin: 0;
  height:0%;
  width:100%;
  /*background: rgb(20,100,20);*/
  /*background: rgba(20,100,20,0.6);*/
  /*background: #aac961e0;*/
  background: rgba(var(--bs-success-rgb), 0.85);
  position: absolute;
  bottom:0;
  left:0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}


/* let's position the goal */
.thermometer .goal {
  display: none;
  /*position:absolute;
  top:0;*/
}


/* just style the amounts a little bit */
.thermometer .amount {
  display: inline-block;
  padding:0 5px 0 60px;
  border-top:1px solid black;
  /*font-family: Trebuchet MS;*/
  font-weight: bold;
  color:#333;
}


/* make sure the progress amount appears on the left side,
    this way they progress and goal amounts won't overlap should we reach 100% (or greater) */
.thermometer .progress .amount {
  display: none!important;
  padding:0 60px 0 5px;
  position: absolute;
  border-top:1px solid #2e2e2e30;
  color:#2e2e2e;
  right:0;
}
.thermometer .amount-2 {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 5px;
}