:root{
  --color-black:            #000000;
  --color-white:            #FFFFFF;
  --color-error:            #FF0000;
  --cdss-color-blue:        #023059;
  --cdss-color-whitesmoke:  #F2F2F2;
  --cdss-color-gold:        #BF930F;
  --cdss-color-tan:         #d9c077;
  --ssbp-color-blue:        #07b0f2;
  --ssbp-color-whitesmoke:  #F2F2F2;
  --ocap-color-orange:      #F2811D;
  --ocap-color-blue:        #117dbf;
  --ocap-color-green:       #3FBF48;
}

/* LearnDash Status Ribbons */
.learndash-status-ribbon{
  border-radius:100px;
  color:var(--color-white);
  display:inline-block;
  font-size:.875em;
  font-weight:600;
  margin-block-start:0;
  margin-block-end:0;
  margin-inline-start:0;
  margin-inline-end:0;
  padding:7.5px 15px;
  width:auto;
}
.learndash-status-ribbon.error{
  background-color:var(--color-error);
}
.learndash-status-ribbon.available{
  background-color:var(--ssbp-color-blue);
}
.learndash-status-ribbon.free{
  background-color:var(--cdss-color-tan);
}
.learndash-status-ribbon.premium{
  background-color:var(--cdss-color-gold);
}
.learndash-status-ribbon.enrolled{
  background-color:var(--ocap-color-orange);
}
.learndash-status-ribbon.completed{
  background-color:var(--ocap-color-green);
}

/* Loading Circle */
.ssbp-loading-circle,
.ssbp-loading-circle:after {
  box-sizing: border-box;
}
.ssbp-loading-circle {
  display: inline-block;
  width:1em;
  height:1em;
}
.ssbp-loading-circle:after {
  content: " ";
  display: block;
  width: 1em;
  height: 1em;
  margin: auto;
  border-radius: 50%;
  border: .2em solid currentColor;
  border-color: 
    color-mix(in srgb, currentColor, white 30%)
    color-mix(in srgb, currentColor, white 30%)
    color-mix(in srgb,currentColor,black 30%)
    color-mix(in srgb,currentColor,black 30%);
  animation: ssbp-loading-circle 0.6s linear infinite;
}
@keyframes ssbp-loading-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}