.pbar-6310-template-preview-11-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background-image: url(https://images.pexels.com/photos/3608311/pexels-photo-3608311.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
.pbar-6310-template-preview-11-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-11-common-overlay iframe {
  position: absolute !important;
  top: -100%;
  left: 0;
  width: 120%;
  height: 300%;
  pointer-events: none;
  opacity: .7;
  position: relative;
}
.pbar-6310-template-preview-11{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-11-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 0 0 20px;
}
.pbar-6310-template-preview-11-wrapper{
  height: 20px;
  background: #f0f0f0;
  border-width: 8px 0;
  border-style: solid none;
  border-color: #000;
  border-radius: 30px;
  margin-bottom: 30px;
  box-shadow: none;
  overflow: visible;
  position: relative;
}
.pbar-6310-template-preview-11-bar{
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  position: relative;
  animation: animate-progress-preview-11 1s;
}
 .pbar-6310-template-preview-11-bar:before{
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #000;
  background: #f0f0f0;
  position: absolute;
  top: -14px;
  right: 0;
}
@-webkit-keyframes animate-progress-preview-11{
  0%{ width: 0; }
}
@keyframes animate-progress-preview-11{
  0%{ width: 0; }
}


/* template 12 */
.pbar-6310-template-preview-12-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  /* background-image: url(https://images.pexels.com/photos/3608311/pexels-photo-3608311.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); */
}
.pbar-6310-template-preview-12-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgb(219 219 219);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-12{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-12-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  text-transform: uppercase;
  margin: 0 0 15px;
}
.pbar-6310-template-preview-12-wrapper{
  height: 5px;
  background: rgb(255, 255, 255);
  border-radius: 0;
  margin-bottom: 15px;
  overflow: visible;
  box-shadow: none;
}
.pbar-6310-template-preview-12-bar{
  box-shadow: none;
  border-bottom: 4px dotted #ff1140;
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive-preview-12 2s;
  animation: animate-positive-preview-12 2s;
}
 .pbar-6310-template-preview-12-bar:before{
  content: "";
  border-bottom: 20px solid #ff1140;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: absolute;
  bottom: -4px;
  right: -4px;
}
 .pbar-6310-template-preview-12-value{
  font-size: 17px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  position: absolute;
  top: -33px;
  right: 0;
}
.pbar-6310-template-preview-12-wrapper.yellow .pbar-6310-template-preview-12-bar,
.pbar-6310-template-preview-12-wrapper.yellow .pbar-6310-template-preview-12-bar:before{ border-bottom-color: #fec100; }
.pbar-6310-template-preview-12-wrapper.purple .pbar-6310-template-preview-12-bar,
.pbar-6310-template-preview-12-wrapper.purple .pbar-6310-template-preview-12-bar:before{ border-bottom-color: #663399; }
.pbar-6310-template-preview-12-wrapper.green .pbar-6310-template-preview-12-bar,.pbar-6310-template-preview-12-wrappers.green 
.pbar-6310-template-preview-12-bar:before{ border-bottom-color: #0ead69; }
@-webkit-keyframes animate-positive-preview-12{
  0%{ width: 0; }
}
@keyframes animate-positive-preview-12{
  0%{ width: 0; }
}


/* template 13 */
.pbar-6310-template-preview-13-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  /* background-image: url(https://images.pexels.com/photos/3608311/pexels-photo-3608311.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); */
}
.pbar-6310-template-preview-13-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgb(219 219 219);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-13{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-13-title{
  font-size: 18px;
  font-weight: 700;
  color: #1d1818;
  text-transform: uppercase;
  margin: 0 0 15px;
}
.pbar-6310-template-preview-13-wrapper{
  height: 4px;
  background: #fff;
  border-radius: 0;
  margin-bottom: 30px;
  overflow: visible;
  box-shadow: none;
}
.pbar-6310-template-preview-13-bar{
  background: #fff;
  box-shadow: none;
  border-bottom: 4px solid #ff1140;
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive-preview-13 2s;
  animation: animate-positive-preview-13 2s;
}
 .pbar-6310-template-preview-13-value{
  font-size: 12px;
  font-weight: 700;
  color: rgb(90 90 90);
  position: absolute;
  top: -20px;
  right: 0;
}
.pbar-6310-template-preview-13-wrapper.yellow .pbar-6310-template-preview-13-bar,
.pbar-6310-template-preview-13-wrapper.yellow .pbar-6310-template-preview-13-bar:before{ border-bottom-color: #fec100; }
.pbar-6310-template-preview-13-wrapper.purple .pbar-6310-template-preview-13-bar,
.pbar-6310-template-preview-13-wrapper.purple .pbar-6310-template-preview-13-bar:before{ border-bottom-color: #663399; }
.pbar-6310-template-preview-13-wrapper.green .pbar-6310-template-preview-13-bar,.pbar-6310-template-preview-13-wrappers.green 
.pbar-6310-template-preview-13-bar:before{ border-bottom-color: #0ead69; }
@-webkit-keyframes animate-positive-preview-13{
  0%{ width: 0; }
}
@keyframes animate-positive-preview-13{
  0%{ width: 0; }
}

/* template 14 start */
.pbar-6310-template-preview-14-outer:nth-child(n){  
  background: transparent;
  border: 5px solid #bebfbf;
  padding: 10px;
  border-radius: 40px;
  margin-bottom: 10px;
}
.pbar-6310-template-preview-14-bar-striped:nth-child( 1n +1 ){  
  background-color: #0a4d94;
}

.pbar-6310-template-preview-14-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background-image: url(https://images.pexels.com/photos/3608311/pexels-photo-3608311.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);}

.pbar-6310-template-preview-14-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-14-common-overlay iframe {
  position: absolute !important;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  pointer-events: none;
  opacity: .7;
  position: relative;
}
.pbar-6310-template-preview-14 {
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-14-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 0 0 10px;
}
.pbar-6310-template-preview-14-title-data {
  font-size: 14px;
  color: #bebfbf;
}
.pbar-6310-template-outer {
  background: transparent;
  padding: 5px 60px 5px 5px; 
  border-radius: 45px;
  margin-bottom: 20px;
  position: relative;
  border: 5px solid #bebfbf; 
}
.pbar-6310-template-preview-14-wrapper{
  background: transparent;
  margin: 0;
  height: 20px;
  overflow: hidden;
  background-color: transparent;
  border-radius: 28px;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}
.pbar-6310-template-preview-14-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 31px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
}
.pbar-6310-template-preview-14-bar-striped, .pbar-6310-template-preview-14-bar {
  background-image: -webkit-linear-gradient(
45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image: linear-gradient(
45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}
.pbar-6310-template-preview-14-bar{
  border-radius: 20px;
  box-shadow: none;
  animation: animate-positive 2s;
}
.pbar-6310-template-preview-14-value{
  font-size: 20px;
  font-weight: 700;
  color: #6b7880;
  position: absolute;
  right: 20px;
}
@keyframes animate-positive{
  0%{ width: 0; }
}

/* template 15 */
.pbar-6310-template-preview-15-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background-image: url(https://files.wallpaperpass.com/2019/09/8k%20wallpaper%20041%20-%205120x2880.jpg);
}
.pbar-6310-template-preview-15-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: #000000ad;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-15{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-15-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  margin: 0 0 15px;
}
.pbar-6310-template-preview-15-wrapper{
  height: 15px;
  background: #fff;
  border-radius: 0;
  margin-bottom: 15px;
  overflow: visible;
  box-shadow: none;
}
.pbar-6310-template-preview-15-bar{
  background: #fff;
  box-shadow: none;
  border-bottom: 15px solid #ff1140;
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive-preview-15 2s;
  animation: animate-positive-preview-15 2s;
}
 .pbar-6310-template-preview-15-bar:before{
  content: "";
  border-bottom: 20px solid #ff1140;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: absolute;
  bottom: -4px;
  right: 0px;
}
 .pbar-6310-template-preview-15-value{
  font-size: 17px;
  font-weight: 700;
  color: rgb(221, 221, 221);
  position: absolute;
  top: -33px;
  right: 0;
}
.pbar-6310-template-preview-15-wrapper.yellow .pbar-6310-template-preview-15-bar,
.pbar-6310-template-preview-15-wrapper.yellow .pbar-6310-template-preview-15-bar:before{ border-bottom-color: #fec100; }
.pbar-6310-template-preview-15-wrapper.purple .pbar-6310-template-preview-15-bar,
.pbar-6310-template-preview-15-wrapper.purple .pbar-6310-template-preview-15-bar:before{ border-bottom-color: #663399; }
.pbar-6310-template-preview-15-wrapper.green .pbar-6310-template-preview-15-bar,.pbar-6310-template-preview-15-wrappers.green 
.pbar-6310-template-preview-15-bar:before{ border-bottom-color: #0ead69; }
@-webkit-keyframes animate-positive-preview-15{
  0%{ width: 0; }
}
@keyframes animate-positive-preview-15{
  0%{ width: 0; }
}


/* template 16 */
.pbar-6310-template-preview-16-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  /* background-image: url(https://files.wallpaperpass.com/2019/09/8k%20wallpaper%20041%20-%205120x2880.jpg); */
}
.pbar-6310-template-preview-16-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(219, 219, 219, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-16{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-16-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  text-transform: uppercase;
  margin: 0 0 15px;
}
.pbar-6310-template-preview-16-wrapper{
  height: 16px;
  background: #fff;
  border-radius: 0;
  margin-bottom: 15px;
  overflow: visible;
  box-shadow: none;
}
.pbar-6310-template-preview-16-bar{
  background: #fff;
  box-shadow: none;
  border-bottom: 16px solid rgb(16, 141, 166);
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive-preview-16 2s;
  animation: animate-positive-preview-16 2s;
}
 .pbar-6310-template-preview-16-bar:before{
  content: "";
  border-bottom: 16px solid rgb(16, 141, 166);
  border-left: 16px solid rgb(16, 141, 166);
  border-right: 16px solid #ffffff;
  position: absolute;
  bottom: -16px;
  right: -4px;
}
 .pbar-6310-template-preview-16-value{
  font-size: 16px;
  font-weight: 700;
  color: rgb(0, 1, 12);
  position: absolute;
  top: 0px;
  right: 8px;
}
@-webkit-keyframes animate-positive-preview-16{
  0%{ width: 0; }
}
@keyframes animate-positive-preview-16{
  0%{ width: 0; }
}


/* template 17 */
.pbar-6310-template-preview-17-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
  /* background-image: url(https://files.wallpaperpass.com/2019/09/8k%20wallpaper%20041%20-%205120x2880.jpg); */
}
.pbar-6310-template-preview-17-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(222, 222, 222, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-17{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-17-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.pbar-6310-template-preview-17-wrapper{
  height: 20px;
  background: rgb(255, 255, 255);
  border-radius: 0;
  margin-bottom: 15px;
  overflow: visible;
  box-shadow: none;
  border-radius: 10px;
}
.pbar-6310-template-preview-17-bar{
  box-shadow: none;
  border-bottom: 20px solid rgb(96, 125, 139);
  border-radius: 0;
  position: relative;
  border-radius: 10px;
  -webkit-animation: animate-positive-preview-16 2s;
  animation: animate-positive-preview-16 2s;
}

 .pbar-6310-template-preview-17-value{
  font-size: 16px;
  font-weight: 700;
  color: rgb(0, 1, 12);
  position: absolute;
  top: 0px;
  right: 8px;
}
@-webkit-keyframes animate-positive-preview-17{
  0%{ width: 0; }
}
@keyframes animate-positive-preview-17{
  0%{ width: 0; }
}

.pbar-6310-template-preview-18-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
}

.pbar-6310-template-preview-18-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgb(222 222 222);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pbar-6310-template-preview-18-common-overlay iframe {
  position: absolute !important;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  pointer-events: none;
  opacity: .7;
  position: relative;
}

.pbar-6310-template-preview-18 {
  float: left;
  width: calc(100% - 20px);
  margin: 10px 10px;
  position: relative;
  overflow: hidden;
}

.pbar-6310-template-preview-18-title {
  font-size: 14px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  letter-spacing: 2px; 
  background: #ff5722;
  height: 26px;
  line-height: 26px;
  padding: 0px 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1;
}

.pbar-6310-template-preview-18-wrapper {
  height: 26px;
  background: rgb(255 255 255 / 82%);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  border-radius: 40px;
  display: flex;
}

.pbar-6310-template-preview-18-bar {
  box-shadow: none;
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive-preview-18 2s;
  animation: animate-positive-preview-18 2s;
}

.pbar-6310-template-preview-18-bar-section {
  width: 100%;
}

.pbar-6310-template-preview-18-value {
  width: 50px;
  height: 100%;
  font-size: 15px;
  font-weight: 600;
  color: #686868;
  position: absolute;
  line-height: 27px;
  top: 0;
  right: 0;
  z-index: 1;
}

.pbar-6310-template-preview-18-bar:after {
  border-left-color: #337ab7;
}

.pbar-6310-template-preview-18-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #ff57228c;
  -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
}

.pbar-6310-template-preview-18-value:after {
  border-left: 13px solid #000;
}

@-webkit-keyframes animate-positive-preview-18 {
  0% {
    width: 0;
  }
}

@keyframes animate-positive-preview-18 {
  0% {
    width: 0;
  }
}

/* template 19  */

.pbar-6310-template-preview-19-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
}

.pbar-6310-template-preview-19-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(224, 224, 224, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-19-common-overlay iframe {
  position: absolute !important;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  pointer-events: none;
  opacity: .7;
  position: relative;
}
.pbar-6310-template-preview-19{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-19-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  margin: 0 0 15px;
}
.pbar-6310-template-preview-19-wrapper{
  height: 10px;
  background: #747474;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 15px;
  overflow: visible;
  position: relative;
}
.pbar-6310-template-preview-19-bar{
  border: 1px solid #000 !important;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  animation: animate-tem-19positive 2s;
  height: 100%;
  width:60%;
  background:#f80a0a;
  background-image: linear-gradient(
45deg,black 25%,transparent 25%,transparent 50%,black 50%,black 75%,transparent 75%,transparent) !important;
    background-size: 40px 40px !important;
  z-index: 1;
}

.pbar-6310-template-preview-19-bar:after{
  content: "";
  width: 20px;
  height: 20px;
  background: #000000;
  border: 6px double #fff;
  outline: 2px solid #000000;
  position: absolute;
  top: -6px;
  right: 0;
  box-sizing: border-box;
 transform: rotate(45deg);
}
.pbar-6310-template-preview-19 .pbar-6310-template-preview-19-bar:after{
  background: #f80a0a;
  outline: 2px solid #f80a0a;
}

@-webkit-keyframes animate-tem-19positive{
  0% { width: 0; }
}
@keyframes animate-tem-19positive{
  0% { width: 0; }
}


/* template 20  */
.pbar-6310-template-preview-20-parallax { 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 350px;
  overflow: hidden;
}

.pbar-6310-template-preview-20-common-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(224, 224, 224, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pbar-6310-template-preview-20-common-overlay iframe {
  position: absolute !important;
  top: -100%;
  left: 0;
  width: 100%;
  height: 300%;
  pointer-events: none;
  opacity: .7;
  position: relative;
}
.pbar-6310-template-preview-20{
  float: left;
  width: calc(100% - 20px);
  margin: 0 10px;
}
.pbar-6310-template-preview-20-title{
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  margin: 0 0 15px;
}
.pbar-6310-template-preview-20-wrapper{
  height: 10px;
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 15px;
  overflow: visible;
  position: relative;
}
.pbar-6310-template-preview-20-bar{
  border: 1px solid rgb(255, 0, 0) !important;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  animation: animate-tem-20positive 2s;
  height: 100%;
  width:60%;
  background: rgb(224, 29, 29);
  z-index: 1;
  background-image: linear-gradient(
45deg,rgb(255, 255, 255) 25%,transparent 25%,transparent 50%,rgb(255, 255, 255) 50%,rgb(255, 255, 255) 75%,transparent 75%,transparent) !important;
    background-size: 40px 40px !important;
}

.pbar-6310-template-preview-20-bar:after{
  content: "";
  width: 20px;
  height: 20px;
  background: #000000;
  border:  4px solid #fff;
  outline: 2px solid #000000;
  position: absolute;
  top: -6px;
  right: 0;
  box-sizing: border-box;
 transform: rotate(45deg);
}
.pbar-6310-template-preview-20-bar::before{
  content: "";
  width: 20px;
  height: 20px;
  background: #000000;
  border-left: 6px solid #fff;
  border-bottom: 6px solid #fff;
  outline: 2px solid #000000;
  position: absolute;
  top: -6px;
  right: 6px;
  box-sizing: border-box;
 transform: rotate(45deg);
}
.pbar-6310-template-preview-20 .pbar-6310-template-preview-20-bar:after{
  background: #f80a0a;
  outline: 2px solid #f80a0a;
}
.pbar-6310-template-preview-20 .pbar-6310-template-preview-20-bar:before{
  background: #f80a0a;
  outline: 2px solid #f80a0a;
}

@-webkit-keyframes animate-tem-20positive{
  0% { width: 0; }
}
@keyframes animate-tem-20positive{
  0% { width: 0; }
}