/** Config */
/**
 * Colors used in the theme and their defaults based on the color palette.
 *
 * These colors are used throughout the theme and can be used in the
 * theme's CSS. The colors are divided into two sets, one for the
 * primary and one for the secondary. The primary colors are used
 * for the main elements of the site, while the secondary colors
 * are used for less important elements.
 */
/** Usage:
@include breakpoint(tablet) {}
@include breakpoint(min-width, 1192px) {}
@include between-breakpoints(sm, lg) {}
@include between-breakpoints-widths(0, 1024px) {}
**/
/* Animation */
@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes FadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes FadeInSlow {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes BounceIcon {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-60%);
  }
  50% {
    transform: translateY(0);
  }
  57% {
    transform: translateY(-3px);
  }
  64% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ShowFromBottom {
  0% {
    transform: translateY(20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes ToBottom {
  0% {
    transform: translateY(-20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes HideToBottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes ElementBottom {
  0% {
    transform: translateY(90%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes animatePrevElement {
  0% {
    transform: translateX(0);
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes animateNextElement {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ShowFromTopBounce {
  0% {
    transform: translateY(-100%);
  }
  85% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ShowFromBottomBounce {
  0% {
    transform: translateY(100%);
  }
  85% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
/** Styles for Survey component and Survey block */
.c-survey-fields-cta, .b-survey-fields-cta {
  border-radius: 8px 8px 0 0;
  -webkit-tap-highlight-color: transparent;
}
.c-survey-fields-cta.bg-primary-900, .c-survey-fields-cta.bg-secondary-700, .b-survey-fields-cta.bg-primary-900, .b-survey-fields-cta.bg-secondary-700 {
  color: var(--aprende--white);
}
.c-survey-fields-cta.bg-primary-900 .c-icon path, .c-survey-fields-cta.bg-secondary-700 .c-icon path, .b-survey-fields-cta.bg-primary-900 .c-icon path, .b-survey-fields-cta.bg-secondary-700 .c-icon path {
  fill: var(--aprende--white);
}
@media (hover: hover) {
  .c-survey-fields-cta, .b-survey-fields-cta {
    cursor: pointer;
  }
}
.c-survey-fields-content, .c-survey-fields-message, .b-survey-fields-content, .b-survey-fields-message {
  flex: 1;
  overflow: hidden;
}
.c-survey-fields-step, .b-survey-fields-step {
  position: relative;
}
.c-survey-fields-step.element-transition-next[data-step="0"], .b-survey-fields-step.element-transition-next[data-step="0"] {
  animation: none;
}
.c-survey-fields-hidden, .b-survey-fields-hidden {
  display: none;
}
.c-survey-fields-required, .b-survey-fields-required {
  position: absolute;
  bottom: 55px;
}
.c-survey-fields-message:not(.c-survey-fields-hidden, .b-survey-fields-hidden), .b-survey-fields-message:not(.c-survey-fields-hidden, .b-survey-fields-hidden) {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.c-survey-fields-message-box, .b-survey-fields-message-box {
  flex: 1;
}
.c-survey-fields_success, .b-survey-fields_success {
  width: 48px;
  border-radius: 50%;
}
.c-survey-fields_success path, .b-survey-fields_success path {
  fill: var(--aprende--white);
}
.c-survey-fields-radio-option .c-input, .b-survey-fields-radio-option .c-input {
  padding: 0;
}
.c-survey-fields-radio-option .c-input_wrapper .c-input_native-control:not(.c-input_native-control__error), .b-survey-fields-radio-option .c-input_wrapper .c-input_native-control:not(.c-input_native-control__error) { /* stylelint-disable-line */
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: unset;
}
.c-survey-fields-radio-option .c-input_wrapper .c-input_native-control:not(.c-input_native-control__error):not(:disabled), .b-survey-fields-radio-option .c-input_wrapper .c-input_native-control:not(.c-input_native-control__error):not(:disabled) {
  border-color: var(--aprende--secondary-600);
}
.c-survey-fields-radio-option .c-input_wrapper .c-input_native-control:not(.c-input_native-control__error):focus, .b-survey-fields-radio-option .c-input_wrapper .c-input_native-control:not(.c-input_native-control__error):focus {
  border-color: var(--aprende--secondary-800);
}
.c-survey .element-transition-prev, .b-survey .element-transition-prev {
  animation: animatePrevElement 1s;
}
.c-survey .element-transition-next, .b-survey .element-transition-next {
  animation: animateNextElement 1s;
}
.c-survey .c-text-area_wrapper, .b-survey .c-text-area_wrapper {
  width: 100%;
}
.c-survey .c-radio-input, .b-survey .c-radio-input {
  min-width: 16px;
}
.c-survey .c-radio label, .b-survey .c-radio label {
  cursor: pointer;
}

/** Survey component */
.c-survey {
  position: fixed;
  border-radius: 8px 8px 0 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  max-width: 330px;
}
@media (min-width: 600px) {
  .c-survey {
    margin-right: 5%;
  }
}
.c-survey-active .c-icon {
  transform: rotateZ(180deg);
}
.c-survey .c-icon {
  transition: transform 0.3s ease;
}
.c-survey:not(.c-survey-fields-hidden) {
  animation: ShowFromBottom 0.7s ease-in;
}
.c-survey-completed {
  transform: translateY(100%);
}
.c-survey-fields-container {
  max-height: 0;
  transition: max-height 1s linear;
  overflow: hidden;
}
.c-survey-fields-container:not(.c-survey-collapsed) {
  max-height: 600px;
}
.c-survey-fields-container .c-text-area {
  padding-bottom: 8px;
}
.c-survey-fields-message {
  min-height: 420px;
}
.c-survey-fields-message-box {
  padding: 0 60px;
}

/** Survey block */
.b-survey-fields-container {
  position: relative;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--aprende--secondary-300);
  overflow: hidden;
}
@media (max-width: 600px) {
  .b-survey-fields-heading .heading-3 {
    padding-bottom: 8px;
  }
}
@media (min-width: 600px) {
  .b-survey-fields-heading .heading-3 {
    padding-bottom: 16px;
  }
}
.b-survey-fields-step-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 600px) {
  .b-survey-fields-step-container {
    max-width: 600px;
    padding: 0 16px;
  }
}
.b-survey-fields-step-container .c-radio input {
  background-color: transparent;
}
.b-survey-fields-message {
  min-height: 292px;
}
.b-survey-fields-textarea .c-text-area {
  padding-bottom: 0;
}
.b-survey-fields-textarea .c-text-area_wrapper {
  height: 164px;
}
.b-survey-fields-textarea .c-text-area_native-control {
  padding: 8px 0 0 12px;
}
@media (max-width: 600px) {
  .b-survey-fields-required {
    transform: translateY(10px);
  }
}
@media (min-width: 600px) {
  .b-survey .c-button.btn {
    min-height: 48px;
    padding: 8px 24px;
    font-size: 16px;
    line-height: 24px;
  }
}
.b-survey-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 180px;
  top: 0;
  left: 0;
  z-index: 9999;
}
.b-survey-loader .c-icon {
  animation: rotation 0.6s linear infinite;
}

/*# sourceMappingURL=survey.css.map*/