.summary_tpl {
  @include outer-container;
  padding: 2rem 0;
  .prft-heading {
    font-size:1.875rem;
  }
  .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;
        }
      }
      .answer-buttons {
        @include span-columns(12);
        @include omega();
        white-space: nowrap;
      }
    }
    .answer-container {
      padding:2rem 0;
    }
  }
}

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

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

@keyframes success-fadeout {
  0% { opacity: 1; max-height: 40px; }
  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

.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);
        }
      }
    }
  }
}
