// Steps

.step {
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
   position: relative;
   @media (max-width: $medium) {
      margin-bottom: 10px;
   }

   .item-step {
      align-items: center;
      display: flex;
      flex-direction: column;
      position: relative;

      .nros-step {
         background: white;
         border: 1px solid #d1d1d1;
         @include border-radius(50%);
         height: 40px;
         margin-bottom: 5px;
         width: 40px;
         text-align: center;
         z-index: 2;

         span {
            color: #d1d1d1;
            font: {
               size: 18px;
            }
            line-height: 36px;
         }
         @media (max-width: $medium) {
            height: 32px;
            width: 32px;
            span {
               font: {
                  size: 14px;
               }
               line-height: 30px;
               font-weight: 600;
            }
         }
      }

      p {
         color: #d1d1d1;
         font-size: 11px;
      }

      // Active
      &.step-active {
         .nros-step {
            border: 2px solid $orange;
            span {
               color: $black;
            }
         }
         p {
            color: $black;
         }
      }
   }

   &:after {
      content: "";
      background: #d1d1d1;
      @include position(absolute, $top: 20px, $left: 20px, $height: 1px, $width: 95%);
      display: block;
      z-index: 1;
   }
}