/* Start:/local/components/lab4u/decoder.list/templates/.default/style.css?177019296813975*/
.decoding-page {
  background-color: #fff !important;
}

.decoding-page__section {
  border: 1px solid #edf0f4;
  border-radius: 16px;
}

.decoding-page__section-list {
  border-bottom: none !important;
}

.decoding-page__column2 {
  border: 1px solid #edf0f4;
  border-radius: 16px;
}

.decoding-info {
  background-color: transparent !important;
}

.decoding-page__column2::after {
  background-color: transparent !important;
}

.decoding-page__header-title {
  width: 100% !important;
  margin-bottom: 16px !important;
}

.decryption-voting {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 16px 0px 32px 0px;
}

.decription-backround-img {
  padding: 16px 24px;
  cursor: pointer;
  flex: 1;
  border-radius: 16px;
  box-shadow:
    0px 1px 2px rgba(102, 112, 133, 0.12),
    0px 2px 8px rgba(102, 112, 133, 0.12);
  background-size: cover;
  background-position: center;
  background-image: url(/local/templates/L2020_v1/images/health-insights/decrip.svg);
}

.navigation-decription {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.decription-title {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 40px;
}

.decription-txt {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  width: 356px;
  margin-top: 12px;
}

.decription-btn {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #fff;
  color: #30393a;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  cursor: pointer;
  margin-top: auto;
  width: fit-content;
}
@media (max-width: 980px) {
  .decryption-voting {
    display: flex;
    flex-direction: column;
    justify-content: unset;
    margin: 16px 0 16px;
    gap: 0px;
    width: 100%;
    height: auto;
  }

  .decription-backround-img {
    background-image: url(/local/templates/L2020_v1/images/health-insights/decrip_tablet.svg);
  }
}

.decryption-voting__banner-left,
.decryption-voting__banner-right {
  cursor: pointer;
  display: flex;
  border-radius: 16px;
  box-shadow:
    0px 1px 2px 0px rgba(102, 112, 133, 0.12),
    0px 2px 8px 0px rgba(102, 112, 133, 0.12);
  align-items: center;
  justify-content: space-evenly;
  padding: 16px 16px 16px 24px;
  width: calc(50% - 50px);
}
@media (max-width: 980px) {
  .decryption-voting__banner-left,
  .decryption-voting__banner-right {
    padding: 16px;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .decription-backround-img {
    display: block;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 16px;
  }

  .decription-title {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
  }

  .decription-txt {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 8px 0px 16px 0px;
    width: fit-content;
  }

  .navigation-decription {
    padding: 0px;
  }

  .decription-btn {
    width: 100%;
  }
}

.decryption-voting__banner-left {
  background: linear-gradient(109deg, #66d2d2 0%, #9fbbd5 100%);
}

.decryption-voting__banner-right {
  background: linear-gradient(109deg, #f59fab 0%, #e8baf3 100%);
}
@media (max-width: 980px) {
  .decryption-voting__banner-right {
    margin-top: 16px;
  }
}

.banner-left__text,
.banner-right__text {
  width: 356px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media (max-width: 980px) {
  .banner-left__text,
  .banner-right__text {
    width: 100%;
  }
}
.banner-left__text h2,
.banner-right__text h2 {
  font-size: 32px;
  font-weight: 300;
  line-height: 40px;
  color: #fff;
}
@media (max-width: 980px) {
  .banner-left__text h2,
  .banner-right__text h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

.banner-left__text p,
.banner-right__text p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  padding-top: 12px;
}
@media (max-width: 980px) {
  .banner-left__text p,
  .banner-right__text p {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    padding-top: 8px;
  }
}

@media (max-width: 980px) {
  .banner-right__text p {
    margin-top: 0px;
  }
}

.banner-left__text a,
.banner-right__text a {
  margin-top: 32px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  max-width: 204px;
  color: #30393a;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s;
}
@media (max-width: 980px) {
  .banner-left__text a,
  .banner-right__text a {
    margin-top: 16px;
    width: 100%;
    max-width: unset;
    box-sizing: border-box;
  }
}
.banner-left__text a:hover,
.banner-right__text a:hover {
  background-color: #f3f5fb;
}
.banner-left__text a:active,
.banner-right__text a:active {
  background-color: #eceef5;
}
.banner-left__image,
.banner-right__image {
  width: 100%;
  max-width: 200px;
  height: 100%;
  padding-left: 24px;
}
@media (max-width: 980px) {
  .banner-left__image,
  .banner-right__image {
    display: none;
  }
}
.banner-left__image img,
.banner-right__image img {
  width: 100%;
  height: 100%;
}

.decoding-page_calc_insurance {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;

  width: 100%;

  position: relative;
}
@media screen and (max-width: 980px) {
  .decoding-page_calc_insurance {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.insurance_banner {
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid #e4e6e9;
  background: #f6f6f6;
  box-sizing: border-box;
}
@media screen and (max-width: 980px) {
  .insurance-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
}
.insurance-banner_title {
  color: #00aacc;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
}
@media screen and (max-width: 980px) {
  .insurance-banner_title {
    display: inline-block;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e6e9;
    width: 72%;
  }
}

.insurance-banner_advantages {
  display: flex;
  padding: 8px 0px;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 980px) {
  .insurance-banner_advantages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
}
.banner_advantage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

@media screen and (min-width: 981px) {
  .mw-22 {
    max-width: 22%;
  }
}

.banner_advantage:nth-child(2) {
  padding: 0 24px;
  border-left: 1px solid #00aacc;
  border-right: 1px solid #00aacc;
}
.banner_advantage:nth-child(3):not(:nth-last-child(1)) {
  padding-right: 24px;
  border-right: 1px solid #00aacc;
}
@media screen and (max-width: 980px) {
  .banner_advantage:nth-child(2) {
    border-left: none;
    border-right: none;
    padding: 0;
  }

  .banner_advantage:nth-child(3):not(:nth-last-child(1)) {
    padding-right: none;
    border-right: none;
  }
}
.advantage_title {
  color: #00aacc;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

@media screen and (min-width: 981px) {
  .mb-24 {
    margin-bottom: 24px;
  }
}

.advantage_paragraph {
  color: #000;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.insurance-banner_includes {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e4e6e9;
}
.includes_title {
  color: #667085;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.includes_items-list {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
}
.includes-item {
  display: flex;
  padding: 4px 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.decryption_calc-tabs {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 24px;
  overflow: auto;
}
@media screen and (max-width: 980px) {
  .decryption_calc-tabs {
    padding: 0 16px;
    margin-left: -16px;
  }
}
.calc-tabs_button {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #e4e6e9;
  background: #fff;
  flex-shrink: 0;

  color: #667085;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
@media (hover: hover) {
  .calc-tabs_button:not([class*="calc-tabs_button_active"]):hover {
    border-color: #d2d5db;
    cursor: pointer;
  }
}
.calc-tabs_button_active {
  border-color: #00aacc;
  color: #30393a;

  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.calc-tabs_name {
  color: #667085;

  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.calc_count {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  background: #00aacc;
  min-width: 20px;
  min-height: 20px;

  color: #fff;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

@media (width < 981px) {
  .decoding-page_calc_insurance iframe {
    margin: 0 auto;
  }
}

.calc-title {
  color: #30393a;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: -16px;
}
.calc-subtext {
  color: #b4bbc8;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  margin-top: -16px;
}

.iframe-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 16px;
  box-sizing: border-box;
}

.insurance-banner_subtext {
  color: #667085;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.button-container {
  position: absolute;
  top: 10px;
  right: 16px;

  display: flex;
  gap: 16px;
}
.insurance-button_left,
.insurance-button_right {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #fff;
  border: none;

  @media (hover: hover) {
    &:hover {
      cursor: pointer;
      margin-top: -2px;
      transition: 0.15s all;
    }
  }
}

.skindi_banner {
  --phone-width: 100px;
  --padding-inline: 24px;

  margin: 0 0 10px 0;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  text-decoration: none;

  background-color: #f2f1f2;
  box-shadow:
    0 2px 8px 0 rgba(102, 112, 133, 0.12),
    0 1px 2px 0 rgba(102, 112, 133, 0.12);
  border-radius: 16px;
  padding: 16px var(--padding-inline);

  position: relative;
  overflow: hidden;
}

@media (width < 981px) {
  .skindi_banner {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
  }
}

/* union_bg */
.skindi_banner .union_bg {
  position: absolute;
  top: -255px;
  left: 95px;
}

@media (width < 981px) {
  .skindi_banner .union_bg {
    width: 640px;
    top: -210px;
    left: 10px;
  }
}

/* phone */
.skindi_banner .phone {
  width: var(--phone-width);
  position: absolute;
  left: var(--padding-inline);
  bottom: 0;
}

@media (width < 981px) {
  .skindi_banner .phone {
    display: none;
  }
}

/* wrp */
.skindi_banner .wrp {
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

@media (width >= 981px) {
  .skindi_banner .wrp {
    margin-left: calc(var(--padding-inline) + var(--phone-width));
  }
}

@media (width < 981px) {
  .skindi_banner .wrp {
    gap: 8px;
  }
}

/* title */
.skindi_banner .wrp .title {
  color: var(--lab4u__text_primary);
  font-size: 32px;
  font-weight: 300;
  line-height: 40px;
}

@media (width < 981px) {
  .skindi_banner .wrp .title {
    font-size: 20px;
    line-height: 24px;
  }
}

/* description */
.skindi_banner .wrp .description {
  color: var(--lab4u__text_primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

@media (width >= 981px) {
  .skindi_banner .wrp .description {
    display: inline-block;
    max-width: 380px;
  }

  .skindi_banner .wrp .description .desktop {
    display: inline;
  }

  .skindi_banner .wrp .description .mobile {
    display: none;
  }
}

@media (width < 981px) {
  .skindi_banner .wrp .description .desktop {
    display: none;
  }

  .skindi_banner .wrp .description .mobile {
    display: inline;
  }
}

/* button */
.skindi_banner button {
  transition: var(--lab4u-transition__standard);
  z-index: 1;

  height: fit-content;

  display: flex;
  place-items: center;
  place-content: center;

  padding: 12px 16px;
  border-radius: 8px;
  background: #ce0f6f;
  border: none;

  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--lab4u__text_invert);

  flex-shrink: 0;
  cursor: pointer;
}

@media (width < 981px) {
  .skindi_banner button {
    width: 100%;
  }
}

@media (hover: hover) {
  .skindi_banner button:hover {
    background-color: #e7117d;
  }
}

.skindi_banner button:active {
  background-color: #b60a60;
}

/* End */
/* /local/components/lab4u/decoder.list/templates/.default/style.css?177019296813975 */