.O_main_container {
  width: 90vw;
  height: 80vh;
  position: relative;
  overflow: hidden;
  border-radius: 24rem;
  padding: 40rem;
  background-color: var(--base-500);
  background-image: url(images/596fec85f468bd6d9543.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 33rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rem;
}

.O_question_block, .O_test_result {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32rem;
  position: relative;
}

.O_question_block {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 24rem;
  padding: 64rem 40rem 40rem;
  background-color: var(--wb-0);
  width: 856rem;
  height: 500rem;
}

.O_test_result {
  display: none;
  flex-direction: row;
  width: 1135px;
  height: 694px;
  background-color: var(--wb-0);
  border-radius: 24rem;
  padding: 40px;
}

.O_test_result.active {
  display: flex;
}

.O_question_block.hidden {
  display: none;
}

.O_test_result_content {
  width: 33vw;
  display: flex;
  flex-direction: column;
  gap: 32rem;
}

.O_tab_section {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
  width: 476rem;
  height: 306rem;
}

.O_map {
  width: 520px;
  height: 614px;
  border-radius: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--base-500);
}

.O_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.O_main {
  margin-bottom: 0;
}

.A_close_button {
  position: absolute;
  top: 5%;
  left: 90%;
}

.result_recs_list {
  list-style-type: disc;
  margin-left: 15rem;
}

.finance_span {
  color: var(--base-finance-500);
}

.life_span {
  color: var(--base-lifestyle-500);
}

.home_span {
  color: var(--base-chores-500);
}

.docs_span {
  color: var(--base-documents-500);
}

.health_span {
  color: var(--base-health-500);
}

.career_span {
  color: var(--base-career-500);
}

.guide_span {
  color: var(--base-500);
}

.tab_content {
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
  width: 100%;
}

.tab_content:first-child {
  display: block;
}

.A_button_tab.active {
  background-color: var(--wb-1000);
  color: var(--wb-0);
}

.A_button.tab.active {
  background-color: var(--wb-1000);
  color: var(--wb-0);
}

.radar_block {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(images/041a0d857d8b2b2a6f98.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

.radar-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-shape svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chart_caption {
  position: absolute;
  color: var(--wb-0);
}

.chart_caption:nth-of-type(1) {
  top: 50px;
  left: 220px;
}

.chart_caption:nth-of-type(2) {
  top: 163px;
  left: 478px;
}

.chart_caption:nth-of-type(3) {
  top: 442px;
  left: 81%;
}

.chart_caption:nth-of-type(4) {
  top: 541px;
  left: 40%;
}

.chart_caption:nth-of-type(5) {
  top: 442px;
  left: 11rem;
}

.chart_caption:nth-of-type(6) {
  top: 163px;
  left: 11rem;
}

.title_h2 {
  text-align: center;
  color: var(--base-50);
  max-width: 932rem;
}

.O_test_result .A_close_button {
  top: 5%;
  left: 95%;
}

.open_modal {
  z-index: 100;
}

.main_graph {
  position: absolute;
  z-index: 3;
  animation: main_graph_anim 20s linear infinite;
}

.M_map .A_zoom_icon {
  position: absolute;
  top: 90%;
  left: 90%;
}

@keyframes main_graph_anim {
  0%   {transform: rotate(0deg);   scale: 2;}
  50%  {transform: rotate(180deg); scale: 0.9;}
  100% {transform: rotate(360deg); scale: 2.3;}
}

@media (max-width: 1024px) {
  .O_question_block {
    width: 80vw;
    height: auto;
  }
  .A_question_answer {
    width: 100%;
  }
  .O_test_result {
    width: 90vw;
    height: 90vh;
    flex-direction: column;
    overflow-y: auto;
    align-items: center;
  }
  .O_test_result_content {
    width: 90%;
  }
  .O_test_result_content .A_button_accent {
    margin-bottom: 40px;
  }
  .A_close_button {
    position: absolute;
    top: 5%;
    left: 85%;
  }
  .O_test_result .A_close_button {
    top: 3%;
    left: 91%;
  }
}

@media (max-width: 768px) {
  .O_main {
    margin: 0 auto;
  }
  .O_modal {
    background-color: var(--wb-0);
  }
  .O_question_block {
    padding: 0;
    width: 343rem;
    height: 494rem;
  }
  .O_test_result {
    flex-direction: column;
    padding: 0;
    padding-top: 64rem;
    width: 91.45vw;
    border-radius: 0;
    overflow-y: auto;
  }
  .O_test_result_content {
    width: 100%;
  }
  .O_tab_section {
    width: 100%;
  }
  .main_graph {
    width: 150%;
  }
  .O_map {
    width: 100%;
  }
  .A_close_button, .O_test_result .A_close_button {
    top: 0;
    left: 87%;
  }
  .radar_block {
    width: 132%;
    height: 100%;
    background-size: 80%;
  }
  .chart_caption:nth-of-type(1) {
    top: 50rem;
    left: 141rem;
  }
  .chart_caption:nth-of-type(2) {
    top: 121rem;
    left: 307rem;
  }
  .chart_caption:nth-of-type(3) {
    top: 383rem;
    left: 270rem;
  }
  .chart_caption:nth-of-type(4) {
    top: 444rem;
    left: 132rem;
  }
  .chart_caption:nth-of-type(5) {
    top: 383rem;
    left: 7rem;
  }
  .chart_caption:nth-of-type(6) {
    top: 121rem;
    left: 7rem;
  }
  .tab_content {
    width: 100%;
  }
  .O_test_result .A_button_accent {
    width: 100%;
  }
  .M_map .A_zoom_icon {
    position: absolute;
    top: 89%;
    left: 84%;
  }
}