// Styles for Ultimeter meters

// Ultimeter colors

$orange: #f6a500;

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;

// Small devices only
@mixin so {
  @media (max-width: #{$screen-sm-min}) {
    @content;
  }
}

// Small devices
@mixin sm {
  @media (min-width: #{$screen-sm-min}) {
    @content;
  }
}

// Medium devices down
@mixin mo {
  @media (max-width: #{$screen-md-min}) {
    @content;
  }
}

// Medium devices
@mixin md {
  @media (min-width: #{$screen-md-min}) {
    @content;
  }
}

// Large devices
@mixin lg {
  @media (min-width: #{$screen-lg-min}) {
    @content;
  }
}

// Extra large devices
@mixin xl {
  @media (min-width: #{$screen-xl-min}) {
    @content;
  }
}

// Custom devices
@mixin rwd($screen) {
  @media (min-width: $screen+'px') {
    @content;
  }
}

// Metabox sizing
@mixin meta {
  @media (max-width: 550px), only screen and (min-width: 851px) and (max-width: 1025px) {
    @content;
  }
}

/** Start 2023 Rebuild ************************************************************************************************/

.ultimeter-container {
  display: flex;
  width: 100%;

  .ultimeter-confetti{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    display: block;
    margin: 0 auto;
    user-select: none;
    z-index: 999;
  }

  &.ultimeter_align_left {
    justify-content: start;
  }

  &.ultimeter_align_center {
    justify-content: center;
  }

  &.ultimeter_align_right {
    justify-content: end;
  }

  &.scalable {
    .ultimeter {
      width: 400px;
    }
  }

  &.infinite {
    display: inline;

    .ultimeter {
      display: flex;

      .basic {
        flex-direction: column;
        align-items: center;
      }
    }

    &.ultimeter_align_left {
      .ultimeter {
        justify-content: start;
      }
    }

    &.ultimeter_align_center {
      .ultimeter {
        justify-content: center;
      }
    }

    &.ultimeter_align_right {
      .ultimeter {
        justify-content: end;
      }
    }
  }

  &.progressbar {

    .ultimeter-confetti{
      top: -150px;
    }

    .ultimeter {
      width: 100%;
    }
  }

  &.radial {
    .progress-value {
      .current-label {
        display: flex;
        flex-direction: column;
        gap: 5px;

        .formatted-current {
          font-size: 36px;
        }

        span {
          margin: 0;
        }
      }
    }
  }

  &.verticalprogress {

    .ultimeter {
      min-height: 600px;
      display: flex;

      .outer {
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        height: 100%;
        border-radius: 100px;
        z-index: 5;

        .inner {
          width: 60px;
          border-radius: 100px;
          min-width: 60px;
          min-height: 60px;
        }
      }

      .left {
        display: flex;
        align-items: end;
        margin-right: -30px;

        .ultimeter_meter_amount {
          padding-right: 40px;
          border-top: 1px solid;
          height: 0%;
        }
      }


      .right {
        position: relative;
        margin-left: -30px;

        .ultimeter_meter_amount {
          padding-left: 40px;
          border-top: 1px solid;
        }

        .ultimeter_milestone {
          position: absolute;
          border-bottom: 1px solid;
          white-space: nowrap;
          padding-left: 40px;
          z-index: 0;
        }
      }
    }

    &.medium {

      .ultimeter {
        min-height: 400px;

        .outer {
          width: 40px;

          .inner {
            width: 40px;
            min-width: 40px;
            min-height: 40px;
          }
        }

        .left {
          margin-right: -20px;

          .ultimeter_meter_amount {
            padding-right: 30px;
          }
        }

        .right {
          margin-left: -20px;

          .ultimeter_meter_amount, .ultimeter_milestone {
            padding-left: 30px;
          }
        }
      }

      @include so {
        .ultimeter {
          min-height: 200px;

          .outer {
            width: 20px;

            .inner {
              width: 20px;
              min-width: 20px;
              min-height: 20px;
            }
          }

          .left {
            margin-right: -10px;

            .ultimeter_meter_amount {
              padding-right: 20px;
            }
          }

          .right {
            margin-left: -10px;

            .ultimeter_meter_amount, .ultimeter_milestone {
              padding-left: 20px;
            }
          }
        }
      }

    }

    &.small {
      .ultimeter {
        min-height: 200px;

        .outer {
          width: 20px;

          .inner {
            width: 20px;
            min-width: 20px;
            min-height: 20px;
          }
        }

        .left {
          margin-right: -10px;

          .ultimeter_meter_amount {
            padding-right: 20px;
          }
        }

        .right {
          margin-left: -10px;

          .ultimeter_meter_amount, .ultimeter_milestone {
            padding-left: 20px;
          }
        }
      }
    }

    @include so {
      .ultimeter {
        min-height: 200px;

        .outer {
          width: 20px;

          .inner {
            width: 20px;
            min-width: 20px;
            min-height: 20px;
          }
        }

        .left {
          margin-right: -10px;

          .ultimeter_meter_amount {
            padding-right: 20px;
          }
        }

        .right {
          margin-left: -10px;

          .ultimeter_meter_amount, .ultimeter_milestone {
            padding-left: 20px;
          }
        }
      }
    }




  }



  // Individual Meter Styles
  .ultimeter_thermometer {
    display: block;
    margin: 0 auto;
    position: relative;

    .ultimeter_thermometer_tube_topper {
      height: 25px;
      width: 50px;
      border-radius: 100px 100px 0px 0px;
      background: #eee;
      margin: 0 auto;
    }

    .ultimeter_meter_progress {
      height: 0%;
      width: 60%;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
      z-index: 5;

      .ultimeter_meter_amount {
        padding: 0 60px 0 5px;
        vertical-align: top;
        position: absolute;
        border-top: 1px solid #060;
        color: #060;
        right: 0;
      }
    }

    .ultimeter_thermometer_tube {
      height: 400px;
      width: 50px;
      margin: auto;
      position: relative;

      .ultimeter_thermometer_tube_scale {
        background: linear-gradient(to bottom, black 0%, rgba(255, 255, 255, 0) 10%);
        background-position: 0 -2px;
        background-size: 100% 5%;
        height: 380px;
        position: absolute;
        width: 30%;
        left: 70%;
        top: 0px;
      }

      .ultimeter_meter_goal {
        position: absolute;
        left: 40px;

        .ultimeter_meter_amount {
          display: inline-block;
          vertical-align: top;
          padding: 0 5px 0 30px;
          border-top: 1px solid black;
          color: #333;
          text-align: right;
        }

      }

      .ultimeter_milestone {
        position: absolute;
        padding: 0 5px 0 30px;
        border-bottom: 1px dotted black;
        color: #333;
        white-space: nowrap;
        left: 35px;
        font-size: 12px
      }

    }

    .ultimeter_thermometer_bulb {
      height: 100px;
      border-radius: 100px;
      width: 100px;
      background: #eee;
      position: relative;
      top: -15px;
      margin: 0 auto;

      .ultimeter_thermometer_bulb_mercury {
        width: 80px;
        height: 80px;
        border-radius: 100px;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
      }
    }

    &.medium {

      .ultimeter_thermometer_tube_topper {
        height: 20px;
        width: 37.5px;
      }

      .ultimeter_thermometer_tube {
        height: 300px;
        width: 37.5px;

        .ultimeter_thermometer_tube_scale {
          height: 285px;
        }

        .ultimeter_meter_goal {
          left: 37.5px;
        }

        .ultimeter_milestone {
          left: 26px;
        }
      }

      .ultimeter_thermometer_bulb {
        width: 75px;
        height: 75px;
        top: -10px;

        .ultimeter_thermometer_bulb_mercury {
          width: 60px;
          height: 60px;
        }
      }
    }

    &.small {

      .ultimeter_thermometer_tube_topper {
        height: 15px;
        width: 25px;
      }

      .ultimeter_thermometer_tube {
        height: 200px;
        width: 25px;

        .ultimeter_thermometer_tube_scale {
          height: 200px;
        }

        .ultimeter_meter_goal {
          left: 25px;
        }

        .ultimeter_milestone {
          left: 17px;
          font-size: 0.75rem;
        }

        .ultimeter_meter_progress {

          .ultimeter_meter_amount {
            padding-right: 40px;
          }
        }

        .ultimeter_meter_amount {
          font-size: 0.8rem;
        }
      }

      .ultimeter_thermometer_bulb {
        width: 50px;
        height: 50px;
        top: -7px;

        .ultimeter_thermometer_bulb_mercury {
          width: 40px;
          height: 40px;
        }
      }

    }

    &.responsive {
      width: 100%;
      min-height: 200px;
      height: 400px;

      display: flex;
      align-items: center;
      flex-direction: column;

      .ultimeter_thermometer_tube_topper {
        background: #eee;
        height: 10%;
        border-top-left-radius: 250px;
        border-top-right-radius: 250px;
      }

      .ultimeter_meter_goal {
        position: absolute;
        top: 0px;
        left: 80%;

        .ultimeter_meter_amount {
          display: inline-block;
          padding: 0 5px 0 30px;
          color: #333;
          text-align: right;
        }

      }

      .ultimeter_meter_progress {
        height: 0%;
        max-height: 380px;
        width: 60%;
        z-index: 5;
        position: absolute;
        bottom: 0;

        .ultimeter_meter_amount {
          padding: 0 60px 0 5px;
          position: absolute;
          border-top: 1px solid #060;
          color: #060;
          right: 0;
        }
      }

      .ultimeter_thermometer_tube {
        height: 80%;
        background: #eee;
        position: relative;
        display: flex;
        align-items: end;
        justify-content: center;

        .ultimeter_thermometer_tube_scale {
          background: linear-gradient(to bottom, black 0%, rgba(255, 255, 255, 0) 10%);
          background-position: 0 4%;
          background-size: 100% 5%;
          height: 100%;
          position: absolute;
          width: 30%;
          left: 70%;
        }
      }

      .ultimeter_milestone {
        position: absolute;
        padding: 0 5px 0 60px;
        border-bottom: 1px dotted black;
        color: #333;
        white-space: nowrap;
        left: 0;
        font-size: 12px
      }

      .ultimeter_thermometer_bulb {
        border-radius: 100px;
        background: #eee;
        position: relative;
        top: -4%;
        display: flex;
        justify-content: center;
        align-items: center;

        &:after {
          content: "";
          padding-bottom: 100%;
          display: block;
        }

        .ultimeter_thermometer_bulb_mercury {
          width: 80%;
          height: 80%;
          border-radius: 100px;
          z-index: 15;
          position: absolute;
        }

      }
    }
  }

  // Style Packs
  &.sp-ultimeter {
    .primary-color {
      color: #f5d62f;
      background-color: #f5d62f;
      border-color: #f5d62f;
    }

    .secondary-color {
      color: #000000;
      background-color: #000000;
      border-color: #000000;
    }

    &.infinite, &.custom, &.radial {
      .primary-color, .secondary-color {
        background: none;
      }
    }

    .ultimeter_thermometer {
      .ultimeter_thermometer_tube {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }

      .ultimeter_thermometer_tube_topper {
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        top: 3px;
        position: absolute;
      }

      .ultimeter_meter_progress {
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
      }

      .ultimeter_thermometer_bulb_mercury {
        background: #f5d62f !important;
        background-color: #f5d62f !important;
      }

      .ultimeter_meter_amount {
        color: #000000;
        border-color: #000000;
      }
    }

    &.progressbar {
      .ultimeter_progressbar_outer {
        box-shadow: none;

        .ultimeter_progressbar_progress {
          box-shadow: none;
        }
      }
    }
  }
}



/** End 2023 Rebuild **************************************************************************************************/

// Generic styles

.ultimeter-percentage {
  &:after {
    content: "%";
  }
}

.ultimeter_meter {
  display: flex;
  margin-bottom: 20px;
  word-break: normal;
  position: relative;

  @media (max-width: 640px) {
    font-size: 12px;
  }
}

.ultimeter_meter_amount {
  word-break: normal;
  width: max-content;
}

.ultimeter_meter_container {
  // overflow: hidden;
}

// Styles for thermometer meter type

//.ultimeter_thermometer {
//  width: 100px;
//  display: block;
//  margin-left: 100px;
//
//  .ultimeter_meter_goal {
//    position: absolute;
//    top: 20px;
//    left: 50px;
//
//    .ultimeter_meter_amount {
//      display: inline-block;
//      padding: 0 5px 0 30px;
//      border-top: 1px solid black;
//      color: #333;
//      text-align: right;
//    }
//
//  }
//}
//
//.ultimeter_thermometer .ultimeter_meter_progress {
//  height: 0%;
//  max-height: 380px;
//  width: 60%;
//  position: absolute;
//  bottom: 0;
//  left: 10px;
//  z-index: 5;
//
//  .ultimeter_meter_amount {
//    padding: 0 60px 0 5px;
//    position: absolute;
//    border-top: 1px solid #060;
//    color: #060;
//    right: 0;
//  }
//}
//
//.ultimeter_thermometer_tube {
//  height: 400px;
//  border-radius: 100px 100px 0 0;
//  width: 50px;
//  background: #eee;
//  margin: auto;
//  position: relative;
//
//  .ultimeter_thermometer_tube_scale {
//    background: linear-gradient(to bottom, black 0%, rgba(255, 255, 255, 0) 10%);
//    background-position: 0 -2px;
//    background-size: 100% 5%;
//    height: 380px;
//    position: absolute;
//    width: 30%;
//    top: 20px;
//    left: 70%;
//  }
//
//  .ultimeter_milestone {
//    position: absolute;
//    padding: 0 5px 0 30px;
//    border-bottom: 1px dotted black;
//    color: #333;
//    white-space: nowrap;
//    left: 35px;
//    font-size: 12px
//  }
//
//}
//
//.ultimeter_thermometer_bulb {
//  height: 100px;
//  border-radius: 100px;
//  width: 100px;
//  background: #eee;
//  position: relative;
//  top: -15px;
//
//  .ultimeter_thermometer_bulb_mercury {
//    width: 80px;
//    height: 80px;
//    border-radius: 100px;
//    position: relative;
//    top: 10px;
//    left: 10px;
//
//  }
//
//}

// Styles for the Ultfetti effect

.ultfetti {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  height: 100%;
  z-index: 999;
}

// Styles for thermometer2020 meter type

.ultimeter_thermometer_2020 {
  display: block;
  margin: 0 auto;
  position: relative;

  .ultimeter_thermometer_tube_topper {
    height: 25px;
    width: 50px;
    border-radius: 100px 100px 0px 0px;
    background: #eee;
    margin: 0 auto;
  }


  .ultimeter_meter_progress {
    height: 0%;
    width: 60%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 5;

    .ultimeter_meter_amount {
      padding: 0 60px 0 5px;
      vertical-align: top;
      position: absolute;
      border-top: 1px solid #060;
      color: #060;
      right: 0;
    }
  }

  .ultimeter_thermometer_tube {
    height: 400px;
    width: 50px;
    background: #eee;
    margin: auto;
    position: relative;
    border-radius: 0px;

    .ultimeter_thermometer_tube_scale {
      background: linear-gradient(to bottom, black 0%, rgba(255, 255, 255, 0) 10%);
      background-position: 0 -2px;
      background-size: 100% 5%;
      height: 380px;
      position: absolute;
      width: 30%;
      left: 70%;
      top: 0px;
    }

    .ultimeter_meter_goal {
      position: absolute;
      left: 50px;

      .ultimeter_meter_amount {
        display: inline-block;
        vertical-align: top;
        padding: 0 5px 0 30px;
        border-top: 1px solid black;
        color: #333;
        text-align: right;
      }

    }

    .ultimeter_milestone {
      position: absolute;
      padding: 0 5px 0 30px;
      border-bottom: 1px dotted black;
      color: #333;
      white-space: nowrap;
      left: 35px;
      font-size: 12px
    }

  }

  .ultimeter_thermometer_bulb {
    height: 100px;
    border-radius: 100px;
    width: 100px;
    background: #eee;
    position: relative;
    top: -15px;
    margin: 0 auto;

    .ultimeter_thermometer_bulb_mercury {
      width: 80px;
      height: 80px;
      border-radius: 100px;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }
  }

  &.ultimeter_thermometer_2020_medium {

    .ultimeter_thermometer_tube_topper {
      height: 20px;
      width: 37.5px;
    }

    .ultimeter_thermometer_tube {
      height: 300px;
      width: 37.5px;

      .ultimeter_thermometer_tube_scale {
        height: 285px;
      }

      .ultimeter_meter_goal {
        left: 37.5px;
      }

      .ultimeter_milestone {
        left: 26px;
      }
    }

    .ultimeter_thermometer_bulb {
      width: 75px;
      height: 75px;
      top: -10px;

      .ultimeter_thermometer_bulb_mercury {
        width: 60px;
        height: 60px;
      }
    }
  }

  &.ultimeter_thermometer_2020_small {

    .ultimeter_thermometer_tube_topper {
      height: 15px;
      width: 25px;
    }

    .ultimeter_thermometer_tube {
      height: 200px;
      width: 25px;

      .ultimeter_thermometer_tube_scale {
        height: 200px;
      }

      .ultimeter_meter_goal {
        left: 25px;
      }

      .ultimeter_milestone {
        left: 17px;
        font-size: 0.75rem;
      }

      .ultimeter_meter_progress {

        .ultimeter_meter_amount {
          padding-right: 40px;
        }
      }

      .ultimeter_meter_amount {
        font-size: 0.8rem;
      }
    }

    .ultimeter_thermometer_bulb {
      width: 50px;
      height: 50px;
      top: -7px;

      .ultimeter_thermometer_bulb_mercury {
        width: 40px;
        height: 40px;
      }
    }

  }
}

// Styles for the basictrack Ultimeter

.ultimeter_basictrack_outer {
  width: 70px;
  height: 300px;
  position: relative;
  background: #ddd;
  border: 1px solid #aaa;
  border-radius: 12px;
  box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
  margin: 0 auto;
}

.ultimeter_basictrack_inner {
  height: 280px;
  top: 10px;
  width: 20px;
  border: 1px solid #aaa;
  position: relative;
  margin: 0 auto;
  background: rgb(255, 255, 255);
  background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
  background-position: 0 -1px;
  background-size: 100% 5.4%;

  .ultimeter_milestone {
    position: absolute;
    padding: 0 5px 0 60px;
    border-bottom: 1px dotted black;
    color: #333;
    white-space: nowrap;
    font-size: 12px
  }
}

.ultimeter_basictrack_progress {
  height: 0%;
  width: 100%;
  opacity: 0.6;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ultimeter_basictrack_goal {
  position: absolute;
  top: 0;

}

.ultimeter_basictrack_amount {
  display: inline-block;
  padding: 0 5px 0 60px;
  border-top: 1px solid black;
  color: #333;
}

.ultimeter_basictrack_progress .ultimeter_basictrack_amount {
  padding: 0 60px 0 5px;
  position: absolute;
  border-top: 1px solid #060;
  color: #060;
  right: 0;
}

/**
* Styles for thermometer type (scalable)
*/

.ultimeter_thermometer_scalable {

  width: 100%;
  min-height: 200px;
  height: 400px;

  display: flex;
  align-items: center;
  flex-direction: column;

  .ultimeter_meter_goal {
    position: absolute;
    top: 0px;
    left: 80%;

    .ultimeter_meter_amount {
      display: inline-block;
      padding: 0 5px 0 30px;
      color: #333;
      text-align: right;
      border-top: 1px solid;
    }

  }
}

.ultimeter_thermometer_scalable_cap {
  width: 10%;
  background: #eee;
  height: 10%;
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
}

.ultimeter_thermometer_scalable .ultimeter_meter_progress {
  height: 0%;
  max-height: 380px;
  width: 60%;
  z-index: 5;
  position: absolute;
  bottom: 0;

  .ultimeter_meter_amount {
    padding: 0 60px 0 5px;
    position: absolute;
    border-top: 1px solid #060;
    color: #060;
    right: 0;
  }
}

.ultimeter_thermometer_scalable_tube {
  height: 80%;
  width: 10%;
  background: #eee;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;

  .ultimeter_thermometer_scalable_tube_scale {
    background: linear-gradient(to bottom, black 0%, rgba(255, 255, 255, 0) 10%);
    background-position: 0 4%;
    background-size: 100% 5%;
    height: 100%;
    position: absolute;
    width: 30%;
    left: 70%;
  }

  .ultimeter_milestone {
    position: absolute;
    padding: 0 5px 0 60px;
    border-bottom: 1px dotted black;
    color: #333;
    white-space: nowrap;
    left: 0;
    font-size: 12px
  }

}

.ultimeter_thermometer_scalable_bulb {
  border-radius: 100px;
  width: 20%;
  background: #eee;
  position: relative;
  top: -4%;
  display: flex;
  justify-content: center;
  align-items: center;

  &:after {
    content: "";
    padding-bottom: 100%;
    display: block;
  }

  .ultimeter_thermometer_scalable_bulb_mercury {
    width: 80%;
    height: 80%;
    border-radius: 100px;
    z-index: 15;
    position: absolute;
  }

}


/**
* Styles for progress bar types
*/

.ultimeter_progressbar {
  margin-bottom: 80px;
  flex-direction: column;
}

.ultimeter_progressbar_outer {
  // width: 400px;
  // max-width: 80%;
  height: 22px;
  border-radius: 10px;
  box-shadow: 0 -1px 1px #c0bfbc inset;
  position: relative;

  .ultimeter_milestone {
    position: absolute;
    padding: 50px 0px 0px 5px;
    border-left: 1px dotted black;
    color: #333;
    width: 110px;
    font-size: 12px
  }
}

.ultimeter_progressbar_progress {
  height: 100%;
  color: #fff;
  text-align: right;
  line-height: 22px;
  width: 0;
  border-radius: 9px;
  box-shadow: 0 2px 2px #333;
  position: absolute;
  top: 0px;
}

.ultimeter_progressbar_goal .ultimeter_progressbar_amount {
  color: #333;
  float: right;
  // position: absolute;
  // right: -60px;
  line-height: 22px;
  //display: none;
}

.ultimeter_progressbar_progress .ultimeter_progressbar_amount {
  color: #333;
  position: absolute;
  top: 30px;
  text-align: left;
}

.ultimeter_progressbar_total_amount {
  margin-left: 5px;
}

.ultimeter_progressbar.ultimeter_progressbar_icon {
  .ultimeter_progressbar_outer {
    box-shadow: none;
    height: 64px;

    .ultimeter_milestone {
      padding-top: 65px;
    }
  }

  .ultimeter_progressbar_progress {
    height: 5px;
    overflow: visible !important;
    margin-top: 29.5px;
    background-size: calc( 100% - 64px ) !important;
    box-shadow: none;

    img {
      height: 64px;
      max-height: 64px;
      min-width: 64px;
      z-index: 999;
      margin-top: -29.5px;
      display: inline;
    }

    .progressbar-fontawesome {
      font-size: 40px;
      margin-top: -16px;
    }

    .ultimeter_progressbar_amount {
      margin-top: 10px;
    }
  }
}

/**
* Styles for radial types
*/

//styling
$borderWidth: 20px;
$animationTime: 1.5s;
$border-color-default: #eee;
$border-color-fill: #ffb43e;
$size: 300px;

.ultimeter-container.radial.sp-ultimeter {
  .ultimeter_radial {
    &:after {
      border: 40px solid #000;
    }

    .progress-bar {
      border-width: 40px;
    }

    .progress-value {
      .current-label {
        gap: 10px;

        .calculated {
          font-size: 48px;
          font-weight: 700;
        }
      }
    }
  }
}



.ultimeter_radial {
  width: $size;
  height: $size;
  line-height: $size;
  display: block;
  background: none;
  margin: 10px auto;
  box-shadow: none;
  position: relative;

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: $borderWidth solid $border-color-default;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }

  > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .progress-left {
    left: 0;
  }

  .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: $borderWidth;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: $border-color-fill;
    box-sizing: border-box;
  }

  .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: ($size/2);;
    border-bottom-right-radius: ($size/2);;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    //animation: loading-2 1.5s linear forwards 1.8s;
  }

  .progress-right {
    right: 0;

    .progress-bar {
      left: -100%;
      border-top-left-radius: ($size/2);;
      border-bottom-left-radius: ($size/2);;
      border-right: 0;
      -webkit-transform-origin: center right;
      transform-origin: center right;
      //animation: loading-1 1.8s linear forwards;
    }
  }

  .progress-value {
    display: flex;
    flex-direction: column;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 300;
    padding: $borderWidth;

    div {
      margin-top: 10px;
    }
  }
}

/* This for loop creates the 	necessary css animation names
Due to the split circle of progress-left and progress right, we must use the animations on each side.
*/
@for $i from 1 through 100 {
  $stepName: ($i*(100 / 100));

  //animation only the left side if below 50%
  @if $i <= 50 {
    .ultimeter_radial[data-percentage="#{$stepName}"] {
      .progress-right .progress-bar {
        animation: loading-#{$i} $animationTime linear forwards;
      }

      .progress-left .progress-bar {
        animation: 0;
      }
    }
  }
  //animation only the right side if above 50%
  @if $i > 50 {
    .ultimeter_radial[data-percentage="#{$stepName}"] {
      .progress-right .progress-bar {
        animation: loading-#{(100/2)} $animationTime linear forwards; //set the animation to longest animation
      }

      .progress-left .progress-bar {
        animation: loading-#{$i - (100/2)} $animationTime linear forwards $animationTime;
      }
    }
  }
}

//animation
@for $i from 1 through 50 {
  $degrees: (180/50);
  $degrees: ($degrees*$i);
  @keyframes loading-#{$i}{
    0% {
      // -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      // -webkit-transform: rotate($degrees);
      transform: rotate(#{$degrees}deg);
    }
  }
}

/* Styles for the custom meters */

.ultimeter-custom {
  display: flex;
  flex-direction: column;
  align-items: center;

  .loadgo-overlay {
    z-index: 1;
  }
}

.ultimeter-counter-custom {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}

/* Styles for Infinite Meters */

.ultimeter_infinite_basic {

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ultimeter_infinite_flip {

  font-size: 2rem;
  white-space: nowrap;
  font-family: arial, sans-serif;

  .tick-flip, .tick-text-inline {
    font-size: 2.5em;
  }

  .tick-label {
    margin-top: 1em;
    font-size: 1em;
  }

  .tick-char {
    width: 1.5em;
  }

  .tick-text-inline {
    display: inline-block;
    text-align: center;
    min-width: 1em;
  }

  .tick-text-inline + .tick-text-inline {
    margin-left: -.325em;
  }

  .tick-group {
    margin: 0 .5em;
    text-align: center;
  }

  .tick-text-inline {
    color: #595d63 !important;
  }

  .tick-label {
    color: #595d63 !important;
  }

  .tick-flip-panel {
    color: #fff !important;
  }

  .tick-flip-panel-text-wrapper {
    line-height: 1.45 !important;
  }

  .tick-flip-panel {
    background-color: #3c3e3c !important;
  }

  .tick-flip {
    border-radius: 0.12em !important;
  }
}