@import url("https://materiais.quero.com/shared/assets/styles/colors.css");
body {
  max-width: 360px;
}

.querobolsa-logo {
  width: 112px;
  height: 18px;
}

.instructions {
  display: flex;
  flex-direction: column;
  height: 550px;
  height: 550px;
  justify-content: space-between;
}

.instructions-title {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0px 16px 0px;
}

.instructions-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 148%;
}

.questions-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 530px;
}

footer {
  align-items: center;
}

.start-test__button {
  background-color: var(--primary-pure);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  font-weight: 500;
}

.progress {
  border-radius: 8px;
  margin: 0px;
}

.progress-bar {
  background-color: var(--primary-pure);
  color: var(--primary-pure);
}

.questions {
  margin-bottom: 32px;
  line-height: 148%;
}

.questions-title {
  font-weight: 600;
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 32px;
  margin-bottom: 16px;
}

.options {
  gap: 32px;
}

.answer-alternatives {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: space-between;
  padding: 0px;
  font-size: 16px;
  font-family: sans-serif;
  color: var(--text-color-gray);
}

.answers {
  font-size: 16px;
  font-family: sans-serif;
  gap: 8px;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.steps {
  margin-bottom: 4px;
}

.continue__button {
  background-color: var(--primary-pure);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 500;
  width: 80%;
}

.back__button {
  background-color: white;
  color: var(--primary-pure);
  padding: 16px 24px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 500;
  width: 80%;
}

.leadCollector__top-title {
  margin: 0px 0px 4px 0px;
  font-weight: 600;
  font-size: 20px;
}

.leadCollector__main-title {
  margin: 0px 0px 32px 0px;
  font-size: 16px;
}

.compatible-courses {
  font-size: 16px;
  margin-bottom: 32px;
}

.results-text {
  font-size: 16px;
}

.course-cta__button-know-more {
  background-color: white;
  color: var(--primary-pure);
  padding: 8px 20px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 500;
  width: 50%;
  display: flex;
  justify-content: center;
}

.course-cta__button-see-courses {
  background-color: var(--primary-pure);
  color: white;
  padding: 8px 20px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 500;
  width: 40%;
  display: flex;
  justify-content: center;

  &:hover {
    color: white;
  }
}

.course-container__description {
  margin-bottom: 24px;
  font-size: 16px;
}

.privacy-warning {
  padding-top: 32px;
  text-align: center;
}

.result-privacy-warning {
  text-align: center;
}

a {
  color: var(--primary-pure);
}

.leadCollector__input-container {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.leadCollector__input-label {
  margin-bottom: 8px;
  font-size: 16px;
}

.leadCollector__input-label-lgpd {
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 16px;
}

.leadCollector__input {
  padding: 12px 20px;
  border-radius: 12px;
  width: 100%;
  border: 1px solid rgba(185,191,199, 1);
  background-color: rgba(255,255,255, 1);
}

.leadCollector__input-link-terms {
  color: var(--primary-pure);
}

.leadCollector__button {
  background-color: var(--primary-pure);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  font-weight: 500;
  margin-top: 32px;

  &:disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
  }
}

.leadCollector__input-container-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.results-grafic {
  max-height: 312px;
  max-width: 312px;
}

.results-title {
  font-size: 20px;
  font-weight: 600;
  margin-top: 0px;
  margin-bottom: 12px;
}

.compatibility-percentage {
  margin-top: 24px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.compatibility-progress {
  height: 4px;
  width: 100%;
  margin-bottom: 24px;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background-color: #eee;
}

/* Chrome, Safari, Edge */
.compatibility-progress::-webkit-progress-bar {
  background-color: #eee;
}

.compatibility-progress::-webkit-progress-value {
  background-color: #FA6400;
}

/* Firefox */
.compatibility-progress::-moz-progress-bar {
  background-color: #FA6400;
}

.your-inteligences {
  margin: 0px;
}

.list {
  padding: 0px;
}

.course-container__header {
  display: flex;
}

.course-container__header-name {
  font-weight: 600;
  font-size: 16px;
  padding-right: 8px;
  margin: 0px;
}

.course-container__header-area {
  font-weight: 500;
  font-size: 14px;
  margin: 0px;
  color: var(--text-color-gray);
}

hr {
  border-top: 1px dashed #9FA5AD;
  margin-top: 32px;
  margin-bottom: 32px;
}

.share-vocational-test {
  color: var(--primary-pure);
  display: flex;
  justify-content: center;
}

@media (min-width: 592px) {
  .privacy-warning  {
    padding-top: 24px;
    margin: 0px;
  }

  body {
    max-width: 100%;
    height: 540px;
  }

  .instructions {
    height: 480px;
  }

  .action {
    display: flex;
    justify-content: flex-end;
  }

  .questions-container {
    height: 440px;
  }

  .continue__button {
    width: 30%;
  }

  .back__button {
    width: 30%;
  }

  .answer-alternatives {
    gap: 40px;
    justify-content: flex-start;
  }

  .leadCollector {
    width: 100%;
    max-height: 546px;
  }

  .leadCollector__top-title {
    margin-top: 0px;
    margin-bottom: 4px;
    font-size: 24px;
  }

  .leadCollector__main-title {
    margin-bottom: 24px;
  }

  .results-grafic {
    max-height: 351px;
    max-width: 431px;
  }

  .course-cta {
    justify-content: flex-end;
  }

  .course-container__description {
    margin-bottom: 32px;
  }
}

@media (min-width: 768px) {
  html  {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}