

/* ============================================================================ */
/* ============================================================================ */
/* ============================================================================ */

/* Volume Picker Scrollbar */
.volumePickerScrollbar {
    width: calc(100% - 30px);
    height: 47px;
    margin-left: 15px;
    display: flex;
    align-content: center;
    align-items: center;
    position: relative;
    user-select: none;
  }
  
    .volumePickerScrollbar__handle {
      width: 1px;
      height: 47px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      cursor: grab;
    }
  
      .volumePickerScrollbar__handle::before {
        content: '';
        width: 47px;
        height: 47px;
        position: absolute;
        top: 0;
        left: -23px;
        border-radius: 100px;
        box-shadow: 0 4px 4px rgba(0,0,0,.25);
        background: #fff;
      }
  
      .volumePickerScrollbar__handle::after {
        content: '';
        width: 21px;
        height: 21px;
        position: absolute;
        top: 13px;
        left: -10px;
        border-radius: 100px;
        background: #FFD835;
      }
  
    .volumePickerScrollbar__scale {
      width: calc(100% + 30px);
      height: 17px;
      box-sizing: border-box;
      border-radius: 100px;
      position: absolute;
      left: -15px;
      pointer-events: none;
    }
  
      .volumePickerScrollbar__scale_gray {
        background: #E8E8E8;
      }
      .volumePickerScrollbar__scale_yellow {
        width: 0;
        background: #FFD835;
      }
  
    .volumePickerScrollbar__scaleDelimiter {
      content: '';
      width: 1px;
      height: 54px;
      position: absolute;
      top: -3px;
      z-index: 0;
      background: rgba(0,0,0,.1);
    }
  
      .volumePickerScrollbar__scaleDelimiter_first {left: calc(0% - 5px);}
      .volumePickerScrollbar__scaleDelimiter_last {left: calc(100% + 5px);}
  
      .volumePickerScrollbar__scaleDelimiter_starter {left: calc(8%);}
      .volumePickerScrollbar__scaleDelimiter_hobbyist {left: calc( (28% * 1) + 8%);}
      .volumePickerScrollbar__scaleDelimiter_trader {left: calc( (28% * 2) + 8%);}
      .volumePickerScrollbar__scaleDelimiter_pro {left: calc( (28% * 3) + 8%);}
  
  
    .volumePickerScrollbar__scaleLabel {
      width: 0;
      position: absolute;
      top: 50px;
    }
  
      .volumePickerScrollbar__scaleLabel_starter {left: calc(8%/2 - 6px);}
      .volumePickerScrollbar__scaleLabel_hobbyist {left: calc( (28% * 0) + 8% + 28%/2);}
      .volumePickerScrollbar__scaleLabel_trader {left: calc( (28% * 1) + 8% + 28%/2);}
      .volumePickerScrollbar__scaleLabel_pro {left: calc( (28% * 2) + 8% + 28%/2);}
      .volumePickerScrollbar__scaleLabel_special {left: calc( (28% * 3) + 8% + 8%/2 + 6px);}
  
      .volumePickerScrollbar__scaleLabelText {
        width: 60px;
        height: 15px;
        position: absolute;
        left: -30px;
        top: 0;
        font-size: 15px;
        font-weight: 500;
        color: rgba(0,0,0,.2);
        text-align: center;
      }
  
  /* *** MEDIA QUERIES *** */
  @media (max-width: 5000px) {
    .volumePickerScrollbar__scaleLabelText {
      font-size: 13px;
    }
  }
  @media (max-width: 1279px) {
    .volumePickerScrollbar {
      height: 32px;
    }
  
    .volumePickerScrollbar__scale {
      height: 11px;
    }
  
    .volumePickerScrollbar__scaleLabel {
      top: 40px;
    }
  
    .volumePickerScrollbar__scaleDelimiter {
      height: 40px;
    }
  
    .volumePickerScrollbar__handle {
      height: 37px;
      top: -2px;
    }
  
      .volumePickerScrollbar__handle::before {
        width: 37px;
        height: 37px;
        left: -18px;
      }
  
      .volumePickerScrollbar__handle::after {
        width: 15px;
        height: 15px;
        top: 11px;
        left: -7px;
      }
  }
  @media (max-width: 767px) {
    .volumePickerScrollbar__scaleLabel {
      top: 30px;
    }
  }
  
  
  
  
  /* Trading volume picker */
  .tradingVolumePicker {}
  
    .tradingVolumePicker__description {
      margin-bottom: 31px;
      display: flex;
      justify-content: space-between;
    }
  
      .tradingVolumePicker__title {
        width: 440px;
        font: 900 45px/133% 'Lato',sans-serif;
        color: #000;
      }
  
      .tradingVolumePicker__volumeAmount {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        font: 700 120px/120px 'Lato',sans-serif;
        color: #ddd;
        text-shadow: 0 -1px 0 #959595;
      }
  
        .tradingVolumePicker__volumeCurrency {
          position: relative;
          top: 11px;
          font-size: 45px;
          line-height: 45px;
          color: #DBDBDB;
          text-shadow: none;
        }
  
        .tradingVolumePicker__volumeAmountValue {
          font-weight: 900;
        }
  
          .tradingVolumePicker__volumeAmountValue_infinity {
            font-size: 285px;
            font-weight: 400;
          }
  
    .tradingVolumePicker__scrollBar {}
  
  /* *** MEDIA QUERIES *** */
  @media (max-width: 5000px) {
  
    .tradingVolumePicker__volumeCurrency {
      margin-right: 3px;
      top: 21px;
      font-size: 35px;
    }
  
    .tradingVolumePicker__volumeAmountValue {
      font-size: 110px;
    }
  
      .tradingVolumePicker__volumeAmountValue_infinity {
        font-size: 230px;
      }
  }
  @media (max-width: 4999px) {
    .tradingVolumePicker__description {
      margin-bottom: 6px;
      align-content: center;
      align-items: center;
    }
  
    .tradingVolumePicker__title {
      width: 60%;
      font-size: 35px;
      line-height: 133%;
    }
  
    .tradingVolumePicker__volumeAmountValue {
      font-size: 80px;
    }
    .tradingVolumePicker__volumeAmountValue_infinity {
      font-size: 200px;
    }
  }
  @media (max-width: 1279px) {
    .tradingVolumePicker__title {
      width: 45%;
      font-size: 24px;
      line-height: 133%;
    }
  
    .tradingVolumePicker__description {
      margin-bottom: 11px;
    }
  
    .tradingVolumePicker__volumeAmountValue {
      line-height: 90px;
    }
  }
  @media (max-width: 1023px) {
    .tradingVolumePicker__title {
      width: 65%;
    }
    .tradingVolumePicker__volumeCurrency {
      top: 6px;
      line-height: 35px;
    }
    .tradingVolumePicker__volumeAmountValue {
      font-size: 70px;
      line-height: 70px;
    }
  
      .tradingVolumePicker__volumeAmountValue_infinity {
        font-size: 170px;
      }
  }
  @media (max-width: 767px) {
    .tradingVolumePicker__description {
      margin-bottom: -5px;
      flex-direction: column;
      align-content: center;
      align-items: center;
    }
  
      .tradingVolumePicker__title {
        width: auto;
        font-size: 20px;
        text-align: center;
      }
  
      .tradingVolumePicker__volumeCurrency {
        top: 15px;
        font-size: 24px;
        line-height: 24px;
      }
  
      .tradingVolumePicker__volumeAmountValue {
        font-size: 50px;
      }
  
      .tradingVolumePicker__volumeAmountValue_infinity {
        font-size: 115px;
      }
  }
  
  
  
  
  
  /* How you will save Value */
  .howMuchYouSaveValue {
  }
  
    .howMuchYouSaveValue__title {
      margin-bottom: 26px;
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      font: 900 120px/120px 'Lato',sans-serif;
      color: #4A3DFF;
    }
  
      /* .howMuchYouSaveValue__title_1 {
        font-size: 68px;
        line-height: 118%;
      }
      .howMuchYouSaveValue__title_2 {
        font-size: 68px;
        line-height: 118%;
      } */
      .howMuchYouSaveValue__title_3 {}
      .howMuchYouSaveValue__title_4 {}
      .howMuchYouSaveValue__title_5 {
        font-size: 88px;
        line-height: 118%;
        white-space: nowrap;
      }
  
      .howMuchYouSaveValue__titleSaveValue {}
  
      .howMuchYouSaveValue__titleSmallText {
        position: relative;
        top: 15px;
        font-size: 45px;
        line-height: 45px;
        font-weight: 600;
      }
  
    .howMuchYouSaveValue__comparedTo {
      font: 500 35px/160% 'Lato',sans-serif;
      color: #B5B5B5;
    }
  
  /* *** MEDIA QUERIES *** */
  @media (max-width: 5000px) {
    /* .howMuchYouSaveValue__title_1 {
      font-size: 63px;
    }
    .howMuchYouSaveValue__title_2 {
      font-size: 63px;
    } */
  }
  @media (max-width: 4999px) {
    .howMuchYouSaveValue__title {
      margin-bottom: 7px;
      font-size: 80px;
      line-height: 90px;
    }
      /* .howMuchYouSaveValue__title_1 {
        font-size: 48px;
        line-height: 110%;
      }
      .howMuchYouSaveValue__title_2 {
        font-size: 48px;
        line-height: 110%;
      } */
      .howMuchYouSaveValue__title_5 {
        font-size: 68px;
        line-height: 118%;
        white-space: nowrap;
      }
  
    .howMuchYouSaveValue__titleSmallText {
      top: 10px;
      font-size: 40px;
    }
  
    .howMuchYouSaveValue__comparedTo {
      font-size: 24px;
      line-height: 130%;
    }
  }
  @media (max-width: 1279px) {
    /* .howMuchYouSaveValue__title_1 {
      font-size: 40px;
    }
    .howMuchYouSaveValue__title_2 {
      font-size: 40px;
    } */
    .howMuchYouSaveValue__title_4 {
      white-space: nowrap;
    }
    .howMuchYouSaveValue__title_5 {
      font-size: 61px;
    }
  
      .howMuchYouSaveValue__titleSmallText {
        top: 8px;
        font-size: 35px;
      }
  }
  @media (max-width: 1023px) {
    .howMuchYouSaveValue__title {
      justify-content: center;
      font-size: 70px;
      line-height: 110%;
      text-align: center;
    }
      /* .howMuchYouSaveValue__title_1 {
        margin-top: 8px;
        font-size: 50px;
      }
      .howMuchYouSaveValue__title_2 {
        margin-top: 8px;
        font-size: 50px;
      } */
      .howMuchYouSaveValue__title_5 {
        margin-top: 8px;
        font-size: 50px;
      }
  
    .howMuchYouSaveValue__comparedTo {
      text-align: center;
    }
  
      .howMuchYouSaveValue__titleSmallText {
        top: 4px;
      }
  }
  @media (max-width: 767px) {
    .howMuchYouSaveValue__title {
      font-size: 50px;
      white-space: normal;
    }
  
      .howMuchYouSaveValue__titleSum {
        display: flex;
      }
  
      /* .howMuchYouSaveValue__title_1 {
        font-size: 35px;
      }
      .howMuchYouSaveValue__title_2 {
        font-size: 35px;
      } */
      .howMuchYouSaveValue__title_5 {
        font-size: 35px;
        white-space: normal;
      }
  
        .howMuchYouSaveValue__titleSmallText {
          top: 9px;
          font-size: 24px;
          line-height: 24px;
        }
  
        .howMuchYouSaveValue__comparedTo {
          font-size: 13px;
          text-align: center;
        }
  }
  
  
  
  /* Trading Volume suitable plan */
  .tradingVolumeSuitablePlan {
    width: 445px;
    padding: 29px 32px 50px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px #C9C9C9 solid;
    border-radius: 16px;
    font: 24px/160% 'Lato',sans-serif;
    color: #383838;
    background: #fff;
  }
  
    .tradingVolumeSuitablePlan__description {
      margin-bottom: 103px;
    }
  
      .tradingVolumeSuitablePlan__descrSection {
        margin-bottom: 18px;
        font-size: 35px;
        font-weight: 900;
      }
  
        .tradingVolumeSuitablePlan__descrTitle {
          margin-bottom: 7px;
          font: 24px/160% 'Lato',sans-serif;
          color: #383838;
        }
  
        .tradingVolumeSuitablePlan__descrText {
        }
  
          .tradingVolumeSuitablePlan__descrSmallText {
            font-size: 24px;
            font-weight: 500;
          }
  
    .tradingVolumeSuitablePlan__CTAsection {
      font: 24px/160% 'Lato',sans-serif;
      color: #B5B5B5;
    }
  
      .tradingVolumeSuitablePlan__CTAbut {
        height: 80px;
        padding: 0 35px 4px;
        margin-bottom: 18px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        align-content: center;
        border-radius: 100px;
        font-size: 35px;
        line-height: 35px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 4px 4px rgba(0,0,0,.25);
        background: #FF165E;
        cursor: pointer;
        transition: opacity .1s ease;
      }
  
        .tradingVolumeSuitablePlan__CTAbut:hover {
          opacity: .7;
        }
  
        .tradingVolumeSuitablePlan__CTAbut::after {
          content: '';
          width: 26px;
          height: 26px;
          position: absolute;
          top: calc(50% - 14px);
          right: 25px;
          background: 50% 50%/auto 100% no-repeat;
          opacity: .4;
        }
  
  
  
  /* *** MEDIA QUERIES *** */
  @media (max-width: 1920px) {
    .tradingVolumeSuitablePlan {
      width: 410px;
      padding: 29px 38px 36px;
    }
  
      .tradingVolumeSuitablePlan__description {
        margin-bottom: 68px;
      }
  }
  @media (max-width: 4999px) {
    .tradingVolumeSuitablePlan {
      width: 310px;
      padding: 27px 30px 35px;
    }
  
      .tradingVolumeSuitablePlan__description {
        margin-bottom: 82px;
      }
  
      .tradingVolumeSuitablePlan__descrSection {
        margin-bottom: 31px;
      }
  
      .tradingVolumeSuitablePlan__descrTitle {
        margin-bottom: 1px;
        font-size: 18px;
        line-height: 140%;
      }
  
      .tradingVolumeSuitablePlan__descrText {
        height: 30px;
        font-size: 24px;
        line-height: 30px;
      }
  
      .tradingVolumeSuitablePlan__CTAsection {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
        font-size: 18px;
        line-height: 140%;
      }
  
        .tradingVolumeSuitablePlan__CTAbut {
          width: auto;
          height: 56px;
          padding-right: 106px;
          padding-left: 26px;
          margin-bottom: 14px;
          margin-left: -3px;
          font-size: 19px;
          line-height: 19px;
        }
  
          .tradingVolumeSuitablePlan__CTAbut::after {
            width: 20px;
            height: 20px;
            top: calc(50% - 10px);
            right: 20px;
          }
  
  }
  @media (max-width: 1279px) {
    .tradingVolumeSuitablePlan {
      width: 286px;
      padding-bottom: 22px;
    }
  
    .tradingVolumeSuitablePlan__description {
      margin-bottom: 57px;
    }
  
    .tradingVolumeSuitablePlan__descrSection {
      margin-bottom: 22px;
    }
  
      .tradingVolumeSuitablePlan__descrTitle {
        margin-bottom: 0;
        line-height: 130%;
      }
  
      .tradingVolumeSuitablePlan__CTAsection {
        line-height: 130%;
      }
  }
  @media (max-width: 1023px) {
    .tradingVolumeSuitablePlan {
      width: 100%;
      padding-bottom: 11px;
      box-sizing: border-box;
      flex-direction: row;
    }
  
      .tradingVolumeSuitablePlan__description {
        width: 50%;
        box-sizing: border-box;
        padding-right: 11px;
        margin-bottom: 0;
      }
  
      .tradingVolumeSuitablePlan__CTAsection {
        width: 50%;
        box-sizing: border-box;
        padding-top: 13px;
        padding-left: 11px;
      }
  }
  @media (max-width: 767px) {
    .tradingVolumeSuitablePlan {
      padding-bottom: 29px;
      flex-direction: column;
    }
  
    .tradingVolumeSuitablePlan__description {
      width: 100%;
      padding: 0;
      margin-bottom: 16px;
    }
  
      .tradingVolumeSuitablePlan__descrTitle {
        text-align: center;
      }
  
      .tradingVolumeSuitablePlan__descrSection {
        margin-bottom: 10px;
      }
  
      .tradingVolumeSuitablePlan__descrText {
        text-align: center;
      }
  
      .tradingVolumeSuitablePlan__CTAsection {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        font-size: 13px;
        line-height: 18px;
        text-align: center;
      }
  
      .tradingVolumeSuitablePlan__descrText {
        height: auto;
      }
  }
  


  
  /* Estimate Your Cost Widget */
  .estimateYourCostWidget {
    max-width: 1110px;
    padding-top: 90px;
    margin-bottom: 100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
  }
  
    .estimateYourCostWidget__h2 {
      width: 100%;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
      margin: 0 0 50px;
      text-align: center;
      color: #000;
      font-size: 5rem;
      font-weight: 400;
      line-height: 1.2;
    }
  
    .estimateYourCostWidget__calculatorForm {
      width: 802px;
    }
  
      .estimateYourCostWidget__tradingVolumePicker {
        margin-bottom: 87px;
      }
  
      .estimateYourCostWidget__howMuchYouSaveValue {}
  
    .estimateYourCostWidget__suitablePlan {
    }
  
  /* *** MEDIA QUERIES *** */
  @media (max-width: 1920px) {
    .estimateYourCostWidget {}
  
      .estimateYourCostWidget__calculatorForm {
        width: 737px;
      }
  }
  @media (max-width: 4999px) {
    .estimateYourCostWidget {
      margin: 0 auto 80px;
    }
  
      .estimateYourCostWidget__h2 {
        margin-bottom: 67px;
      }
  
      .estimateYourCostWidget__calculatorForm {
        width: 562px;
      }
  
      .estimateYourCostWidget__tradingVolumePicker {
        margin-bottom: 75px;
      }
  
      .estimateYourCostWidget__suitablePlan {
        margin-top: 12px;
      }
  }
  @media (max-width: 1279px) {
    .estimateYourCostWidget {
      padding-top: 85px;
      margin-bottom: 100px;
    }
  
    .estimateYourCostWidget__calculatorForm {
      width: 514px;
    }
    .estimateYourCostWidget__tradingVolumePicker {
      margin-bottom: 62px;
    }
    .estimateYourCostWidget__suitablePlan {
      margin-top: -4px;
    }
  
  }
  @media (max-width: 1023px) {
    .estimateYourCostWidget__h2 {
      margin-bottom: 25px;
      font-size: 3.8rem;
      font-weight: 400;
      letter-spacing: 0.035rem;
      line-height: 1.2;
    }
  
    .estimateYourCostWidget__calculatorForm {
      width: 100%;
      margin-bottom: 55px;
    }
    .estimateYourCostWidget__tradingVolumePicker {
      margin-bottom: 32px;
    }
  }
  @media (max-width: 767px) {
    .estimateYourCostWidget {
      padding-top: 50px;
      margin-bottom: 70px;
    }
  
    .estimateYourCostWidget__calculatorForm {
      margin-bottom: 37px;
    }
  
    .estimateYourCostWidget__tradingVolumePicker {
      margin-bottom: 22px;
    }
  
    .estimateYourCostWidget__h2 {
      margin-bottom: 40px;
    }
  }
  @media (max-width: 567px) {
    .estimateYourCostWidget__h2 {
      font-size: 3.2rem; 
      font-weight: 400;
      letter-spacing: 0.035rem;
      line-height: 1.2;
    }
  
  }