rails-active-ui 0.3.0 → 0.3.2

data/formantic-ui/components/step.css

@@ -0,0 +1,1538 @@
+/*!
+ * # Fomantic-UI 2.9.4 - Step
+ * https://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Plural
+*******************************/
+
+.ui.steps:not(.circular) {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: stretch;
+  margin: 1em 0;
+  background: "";
+  box-shadow: none;
+  line-height: 1.14285714em;
+  border-radius: 0.28571429rem;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+}
+.ui.steps:not(.unstackable) {
+  flex-wrap: wrap;
+}
+
+/* First Steps */
+.ui.steps:first-child {
+  margin-top: 0;
+}
+
+/* Last Steps */
+.ui.steps:last-child {
+  margin-bottom: 0;
+}
+
+
+/*******************************
+           Singular
+*******************************/
+
+.ui.steps:not(.circular) .step {
+  position: relative;
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: row wrap;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0;
+  padding: 1.14285714em 2em;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
+  border-radius: 0;
+  border: none;
+  border-right: 1px solid rgba(34, 36, 38, 0.15);
+  transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
+}
+
+/* Arrow */
+.ui.steps:not(.circular) .step::after {
+  display: none;
+  position: absolute;
+  z-index: 2;
+  content: "";
+  top: 50%;
+  right: 0;
+  background-color: #fff;
+  width: 1.14285714em;
+  height: 1.14285714em;
+  border-style: solid;
+  border-color: rgba(34, 36, 38, 0.15);
+  border-width: 0 1px 1px 0;
+  transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
+  transform: translateY(-50%) translateX(50%) rotate(-45deg);
+}
+
+/* First Step */
+.ui.steps:not(.circular) .step:first-child {
+  padding-left: 2em;
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
+}
+
+/* Last Step */
+.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:not(.circular) .step:only-child {
+  border-radius: 0.28571429rem;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+
+/* Title */
+.ui.steps .step .title {
+  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%;
+}
+
+/* Description */
+.ui.steps .step .description {
+  font-weight: normal;
+  font-size: 0.92857143em;
+  color: rgba(0, 0, 0, 0.87);
+  line-height: 1.14285714em;
+}
+.ui.steps .step > .description {
+  width: 100%;
+}
+.ui.steps .step .title ~ .description {
+  margin-top: 0.25em;
+}
+
+/* Icon */
+.ui.steps .step > i.icon {
+  line-height: 1;
+  font-size: 2.5em;
+  margin: 0 1rem 0 0;
+}
+.ui.steps .step > i.icon,
+.ui.steps .step > i.icon ~ .content {
+  display: block;
+  flex: 0 1 auto;
+  align-self: center;
+}
+
+/* Horizontal Icon */
+.ui.steps:not(.vertical) .step > i.icon {
+  width: auto;
+}
+
+/* Link */
+.ui.steps .link.step,
+.ui.steps a.step {
+  cursor: pointer;
+}
+
+
+/*******************************
+            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.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:not(.vertical) a.step::before,
+.ui.circular.steps:not(.vertical) a.step::after,
+.ui.circular.steps:not(.vertical) a.step .content,
+.ui.circular.steps:not(.vertical) .step.link .content,
+.ui.circular.steps:not(.vertical) .step.link::before,
+.ui.circular.steps:not(.vertical) .step.link::after {
+  cursor: pointer;
+}
+.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
+    --------------- */
+.ui.ordered.steps {
+  counter-reset: ordered;
+}
+.ui.ordered.steps .step::before {
+  text-align: center;
+  content: counter(ordered);
+  align-self: center;
+  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;
+}
+
+/* --------------
+        Vertical
+    --------------- */
+.ui.vertical.steps:not(.circular) {
+  display: inline-flex;
+  flex-direction: column;
+  overflow: visible;
+}
+.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:not(.circular) .step:first-child {
+  padding: 1.14285714em 2em;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.vertical.steps:not(.circular) .step:last-child {
+  border-bottom: none;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+.ui.vertical.steps:not(.circular) .step:only-child {
+  border-radius: 0.28571429rem;
+}
+
+/* Arrow */
+.ui.vertical.steps:not(.circular) .step::after {
+  top: 50%;
+  right: 0;
+  border-width: 0 1px 1px 0;
+  display: none;
+}
+.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:not(.circular) .active.step::after {
+  display: block;
+}
+.ui.vertical.steps:not(.circular) .step:last-child::after {
+  display: none;
+}
+.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):not(.circular) {
+    display: inline-flex;
+    overflow: visible;
+    flex-direction: column;
+  }
+  .ui.steps:not(.unstackable):not(.circular) .step {
+    width: 100% !important;
+    flex-direction: column;
+    border-radius: 0;
+    padding: 1.14285714em 2em;
+    border-right: none;
+    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+  }
+  .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):not(.circular) .step:last-child {
+    border-radius: 0 0 0.28571429rem 0.28571429rem;
+    border-bottom: none;
+  }
+  
+/* Arrow */
+  .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:not(.circular) .active.step:last-child::after {
+    display: none;
+  }
+  
+/* Content */
+  .ui.steps:not(.unstackable):not(.circular) .step .content {
+    text-align: center;
+  }
+  
+/* Icon */
+  .ui.steps:not(.unstackable):not(.circular) .step > i.icon,
+  .ui.ordered.steps:not(.unstackable):not(.circular) .step::before {
+    margin: 0 0 1rem 0;
+  }
+}
+
+
+/*******************************
+             States
+*******************************/
+
+
+/* Link 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: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:not(.circular) .step.active {
+  cursor: auto;
+  background: #f3f4f5;
+}
+.ui.steps:not(.circular) .step.active::after {
+  background: #f3f4f5;
+}
+.ui.steps:not(.circular) .step.active .title {
+  color: #4183c4;
+}
+.ui.ordered.steps .step.active::before,
+.ui.steps .active.step i.icon {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+/* Active Arrow */
+.ui.steps:not(.circular) .step::after {
+  display: block;
+}
+.ui.steps:not(.circular) .active.step::after {
+  display: block;
+}
+.ui.steps:not(.circular) .step:last-child::after {
+  display: none;
+}
+.ui.steps:not(.circular) .active.step:last-child::after {
+  display: none;
+}
+
+/* Active 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);
+}
+
+/* Completed */
+.ui.steps .step.completed > i.icon::before,
+.ui.ordered.steps .step.completed::before {
+  color: #21ba45;
+}
+
+/* Disabled */
+.ui.steps:not(.circular) .disabled.step {
+  cursor: auto;
+  background: #fff;
+  pointer-events: none;
+}
+.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:not(.circular) .disabled.step::after {
+  background: #fff;
+}
+.ui.circular.steps .disabled.step {
+  cursor: auto;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.ui.circular.steps .disabled.step::before,
+.ui.circular.steps .disabled.step::after {
+  cursor: auto;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/* --------------
+       Stackable
+    --------------- */
+
+/* Tablet Or Below */
+@media only screen and (max-width: 991.98px) {
+  .ui[class*="tablet stackable"].steps:not(.circular) {
+    display: inline-flex;
+    overflow: visible;
+    flex-direction: column;
+  }
+  
+/* Steps */
+  .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:not(.circular) .step:first-child {
+    padding: 1.14285714em 2em;
+    border-radius: 0.28571429rem 0.28571429rem 0 0;
+  }
+  .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:not(.circular) .step::after {
+    top: unset;
+    bottom: -1.14285714em;
+    right: 50%;
+    transform: translateY(-50%) translateX(50%) rotate(45deg);
+  }
+  
+/* Content */
+  .ui[class*="tablet stackable"].steps:not(.circular) .step .content {
+    text-align: center;
+  }
+  
+/* Icon */
+  .ui[class*="tablet stackable"].steps .step > i.icon,
+  .ui[class*="tablet stackable"].ordered.steps .step::before {
+    margin: 0 0 1rem 0;
+  }
+}
+
+/* --------------
+          Fluid
+    --------------- */
+
+/* Fluid */
+.ui.fluid.steps {
+  display: flex;
+  width: 100%;
+}
+
+/* --------------
+        Attached
+    --------------- */
+
+/* Top */
+.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:not(.circular) .step:first-child {
+  border-radius: 0.28571429rem 0 0 0;
+}
+.ui.attached.steps:not(.circular) .step:last-child {
+  border-radius: 0 0.28571429rem 0 0;
+}
+
+/* Bottom */
+.ui.bottom.attached.steps:not(.circular) {
+  margin: 0 -1px 0;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+.ui.bottom.attached.steps:not(.circular) .step:first-child {
+  border-radius: 0 0 0 0.28571429rem;
+}
+.ui.bottom.attached.steps:not(.circular) .step:last-child {
+  border-radius: 0 0 0.28571429rem 0;
+}
+
+/* -------------------
+        Evenly Divided
+    -------------------- */
+.ui.one.steps,
+.ui.two.steps,
+.ui.three.steps,
+.ui.four.steps,
+.ui.five.steps,
+.ui.six.steps,
+.ui.seven.steps,
+.ui.eight.steps {
+  width: 100%;
+}
+.ui.one.steps > .step,
+.ui.two.steps > .step,
+.ui.three.steps > .step,
+.ui.four.steps > .step,
+.ui.five.steps > .step,
+.ui.six.steps > .step,
+.ui.seven.steps > .step,
+.ui.eight.steps > .step {
+  flex-wrap: nowrap;
+}
+.ui.one.steps > .step {
+  width: 100%;
+}
+.ui.two.steps > .step {
+  width: 50%;
+}
+.ui.three.steps > .step {
+  width: 33.333%;
+}
+.ui.four.steps > .step {
+  width: 25%;
+}
+.ui.five.steps > .step {
+  width: 20%;
+}
+.ui.six.steps > .step {
+  width: 16.666%;
+}
+.ui.seven.steps > .step {
+  width: 14.285%;
+}
+.ui.eight.steps > .step {
+  width: 12.5%;
+}
+
+/* -------------------
+       Sizes
+-------------------- */
+.ui.steps .step,
+.ui.step {
+  font-size: 1rem;
+}
+.ui.mini.steps .step,
+.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:not(.circular) {
+  border: 1px solid #555;
+}
+.ui.inverted.steps:not(.circular) .step {
+  color: rgba(255, 255, 255, 0.9);
+  background: #1b1c1d;
+  border-color: #555;
+}
+.ui.inverted.steps:not(.circular) .step::after {
+  background-color: #1b1c1d;
+  border-color: #555;
+}
+.ui.inverted.steps .step .description {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Active */
+.ui.inverted.steps:not(.circular) .step.active,
+.ui.inverted.steps:not(.circular) .step.active::after {
+  background: #333;
+}
+.ui.inverted.ordered.steps:not(.circular) .step.active::before,
+.ui.inverted.steps:not(.circular) .active.step i.icon {
+  color: #ffffff;
+}
+
+/* Disabled */
+.ui.inverted.steps:not(.circular) .disabled.step,
+.ui.inverted.steps:not(.circular) .disabled.step::after {
+  background: #222;
+}
+.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: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: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
+*******************************/
+
+@font-face {
+  font-family: Step;
+  src: url("data:application/font-woff;base64,d09GRgABAAAAAAqgABAAAAAAEXwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAKhAAAABwAAAAcjOLzxEdERUYAAApoAAAAHAAAACAAJwAYT1MvMgAAAeQAAABEAAAAVj4wSUZjbWFwAAACPAAAAEYAAAFO0BkDx2N2dCAAAAfYAAAAFAAAABwGSf+UZnBnbQAAAoQAAAT5AAAJkYoKeDtnYXNwAAAKYAAAAAgAAAAIAAAAEGdseWYAAAf4AAAAuAAAALj5yjT+aGVhZAAAAWwAAAA1AAAANhGASlVoaGVhAAABpAAAACAAAAAkB3wDa2htdHgAAAIoAAAAFAAAABQMwgBDbG9jYQAAB+wAAAAMAAAADAA4AFxtYXhwAAABxAAAACAAAAAgAKgAR25hbWUAAAiwAAABgQAAAuggq9iKcG9zdAAACjQAAAAqAAAAPa7AQJpwcmVwAAAHgAAAAFYAAABWkqGa/3icY2BkYGAAYin+m+nx/DZfGeRZGEDgvOmMXhB9PyH33/+//9cz72KWA3I5GJhAogBAsAyTAAAAeJxjYGRgYE77n8YQw8Lw/+///8y7GIAiKIAVAKglBu0AAQAAAAUAFgABAAAAAAACAAYAEwBuAAAALQAcAAAAAHicY2BkPs84gYGVgYOpk+ksAwNDP4RmfMNgxMjBwMDEwMrMgBUEpLmmMDi8YHjByJz2P40hhlmOIRAozAiSAwAYDgv0BAAAAAAAAAABVAAABAAARgNt//14nN2MwQ3AIAwDzxQxBSMwCPtPwRbUCf10BSwlJ0u2gYdzHRGadkpfGWYzRYGlvSOwOMxUzba/Gt+A6XQ0fhLX6wWAUwawAAB4nJ1V2XbTVhSVPGRwEjpkoKAO19w4UOvKhCkYMGkqxXYhHRwIrQQdpAx05J3HPutrjkK7Vh/5tO59PSS0dK22LJbPvkdbZ9g650YcIyp9Gohr1KGSlwOprD2WSvdJXNd1L4+VDAZxXbYST0mbqJ0kSmrd7FAu8VjrKlknWCfj5SBWT1WeZ6AM4hQeZUlEG0QbqZcmSeKJ4yeJFmcQHyVJICWjEKfSyFBCNRrEUtWhTOnQq9cTcdNAykajHnVYVPdDxSfHNafUrANGKlc5whXr1Ua+G6cDL3uQxDrBs62HMR54rH6UKpCKkenIP3ZKTpSGgVRx1KFW4ugwk1/3kUwqzUCmjGJFpe6BuN39dNsWMT10Or4uSpVGqrq5ziia7dHxqIMoD9nG6aTc0Nn28OUZU1SrXXGz7UBmDVxKyWx0n0QAHSZS4+kBTjWcAqkZ9UfF2efPARLJXJSqPFUyh3oDmTM7e3Ex7W4nq7JwpJ8HMm92duOdh0OnV4d/0foXTOHMR4/iYn4+QvpQan4iTiSlRljM8qeGH3FXIEK5MYgLF8rgU4Q5dEXa2WZd47Ux9obP+UqpYT0J2uij+H4K/U4kKxxnUaP1SJzNY9d1rdxnUEu1uxc7Mq9DlSLu7wsLrjPnhGGeFgtVX5753gU0/waIZ/xA3jSFS/uWKUq0b5uiTLtoigrtElSlXTbFFO2KKaZpz5pihvYdU8zSnjMy4//L3OeR+xze8ZCb9l3kpn0PuWnfR27aD5CbViE3bR25aS8gN61GbtpVozp2BBoGaRdSFUHQNLL6YdxWm/VA1ow0fGlg8i5iyPrqREedtbXKH8V/deILB3Jpoqe7Iheb4i6v2xY+PN3uq4+aRt2w1fjGkfIwHkZ6HJrQWfnN4b/tTd0umu4yqjLoARVMCsAAZe1AAtM62wmk9Zqn+PIHYFyGeM5KQ7VUnzuGpu/leV/3sTnxvsftxi63XHd5CVnWDXJj9vDfUmSq6x/lLa1UJ0esKyePVWsYQyq8KLq+kpR7tLUbvyipsvJelNbK55OQmz2DG0Jbtu5hsCNMacolHl5TpSg91FKOskMsbynKPOCUiwtahsS4DnUPamvE6aF6GBsLIYahtL0QcEgpXRXftMp38R6ra9jo+MUV4el6chIRn+Iq+1HwVNdG/egO2rxm3TKDKVWqp/uMT7Gv2/ZRWWmkjrMXt1QH1zTrGjkV00/ka+B0bzho3QM9VHw0QSNVNcfoxihjNJY15d8EdDFWfsNo1WL7PdxPnaRVrLlLmOybE/fgtLv9Kvu1nFtG1v3XBr1t5IqfIzG/LQr8Owdit2QN1DuTgRgLyFnQGMYWJncYroNtxG32Pyan/9+GhUVyVzsau3nqw9WTUSV32fK4y012WdejNkfVThr7CI0tDzfm2OFyLLbEYEG2/sH/Me4Bd2lRAuDQyGWYiNp0oZ7q4eoeq7FtOFcSAXbNseN0AHoALkHfHLvW8wmA9dwj5y7AfXIIdsgh+JQcgs/IuQXwOTkEX5BDMCCHYJecOwAPyCF4SA7BHjkEj8jZBPiSHIKvyCGIySFIyLkN8JgcgifkEHxNDsE3Rq5OZP6WB9kA+s6im0CpnRoc2jhkRq5N2Ps8WPaBRWQfWkTqkZHrE+pTHiz1e4tI/cEiUn80cmNC/YkHS/3ZIlJ/sYjUZ8aXmSMprw6e844O/gSX6q1eAAAAS7gAyFJYsQEBjlm5CAAIAGMgsAEjRLADI3CyBCgJRVJEsgoCByqxBgFEsSQBiFFYsECIWLEGA0SxJgGIUVi4BACIWLEGAURZWVlZuAH/hbAEjbEFAEQAAHicY2BAA0YMRszc/zeCMAAQtAPhAAAAAAAAAAAAOABcAAEARgABA7oCqAAVABxAGQ8BAAEBQgACAQJqAAEAAWoAAABhFBcUAxIrARQHAQYiJwEmND8BNjIfAQE2Mh8BFgO6D/4UEC0Q/uMPD04QLRGoAXYQLhBODwIjFxD+FA8PAR0QLRFOEBCpAXgQEE4QAAAB//3/rwN0Ax4ADAASQA8AAQEKQwAAAAsARBUTAhErARQOASIuAj4BMh4BA251y+3NcQZ9wPq/gQFmeMh3d8nvyXd3yQAAAHicfZHLSsNAFIb/6UVrCyIKrg8IYhHSC7pxVSlUcOmi+7SmSUqaCZOp0NfxGdz6CLpz69atK9f+SUfBgk3I5Dv/ucyZMwAO8Q6F9XOJxLFCA0+OK9jFi+Mq9Q/HNTRUxXEdLXXieIf6teMmztWj4xaO1BcrqNoerXlZrWCFAzw6rmAfz46r1N8c18ifjus4Vi3HOzhQHcdNjNWt4xZO1SuG0MiwgkGMEBEsBGdU2/z30UUPF6QJI4SR66gYKXzOQbgumRGVnpz2gN+MVko1YERC9jDlugCGOluZOIysnA3b0u/2LmSyEk0pTv1E/KWNtMllIDOd2iBJtDfVTNushx83cEcxZAsJGzE0g3CZ+GZryhbXmGJxjLgMER7d4wAwDkwe61R6Xndr+g3FtCzhlwH3v3PL8cA2+1QtCxQTMuVEBKONcsK7KHxzKlPqHssGaWB8G9wXw8ofwr61M5kZvZCR21oyo+fB1DI4KvfIcIUO339vIrI2u+p0/sz5GyLHh70AAAB4nGNgYoAALgbsgBWIGRmYGJkYmTmTM1KTs3MTi7LZkjOLknNSATkPBkYAAAABAAH//wAPeJxjYGRgYOABYgEGCQYmIM0CxCCaEYIBBW0AQAAAAAEAAAAA3kztOAAAAADPNZiNAAAAAN9gbf4=") format("woff");
+}
+.ui.steps .step.completed > .icon::before,
+.ui.ordered.steps .step.completed::before {
+  font-family: Step;
+  content: "\e800";
+  
+/* '' */
+}
+
+
+/*******************************
+         Site Overrides
+*******************************/
+