/* Form Wizard css  */
/*-----------------*/
.wizard .steps .current-info {
  /* default current steps information hide */
  display: none; }

.wizard .steps ul {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  padding: 0; }
  .wizard .steps ul li {
    display: table-cell;
    text-align: center;
    position: relative; }
    .wizard .steps ul li a {
      text-transform: uppercase;
      position: relative;
      padding-top: 3.46rem;
      margin-top: 1.33rem;
      margin-bottom: 1.33rem;
      display: block; }
      .wizard .steps ul li a .step {
        /* Default step */
        background-color: #FFFFFF;
        position: absolute;
        top: 0.86rem;
        left: 50%;
        z-index: 1;
        width: 1.33rem;
        height: 1.33rem;
        border-radius: 50%; }
        .wizard .steps ul li a .step i {
          /* icon inside step */
          position: relative;
          left: -2px;
          top: -1px;
          font-size: 1.6rem; }
        .wizard .steps ul li a .step + .fonticon-wrap {
          /*wizard Icon upon step icon */
          position: absolute;
          top: -50px;
          left: 15px;
          right: 0px; }
    .wizard .steps ul li::before, .wizard .steps ul li::after {
      /* wizard horizontal line */
      content: '';
      position: absolute;
      top: 2.86rem;
      width: 50%;
      height: 3px; }
    .wizard .steps ul li::before {
      left: 0; }
    .wizard .steps ul li:after {
      right: 0; }
    .wizard .steps ul li:last-child:after {
      content: none; }
    .wizard .steps ul li.current a {
      /* current step */
      color: #4527a0;
      cursor: default; }
    .wizard .steps ul li.current::before {
      background-color: #4527a0; }
    .wizard .steps ul li.current:after {
      background-color: #e4e8e8; }
    .wizard .steps ul li.current ~ li a {
      color: #828D99; }
    .wizard .steps ul li.current ~ li:before {
      background-color: #e4e8e8; }
    .wizard .steps ul li.current ~ li:after {
      background-color: #e4e8e8; }
    .wizard .steps ul li.disabled a {
      /* disabled step */
      cursor: default; }
      .wizard .steps ul li.disabled a .step {
        border: 3px solid; }
    .wizard .steps ul li.done a {
      /* done step */
      color: #39DA8A; }
    .wizard .steps ul li.done::after, .wizard .steps ul li.done::before {
      background-color: #39DA8A; }
    .wizard .steps ul li.error a {
      /* error for form wizard validation */
      color: #FF5B5C; }
      .wizard .steps ul li.error a .step {
        color: #FF5B5C; }

.wizard .content {
  /* form wizard content */
  padding: 0;
  margin: 0; }
  .wizard .content .title {
    display: none; }

.wizard .actions ul {
  list-style: none;
  padding: 0;
  margin: 0; }
  .wizard .actions ul li {
    float: left; }
    .wizard .actions ul li.disabled {
      display: none; }
    .wizard .actions ul li + li {
      margin-left: 0.66rem;
      float: right; }

.wizard.vertical .steps {
  /* steps for vertical */
  float: left;
  width: 30%; }
  .wizard.vertical .steps ul li {
    margin: 0 .5rem;
    display: block; }
    .wizard.vertical .steps ul li a {
      display: flex;
      text-align: left;
      margin: 0 0.5rem;
      padding: 1rem;
      border-radius: 0.267rem; }
      .wizard.vertical .steps ul li a i {
        font-size: 2.4rem; }
        .wizard.vertical .steps ul li a i + span {
          font-family: "Rubik", Helvetica, Arial, serif;
          color: #475F7B; }
      .wizard.vertical .steps ul li a .number {
        /* step indicator number */
        display: none; }
    .wizard.vertical .steps ul li.current {
      background: #f2f4f4;
      border-radius: 0.267rem; }
    .wizard.vertical .steps ul li::before, .wizard.vertical .steps ul li::after {
      content: none; }

.wizard.vertical .content {
  /* content inside vertical */
  float: left;
  width: 70%;
  border-left: 1px solid #DFE3E7; }
  .wizard.vertical .content .body {
    padding: 2.5%; }

.wizard.vertical .actions {
  /* action inside vertical */
  text-align: right; }
  .wizard.vertical .actions ul {
    display: inline-block; }

/* vertical wizard section becomes 100% on small screen */
@media (max-width: 767.98px) {
  .wizard.vertical .steps {
    width: 100%; }
  .wizard.vertical .content {
    width: 100%;
    border-left: none; } }

/* specific media query for below screen to hide subtitle */
@media (min-width: 768px) and (max-width: 991.98px) {
  .wizard.vertical .steps ul li a small {
    display: none; } }
