.summary_tpl {
  @include outer-container;
  padding: 2rem 0;
  h2 {
    font-size:1.875rem;
    font-weight: 400;
  }
  .answer-sec {
    // padding-top:2rem;
    margin-bottom: 2rem;
    transition: 0.3s ease;
    // &.editable {
    //   background-color: #f2f2f2;
    // }
    .question-heading {
      @include outer-container;
    }
    .question-title {
      @include span-columns(12);
      @include omega();
      padding-top: .75rem;
    }
    h3 {
      font-size: 1.25rem;
      font-weight: 400;
    }
    .answer-buttons {
      @include span-columns(12);
      @include omega();
      white-space: nowrap;
    }
    .answer-container {
      padding:2rem 0;

      textarea:not(:disabled) {
        background-color: white;
      }
    }
  }
}

.editable {
  background-color: #f2f2f2;
  padding: 2rem;
  margin: 0 -2rem;
}

#summary-form {
  margin-top: 3rem;
}

.success {
    box-sizing: border-box;
    text-align: center;
    background-color: $accent-color-3;
    color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    animation-name: success-fadeout;
    animation-duration: 1.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

.text-answer.answer-container {
  white-space: pre-line;
}

@media only screen and (min-width: $tablet) {
  .summary_tpl {
    .answer-sec {
      .question-heading {
        .question-title {
          @include span-columns(8);
        }
        .answer-buttons {
          @include span-columns(4);
          @include omega();
          text-align: right;
        }
      }
    }
  }
}

@media only screen and (min-width: $desktop) {
  .summary_tpl {
    .answer-sec {
      .question-heading {
        .question-title {
          @include span-columns(9);
        }
        .answer-buttons {
          @include span-columns(3);
        }
      }
    }
  }
}