/**
    Padding
*/
/**
    Margin Section
*/
/**
    Font Section
*/
/*
    Canvas Element Colors
*/
@-webkit-keyframes rotateAnimation {
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotateAnimation {
  100% {
    transform: rotate(360deg);
  }
}

@-ms-keyframes rotateAnimation {
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes rotateAnimation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateAnimation {
  100% {
    transform: rotate(360deg);
  }
}

.circular-progress-bar-container {
  border-radius: 50%;
  position: relative;
}

.circular-progress-bar-container .circular-progress-bar-status-info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}

.circular-progress-bar-container .circular-progress-bar-status-info .circular-progress-bar-status-info-child {
  background-clip: content-box;
  border-radius: 50%;
  border-color: transparent;
  border-style: solid;
  padding: 0 !important;
}

.circular-progress-bar-container .circular-progress-bar-center {
  height: 0px;
  width: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.circular-progress-bar-container .circular-progress-bar-center .circular-progress-bar-border-stripe {
  position: absolute;
}

.circular-progress-bar-container .circular-progress-bar-circular-background {
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
}

.circular-progress-bar-container .circular-progress-bar-circular-background .circular-progress-bar-border-stripe {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.circular-progress-bar-container .circular-progress-bar-spinning-background {
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
}

.circular-progress-bar-container .circular-progress-bar-spinning-background .circular-progress-bar-border-stripe-1, .circular-progress-bar-container .circular-progress-bar-spinning-background .circular-progress-bar-border-stripe-2 {
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.circular-progress-bar-container .circular-progress-bar-spinning-background .circular-progress-bar-border-stripe-3, .circular-progress-bar-container .circular-progress-bar-spinning-background .circular-progress-bar-border-stripe-4 {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--communication-background,rgba(0, 120, 212, 1));
}

.circular-progress-bar-container .circular-progress-bar-spinning-background .circular-progress-bar-border-stripe-5, .circular-progress-bar-container .circular-progress-bar-spinning-background .circular-progress-bar-border-stripe-6 {
  background-color: rgba( 0, 90, 158 ,  1 );
  background-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.circular-progress-bar-container .circular-progress-bar-completed {
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.circular-progress-bar-container .circular-progress-bar-completed .circular-progress-bar-completed-child-circle {
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  border-style: solid;
  border-color: rgba(0, 120, 212, 1);
  border-color: var(--communication-background,rgba(0, 120, 212, 1));
}