﻿.container-data-section {
  background: #EEF9FF;
  padding: 3% 0; }
  @media screen and (min-width: 768px) {
    .container-data-section .mobile-view {
      display: none !important; } }
  @media screen and (max-width: 768px) {
    .container-data-section .desktop-view {
      display: none !important; } }
  @media screen and (max-width: 768px) {
    .container-data-section .desktop-view-data {
      display: none; } }
  .container-data-section .heading {
    color: #000;
    font-family: Roboto;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    /* 48px */
    letter-spacing: -1.44px; }
    @media screen and (max-width: 768px) {
      .container-data-section .heading {
        color: #000;
        font-family: Roboto;
        font-size: 28px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%;
        /* 33.6px */
        letter-spacing: -0.84px; } }
  .container-data-section .text-data {
    color: rgba(0, 0, 0, 0.6);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 16px */
    padding-bottom: 30px; }
    @media screen and (max-width: 768px) {
      .container-data-section .text-data {
        color: rgba(0, 0, 0, 0.6);
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 19.6px */
        padding-top: 15px;
        text-align: center; } }
  .container-data-section .term-calculator {
    color: rgba(0, 0, 0, 0.9);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 16px */
    display: inline-flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px 6px 0px 0px;
    border: 1px solid var(--primary-yellow, #F5A011);
    background: #FFF;
    border-bottom: none;
    z-index: 1;
    position: relative;
    top: 1px; }
  .container-data-section .term-calculator-mobile {
    display: flex;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--primary-yellow, #F5A011);
    background: #FFF5EC;
    color: rgba(0, 0, 0, 0.9);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 16px */ }
  .container-data-section .show-change-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background: white;
    padding: 20px 20px;
    border-top: 1px solid #F5A011;
    display: none;
    fill: #FFF;
    stroke-width: 1px;
    stroke: #E9E9E9;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05));
    border-radius: 0 0 5px 5px; }
    @media screen and (max-width: 768px) {
      .container-data-section .show-change-block {
        border-radius: 12px;
        border-top: none; } }
    .container-data-section .show-change-block .text-data-data {
      color: var(--greyscale-900, #111827);
      font-family: Roboto;
      font-size: 28px;
      font-style: normal;
      font-weight: 800;
      line-height: 100%;
      /* 28px */ }
      @media screen and (max-width: 768px) {
        .container-data-section .show-change-block .text-data-data {
          color: rgba(0, 0, 0, 0.9);
          font-family: Roboto;
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: 100%;
          /* 16px */ } }
    .container-data-section .show-change-block button {
      border: none; }
    .container-data-section .show-change-block img {
      width: 24px;
      height: 24px; }
  .container-data-section .form-data-with-text {
    background-color: white;
    border-top: 1px solid #F5A011;
    /* Chrome, Safari, Edge, Opera */
    /* Firefox */ }
    .container-data-section .form-data-with-text .first-section {
      padding: 20px 24px; }
      @media screen and (max-width: 768px) {
        .container-data-section .form-data-with-text .first-section {
          padding: 32px 16px 0 16px; } }
    @media screen and (max-width: 768px) {
      .container-data-section .form-data-with-text .input-data-calulator {
        padding-bottom: 8px; } }
    .container-data-section .form-data-with-text .text-label-data {
      color: var(--colors-basic-interface-2, #747681);
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 160%;
      padding-bottom: 2px;
      /* 25.6px */ }
    .container-data-section .form-data-with-text .input-tag-image-text {
      border-radius: 8px;
      border: 1px solid #958383;
      background: #FFF;
      display: inline-flex;
      height: 50px;
      padding: 16px;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0; }
      @media screen and (max-width: 768px) {
        .container-data-section .form-data-with-text .input-tag-image-text {
          width: 100%; } }
    .container-data-section .form-data-with-text input {
      border: none;
      color: rgba(4, 9, 30, 0.6);
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 175%;
      /* 24.5px */ }
      @media screen and (max-width: 768px) {
        .container-data-section .form-data-with-text input {
          width: 100%; } }
    .container-data-section .form-data-with-text img {
      padding-right: 9px; }
    .container-data-section .form-data-with-text input::-webkit-outer-spin-button,
    .container-data-section .form-data-with-text input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    .container-data-section .form-data-with-text input[type=number] {
      -moz-appearance: textfield; }
    .container-data-section .form-data-with-text input:focus-visible {
      border: none;
      outline: none; }
    .container-data-section .form-data-with-text .text-after-input {
      color: rgba(4, 9, 30, 0.6);
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 175%;
      /* 24.5px */ }
    .container-data-section .form-data-with-text .kid-section-detail {
      display: flex;
      align-items: self-end; }
    .container-data-section .form-data-with-text .kid-section-title {
      color: var(--greyscale-900, #111827);
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 100%;
      /* 16px */ }
    .container-data-section .form-data-with-text .data-add-on {
      display: flex;
      justify-content: start;
      gap: 20px; }
    .container-data-section .form-data-with-text .add-kid-section button {
      display: inline-flex;
      height: 40px;
      padding: 8px 20px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      border-radius: 8px;
      border: 1px solid #F5A011;
      position: relative;
      bottom: 5px;
      background: white;
      color: #F5A011; }
      @media screen and (max-width: 768px) {
        .container-data-section .form-data-with-text .add-kid-section button {
          position: relative;
          top: 12px; } }
    .container-data-section .form-data-with-text .remove-kid-section button {
      display: inline-flex;
      height: 48px;
      padding: 8px 20px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      border-radius: 8px;
      border: 1px solid #19ADFF;
      position: relative;
      bottom: 5px;
      background: white;
      color: #19ADFF; }
      @media screen and (max-width: 768px) {
        .container-data-section .form-data-with-text .remove-kid-section button {
          position: relative;
          top: 12px; } }
  .container-data-section .border-width {
    fill: var(--others-white, #FFF);
    filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.1));
    padding-left: 0 !important;
    padding-right: 0 !important; }
  .container-data-section .main-button-data {
    background: white;
    padding: 10px 24px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05); }
    .container-data-section .main-button-data #calculate-load {
      display: inline-flex;
      height: 48px;
      padding: 8px 46px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      border-radius: 8px;
      background: #F5A011;
      box-shadow: 6px 6px 20px 0px rgba(245, 160, 17, 0.2);
      border: none;
      width: 190px; }
      @media screen and (max-width: 768px) {
        .container-data-section .main-button-data #calculate-load {
          width: 100%; } }
  .container-data-section .second-section-data {
    padding: 0; }
    .container-data-section .second-section-data .second-part-container {
      border-left: 1px solid #ECECEC;
      padding: 20px; }
      @media screen and (max-width: 768px) {
        .container-data-section .second-section-data .second-part-container {
          padding: 0 16px;
          margin-top: 24px; } }
      .container-data-section .second-section-data .second-part-container .second-title-data {
        color: var(--greyscale-900, #111827);
        font-family: Roboto;
        font-size: 28px;
        font-style: normal;
        font-weight: 800;
        line-height: 100%;
        /* 28px */ }
      .container-data-section .second-section-data .second-part-container div#example {
        display: flex;
        justify-content: center; }
      .container-data-section .second-section-data .second-part-container .cyan-color {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background-color: #11E1BC;
        margin-right: 7px;
        border-radius: 50%; }
      .container-data-section .second-section-data .second-part-container .yellow-color {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background-color: #F5A011;
        margin-right: 7px;
        border-radius: 50%; }
      .container-data-section .second-section-data .second-part-container .blue-color {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background-color: #19ADFF;
        margin-right: 7px;
        border-radius: 50%; }
      .container-data-section .second-section-data .second-part-container .line-data-slick {
        background: #ECECEC;
        height: 1px;
        flex-shrink: 0; }
      .container-data-section .second-section-data .second-part-container .text-loan {
        color: #000;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal; }
      .container-data-section .second-section-data .second-part-container .price-loan {
        color: #000;
        font-family: Roboto;
        font-size: 20px;
        font-style: normal;
        font-weight: 800;
        line-height: 150%;
        /* 36px */ }
      .container-data-section .second-section-data .second-part-container .text-inside-it {
        color: rgba(0, 0, 0, 0.6);
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 22.4px */ }
      @media (max-width: 768px) {
        .container-data-section .second-section-data .second-part-container .text-inside-it {
          padding-bottom: 20px; } }
      .container-data-section .second-section-data .second-part-container .learn-more-button {
        color: #19ADFF;
        text-align: center;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: inline-flex;
        padding: 16px 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 36px;
        border: 1px solid #19ADFF;
        background: white; }
  .container-data-section .Details-component-part {
    background: white; }
    .container-data-section .Details-component-part .data-last-button-container {
      background: white;
      padding: 0 16px;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
      border-top: 1px solid rgba(0, 0, 0, 0.1); }
      .container-data-section .Details-component-part .data-last-button-container .call-the-advisor {
        display: inline-flex;
        height: 48px;
        padding: 8px 34px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 8px;
        background: #F5A011;
        box-shadow: 6px 6px 20px 0px rgba(245, 160, 17, 0.2);
        color: rgba(0, 0, 0, 0.9);
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        border: none;
        /* 16px */ }
        @media screen and (max-width: 768px) {
          .container-data-section .Details-component-part .data-last-button-container .call-the-advisor {
            width: 100%; } }
    .container-data-section .Details-component-part .cards-outer-cover {
      border-radius: 12px;
      border: 1px solid #E9E9E9;
      background: #FFF;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
      padding: 20px 24px 24px 24px;
      margin-bottom: 0px;
      min-height: 424px; }
    .container-data-section .Details-component-part .name-with-text {
      padding: 20px 10px;
      border-radius: 10px;
      background: #FFF5E3;
      margin: 0 16px; }
      .container-data-section .Details-component-part .name-with-text .component-text {
        color: #000;
        font-family: Roboto;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 24px */ }
        .container-data-section .Details-component-part .name-with-text .component-text span {
          font-weight: 700; }
        @media screen and (max-width: 768px) {
          .container-data-section .Details-component-part .name-with-text .component-text {
            color: #000;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            /* 22.4px */ } }
      .container-data-section .Details-component-part .name-with-text .name {
        color: #19ADFF;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 800;
        line-height: 100%;
        /* 28px */ }
    .container-data-section .Details-component-part .cards-data-container {
      padding: 0 16px; }
      .container-data-section .Details-component-part .cards-data-container .plt1 {
        margin: 0; }
    @media (max-width: 768px) {
      .container-data-section .Details-component-part .cards-data-container .plt1 {
        margin-bottom: 10px; } }
    .container-data-section .Details-component-part .small-text-head {
      color: #F5A011;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding-top: 20px;
      padding-bottom: 10px; }
    .container-data-section .Details-component-part .big-head-text {
      color: #000;
      font-family: Roboto;
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding-bottom: 10px; }
    .container-data-section .Details-component-part .desc-data {
      color: rgba(0, 0, 0, 0.6);
      text-align: center;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%;
      padding-bottom: 0px;
      /* 22.4px */ }
    .container-data-section .Details-component-part .plan-button {
      display: flex;
      height: 48px;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      border-radius: 8px;
      border: 1px solid #19ADFF;
      background: var(--others-white, #FFF);
      color: #19ADFF;
      text-align: center;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      line-height: 150%;
      /* 21px */
      letter-spacing: 0.2px;
      margin: auto;
      width: 90%; }
    .container-data-section .Details-component-part .card-outer .circle_border {
      border: 1px solid #E8F7FF;
      border-radius: 50%;
      background-color: #E8F7FF;
      width: 90px;
      height: 90px;
      margin: 0 auto;
      padding-top: 16px; }
      .container-data-section .Details-component-part .card-outer .circle_border img {
        width: 50px;
        height: 50px; }
    .container-data-section .Details-component-part .edit_section {
      padding: 8px 12px 20px 12px; }
      .container-data-section .Details-component-part .edit_section .Edit_heading {
        color: #111827;
        font-size: 28px;
        font-family: 'Roboto';
        font-weight: 800; }
      .container-data-section .Details-component-part .edit_section img {
        cursor: pointer; }
  .container-data-section .custom_table thead tr th {
    font-size: 12px;
    font-family: 'Roboto'; }
  .container-data-section .custom_table tbody tr td {
    font-size: 14px;
    font-family: 'Roboto'; }

@media (max-width: 768px) {
  .container-data-section .Details-component-part .edit_section .Edit_heading {
    font-size: 16px; }
  .form-data-with-text {
    margin: 0;
    border-radius: 8px; }
  .container-data-section .second-section-data .second-part-container {
    border-left: 0; } }

.chart-container .middle-text p {
  position: absolute;
  top: 67px;
  text-align: center;
  font-size: 14px;
  width: 100%; }

.chart-container .middle-text p:last-child {
  top: 88px;
  display: block;
  text-align: center; }
