OwlCyberSecurity - MANAGER

Edit File: _progressbar.scss

.progressbar {
  @include rem(margin, $base-spacing-unit 0);
  @include scale(1);

&.is-visible .progressbar__tooltip {
    @include opacity(1);
  }
}

.progressbar__title {
      @include rem(margin-bottom, $base-spacing-unit/2);
      @include rem(font-size, 15px);
      font-family: "Josefin Slab", serif;
      font-weight: bold;
      text-transform: uppercase;
      color:$dark;
    }

.progressbar__bar {
      position: relative;
      width: 100%;
      @include rem(height, 14px);
      border-bottom: 1px dotted black;
    }

.progressbar__progress {
          background-color: $accent-color;
          position: absolute;
          top: 0; left: 0;
          width:0; 
          @include rem(height, 12px);
          @include transition(all 1s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000));
        }

.progressbar__tooltip {
              @include rem(font-size, 14px);
              @include rem(width, 56px);
              position: absolute;
              @include rem(top, -4px); 
              @include rem(right, -55px);
              @include transition(opacity .3s 1.4s ease-in);
              @include opacity(0);

font-family: "Josefin Slab", serif;
              font-weight:800;
              color: $dark;
              text-align: center;
              letter-spacing:1px;
              z-index: 10;  
              display: block;
            }

.progressbar__marker {
          position: absolute;
          top: 0; left: 0;
          @include rem(height, 13px);
        }