fomantic-ui 2.9.4-beta.83 → 2.9.4-beta.84

package/dist/semantic.css

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.4-beta.83+9b313a5
+ * # Fomantic UI - 2.9.4-beta.84+7052a23
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *
@@ -9,7 +9,7 @@
  *
  */
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Reset
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Reset
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -430,7 +430,7 @@ template {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Site
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Site
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -737,7 +737,7 @@ input::selection {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Button
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Button
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -5447,7 +5447,7 @@ input::selection {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Container
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Container
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -5804,7 +5804,7 @@ input::selection {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Divider
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Divider
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -6112,7 +6112,7 @@ input::selection {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Emoji
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Emoji
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -25236,7 +25236,7 @@ em[data-emoji="regional_indicator_a"]::before {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Flag
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Flag
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -26651,7 +26651,7 @@ i.flag.united.nations::before {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Header
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Header
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -27605,7 +27605,7 @@ a.ui.inverted.black.header.header.header:hover {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Icon
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Icon
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -36715,7 +36715,7 @@ i.icon.youtube.play::before {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Image
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Image
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -37056,7 +37056,7 @@ img.ui.bordered.image {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Input
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Input
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -38956,7 +38956,7 @@ input[type="file"].ui.black.file.input::file-selector-button:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Label
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Label
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -41369,7 +41369,7 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - List
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - List
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -42469,7 +42469,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Loader
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Loader
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -43337,7 +43337,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Placeholder
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Placeholder
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -43608,7 +43608,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Rail
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Rail
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -43770,7 +43770,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Reveal
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Reveal
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -44081,7 +44081,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Segment
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Segment
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -45320,7 +45320,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Step
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Step
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -45333,7 +45333,7 @@ ol.ui.suffixed.list li::before,
             Plural
 *******************************/
 
-.ui.steps {
+.ui.steps:not(.circular) {
   display: inline-flex;
   flex-direction: row;
   align-items: stretch;
@@ -45365,7 +45365,7 @@ ol.ui.suffixed.list li::before,
            Singular
 *******************************/
 
-.ui.steps .step {
+.ui.steps:not(.circular) .step {
   position: relative;
   display: flex;
   flex: 1 0 auto;
@@ -45386,7 +45386,7 @@ ol.ui.suffixed.list li::before,
 
 /* Arrow */
 
-.ui.steps .step::after {
+.ui.steps:not(.circular) .step::after {
   display: none;
   position: absolute;
   z-index: 2;
@@ -45405,14 +45405,14 @@ ol.ui.suffixed.list li::before,
 
 /* 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;
@@ -45420,7 +45420,7 @@ ol.ui.suffixed.list li::before,
 
 /* Only Step */
 
-.ui.steps .step:only-child {
+.ui.steps:not(.circular) .step:only-child {
   border-radius: 0.28571429rem;
 }
 
@@ -45434,6 +45434,7 @@ ol.ui.suffixed.list li::before,
   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 {
@@ -45446,6 +45447,7 @@ ol.ui.suffixed.list li::before,
   font-weight: normal;
   font-size: 0.92857143em;
   color: rgba(0, 0, 0, 0.87);
+  line-height: 1.14285714em;
 }
 
 .ui.steps .step > .description {
@@ -45488,6 +45490,143 @@ ol.ui.suffixed.list li::before,
             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
     --------------- */
@@ -45497,18 +45636,37 @@ ol.ui.suffixed.list li::before,
 }
 
 .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;
@@ -45518,13 +45676,13 @@ ol.ui.suffixed.list li::before,
         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;
@@ -45532,48 +45690,101 @@ ol.ui.suffixed.list li::before,
   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
 ---------------- */
@@ -45581,13 +45792,13 @@ ol.ui.suffixed.list li::before,
 /* 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;
@@ -45596,39 +45807,39 @@ ol.ui.suffixed.list li::before,
     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;
   }
 }
@@ -45639,36 +45850,36 @@ ol.ui.suffixed.list li::before,
 
 /* 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;
 }
 
@@ -45679,28 +45890,28 @@ ol.ui.suffixed.list li::before,
 
 /* 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);
@@ -45715,22 +45926,32 @@ ol.ui.suffixed.list li::before,
 
 /* 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;
+}
+
 /*******************************
            Variations
 *******************************/
@@ -45742,7 +45963,7 @@ ol.ui.suffixed.list li::before,
 /* 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;
@@ -45750,7 +45971,7 @@ ol.ui.suffixed.list li::before,
 
   /* 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;
@@ -45758,19 +45979,19 @@ ol.ui.suffixed.list li::before,
     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%;
@@ -45779,7 +46000,7 @@ ol.ui.suffixed.list li::before,
 
   /* Content */
 
-  .ui[class*="tablet stackable"].steps .step .content {
+  .ui[class*="tablet stackable"].steps:not(.circular) .step .content {
     text-align: center;
   }
 
@@ -45808,33 +46029,33 @@ ol.ui.suffixed.list li::before,
 
 /* 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;
 }
 
@@ -45910,51 +46131,86 @@ ol.ui.suffixed.list li::before,
   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;
 }
@@ -45965,49 +46221,934 @@ ol.ui.suffixed.list li::before,
 
 /* 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
 *******************************/
@@ -46028,7 +47169,7 @@ ol.ui.suffixed.list li::before,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Text
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Text
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -46227,7 +47368,7 @@ span.ui.massive.text {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Breadcrumb
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Breadcrumb
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -46372,7 +47513,7 @@ span.ui.massive.text {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Form
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Form
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -48493,7 +49634,7 @@ span.ui.massive.text {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Grid
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Grid
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -50757,7 +51898,7 @@ span.ui.massive.text {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Menu
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Menu
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -53259,7 +54400,7 @@ Floated Menu / Item
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Message
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Message
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -54004,7 +55145,7 @@ Floated Menu / Item
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Table
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Table
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -58115,7 +59256,7 @@ Floated Menu / Item
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Ad
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Ad
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -58403,7 +59544,7 @@ Floated Menu / Item
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Card
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Card
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -60551,7 +61692,7 @@ a.inverted.ui.card:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Comment
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Comment
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -60868,7 +62009,7 @@ a.inverted.ui.card:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Feed
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Feed
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -61820,7 +62961,7 @@ a.inverted.ui.card:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Item
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Item
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -62437,7 +63578,7 @@ a.inverted.ui.card:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Statistic
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Statistic
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -63115,7 +64256,7 @@ a.inverted.ui.card:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Accordion
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Accordion
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -63522,7 +64663,7 @@ a.inverted.ui.card:hover,
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Calendar
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Calendar
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -63911,7 +65052,7 @@ a.inverted.ui.card:hover,
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Checkbox
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Checkbox
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -64812,7 +65953,7 @@ a.inverted.ui.card:hover,
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Dimmer
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Dimmer
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -65223,7 +66364,7 @@ body.dimmable > .dimmer {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Dropdown
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Dropdown
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -67619,7 +68760,7 @@ select.ui.dropdown {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Embed
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Embed
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -67779,7 +68920,7 @@ select.ui.dropdown {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Flyout
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Flyout
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -68410,7 +69551,7 @@ body.pushable > .pusher {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Modal
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Modal
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -69305,7 +70446,7 @@ body.pushable > .pusher {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Nag
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Nag
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -69640,7 +70781,7 @@ a.ui.nag {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Popup
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Popup
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -71010,7 +72151,7 @@ a.ui.nag {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Progress
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Progress
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -71891,7 +73032,7 @@ a.ui.nag {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Slider
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Slider
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -73027,7 +74168,7 @@ a.ui.nag {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Rating
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Rating
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -73493,7 +74634,7 @@ a.ui.nag {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Search
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Search
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -74095,7 +75236,7 @@ a.ui.nag {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Shape
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Shape
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -74244,7 +75385,7 @@ a.ui.nag {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Sidebar
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Sidebar
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -74860,7 +76001,7 @@ body.pushable > .pusher {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Sticky
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Sticky
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -74929,7 +76070,7 @@ body.pushable > .pusher {
          Site Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Tab
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Tab
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -75011,7 +76152,7 @@ body.pushable > .pusher {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Toast
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Toast
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -75940,7 +77081,7 @@ body.pushable > .pusher {
         User Overrides
 *******************************/
 /*!
- * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Transition
+ * # Fomantic-UI 2.9.4-beta.84+7052a23 - Transition
  * https://github.com/fomantic/Fomantic-UI/
  *
  *