fomantic-ui 2.9.4-beta.10 → 2.9.4-beta.100

package/dist/components/step.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.4-beta.10+3564140 - Step
+ * # Fomantic-UI 2.9.4-beta.100+7f5f82a - Step
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -13,7 +13,7 @@
             Plural
 *******************************/
 
-.ui.steps {
+.ui.steps:not(.circular) {
   display: inline-flex;
   flex-direction: row;
   align-items: stretch;
@@ -43,7 +43,7 @@
            Singular
 *******************************/
 
-.ui.steps .step {
+.ui.steps:not(.circular) .step {
   position: relative;
   display: flex;
   flex: 1 0 auto;
@@ -63,7 +63,7 @@
 }
 
 /* Arrow */
-.ui.steps .step::after {
+.ui.steps:not(.circular) .step::after {
   display: none;
   position: absolute;
   z-index: 2;
@@ -81,20 +81,20 @@
 }
 
 /* First Step */
-.ui.steps .step:first-child {
+.ui.steps:not(.circular) .step:first-child {
   padding-left: 2em;
   border-radius: 0.28571429rem 0 0 0.28571429rem;
 }
 
 /* Last Step */
-.ui.steps .step:last-child {
+.ui.steps:not(.circular) .step:last-child {
   border-radius: 0 0.28571429rem 0.28571429rem 0;
   border-right: none;
   margin-right: 0;
 }
 
 /* Only Step */
-.ui.steps .step:only-child {
+.ui.steps:not(.circular) .step:only-child {
   border-radius: 0.28571429rem;
 }
 
@@ -109,6 +109,7 @@
   font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1.14285714em;
   font-weight: bold;
+  line-height: 1.14285714em;
 }
 .ui.steps .step > .title {
   width: 100%;
@@ -119,6 +120,7 @@
   font-weight: normal;
   font-size: 0.92857143em;
   color: rgba(0, 0, 0, 0.87);
+  line-height: 1.14285714em;
 }
 .ui.steps .step > .description {
   width: 100%;
@@ -156,6 +158,119 @@
             Types
 *******************************/
 
+.ui.circular.steps {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.ui.circular.steps:not(.vertical) {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  position: relative;
+  display: flex;
+  padding: 1em 0;
+  margin: 1em 0;
+}
+.ui.circular.steps:not(.vertical) .step {
+  background: rgba(34, 36, 38, 0.15);
+  cursor: default;
+  height: 2px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex: 1;
+  position: relative;
+  margin-left: 2.2em;
+}
+.ui.circular.steps:not(.vertical) .step::before {
+  left: -2.2em;
+}
+.ui.circular.steps:not(.vertical) .step::after {
+  left: calc((-2.2em + 0.95em) - 0.3em);
+}
+.ui.circular.steps:not(.vertical) .step.link::before,
+.ui.circular.steps:not(.vertical) .step.link::after {
+  cursor: pointer;
+}
+.ui.circular.steps:not(.vertical) .step.completed {
+  background: #21ba45;
+}
+.ui.circular.steps:not(.vertical) .step.completed::after {
+  left: calc(-2.2em + ((2.2em / 2) / 2) + (2px / 2));
+}
+.ui.circular.steps:not(.vertical) .step:last-child {
+  flex: 0;
+}
+.ui.circular.steps:not(.vertical) .step .content {
+  margin-top: -1.5em;
+  padding: 0 0.5em;
+}
+.ui.circular.steps:not(.vertical) .step .content.center.aligned {
+  margin-top: -0.65em;
+}
+.ui.circular.steps:not(.vertical) .step .content.center.aligned .title {
+  padding: 0 0.5em;
+  margin-left: -0.5em;
+  background: #fff;
+}
+.ui.circular.steps:not(.vertical) .step .content.bottom.aligned {
+  margin-top: 0.5em;
+}
+.ui.circular.steps:not(.vertical) .step .content:not(.aligned) .title + .description {
+  margin-top: 0.5em;
+}
+.ui.circular.steps .step {
+  color: inherit;
+}
+.ui.circular.steps .step::before {
+  content: "";
+  border-radius: 50%;
+  border: 2px solid rgba(34, 36, 38, 0.15);
+  height: 2.2em;
+  width: 2.2em;
+  line-height: 2.2em;
+  position: absolute;
+}
+.ui.circular.steps .step::after {
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(34, 36, 38, 0.15);
+  height: 0.95em;
+  width: 0.95em;
+}
+.ui.circular.steps .step.active::before {
+  border-color: #21ba45;
+}
+.ui.circular.steps .step.active::after {
+  background: #21ba45;
+}
+.ui.circular.steps .step.active .title {
+  color: #21ba45;
+}
+.ui.circular.steps .step.completed::before {
+  background: #21ba45;
+  border-color: #21ba45;
+}
+.ui.circular.steps .step.completed::after {
+  background: transparent;
+  content: "\e800";
+  font-family: Step;
+  color: #fff;
+  height: auto;
+  line-height: 1em;
+}
+@supports selector(:has(.f)) {
+  .ui.circular.steps:not(.vertical) .step:last-child:has(.content) {
+    flex: 1;
+  }
+  .ui.circular.steps:not(.vertical) .step:last-child:has(.center.aligned.content) {
+    background: none;
+  }
+}
 
 /* --------------
          Ordered
@@ -164,17 +279,31 @@
   counter-reset: ordered;
 }
 .ui.ordered.steps .step::before {
-  display: block;
-  position: static;
   text-align: center;
   content: counter(ordered);
   align-self: center;
-  margin-right: 1rem;
-  font-size: 2.5em;
   counter-increment: ordered;
   font-family: inherit;
   font-weight: bold;
 }
+.ui.ordered.steps:not(.circular) .step::before {
+  display: block;
+  position: static;
+  font-size: 2.5em;
+  margin-right: 1rem;
+}
+.ui.circular.ordered.steps .step::before {
+  line-height: calc(2.2em - 2px);
+}
+.ui.circular.ordered.steps .step.completed::before {
+  content: "";
+}
+.ui.circular.ordered.steps .step::after {
+  background: transparent;
+}
+.ui.circular.ordered.steps .step.active::before {
+  color: #21ba45;
+}
 .ui.ordered.steps .step > * {
   display: block;
   align-self: center;
@@ -183,65 +312,108 @@
 /* --------------
         Vertical
     --------------- */
-.ui.vertical.steps {
+.ui.vertical.steps:not(.circular) {
   display: inline-flex;
   flex-direction: column;
   overflow: visible;
 }
-.ui.vertical.steps .step {
+.ui.vertical.steps:not(.circular) .step {
   justify-content: flex-start;
   border-radius: 0;
   padding: 1.14285714em 2em;
   border-right: none;
   border-bottom: 1px solid rgba(34, 36, 38, 0.15);
 }
-.ui.vertical.steps .step:first-child {
+.ui.vertical.steps:not(.circular) .step:first-child {
   padding: 1.14285714em 2em;
   border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
-.ui.vertical.steps .step:last-child {
+.ui.vertical.steps:not(.circular) .step:last-child {
   border-bottom: none;
   border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
-.ui.vertical.steps .step:only-child {
+.ui.vertical.steps:not(.circular) .step:only-child {
   border-radius: 0.28571429rem;
 }
 
 /* Arrow */
-.ui.vertical.steps .step::after {
+.ui.vertical.steps:not(.circular) .step::after {
   top: 50%;
   right: 0;
   border-width: 0 1px 1px 0;
   display: none;
 }
-.ui.right.vertical.steps .step::after {
+.ui.right.vertical.steps:not(.circular) .step::after {
   border-width: 1px 0 0 1px;
   left: 0;
   right: 100%;
   transform: translateY(-50%) translateX(-50%) rotate(-45deg);
 }
-.ui.vertical.steps .active.step::after {
+.ui.vertical.steps:not(.circular) .active.step::after {
   display: block;
 }
-.ui.vertical.steps .step:last-child::after {
+.ui.vertical.steps:not(.circular) .step:last-child::after {
   display: none;
 }
-.ui.vertical.steps .active.step:last-child::after {
+.ui.vertical.steps:not(.circular) .active.step:last-child::after {
   display: block;
 }
 
+/* Circular Step */
+.ui.circular.vertical.steps {
+  display: inline-flex;
+  flex-flow: column wrap;
+  align-items: flex-start;
+}
+.ui.circular.vertical.steps .step {
+  position: relative;
+  width: 100%;
+}
+.ui.circular.vertical.steps .step::before {
+  left: 0;
+  top: 0;
+}
+.ui.circular.vertical.steps .step::after {
+  left: calc((2.2em / (2.2 * 2)) + 2px);
+  top: calc((2.2em / (2.2 * 2)) + 2px);
+}
+.ui.circular.vertical.steps .step .content {
+  padding-left: 3.5em;
+}
+.ui.circular.vertical.steps .step:not(:last-child) {
+  padding-bottom: 3em;
+}
+.ui.circular.vertical.steps .step:not(:last-child) .content::before {
+  content: "";
+  position: absolute;
+  border-left: 2px solid rgba(34, 36, 38, 0.15);
+  top: 2.2em;
+  bottom: 0;
+  left: calc(2.2em / 2);
+}
+.ui.circular.vertical.steps .step.completed .content::before {
+  border-color: #21ba45;
+}
+.ui.circular.vertical.steps .step.completed::before {
+  background: #21ba45;
+  border-color: #21ba45;
+}
+.ui.circular.vertical.steps .step.completed::after {
+  top: calc((2.2em / (2.2 * 2)) + (2px - (2px / 2)));
+}
+
 /* ---------------
     Responsive
 ---------------- */
 
 /* Mobile (Default) */
 @media only screen and (max-width: 767.98px) {
-  .ui.steps:not(.unstackable) {
+  .ui.steps:not(.unstackable):not(.circular) {
     display: inline-flex;
     overflow: visible;
     flex-direction: column;
   }
-  .ui.steps:not(.unstackable) .step {
+  .ui.steps:not(.unstackable):not(.circular) .step {
     width: 100% !important;
     flex-direction: column;
     border-radius: 0;
@@ -249,34 +421,34 @@
     border-right: none;
     border-bottom: 1px solid rgba(34, 36, 38, 0.15);
   }
-  .ui.steps:not(.unstackable) .step:first-child {
+  .ui.steps:not(.unstackable):not(.circular) .step:first-child {
     padding: 1.14285714em 2em;
     border-radius: 0.28571429rem 0.28571429rem 0 0;
   }
-  .ui.steps:not(.unstackable) .step:last-child {
+  .ui.steps:not(.unstackable):not(.circular) .step:last-child {
     border-radius: 0 0 0.28571429rem 0.28571429rem;
     border-bottom: none;
   }
   
 /* Arrow */
-  .ui.steps:not(.unstackable) .step::after {
+  .ui.steps:not(.unstackable):not(.circular) .step::after {
     top: unset;
     bottom: -1.14285714em;
     right: 50%;
     transform: translateY(-50%) translateX(50%) rotate(45deg);
   }
-  .ui.vertical.steps .active.step:last-child::after {
+  .ui.vertical.steps:not(.circular) .active.step:last-child::after {
     display: none;
   }
   
 /* Content */
-  .ui.steps:not(.unstackable) .step .content {
+  .ui.steps:not(.unstackable):not(.circular) .step .content {
     text-align: center;
   }
   
 /* Icon */
-  .ui.steps:not(.unstackable) .step > i.icon,
-  .ui.ordered.steps:not(.unstackable) .step::before {
+  .ui.steps:not(.unstackable):not(.circular) .step > i.icon,
+  .ui.ordered.steps:not(.unstackable):not(.circular) .step::before {
     margin: 0 0 1rem 0;
   }
 }
@@ -288,32 +460,32 @@
 
 
 /* Link Hover */
-.ui.steps .link.step:hover::after,
-.ui.steps .link.step:hover,
-.ui.steps a.step:hover::after,
-.ui.steps a.step:hover {
+.ui.steps:not(.circular) .link.step:hover::after,
+.ui.steps:not(.circular) .link.step:hover,
+.ui.steps:not(.circular) a.step:hover::after,
+.ui.steps:not(.circular) a.step:hover {
   background: #f9fafb;
   color: rgba(0, 0, 0, 0.8);
 }
 
 /* Link Down */
-.ui.steps .link.step:active::after,
-.ui.steps .link.step:active,
-.ui.steps a.step:active::after,
-.ui.steps a.step:active {
+.ui.steps:not(.circular) .link.step:active::after,
+.ui.steps:not(.circular) .link.step:active,
+.ui.steps:not(.circular) a.step:active::after,
+.ui.steps:not(.circular) a.step:active {
   background: #f3f4f5;
   color: rgba(0, 0, 0, 0.9);
 }
 
 /* Active */
-.ui.steps .step.active {
+.ui.steps:not(.circular) .step.active {
   cursor: auto;
   background: #f3f4f5;
 }
-.ui.steps .step.active::after {
+.ui.steps:not(.circular) .step.active::after {
   background: #f3f4f5;
 }
-.ui.steps .step.active .title {
+.ui.steps:not(.circular) .step.active .title {
   color: #4183c4;
 }
 .ui.ordered.steps .step.active::before,
@@ -322,24 +494,24 @@
 }
 
 /* Active Arrow */
-.ui.steps .step::after {
+.ui.steps:not(.circular) .step::after {
   display: block;
 }
-.ui.steps .active.step::after {
+.ui.steps:not(.circular) .active.step::after {
   display: block;
 }
-.ui.steps .step:last-child::after {
+.ui.steps:not(.circular) .step:last-child::after {
   display: none;
 }
-.ui.steps .active.step:last-child::after {
+.ui.steps:not(.circular) .active.step:last-child::after {
   display: none;
 }
 
 /* Active Hover */
-.ui.steps .link.active.step:hover::after,
-.ui.steps .link.active.step:hover,
-.ui.steps a.active.step:hover::after,
-.ui.steps a.active.step:hover {
+.ui.steps:not(.circular) .link.active.step:hover::after,
+.ui.steps:not(.circular) .link.active.step:hover,
+.ui.steps:not(.circular) a.active.step:hover::after,
+.ui.steps:not(.circular) a.active.step:hover {
   cursor: pointer;
   background: #dcddde;
   color: rgba(0, 0, 0, 0.87);
@@ -352,19 +524,27 @@
 }
 
 /* Disabled */
-.ui.steps .disabled.step {
+.ui.steps:not(.circular) .disabled.step {
   cursor: auto;
   background: #fff;
   pointer-events: none;
 }
-.ui.steps .disabled.step,
-.ui.steps .disabled.step .title,
-.ui.steps .disabled.step .description {
+.ui.steps:not(.circular) .disabled.step,
+.ui.steps:not(.circular) .disabled.step .title,
+.ui.steps:not(.circular) .disabled.step .description {
   color: rgba(40, 40, 40, 0.3);
 }
-.ui.steps .disabled.step::after {
+.ui.steps:not(.circular) .disabled.step::after {
   background: #fff;
 }
+.ui.circular.steps .disabled.step {
+  cursor: auto;
+  opacity: 0.5;
+}
+.ui.circular.steps .disabled.step::before,
+.ui.circular.steps .disabled.step::after {
+  cursor: auto;
+}
 
 
 /*******************************
@@ -378,31 +558,31 @@
 
 /* Tablet Or Below */
 @media only screen and (max-width: 991.98px) {
-  .ui[class*="tablet stackable"].steps {
+  .ui[class*="tablet stackable"].steps:not(.circular) {
     display: inline-flex;
     overflow: visible;
     flex-direction: column;
   }
   
 /* Steps */
-  .ui[class*="tablet stackable"].steps .step {
+  .ui[class*="tablet stackable"].steps:not(.circular) .step {
     flex-direction: column;
     border-radius: 0;
     padding: 1.14285714em 2em;
     border-right: none;
     border-bottom: 1px solid rgba(34, 36, 38, 0.15);
   }
-  .ui[class*="tablet stackable"].steps .step:first-child {
+  .ui[class*="tablet stackable"].steps:not(.circular) .step:first-child {
     padding: 1.14285714em 2em;
     border-radius: 0.28571429rem 0.28571429rem 0 0;
   }
-  .ui[class*="tablet stackable"].steps .step:last-child {
+  .ui[class*="tablet stackable"].steps:not(.circular) .step:last-child {
     border-radius: 0 0 0.28571429rem 0.28571429rem;
     border-bottom: none;
   }
   
 /* Arrow */
-  .ui[class*="tablet stackable"].steps .step::after {
+  .ui[class*="tablet stackable"].steps:not(.circular) .step::after {
     top: unset;
     bottom: -1.14285714em;
     right: 50%;
@@ -410,7 +590,7 @@
   }
   
 /* Content */
-  .ui[class*="tablet stackable"].steps .step .content {
+  .ui[class*="tablet stackable"].steps:not(.circular) .step .content {
     text-align: center;
   }
   
@@ -436,28 +616,28 @@
     --------------- */
 
 /* Top */
-.ui.attached.steps {
+.ui.attached.steps:not(.circular) {
   width: calc(100% + 2px) !important;
   margin: 0 -1px 0;
   max-width: calc(100% + 2px);
   border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
-.ui.attached.steps .step:first-child {
+.ui.attached.steps:not(.circular) .step:first-child {
   border-radius: 0.28571429rem 0 0 0;
 }
-.ui.attached.steps .step:last-child {
+.ui.attached.steps:not(.circular) .step:last-child {
   border-radius: 0 0.28571429rem 0 0;
 }
 
 /* Bottom */
-.ui.bottom.attached.steps {
+.ui.bottom.attached.steps:not(.circular) {
   margin: 0 -1px 0;
   border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
-.ui.bottom.attached.steps .step:first-child {
+.ui.bottom.attached.steps:not(.circular) .step:first-child {
   border-radius: 0 0 0 0.28571429rem;
 }
-.ui.bottom.attached.steps .step:last-child {
+.ui.bottom.attached.steps:not(.circular) .step:last-child {
   border-radius: 0 0 0.28571429rem 0;
 }
 
@@ -520,43 +700,71 @@
 .ui.mini.step {
   font-size: 0.78571429rem;
 }
+.ui.mini.circular.steps:not(.vertical) {
+  margin: 0.78571429rem 0;
+  padding: 0.78571429rem 0;
+}
 .ui.tiny.steps .step,
 .ui.tiny.step {
   font-size: 0.85714286rem;
 }
+.ui.tiny.circular.steps:not(.vertical) {
+  margin: 0.85714286rem 0;
+  padding: 0.85714286rem 0;
+}
 .ui.small.steps .step,
 .ui.small.step {
   font-size: 0.92857143rem;
 }
+.ui.small.circular.steps:not(.vertical) {
+  margin: 0.92857143rem 0;
+  padding: 0.92857143rem 0;
+}
 .ui.large.steps .step,
 .ui.large.step {
   font-size: 1.14285714rem;
 }
+.ui.large.circular.steps:not(.vertical) {
+  margin: 1.14285714rem 0;
+  padding: 1.14285714rem 0;
+}
 .ui.big.steps .step,
 .ui.big.step {
   font-size: 1.28571429rem;
 }
+.ui.big.circular.steps:not(.vertical) {
+  margin: 1.28571429rem 0;
+  padding: 1.28571429rem 0;
+}
 .ui.huge.steps .step,
 .ui.huge.step {
   font-size: 1.42857143rem;
 }
+.ui.huge.circular.steps:not(.vertical) {
+  margin: 1.42857143rem 0;
+  padding: 1.42857143rem 0;
+}
 .ui.massive.steps .step,
 .ui.massive.step {
   font-size: 1.71428571rem;
 }
+.ui.massive.circular.steps:not(.vertical) {
+  margin: 1.71428571rem 0;
+  padding: 1.71428571rem 0;
+}
 
 /* --------------
         Inverted
     --------------- */
-.ui.inverted.steps {
+.ui.inverted.steps:not(.circular) {
   border: 1px solid #555;
 }
-.ui.inverted.steps .step {
+.ui.inverted.steps:not(.circular) .step {
   color: rgba(255, 255, 255, 0.9);
   background: #1b1c1d;
   border-color: #555;
 }
-.ui.inverted.steps .step::after {
+.ui.inverted.steps:not(.circular) .step::after {
   background-color: #1b1c1d;
   border-color: #555;
 }
@@ -565,44 +773,742 @@
 }
 
 /* Active */
-.ui.inverted.steps .step.active,
-.ui.inverted.steps .step.active::after {
+.ui.inverted.steps:not(.circular) .step.active,
+.ui.inverted.steps:not(.circular) .step.active::after {
   background: #333;
 }
-.ui.inverted.ordered.steps .step.active::before,
-.ui.inverted.steps .active.step i.icon {
+.ui.inverted.ordered.steps:not(.circular) .step.active::before,
+.ui.inverted.steps:not(.circular) .active.step i.icon {
   color: #ffffff;
 }
 
 /* Disabled */
-.ui.inverted.steps .disabled.step,
-.ui.inverted.steps .disabled.step::after {
+.ui.inverted.steps:not(.circular) .disabled.step,
+.ui.inverted.steps:not(.circular) .disabled.step::after {
   background: #222;
 }
-.ui.inverted.steps .disabled.step,
-.ui.inverted.steps .disabled.step .title,
-.ui.inverted.steps .disabled.step .description {
+.ui.inverted.steps:not(.circular) .disabled.step,
+.ui.inverted.steps:not(.circular) .disabled.step .title,
+.ui.inverted.steps:not(.circular) .disabled.step .description {
   color: rgba(225, 225, 225, 0.3);
 }
 
 /* Link Hover */
-.ui.inverted.steps .link.step:hover::after,
-.ui.inverted.steps .link.step:hover,
-.ui.inverted.steps a.step:hover::after,
-.ui.inverted.steps a.step:hover {
+.ui.inverted.steps:not(.circular) .link.step:hover::after,
+.ui.inverted.steps:not(.circular) .link.step:hover,
+.ui.inverted.steps:not(.circular) a.step:hover::after,
+.ui.inverted.steps:not(.circular) a.step:hover {
   background: #3f3f3f;
   color: #ffffff;
 }
 
 /* Link Down */
-.ui.inverted.steps .link.step:active::after,
-.ui.inverted.steps .link.step:active,
-.ui.inverted.steps a.step:active::after,
-.ui.inverted.steps a.step:active {
+.ui.inverted.steps:not(.circular) .link.step:active::after,
+.ui.inverted.steps:not(.circular) .link.step:active,
+.ui.inverted.steps:not(.circular) a.step:active::after,
+.ui.inverted.steps:not(.circular) a.step:active {
   background: #444;
   color: #ffffff;
 }
 
+/* Circular Step */
+.ui.inverted.circular.steps .step .content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.circular.steps:not(.vertical) .step:not(.completed) {
+  background: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.circular.steps:not(.vertical) .step:not(.active):not(.completed)::before {
+  border-color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.circular.steps:not(.vertical) .step .center.aligned.content .title {
+  background: #1b1c1d;
+}
+.ui.inverted.circular.steps:not(.ordered) .step:not(.active):not(.completed)::after {
+  background: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.circular.steps.vertical .step:not(.active):not(.completed)::before {
+  border-color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.circular.steps.vertical .step:not(.completed) .content::before {
+  background: rgba(255, 255, 255, 0.9);
+}
+.ui.ui.circular.steps .step.primary::before {
+  border-color: #2185d0;
+}
+.ui.ui.circular.steps .step.primary::after {
+  background: #2185d0;
+}
+.ui.ui.primary.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.primary.active::before {
+  border-color: #2185d0;
+}
+.ui.ui.primary.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.primary.active::after {
+  background: #2185d0;
+}
+.ui.ui.primary.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.primary.completed::before {
+  background: #2185d0;
+  border-color: #2185d0;
+}
+.ui.ui.primary.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.primary.completed {
+  background: #2185d0;
+}
+.ui.ui.circular.steps:not(.vertical) .step.primary {
+  background: #2185d0;
+}
+.ui.ui.primary.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.primary.active .content .title {
+  color: #2185d0;
+}
+.ui.ui.vertical.circular.steps .step.completed.primary .content::before {
+  border-color: #2185d0;
+}
+.ui.ui.primary.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.primary.completed .content::before {
+  border-color: #2185d0;
+}
+.ui.ui.primary.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.primary::after {
+  background: transparent;
+}
+.ui.ui.primary.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.primary.active::before {
+  color: #2185d0;
+}
+.ui.ui.circular.steps .step.secondary::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.circular.steps .step.secondary::after {
+  background: #1b1c1d;
+}
+.ui.ui.secondary.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.secondary.active::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.secondary.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.secondary.active::after {
+  background: #1b1c1d;
+}
+.ui.ui.secondary.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.secondary.completed::before {
+  background: #1b1c1d;
+  border-color: #1b1c1d;
+}
+.ui.ui.secondary.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.secondary.completed {
+  background: #1b1c1d;
+}
+.ui.ui.circular.steps:not(.vertical) .step.secondary {
+  background: #1b1c1d;
+}
+.ui.ui.secondary.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.secondary.active .content .title {
+  color: #1b1c1d;
+}
+.ui.ui.vertical.circular.steps .step.completed.secondary .content::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.secondary.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.secondary.completed .content::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.secondary.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.secondary::after {
+  background: transparent;
+}
+.ui.ui.secondary.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.secondary.active::before {
+  color: #1b1c1d;
+}
+.ui.ui.circular.steps .step.red::before {
+  border-color: #db2828;
+}
+.ui.ui.circular.steps .step.red::after {
+  background: #db2828;
+}
+.ui.ui.red.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.red.active::before {
+  border-color: #db2828;
+}
+.ui.ui.red.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.red.active::after {
+  background: #db2828;
+}
+.ui.ui.red.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.red.completed::before {
+  background: #db2828;
+  border-color: #db2828;
+}
+.ui.ui.red.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.red.completed {
+  background: #db2828;
+}
+.ui.ui.circular.steps:not(.vertical) .step.red {
+  background: #db2828;
+}
+.ui.ui.red.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.red.active .content .title {
+  color: #db2828;
+}
+.ui.ui.vertical.circular.steps .step.completed.red .content::before {
+  border-color: #db2828;
+}
+.ui.ui.red.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.red.completed .content::before {
+  border-color: #db2828;
+}
+.ui.ui.red.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.red::after {
+  background: transparent;
+}
+.ui.ui.red.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.red.active::before {
+  color: #db2828;
+}
+.ui.ui.circular.steps .step.orange::before {
+  border-color: #f2711c;
+}
+.ui.ui.circular.steps .step.orange::after {
+  background: #f2711c;
+}
+.ui.ui.orange.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.orange.active::before {
+  border-color: #f2711c;
+}
+.ui.ui.orange.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.orange.active::after {
+  background: #f2711c;
+}
+.ui.ui.orange.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.orange.completed::before {
+  background: #f2711c;
+  border-color: #f2711c;
+}
+.ui.ui.orange.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.orange.completed {
+  background: #f2711c;
+}
+.ui.ui.circular.steps:not(.vertical) .step.orange {
+  background: #f2711c;
+}
+.ui.ui.orange.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.orange.active .content .title {
+  color: #f2711c;
+}
+.ui.ui.vertical.circular.steps .step.completed.orange .content::before {
+  border-color: #f2711c;
+}
+.ui.ui.orange.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.orange.completed .content::before {
+  border-color: #f2711c;
+}
+.ui.ui.orange.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.orange::after {
+  background: transparent;
+}
+.ui.ui.orange.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.orange.active::before {
+  color: #f2711c;
+}
+.ui.ui.circular.steps .step.yellow::before {
+  border-color: #fbbd08;
+}
+.ui.ui.circular.steps .step.yellow::after {
+  background: #fbbd08;
+}
+.ui.ui.yellow.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.yellow.active::before {
+  border-color: #fbbd08;
+}
+.ui.ui.yellow.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.yellow.active::after {
+  background: #fbbd08;
+}
+.ui.ui.yellow.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.yellow.completed::before {
+  background: #fbbd08;
+  border-color: #fbbd08;
+}
+.ui.ui.yellow.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.yellow.completed {
+  background: #fbbd08;
+}
+.ui.ui.circular.steps:not(.vertical) .step.yellow {
+  background: #fbbd08;
+}
+.ui.ui.yellow.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.yellow.active .content .title {
+  color: #fbbd08;
+}
+.ui.ui.vertical.circular.steps .step.completed.yellow .content::before {
+  border-color: #fbbd08;
+}
+.ui.ui.yellow.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.yellow.completed .content::before {
+  border-color: #fbbd08;
+}
+.ui.ui.yellow.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.yellow::after {
+  background: transparent;
+}
+.ui.ui.yellow.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.yellow.active::before {
+  color: #fbbd08;
+}
+.ui.ui.circular.steps .step.olive::before {
+  border-color: #b5cc18;
+}
+.ui.ui.circular.steps .step.olive::after {
+  background: #b5cc18;
+}
+.ui.ui.olive.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.olive.active::before {
+  border-color: #b5cc18;
+}
+.ui.ui.olive.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.olive.active::after {
+  background: #b5cc18;
+}
+.ui.ui.olive.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.olive.completed::before {
+  background: #b5cc18;
+  border-color: #b5cc18;
+}
+.ui.ui.olive.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.olive.completed {
+  background: #b5cc18;
+}
+.ui.ui.circular.steps:not(.vertical) .step.olive {
+  background: #b5cc18;
+}
+.ui.ui.olive.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.olive.active .content .title {
+  color: #b5cc18;
+}
+.ui.ui.vertical.circular.steps .step.completed.olive .content::before {
+  border-color: #b5cc18;
+}
+.ui.ui.olive.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.olive.completed .content::before {
+  border-color: #b5cc18;
+}
+.ui.ui.olive.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.olive::after {
+  background: transparent;
+}
+.ui.ui.olive.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.olive.active::before {
+  color: #b5cc18;
+}
+.ui.ui.circular.steps .step.green::before {
+  border-color: #21ba45;
+}
+.ui.ui.circular.steps .step.green::after {
+  background: #21ba45;
+}
+.ui.ui.green.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.green.active::before {
+  border-color: #21ba45;
+}
+.ui.ui.green.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.green.active::after {
+  background: #21ba45;
+}
+.ui.ui.green.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.green.completed::before {
+  background: #21ba45;
+  border-color: #21ba45;
+}
+.ui.ui.green.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.green.completed {
+  background: #21ba45;
+}
+.ui.ui.circular.steps:not(.vertical) .step.green {
+  background: #21ba45;
+}
+.ui.ui.green.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.green.active .content .title {
+  color: #21ba45;
+}
+.ui.ui.vertical.circular.steps .step.completed.green .content::before {
+  border-color: #21ba45;
+}
+.ui.ui.green.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.green.completed .content::before {
+  border-color: #21ba45;
+}
+.ui.ui.green.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.green::after {
+  background: transparent;
+}
+.ui.ui.green.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.green.active::before {
+  color: #21ba45;
+}
+.ui.ui.circular.steps .step.teal::before {
+  border-color: #00b5ad;
+}
+.ui.ui.circular.steps .step.teal::after {
+  background: #00b5ad;
+}
+.ui.ui.teal.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.teal.active::before {
+  border-color: #00b5ad;
+}
+.ui.ui.teal.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.teal.active::after {
+  background: #00b5ad;
+}
+.ui.ui.teal.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.teal.completed::before {
+  background: #00b5ad;
+  border-color: #00b5ad;
+}
+.ui.ui.teal.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.teal.completed {
+  background: #00b5ad;
+}
+.ui.ui.circular.steps:not(.vertical) .step.teal {
+  background: #00b5ad;
+}
+.ui.ui.teal.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.teal.active .content .title {
+  color: #00b5ad;
+}
+.ui.ui.vertical.circular.steps .step.completed.teal .content::before {
+  border-color: #00b5ad;
+}
+.ui.ui.teal.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.teal.completed .content::before {
+  border-color: #00b5ad;
+}
+.ui.ui.teal.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.teal::after {
+  background: transparent;
+}
+.ui.ui.teal.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.teal.active::before {
+  color: #00b5ad;
+}
+.ui.ui.circular.steps .step.blue::before {
+  border-color: #2185d0;
+}
+.ui.ui.circular.steps .step.blue::after {
+  background: #2185d0;
+}
+.ui.ui.blue.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.blue.active::before {
+  border-color: #2185d0;
+}
+.ui.ui.blue.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.blue.active::after {
+  background: #2185d0;
+}
+.ui.ui.blue.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.blue.completed::before {
+  background: #2185d0;
+  border-color: #2185d0;
+}
+.ui.ui.blue.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.blue.completed {
+  background: #2185d0;
+}
+.ui.ui.circular.steps:not(.vertical) .step.blue {
+  background: #2185d0;
+}
+.ui.ui.blue.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.blue.active .content .title {
+  color: #2185d0;
+}
+.ui.ui.vertical.circular.steps .step.completed.blue .content::before {
+  border-color: #2185d0;
+}
+.ui.ui.blue.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.blue.completed .content::before {
+  border-color: #2185d0;
+}
+.ui.ui.blue.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.blue::after {
+  background: transparent;
+}
+.ui.ui.blue.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.blue.active::before {
+  color: #2185d0;
+}
+.ui.ui.circular.steps .step.violet::before {
+  border-color: #6435c9;
+}
+.ui.ui.circular.steps .step.violet::after {
+  background: #6435c9;
+}
+.ui.ui.violet.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.violet.active::before {
+  border-color: #6435c9;
+}
+.ui.ui.violet.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.violet.active::after {
+  background: #6435c9;
+}
+.ui.ui.violet.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.violet.completed::before {
+  background: #6435c9;
+  border-color: #6435c9;
+}
+.ui.ui.violet.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.violet.completed {
+  background: #6435c9;
+}
+.ui.ui.circular.steps:not(.vertical) .step.violet {
+  background: #6435c9;
+}
+.ui.ui.violet.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.violet.active .content .title {
+  color: #6435c9;
+}
+.ui.ui.vertical.circular.steps .step.completed.violet .content::before {
+  border-color: #6435c9;
+}
+.ui.ui.violet.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.violet.completed .content::before {
+  border-color: #6435c9;
+}
+.ui.ui.violet.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.violet::after {
+  background: transparent;
+}
+.ui.ui.violet.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.violet.active::before {
+  color: #6435c9;
+}
+.ui.ui.circular.steps .step.purple::before {
+  border-color: #a333c8;
+}
+.ui.ui.circular.steps .step.purple::after {
+  background: #a333c8;
+}
+.ui.ui.purple.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.purple.active::before {
+  border-color: #a333c8;
+}
+.ui.ui.purple.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.purple.active::after {
+  background: #a333c8;
+}
+.ui.ui.purple.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.purple.completed::before {
+  background: #a333c8;
+  border-color: #a333c8;
+}
+.ui.ui.purple.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.purple.completed {
+  background: #a333c8;
+}
+.ui.ui.circular.steps:not(.vertical) .step.purple {
+  background: #a333c8;
+}
+.ui.ui.purple.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.purple.active .content .title {
+  color: #a333c8;
+}
+.ui.ui.vertical.circular.steps .step.completed.purple .content::before {
+  border-color: #a333c8;
+}
+.ui.ui.purple.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.purple.completed .content::before {
+  border-color: #a333c8;
+}
+.ui.ui.purple.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.purple::after {
+  background: transparent;
+}
+.ui.ui.purple.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.purple.active::before {
+  color: #a333c8;
+}
+.ui.ui.circular.steps .step.pink::before {
+  border-color: #e03997;
+}
+.ui.ui.circular.steps .step.pink::after {
+  background: #e03997;
+}
+.ui.ui.pink.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.pink.active::before {
+  border-color: #e03997;
+}
+.ui.ui.pink.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.pink.active::after {
+  background: #e03997;
+}
+.ui.ui.pink.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.pink.completed::before {
+  background: #e03997;
+  border-color: #e03997;
+}
+.ui.ui.pink.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.pink.completed {
+  background: #e03997;
+}
+.ui.ui.circular.steps:not(.vertical) .step.pink {
+  background: #e03997;
+}
+.ui.ui.pink.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.pink.active .content .title {
+  color: #e03997;
+}
+.ui.ui.vertical.circular.steps .step.completed.pink .content::before {
+  border-color: #e03997;
+}
+.ui.ui.pink.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.pink.completed .content::before {
+  border-color: #e03997;
+}
+.ui.ui.pink.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.pink::after {
+  background: transparent;
+}
+.ui.ui.pink.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.pink.active::before {
+  color: #e03997;
+}
+.ui.ui.circular.steps .step.brown::before {
+  border-color: #a5673f;
+}
+.ui.ui.circular.steps .step.brown::after {
+  background: #a5673f;
+}
+.ui.ui.brown.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.brown.active::before {
+  border-color: #a5673f;
+}
+.ui.ui.brown.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.brown.active::after {
+  background: #a5673f;
+}
+.ui.ui.brown.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.brown.completed::before {
+  background: #a5673f;
+  border-color: #a5673f;
+}
+.ui.ui.brown.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.brown.completed {
+  background: #a5673f;
+}
+.ui.ui.circular.steps:not(.vertical) .step.brown {
+  background: #a5673f;
+}
+.ui.ui.brown.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.brown.active .content .title {
+  color: #a5673f;
+}
+.ui.ui.vertical.circular.steps .step.completed.brown .content::before {
+  border-color: #a5673f;
+}
+.ui.ui.brown.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.brown.completed .content::before {
+  border-color: #a5673f;
+}
+.ui.ui.brown.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.brown::after {
+  background: transparent;
+}
+.ui.ui.brown.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.brown.active::before {
+  color: #a5673f;
+}
+.ui.ui.circular.steps .step.grey::before {
+  border-color: #767676;
+}
+.ui.ui.circular.steps .step.grey::after {
+  background: #767676;
+}
+.ui.ui.grey.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.grey.active::before {
+  border-color: #767676;
+}
+.ui.ui.grey.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.grey.active::after {
+  background: #767676;
+}
+.ui.ui.grey.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.grey.completed::before {
+  background: #767676;
+  border-color: #767676;
+}
+.ui.ui.grey.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.grey.completed {
+  background: #767676;
+}
+.ui.ui.circular.steps:not(.vertical) .step.grey {
+  background: #767676;
+}
+.ui.ui.grey.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.grey.active .content .title {
+  color: #767676;
+}
+.ui.ui.vertical.circular.steps .step.completed.grey .content::before {
+  border-color: #767676;
+}
+.ui.ui.grey.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.grey.completed .content::before {
+  border-color: #767676;
+}
+.ui.ui.grey.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.grey::after {
+  background: transparent;
+}
+.ui.ui.grey.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.grey.active::before {
+  color: #767676;
+}
+.ui.ui.circular.steps .step.black::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.circular.steps .step.black::after {
+  background: #1b1c1d;
+}
+.ui.ui.black.circular.steps .step.active::before,
+.ui.ui.ui.circular.steps .step.black.active::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.black.circular.steps .step.active::after,
+.ui.ui.ui.circular.steps .step.black.active::after {
+  background: #1b1c1d;
+}
+.ui.ui.black.circular.steps .step.completed::before,
+.ui.ui.ui.circular.steps .step.black.completed::before {
+  background: #1b1c1d;
+  border-color: #1b1c1d;
+}
+.ui.ui.black.circular.steps:not(.vertical) .step.completed,
+.ui.ui.ui.circular.steps:not(.vertical) .step.black.completed {
+  background: #1b1c1d;
+}
+.ui.ui.circular.steps:not(.vertical) .step.black {
+  background: #1b1c1d;
+}
+.ui.ui.black.circular.steps .step.active .content .title,
+.ui.ui.ui.circular.steps .step.black.active .content .title {
+  color: #1b1c1d;
+}
+.ui.ui.vertical.circular.steps .step.completed.black .content::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.black.vertical.circular.steps .step.completed .content::before,
+.ui.ui.vertical.circular.steps .step.black.completed .content::before {
+  border-color: #1b1c1d;
+}
+.ui.ui.black.circular.ordered.steps .step::after,
+.ui.ui.circular.ordered.steps .step.black::after {
+  background: transparent;
+}
+.ui.ui.black.circular.ordered.steps .step.active::before,
+.ui.ui.circular.ordered.steps .step.black.active::before {
+  color: #1b1c1d;
+}
+
 
 /*******************************
          Theme Overrides