.primary-color,
ul.stepper li.active a .circle,
ul.stepper li.completed a .circle {
  background-color: #4285f4 !important
}

.danger-color,
ul.stepper li.warning a .circle {
  background-color: #ff3547 !important
}

ul.stepper {
  padding: 0 1.5rem;
  padding: 1.5rem;
  margin: 1em -1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  counter-reset: section
}

ul.stepper li a {
  padding: 1.5rem;
  text-align: center
}

ul.stepper li a .circle {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: .5rem;
  line-height: 1.7rem;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 50%
}

ul.stepper li a .label {
  display: inline-block;
  color: rgba(0, 0, 0, 0.38)
}

ul.stepper li.active a .label,
ul.stepper li.completed a .label {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87)
}

.stepper-horizontal {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.stepper-horizontal li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: .5s;
  transition: .5s
}

.stepper-horizontal li a .label {
  margin-top: .63rem
}

.stepper-horizontal li:not(:last-child):after {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 1px;
  margin: .5rem 0 0 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.1)
}

.stepper-horizontal li:not(:first-child):before {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 1px;
  margin: .5rem 0 0 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.1)
}

.stepper-horizontal li:hover {
  background-color: rgba(0, 0, 0, 0.06)
}

@media(max-width:47.9375rem) {
  .stepper-horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }

  .stepper-horizontal li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
  }

  .stepper-horizontal li a .label {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-top: .2rem
  }

  .stepper-horizontal li:not(:last-child):after {
    position: absolute;
    top: 3.75rem;
    left: 2.19rem;
    width: 1px;
    height: calc(100% - 40px);
    content: ""
  }
}

.stepper-horizontal > li:not(:last-of-type) {
  margin-bottom: 0 !important
}

.stepper-vertical {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.stepper-vertical li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

.stepper-vertical li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: start;
  align-self: flex-start
}

.stepper-vertical li a .circle {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1
}

.stepper-vertical li a .label {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  margin-top: .2rem
}

.stepper-vertical li.completed a .label {
  font-weight: 500
}

.stepper-vertical li .step-content {
  display: block;
  padding: .94rem;
  margin-top: 0;
  margin-left: 3.13rem
}

.stepper-vertical li .step-content p {
  font-size: .88rem
}

.stepper-vertical li:not(:last-child):after {
  position: absolute;
  top: 3.44rem;
  left: 2.19rem;
  width: 1px;
  height: calc(100% - 40px);
  content: "";
  background-color: rgba(0, 0, 0, 0.1)
}

.stepper-vertical li .step-content {
    display: block;
    padding: .94rem;
    margin-top: 0;
    margin-left: 3.13rem;
}

.grey.lighten-3 {
    background-color: #eee !important;
}

/*.test-skin .primary-color,
.test-skin ul.stepper li.active a .circle,
ul.stepper li.active a .test-skin .circle,
.test-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .test-skin .circle {
  background-color: #fff !important
}

.white-skin .primary-color,
.white-skin ul.stepper li.active a .circle,
ul.stepper li.active a .white-skin .circle,
.white-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .white-skin .circle {
  background-color: #4285f4 !important
}

.black-skin .primary-color,
.black-skin ul.stepper li.active a .circle,
ul.stepper li.active a .black-skin .circle,
.black-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .black-skin .circle {
  background-color: #2ad1a3 !important
}

.cyan-skin .primary-color,
.cyan-skin ul.stepper li.active a .circle,
ul.stepper li.active a .cyan-skin .circle,
.cyan-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .cyan-skin .circle {
  background-color: #4fada7 !important
}

.mdb-skin .primary-color,
.mdb-skin ul.stepper li.active a .circle,
ul.stepper li.active a .mdb-skin .circle,
.mdb-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .mdb-skin .circle {
  background-color: #33b5e5 !important
}

.deep-purple-skin .primary-color,
.deep-purple-skin ul.stepper li.active a .circle,
ul.stepper li.active a .deep-purple-skin .circle,
.deep-purple-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .deep-purple-skin .circle {
  background-color: #d0637c !important
}

.navy-blue-skin .primary-color,
.navy-blue-skin ul.stepper li.active a .circle,
ul.stepper li.active a .navy-blue-skin .circle,
.navy-blue-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .navy-blue-skin .circle {
  background-color: #309e9e !important
}

.pink-skin .primary-color,
.pink-skin ul.stepper li.active a .circle,
ul.stepper li.active a .pink-skin .circle,
.pink-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .pink-skin .circle {
  background-color: #bd5d70 !important
}

.indigo-skin .primary-color,
.indigo-skin ul.stepper li.active a .circle,
ul.stepper li.active a .indigo-skin .circle,
.indigo-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .indigo-skin .circle {
  background-color: #7f82c5 !important
}

.light-blue-skin .primary-color,
.light-blue-skin ul.stepper li.active a .circle,
ul.stepper li.active a .light-blue-skin .circle,
.light-blue-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .light-blue-skin .circle {
  background-color: #3d799c !important
}

.grey-skin .primary-color,
.grey-skin ul.stepper li.active a .circle,
ul.stepper li.active a .grey-skin .circle,
.grey-skin ul.stepper li.completed a .circle,
ul.stepper li.completed a .grey-skin .circle {
  background-color: #2b2b2b !important
}*/