:root {
  --neutral-900: #2B2B2B;
  --neutral-500: #595959;
  --neutral-400: #9B9B9B;
  --neutral-300: #BFBFBF;
  --neutral-200: #E6E6E6;
  --neutral-100: #F7F7F7;
  --neutral-50: #FFFFFF;

  --primary-main: #FF4086;
  --primary-dark: #B02C5C;
  --secondary-main: #368CF5;
  --secondary-dark: #235CA1;
  --tertiary-main: #272976;
  --tertiary-dark: #1A1C5E;

  --green-dark: #00923F;
  --green-light: #7ABC30;
  --yellow-light: #FFCD00;
  --yellow-dark: #FB8F00;
  --red-light: #F44910;
  --red-dark: #C02220;
}

:host {
  --swiper-theme-color: var(--primary-main)
}

h1 {
  font-size: initial;
}

div#content {
  z-index: 0;

  margin-top: calc(-7rem - 1px);
}

div#content section {
  display: flex;
  width: 100%;
  min-height: 38rem;
}

section div.section-content h1 {
  color: var(--tertiary-main);
  margin-top: 3rem;
  text-align: center;
}

main#introduction {
  display: flex;
  justify-content: center;

  background-image: url("/assets/mutual-home-bg.png");
  background-size: cover;
  background-position: 80%;

  color: var(--neutral-50);

  height: calc(38rem + 7rem);
  padding-top: calc(7rem + 1px);
}

main#introduction .section-content {
  display: flex;
  align-items: start;
}

main#introduction .section-content>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  align-items: flex-start;

  align-self: stretch;

  width: 100%;
  height: 100%;
}

section#opportunities {
  background: var(--neutral-100);
}

section#opportunities .nav-content .tab a {
  font-size: 1.25rem;
}

section#how-it-works .section-content>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;

  row-gap: 1rem;

  height: 100%;

  padding: 2rem 0;
}

section#common-questions {
  background: var(--neutral-100);
}

section#common-questions .section-content>div {
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: 2rem;

  height: 100%;

  padding: 2rem 0;
}

section#customer-service {
  background: var(--tertiary-main);
  min-height: 0 !important;
}

section#customer-service .section-content h1 {
  color: var(--neutral-50);
}

section#customer-service .section-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

section#customer-service .section-content>div {
  display: flex;
  align-items: center;
  flex-direction: column;

  text-align: center;

  margin: 0 auto;

  gap: 2rem;

  padding: 2rem 0 3rem;
}

section#customer-service .section-content>div>div {
  color: var(--neutral-50);
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

section#customer-service .section-content>div>div>h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

div.type-swiper-container {
  display: block;
  width: 100%;
  height: auto;
  padding: 2rem 0;
}

div.type-swiper-container>*:not(:last-child) {
  margin-bottom: 2rem;
}

.opportunity-cards-container-swiper {
  width: 100%;
  gap: 1.25rem;
}

swiper-slide.opportunity-card {
  width: 20rem;
  height: fit-content;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;

  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 8px;

  background: var(--neutral-50);

  padding: 1rem;
}

div.cover {
  height: 10rem;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0.75rem;
  align-self: stretch;
  border-radius: 8px;

  padding: 1rem;

  background: var(--neutral-100);

  position: relative;
  overflow: hidden;
}

div.cover-skeleton {
  height: 10rem;

  display: flex;

  align-self: stretch;
  border-radius: 8px;
}

div.cover * {
  position: relative;
  z-index: 1;
}

span.type-tag {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 1.125rem;
  gap: 0.25rem;

  flex-shrink: 0;

  border-radius: 99px;
  background: #EAEEF4;

  font-size: 0.75rem;
}

div.cover div.income h2 {
  margin: 0;
  color: var(--neutral-50);
  font-size: 1.875rem;
}

div.cover div.income p {
  color: var(--neutral-200);
  font-size: 0.875rem;
}

div.cover span.score-tag {
  width: 2rem;
  height: 1.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--neutral-50);

  border-radius: 8px;

  position: absolute;
  bottom: 1rem;
}

span.score-A {
  background: var(--green-dark);
}

span.score-B {
  background: var(--green-light);
}

span.score-C {
  background: var(--yellow-light);
}

span.score-D {
  background: var(--yellow-dark);
}

span.score-E {
  background: var(--red-light);
}

span.score-F {
  background: var(--red-dark);
}

.cover div.image-container {
  position: absolute;

  inset: 0;

  z-index: 0;
}

div.image-container img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

div.investment-info {
  height: fit-content;
  min-height: 16rem;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  background: var(--neutral-100);

  border-radius: 8px;

  padding: 1rem;
}

div.investment-info-skeleton {
  min-height: 16rem;
  width: 100%;

  display: flex;

  border-radius: 8px;
}

div.investment-info h2 {
  color: var(--tertiary-main);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3em;

  margin: auto 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* Define o número máximo de linhas */

  overflow: hidden;
  text-overflow: ellipsis;
}

div.range-container {
  width: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;

  gap: 0.5rem;
}

div.range-container div {
  width: 4.5rem;

  display: flex;
  flex-direction: row;

  gap: 0.25rem;

  font-size: 0.875rem;
}

/* div.range-container div img {
  height: 1.25rem;
} */

/*********** Baseline, reset styles ***********/
div.range-container input[type="range"] {
  --webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;

  flex: 1;

  cursor: default;
  opacity: 1;

  margin: 0.5rem;
  border: none;
}


div.range-container input[type="range"]:focus {
  outline: none;
}

div.range-container input[type="range"]::before {
  margin-right: 0.5rem;
  content: "-";
  color: var(--tertiary-main);
}

div.range-container input[type="range"]::after {
  margin-left: 0.5rem;
  content: "+";
  color: var(--tertiary-main);
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
div.range-container input[type="range"]::-webkit-slider-runnable-track {
  /* background: linear-gradient(90deg, rgba(192, 34, 32, 0.80) 0%, rgba(192, 34, 32, 0.80) 0.01%, rgba(244, 73, 16, 0.80) 19.27%, rgba(251, 143, 0, 0.80) 39.58%, rgba(255, 205, 0, 0.80) 59.90%, rgba(122, 188, 48, 0.80) 79.69%, rgba(0, 146, 63, 0.80) 100%); */
  background: var(--secondary-main);
  height: 0.375rem;
  border-radius: 99px;
}

div.range-container input[type="range"]::-moz-range-track {
  background: var(--secondary-main);
  height: 0.375rem;
  border-radius: 99px;
}

/* slider thumb */
div.range-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.75rem;
  /* Centers thumb on the track */
  background-color: var(--tertiary-main);
  border-radius: 99px;
  height: 2rem;
  width: 0.375rem;
  margin-top: -0.8125rem;
}

div.range-container input[type="range"]::-moz-range-thumb {
  background-color: var(--tertiary-main);
  border-radius: 99px;
  height: 2rem;
  width: 0.375rem;
}


div.how-it-works-card {
  display: flex;
  align-items: center;

  height: 25.85rem;
  width: 25.85rem;

  padding: 2rem;

  border-radius: 8px;

  background: var(--tertiary-main);
  color: var(--neutral-50);

  font-size: 1.75rem;
}

div.how-it-works-card strong {
  font-weight: 700;
  color: var(--primary-main);
}

ul.collapsible {
  width: 100%;
  max-width: 40rem;

  box-shadow: none;

  border-radius: 8px;

  margin: auto;
}

ul.collapsible li div.collapsible-header {
  font-size: 1.25rem;
  font-weight: 700;
  background: transparent;
}

ul.collapsible li.active div.collapsible-header {
  color: var(--primary-main);
}

ul.collapsible li:hover div.collapsible-header {
  color: var(--primary-main);
}

ul.collapsible li div.collapsible-body {
  text-align: justify;
}

/* Skeleton */

.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

/* sm */
@media (min-width: 640px) {}

/* md */
@media (min-width: 768px) {
  section#opportunities .nav-content .tab a {
    font-size: 1rem;
  }

  section#customer-service .section-content>div {
    justify-content: space-between;
  }

  section#customer-service .section-content>div {
    flex-direction: row;
    align-items: start;
  }

  section#customer-service .section-content>div>div {
    /* height: 8.875rem; */
    align-items: center;
    text-align: center;

    width: 14rem;
  }

  #warnings {
    align-items: center;
  }
}

@media (min-width: 993px) {
  div#content {
    margin-top: calc(-8rem - 1px);
  }

  main#introduction {
    height: calc(38rem + 8rem);
    padding-top: calc(8rem + 1px);
  }
}

/* lg */
@media (min-width: 1024px) {}

/* xl */
@media (min-width: 1280px) {
  main#introduction .section-content>div {
    width: 50%;
  }

  section#how-it-works .section-content>div {
    flex-direction: row;
    column-gap: 1rem;
  }

  div.how-it-works-card {
    height: 22rem;
    width: 22rem;

    font-size: 1.375rem;
  }
}

/* 2xl */
@media (min-width: 1536px) {}