@import "base/variables.less";
@import "base/mixins.less";

.box, .modal-box {
  padding: 15px;
  background-color: @colored-2;

  &__with_menu {
    padding: 0 0 15px 0;

    .box-content {
      margin: 0 15px;
    }

    .box-footer {
      margin: 0 15px;
    }
  }

  &-title {
    text-transform: uppercase;
    height: 82px;
    line-height: 82px;
    text-align: center;
    font-family: @second-font;
    font-size: 21px;
    font-weight: 800;
  }

  &-content {
    background-color: #f2f2f2;
    padding: 15px 100px;


    @media @mobile {
      padding: 15px;
    }

    &__smaller {
      padding: 15px 200px;
    }

    h2 {
      text-transform: uppercase;
      font-weight: 700;
      font-family: @second-font;
      font-size: 25px;
      margin: 10px 0 20px 0;
    }
  }

  &-footer {
    .c();
    padding-top: 15px;
  }

  &-menu {
    ul {
      display: flex;
      padding-bottom: 15px;

      li {
        flex: 1;
        text-align: center;
        padding: 10px 10px;
        border-right: 1px solid #fff;
        background: @gray;

        &:last-child {
          border-right: 0;
        }

        @media @mobile {
          display: none;
        }

        &.active {
          background: @colored-2;
          @media @mobile {
            display: block;
          }

          a {
            span {
              &.step, &.label {
                color: #fff;
              }
            }
          }
        }

        a {
          span {
            float: left;
            width: 100%;

            font-weight: bold;
            font-family: @second-font;

            padding: 0;

            &.step {
              margin-bottom: 5px;
              color: @darker;
            }

            &.label {
              text-transform: uppercase;
              color: @colored;
              font-size: 100%;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}