/*AMOS-LAYOUT*/

.steps {
  color: @disabled-color;

  .step-wrap {
    border-bottom: 3px solid @border-color-default;
    margin-bottom: 25px;
    padding-bottom: 25px;

    .title {
      text-align: center;
      margin-bottom: 15px;
    }

    P {
      text-align: center;
    }

    .form-group {
      margin-top: 40px;

      .btn-primary {
        background-color: @disabled-color;
      }
    }

    a {
      color: @disabled-color;
    }

    .step-number {
      font-size: 52px;
      color: @disabled-color;
      border: 5px solid @disabled-color;
      border-radius: 50%;
      font-weight: bold;
      float: left;
      width: 95px;
      height: 95px;
      margin-right: 10px;

      @media (max-width: 560px) {
        float: none;
        margin: 0 auto;
      }
    }

    &.active {
      color: @text-main-color;

      .form-group {
        .btn-primary {
          background-color: @primary-color;
        }
      }

      a {
        color: @text-link-color;
      }

      .step-number {
        color: @primary-color;
        border-color: @primary-color;
      }

    }
  }
}

//-----------------------------------------------
// STEP WIZARD
//-----------------------------------------------
.community-title-work {
  margin-bottom: @margin-default;
  p {
    color: @text-primary-color;
    margin: 0;
  }
}

.created-by {
  .community-type {
    color: @primary-color;
    margin: 0;
  }
  .community-info {
    margin: 0;
  }
}

.progress-menu-container {
  padding: @padding-default*2 0 0 0;
}

.progress-container {
  .part {
    font-size: 2.20em;
    margin-top: @margin-default * 3;
    color: @primary-color-icons;
  }
}

.flexer,
.progress-indicator {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  .flexbox;
}

.no-flexer,
.progress-indicator.stacked {
  display: block;
}

.no-flexer-element {
  -ms-flex: 0;
  -webkit-flex: 0;
  -moz-flex: 0;
  flex: 0;
}

.flexer-element,
.progress-indicator > li {
  -ms-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  flex: 1;
}

.progress-container-lg {
  display: block;
}

.progress-container-sm {
  display: none;
  width: 100%;
  background: @primary-color;
  font-size: 18px;
  color: #fff;
  padding: 10px;

  p {
    float: left;
    margin: 3px 10px;
    display: table-cell;
    width: 91%;
  }

  a, a:hover {
    font-size: 18px;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
  }
}

//fix wizard step
.progress-indicator {
  margin: @margin-default 0 @margin-default 0;
  padding: 0;
  font-size: 80%;
  text-transform: uppercase;
  margin-bottom: 1em;

  //== BEGIN LI
  > li {
    list-style: none;
    text-align: center;
    width: auto;
    padding: 0;
    margin: 0;
    position: relative;
    text-overflow: ellipsis;
    //color: #bbbbbb;
    display: block;
    font-size: 12px;

    &:hover {
      color: #6e6e6e;

      &.warning {
        .bubble-indicator {
          background-color: #fff;
          color: @warning-color;
          border-color: @warning-color;

          &:after, &:before {
            background-color: @warning-color;
            border-color: @warning-color;
          }
        }
      }

      &.completed {
        .bubble-indicator {
          background-color: @primary-color;
          color: #fff;
          border-color: @primary-color;

          &:after, &:before {
            background-color: @primary-color;
            border-color: @primary-color;
          }
        }
      }

      &.danger {
        .bubble-indicator {
          background-color: transparent;
          color: @danger-color;
          border: 5px solid darken(@danger-color, 10%);

          &:after, &:before {
            background-color: @danger-color;
            border-color: @danger-color;
          }
        }
      }

      .bubble-indicator {
        opacity: 0.8;
      }
    }

    //COMPLETED
    &.completed {
      color: @primary-color;

      .bubble-indicator {
        background-color: @primary-color;
        color: @primary-color;
        border-color: @primary-color;

        &:before,
        &:after {
          background-color: @primary-color;
          border-color: @primary-color;
        }
      }
    }

    //DANGER
    &.danger {
      .bubble-indicator {
        background-color: transparent;
        color: @danger-color;
        border: 5px solid darken(@danger-color, 10%);

        &:before,
        &:after {
          background-color: @danger-color;
          border-color: darken(@danger-color, 10%);
        }
      }

      .key-indicator {
        color: @danger-color;
      }
    }

    //WARNING
    &.warning {
      .bubble-indicator {
        background-color: transparent;
        color: @warning-color;
        border: 5px solid darken(@warning-color, 10%);
        border-radius: 0 !important;

        &:before,
        &:after {
          background-color: @warning-color;
          border-color: darken(@warning-color, 10%);
        }

      }
      .key-indicator {
        color: @warning-color !important;
      }
    }

    //INFO
    &.info {
      .bubble-indicator {
        background-color: #000;
        color: #000;
        border-color: #000;

        &:before,
        &:after {
          background-color: #000;
          border-color: #000;
        }
      }
    }

    //NUMBERS - INDEX
    .key-indicator {
      position: absolute;
      top: 2px;
      left: 15px;
      right: 15px;
      font-size: 23px;
      color: @white-color;
      font-weight: bold;
    }

    //BUBBLE INDICATOR
    .bubble-indicator {
      border-radius: 1000px;
      width: 40px;
      height: 40px;
      background-color: #bbbbbb;
      display: block;
      margin: 0 auto 0.5em auto;
      border-bottom: 1px solid #888888;

      &:before {
        left: 0;
      }

      &:after {
        right: 0;
      }

      &:before, &:after {
        display: block;
        position: absolute;
        top: 18px;
        width: 34%;
        height: 5px;
        content: '';
        background-color: #bbbbbb;

        @media (max-width: 991px) {
          width: 22%;
        }
      }

      &.long-line:before, &.long-line:after {
        width: 39%;

        @media (max-width: 991px) {
          width: 33%;
        }
      }
    }

    a {
      &:hover {
        .bubble-indicator {
          background-color: #999;
          color: #999;
          border-color: #999;

          &:before,
          &:after {
            background-color: #999;
            border-color: #999;
          }
        }
      }
    }

    &:first-child > .bubble-indicator:before{
      display: none;
    }
    &:last-child > .bubble-indicator:after{
      display: none;
    }

  }
  //== END LI

  //== BEGIN STACKED
  .stacked {
    > li {
      text-indent: -10px;
      text-align: center;
      display: block;

      .bubble-indicator {
        &:before, &:after {
          left: 50%;
          margin-left: -1.5px;
          width: 3px;
          height: 100%;
        }
      }

      a {
        border: none;
      }
    }

    .stacked-text {
      position: relative;
      z-index: 10;
      top: 0;
      margin-left: 60% !important;
      width: 45% !important;
      display: inline-block;
      text-align: left;
      line-height: 1.2em;
    }
  }
  //== END STACKED

}

@media (max-width: 767px) {
  .community-title-work {
    text-align: center;
    margin-top: @margin-default;
    p {
      color: @text-primary-color;
    }
  }

  .created-by {
    text-align: center;
    margin-top: @margin-default * 2;
    .community-type {
      color: @primary-color;
    }
  }
}

@media (max-width: 500px) {
  .progress-container-lg {
    display: none;
  }

  .progress-container-sm {
    display: table;
    margin-bottom: @margin-default;
  }
}

@media handheld, screen and (max-width: 400px) {
  .progress-indicator {
    font-size: 60%;
  }
}