/*------------------------------------------------------------------
[Table of contents]

1. Container / .form-steps-column-page
2. Steps indicator / .form-steps-column-page > .steps
3. Step content / .form-steps-column-page > .wrapper > .step-content
-------------------------------------------------------------------*/
.form-steps-column-page {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  height: 100%;
  background: #fff; }
  .form-steps-column-page > .steps {
    width: 294px;
    border-right: 1px solid rgba(57, 80, 155, 0.2);
    padding: 30px;
    background: #fff; }
    .form-steps-column-page > .steps > .header {
      font-size: 24px;
      line-height: 24px;
      margin-top: 0;
      font-weight: normal;
      margin-bottom: 10px; }
    .form-steps-column-page > .steps > .description {
      font-size: 12px;
      color: #858585; }
    .form-steps-column-page > .steps > .items {
      margin-top: 30px;
      border-left: 1px solid rgba(51, 51, 51, 0.1);
      margin-left: 19px; }
      .form-steps-column-page > .steps > .items > .item {
        margin-left: -19px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -js-display: flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 14px;
        line-height: 14px;
        color: rgba(51, 51, 51, 0.3);
        margin-bottom: 20px; }
        .form-steps-column-page > .steps > .items > .item:last-child {
          margin-bottom: 0; }
        .form-steps-column-page > .steps > .items > .item > .point {
          width: 36px;
          height: 36px;
          font-size: 12px;
          line-height: 11px;
          background-color: #ffffff;
          border: solid 1px rgba(51, 51, 51, 0.2);
          -webkit-border-radius: 50%;
                  border-radius: 50%;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          -js-display: flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
              -ms-flex-pack: center;
                  justify-content: center;
          margin-right: 15px; }
        .form-steps-column-page > .steps > .items > .item.completed {
          color: #4caf50;
          font-weight: 500; }
          .form-steps-column-page > .steps > .items > .item.completed > .point {
            background: #4caf50;
            border: none; }
            .form-steps-column-page > .steps > .items > .item.completed > .point > span {
              display: none; }
            .form-steps-column-page > .steps > .items > .item.completed > .point:before {
              content: "\f17b";
              font-family: "LineAwesome";
              color: #fff;
              font-size: 16px;
              position: relative;
              top: 1px; }
        .form-steps-column-page > .steps > .items > .item.current {
          color: #25628F;
          font-weight: 500; }
          .form-steps-column-page > .steps > .items > .item.current > .point {
            border: solid 1px #25628F; }
        .form-steps-column-page > .steps > .items > .item.invalid {
          color: #ef5350; }
          .form-steps-column-page > .steps > .items > .item.invalid > .point {
            border: solid 1px #ef5350; }
  .form-steps-column-page > .wrapper {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
    .form-steps-column-page > .wrapper > .step-content {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
      .form-steps-column-page > .wrapper > .step-content > .description {
        padding: 30px;
        border-bottom: 1px solid rgba(57, 80, 155, 0.2);
        min-height: 113px; }
        .form-steps-column-page > .wrapper > .step-content > .description > .header {
          font-size: 24px;
          line-height: 24px;
          margin-top: 0;
          font-weight: normal;
          margin-bottom: 10px; }
        .form-steps-column-page > .wrapper > .step-content > .description > .text {
          font-size: 12px;
          color: #858585; }
      .form-steps-column-page > .wrapper > .step-content > .body {
        height: 1px;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1; }
        .form-steps-column-page > .wrapper > .step-content > .body .form {
          padding: 30px; }
          .form-steps-column-page > .wrapper > .step-content > .body .form > .separator {
            height: 1px;
            background-color: rgba(57, 80, 155, 0.2);
            margin-left: -30px;
            margin-right: -30px;
            margin-top: 30px;
            margin-bottom: 30px; }
    .form-steps-column-page > .wrapper > .controls {
      padding: 30px; }
      .form-steps-column-page > .wrapper > .controls > .previous {
        margin-right: 10px; }
      .form-steps-column-page > .wrapper > .controls.space-between {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -js-display: flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between; }
      .form-steps-column-page > .wrapper > .controls.flex-end {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -js-display: flex;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end; }

@media screen and (max-width: 780px) {
  .btn.form-steps-column-steps-block-toggle {
    position: static; }
  .form-steps-column-page > .steps {
    position: fixed;
    z-index: 2;
    height: -webkit-calc(100% - 120px);
    height: calc(100% - 120px);
    top: 120px;
    visibility: hidden;
    left: -296px; }
    .form-steps-column-page > .steps.open {
      visibility: visible;
      left: 0;
      -webkit-transition: left .2s ease;
      transition: left .2s ease; } }
