:root {
  --font-family: 'Inter' !important;
  --color-primary: #5a298b !important;
  --color-primary-dark: #280b45 !important;
  --color-primary-light: #7a26ce !important;
  --color-primary-tr-light: #af91d1 !important;
  --color-primary-tr-lighter: #f7f4f9 !important;
  --color-white-dark: #f7f4f9 !important;
  --color-light-dark: #444444 !important;
  --level-3-menu-color: #888888;
  --level-3-active-menu-color: #262626;
  --fund-search-color: #5a298b;
  --fund-search-border-color: #e1e1e1;
  --table-row-hover-color: #f7f4f9;
  --table-border-color: #e1e1e1;
  --filter-border-color: #e1e1e1;
  --filter-background-color: #f2f2f2;
  --fund-search-item-hover: #f7f4f9;
  --collection-card-error-color: #f9f9f9;
  --collection-card-warning-color: #f9f9f9;
  --collection-card-info-color: #f9f9f9;
  --collection-card-success-color: #f9f9f9;
  --page-bg-color: #f7f4f9;
  --badge-border-color: #e1e1e1;
  --select-bg-clolor: #f2f2f2;
  --filter-header-bg-color: #f7f4f9;
  --filter-option-color: rgba(175, 145, 209, 0.3);
  --filter-data-bg-color: #f7f4f9;
  --offcanvas-bg-color: #ffffff;
  --offcanvas-content-shadow: none;
  --offcanvas-success-bg-color: #ffffff;
  --offcanvas-failure-bg-color: #ffffff;
  --offcanvas-error-text-color: #262626;
  --step-line-color: #f2f2f2;
  --step-default-bg-color: #f2f2f2;
  --step-process-bg-color: #ffffff;
  --step-success-bg-color: #eeebe6;
  --setp-default-border-color: transparent;
  --setp-process-border-color: #5a298b;
  --setp-success-border-color: transparent;
  --replace-btn-color: #5a298b;
  --replace-btn-text-color: #5a298b;
  --replace-btn-icon-color: #5a298b;
  --delete-btn-color: #5a298b;
  --delete-btn-text-color: #5a298b;
  --delete-btn-icon-color: #5a298b;
  --custom-neutral-bg-color: #5a298b;
  --custom-neutral-text-color: #ffffff;
  --custom-neutral-border-color: transparent;
  --custom-neutral-hover-bg-color: #7a26ce;

  --level-1-menu-bg: #43165c;
  --level-1-menu-color: #fff;
  --level-1-menu-hover-color: #7a26ce;
  --level-1-menu-subtext: #fff;
  --level-1-menu-subtext-hover: #af91d1;
  --level-1-menu-border-color: #5a298b;
  --level-1-menu-heading: #a09568;
  --level-menu-button: #43165c;
  --level-1-menu-subheading: #e0dbd2;
  --header-badge-bg-color: #41246e;

  --level-2-menu-bg: #f5f5f5;
  --level-2-menu-color: #6a6a6a;
  --level-2-active-menu-color: #262626;
  --level-2-border-color: #262626;
  --color-box-shadow: #d0d0d0;
  --trade-text-color: #262626;
  --trade-button-border-color: #7a26ce;
  --dropdown-bg-color: #f5f5f5;
  --dropdown-text-color: #262626;
  --dropdown-text-hover-color: #6a6a6a;
  --positive-color: #148564;
  --negative-color: #db542a;
  --graph-color: var(--positive-color);

  --mobile-menu-bg-color: #43165c;
  --mobile-menu-dark-bg: #280b45;
  --mobile-menu-text-color: #fff;
  --mobile-menu-subtext-color: #fff;
  --divider-color: #5a298b;
  --trade-button-border-radius: 100px;
  --fund-name-color: #262626;
  --portfolio-empty-color: #6a6a6a;

  --footer-bg-color: #37135b;
  --footer-menu-title-heading: #a09568;
  --collapse-light-border-color: #e5e5e5;

  --nav-bg: #280e42;
  --nav-bg-dark: #1a092a;
  --button-primary-default: #542087;
  --button-primary-hover: #7132b0;
  --button-primary-active: #37135b;
  --button-secondary-text: #111;
  --nav-link-border-color: #542087;
  --search-tab-item-color: #525252;
  --search-tab-container-bg: #f1f1f1;
  --nav-trending-color: #919191;
  --stock-symbol-color: #777777;
  --mobile-menu-collapse-body-bg: #37135b;
}

/***** Abstracts *****/
@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-Thin.woff2) format("woff2");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-ExtraLight.woff2) format("woff2");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: Inter;
  src: url(/mutual-funds/fonts/Inter-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: MessinaSans;
  src: url(/mutual-funds/fonts/MessinaSans-Light.woff2) format("woff2");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: MessinaSans;
  src: url(/mutual-funds/fonts/MessinaSans-Book.woff2) format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: MessinaSans;
  src: url(/mutual-funds/fonts/MessinaSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: MessinaSans;
  src: url(/mutual-funds/fonts/MessinaSans-SemiBold.woff2) format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: MessinaSans;
  src: url(/mutual-funds/fonts/MessinaSans-Bold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: MessinaSans;
  src: url(/mutual-funds/fonts/MessinaSans-Black.woff2) format("woff2");
  font-weight: 700;
  font-style: normal; }

/* Min breakpoint width */
/* MAx breakpoint width */

.select__placeholder {
  font-family: Inter;
  font-size: 14px;
  color: var(--color-primary) !important;
  font-weight: 600; }

.select__control {
  border-color: var(--color-primary) !important;
  min-height: 48px !important;
  padding: 0 5px; }

.select__single-value {
  font-family: Inter;
  font-size: 14px;
  color: var(--color-primary) !important;
  font-weight: 600; }

.select__menu {
  margin: 0 !important; }

.select__option {
  font-size: 14px !important; }

.select__indicator.select__loading-indicator {
  color: var(--color-primary); }

.select__indicator svg path {
  fill: var(--color-primary) !important; }

.select__indicator-separator {
  display: none; }

.select__indicators svg path {
  fill: var(--color-primary); }

.select-bank__options {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.select-bank .select__control {
  background-color: var(--select-bg-clolor); }

.select-bank .select__value-container {
  overflow: visible; }

.select-bank .select__single-value {
  width: 100%;
  font-weight: normal;
  color: inherit !important;
  margin: 0; }

.select-bank .select__control {
  min-height: 55px !important; }

.select-bank .bank-name {
  margin-bottom: 3px; }

.select-bank .bank-account-no {
  color: rgba(0, 0, 0, 0.38);
  font-size: 12px; }

.custom-input {
  width: 100%; }
  .custom-input input {
    border-radius: 4px;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background-color: #ffffff;
    font-weight: 600; }
    .custom-input input:-webkit-autofill:hover, .custom-input input:-webkit-autofill:focus {
      background-color: red; }
  .custom-input span.prefix .text {
    color: var(--color-primary) !important;
    padding-right: 5px; }
  .custom-input span.prefix + input {
    padding-left: 30px !important; }

label.radio {
  width: auto;
  height: auto;
  min-width: auto;
  vertical-align: middle; }
  label.radio .visual {
    right: 0;
    left: 0; }
  label.radio input {
    position: absolute;
    visibility: hidden; }

button.primary:not(:disabled):focus {
  background-color: var(--color-primary) !important; }

button.primary:disabled:focus {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: solid 1px var(--color-black-outline) !important; }

button.neutral:disabled {
  background-color: #cccccc;
  color: #ffffff; }

.tab.active {
  background: none !important; }

.modal {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999999990;
  overflow-y: auto; }
  .modal .modal-container {
    background-color: #ffffff;
    padding: 30px 35px;
    border-radius: 5px;
    width: 330px; }
    .modal .modal-container > div:first-child > div:first-child > span.icon {
      display: none; }

.custom-neutral {
  background-color: var(--custom-neutral-bg-color);
  color: var(--custom-neutral-text-color);
  border-color: var(--custom-neutral-border-color);
  border-radius: 0; }
  .custom-neutral:hover {
    background-color: var(--custom-neutral-hover-bg-color) !important; }

/* Min breakpoint width */
/* MAx breakpoint width */

@media (min-width: 768px) {
  .col-md-1 {
    width: 8.33333%; }
  .col-md-2 {
    width: 16.66667%; }
  .col-md-3 {
    width: 25%; }
  .col-md-4 {
    width: 33.33333%; }
  .col-md-5 {
    width: 41.66667%; }
  .col-md-6 {
    width: 50%; }
  .col-md-7 {
    width: 58.33333%; }
  .col-md-8 {
    width: 66.66667%; }
  .col-md-9 {
    width: 75%; }
  .col-md-10 {
    width: 83.33333%; }
  .col-md-11 {
    width: 91.66667%; }
  .col-md-12 {
    width: 100%; } }

.full-width {
  width: 100%; }

.m0 {
  margin: 0px !important; }

.p0 {
  padding: 0px !important; }

.mt0 {
  margin-top: 0px !important; }

.pt0 {
  padding-top: 0px !important; }

.mb0 {
  margin-bottom: 0px !important; }

.pb0 {
  padding-bottom: 0px !important; }

.ml0 {
  margin-left: 0px !important; }

.pl0 {
  padding-left: 0px !important; }

.mr0 {
  margin-right: 0px !important; }

.pr0 {
  padding-right: 0px !important; }

.m1 {
  margin: 1px !important; }

.p1 {
  padding: 1px !important; }

.mt1 {
  margin-top: 1px !important; }

.pt1 {
  padding-top: 1px !important; }

.mb1 {
  margin-bottom: 1px !important; }

.pb1 {
  padding-bottom: 1px !important; }

.ml1 {
  margin-left: 1px !important; }

.pl1 {
  padding-left: 1px !important; }

.mr1 {
  margin-right: 1px !important; }

.pr1 {
  padding-right: 1px !important; }

.m2 {
  margin: 2px !important; }

.p2 {
  padding: 2px !important; }

.mt2 {
  margin-top: 2px !important; }

.pt2 {
  padding-top: 2px !important; }

.mb2 {
  margin-bottom: 2px !important; }

.pb2 {
  padding-bottom: 2px !important; }

.ml2 {
  margin-left: 2px !important; }

.pl2 {
  padding-left: 2px !important; }

.mr2 {
  margin-right: 2px !important; }

.pr2 {
  padding-right: 2px !important; }

.m3 {
  margin: 3px !important; }

.p3 {
  padding: 3px !important; }

.mt3 {
  margin-top: 3px !important; }

.pt3 {
  padding-top: 3px !important; }

.mb3 {
  margin-bottom: 3px !important; }

.pb3 {
  padding-bottom: 3px !important; }

.ml3 {
  margin-left: 3px !important; }

.pl3 {
  padding-left: 3px !important; }

.mr3 {
  margin-right: 3px !important; }

.pr3 {
  padding-right: 3px !important; }

.m4 {
  margin: 4px !important; }

.p4 {
  padding: 4px !important; }

.mt4 {
  margin-top: 4px !important; }

.pt4 {
  padding-top: 4px !important; }

.mb4 {
  margin-bottom: 4px !important; }

.pb4 {
  padding-bottom: 4px !important; }

.ml4 {
  margin-left: 4px !important; }

.pl4 {
  padding-left: 4px !important; }

.mr4 {
  margin-right: 4px !important; }

.pr4 {
  padding-right: 4px !important; }

.m5 {
  margin: 5px !important; }

.p5 {
  padding: 5px !important; }

.mt5 {
  margin-top: 5px !important; }

.pt5 {
  padding-top: 5px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.pb5 {
  padding-bottom: 5px !important; }

.ml5 {
  margin-left: 5px !important; }

.pl5 {
  padding-left: 5px !important; }

.mr5 {
  margin-right: 5px !important; }

.pr5 {
  padding-right: 5px !important; }

.m10 {
  margin: 10px !important; }

.p10 {
  padding: 10px !important; }

.mt10 {
  margin-top: 10px !important; }

.pt10 {
  padding-top: 10px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.ml10 {
  margin-left: 10px !important; }

.pl10 {
  padding-left: 10px !important; }

.mr10 {
  margin-right: 10px !important; }

.pr10 {
  padding-right: 10px !important; }

.m15 {
  margin: 15px !important; }

.p15 {
  padding: 15px !important; }

.mt15 {
  margin-top: 15px !important; }

.pt15 {
  padding-top: 15px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.ml15 {
  margin-left: 15px !important; }

.pl15 {
  padding-left: 15px !important; }

.mr15 {
  margin-right: 15px !important; }

.pr15 {
  padding-right: 15px !important; }

.m20 {
  margin: 20px !important; }

.p20 {
  padding: 20px !important; }

.mt20 {
  margin-top: 20px !important; }

.pt20 {
  padding-top: 20px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.ml20 {
  margin-left: 20px !important; }

.pl20 {
  padding-left: 20px !important; }

.mr20 {
  margin-right: 20px !important; }

.pr20 {
  padding-right: 20px !important; }

.m25 {
  margin: 25px !important; }

.p25 {
  padding: 25px !important; }

.mt25 {
  margin-top: 25px !important; }

.pt25 {
  padding-top: 25px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.pb25 {
  padding-bottom: 25px !important; }

.ml25 {
  margin-left: 25px !important; }

.pl25 {
  padding-left: 25px !important; }

.mr25 {
  margin-right: 25px !important; }

.pr25 {
  padding-right: 25px !important; }

.m30 {
  margin: 30px !important; }

.p30 {
  padding: 30px !important; }

.mt30 {
  margin-top: 30px !important; }

.pt30 {
  padding-top: 30px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.ml30 {
  margin-left: 30px !important; }

.pl30 {
  padding-left: 30px !important; }

.mr30 {
  margin-right: 30px !important; }

.pr30 {
  padding-right: 30px !important; }

.m35 {
  margin: 35px !important; }

.p35 {
  padding: 35px !important; }

.mt35 {
  margin-top: 35px !important; }

.pt35 {
  padding-top: 35px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.pb35 {
  padding-bottom: 35px !important; }

.ml35 {
  margin-left: 35px !important; }

.pl35 {
  padding-left: 35px !important; }

.mr35 {
  margin-right: 35px !important; }

.pr35 {
  padding-right: 35px !important; }

.m40 {
  margin: 40px !important; }

.p40 {
  padding: 40px !important; }

.mt40 {
  margin-top: 40px !important; }

.pt40 {
  padding-top: 40px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.pb40 {
  padding-bottom: 40px !important; }

.ml40 {
  margin-left: 40px !important; }

.pl40 {
  padding-left: 40px !important; }

.mr40 {
  margin-right: 40px !important; }

.pr40 {
  padding-right: 40px !important; }

.m45 {
  margin: 45px !important; }

.p45 {
  padding: 45px !important; }

.mt45 {
  margin-top: 45px !important; }

.pt45 {
  padding-top: 45px !important; }

.mb45 {
  margin-bottom: 45px !important; }

.pb45 {
  padding-bottom: 45px !important; }

.ml45 {
  margin-left: 45px !important; }

.pl45 {
  padding-left: 45px !important; }

.mr45 {
  margin-right: 45px !important; }

.pr45 {
  padding-right: 45px !important; }

.m50 {
  margin: 50px !important; }

.p50 {
  padding: 50px !important; }

.mt50 {
  margin-top: 50px !important; }

.pt50 {
  padding-top: 50px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.pb50 {
  padding-bottom: 50px !important; }

.ml50 {
  margin-left: 50px !important; }

.pl50 {
  padding-left: 50px !important; }

.mr50 {
  margin-right: 50px !important; }

.pr50 {
  padding-right: 50px !important; }

.m55 {
  margin: 55px !important; }

.p55 {
  padding: 55px !important; }

.mt55 {
  margin-top: 55px !important; }

.pt55 {
  padding-top: 55px !important; }

.mb55 {
  margin-bottom: 55px !important; }

.pb55 {
  padding-bottom: 55px !important; }

.ml55 {
  margin-left: 55px !important; }

.pl55 {
  padding-left: 55px !important; }

.mr55 {
  margin-right: 55px !important; }

.pr55 {
  padding-right: 55px !important; }

.m60 {
  margin: 60px !important; }

.p60 {
  padding: 60px !important; }

.mt60 {
  margin-top: 60px !important; }

.pt60 {
  padding-top: 60px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.pb60 {
  padding-bottom: 60px !important; }

.ml60 {
  margin-left: 60px !important; }

.pl60 {
  padding-left: 60px !important; }

.mr60 {
  margin-right: 60px !important; }

.pr60 {
  padding-right: 60px !important; }

.m65 {
  margin: 65px !important; }

.p65 {
  padding: 65px !important; }

.mt65 {
  margin-top: 65px !important; }

.pt65 {
  padding-top: 65px !important; }

.mb65 {
  margin-bottom: 65px !important; }

.pb65 {
  padding-bottom: 65px !important; }

.ml65 {
  margin-left: 65px !important; }

.pl65 {
  padding-left: 65px !important; }

.mr65 {
  margin-right: 65px !important; }

.pr65 {
  padding-right: 65px !important; }

.m70 {
  margin: 70px !important; }

.p70 {
  padding: 70px !important; }

.mt70 {
  margin-top: 70px !important; }

.pt70 {
  padding-top: 70px !important; }

.mb70 {
  margin-bottom: 70px !important; }

.pb70 {
  padding-bottom: 70px !important; }

.ml70 {
  margin-left: 70px !important; }

.pl70 {
  padding-left: 70px !important; }

.mr70 {
  margin-right: 70px !important; }

.pr70 {
  padding-right: 70px !important; }

.m75 {
  margin: 75px !important; }

.p75 {
  padding: 75px !important; }

.mt75 {
  margin-top: 75px !important; }

.pt75 {
  padding-top: 75px !important; }

.mb75 {
  margin-bottom: 75px !important; }

.pb75 {
  padding-bottom: 75px !important; }

.ml75 {
  margin-left: 75px !important; }

.pl75 {
  padding-left: 75px !important; }

.mr75 {
  margin-right: 75px !important; }

.pr75 {
  padding-right: 75px !important; }

.m80 {
  margin: 80px !important; }

.p80 {
  padding: 80px !important; }

.mt80 {
  margin-top: 80px !important; }

.pt80 {
  padding-top: 80px !important; }

.mb80 {
  margin-bottom: 80px !important; }

.pb80 {
  padding-bottom: 80px !important; }

.ml80 {
  margin-left: 80px !important; }

.pl80 {
  padding-left: 80px !important; }

.mr80 {
  margin-right: 80px !important; }

.pr80 {
  padding-right: 80px !important; }

.m85 {
  margin: 85px !important; }

.p85 {
  padding: 85px !important; }

.mt85 {
  margin-top: 85px !important; }

.pt85 {
  padding-top: 85px !important; }

.mb85 {
  margin-bottom: 85px !important; }

.pb85 {
  padding-bottom: 85px !important; }

.ml85 {
  margin-left: 85px !important; }

.pl85 {
  padding-left: 85px !important; }

.mr85 {
  margin-right: 85px !important; }

.pr85 {
  padding-right: 85px !important; }

.m90 {
  margin: 90px !important; }

.p90 {
  padding: 90px !important; }

.mt90 {
  margin-top: 90px !important; }

.pt90 {
  padding-top: 90px !important; }

.mb90 {
  margin-bottom: 90px !important; }

.pb90 {
  padding-bottom: 90px !important; }

.ml90 {
  margin-left: 90px !important; }

.pl90 {
  padding-left: 90px !important; }

.mr90 {
  margin-right: 90px !important; }

.pr90 {
  padding-right: 90px !important; }

.m95 {
  margin: 95px !important; }

.p95 {
  padding: 95px !important; }

.mt95 {
  margin-top: 95px !important; }

.pt95 {
  padding-top: 95px !important; }

.mb95 {
  margin-bottom: 95px !important; }

.pb95 {
  padding-bottom: 95px !important; }

.ml95 {
  margin-left: 95px !important; }

.pl95 {
  padding-left: 95px !important; }

.mr95 {
  margin-right: 95px !important; }

.pr95 {
  padding-right: 95px !important; }

.m100 {
  margin: 100px !important; }

.p100 {
  padding: 100px !important; }

.mt100 {
  margin-top: 100px !important; }

.pt100 {
  padding-top: 100px !important; }

.mb100 {
  margin-bottom: 100px !important; }

.pb100 {
  padding-bottom: 100px !important; }

.ml100 {
  margin-left: 100px !important; }

.pl100 {
  padding-left: 100px !important; }

.mr100 {
  margin-right: 100px !important; }

.pr100 {
  padding-right: 100px !important; }

.text-center {
  text-align: center !important; }

.d-block {
  display: block !important; }

@media (max-width: 576px) {
  .d-sm-none {
    display: none !important; } }

@media (min-width: 768px) {
  .d-md-none {
    display: none !important; } }

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important; } }

.d-md-block {
  display: none; }
  @media (min-width: 768px) {
    .d-md-block {
      display: block; } }

.color-primary {
  color: var(--color-primary); }

.color-danger {
  color: var(--color-danger); }

.color-white {
  color: var(--color-white); }

.d-flex {
  display: flex !important; }

.align-middle {
  align-items: center !important; }

.justify-between {
  justify-content: space-between; }

.text-center {
  text-align: center; }

@media (max-width: 767px) {
  .d-xs-none {
    display: none; } }

.hidden {
  visibility: hidden; }

.hideTransition {
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms; }

.showTransition {
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms; }

.sticky {
  position: fixed !important;
  top: 0; }

.noScroll {
  overflow: hidden; }

body {
  font-family: var(--font-family);
  overflow-x: hidden; }
  body.default {
    border: 0 !important;
    background: none !important;
    color: inherit !important; }

.login-page {
  height: 100%;
  background-color: var(--color-primary); }

#fc_frame.fc-widget-normal:not(.fc-open) {
  z-index: 5 !important; }

.btn.default {
  color: #ffffff; }

.btn.primary .suffix svg path {
  fill: #ffffff; }

.hr {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 20px 0; }
  .hr::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08); }

* {
  -webkit-tap-highlight-color: transparent; }

table tbody tr:hover {
  background-color: var(--table-row-hover-color) !important; }

.btn.outline.info {
  color: var(--color-primary);
  border-color: var(--color-primary); }

.none {
  display: none; }

.f-header {
  padding: 24px 0; }
  .f-header h3 {
    color: white !important;
    font-size: 16px;
    font-weight: 600; }

.bounce {
  animation-name: bounce;
  animation-duration: 1s;
  animation-fill-mode: both;
  transform-origin: center bottom; }

@keyframes bounce {
  20%,
  53%,
  80%,
  from,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0); }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0); }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0); }
  90% {
    transform: translate3d(0, -4px, 0); } }

.flash {
  animation-name: flash;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes flash {
  50%,
  from,
  to {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

.pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    transform: scale3d(1, 1, 1); } }

.rubberBand {
  animation-name: rubberBand;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1); }
  30% {
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    transform: scale3d(1.05, 0.95, 1); }
  to {
    transform: scale3d(1, 1, 1); } }

.shake {
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0); }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0); } }

.headShake {
  animation-name: headShake;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out; }

@keyframes headShake {
  0% {
    transform: translateX(0); }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg); }
  18.5% {
    transform: translateX(5px) rotateY(7deg); }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg); }
  43.5% {
    transform: translateX(2px) rotateY(3deg); }
  50% {
    transform: translateX(0); } }

.swing {
  animation-name: swing;
  animation-duration: 1s;
  animation-fill-mode: both;
  transform-origin: top center; }

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    transform: rotate3d(0, 0, 1, 0deg); } }

.tada {
  animation-name: tada;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1); }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    transform: scale3d(1, 1, 1); } }

.wobble {
  animation-name: wobble;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes wobble {
  from {
    transform: none; }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    transform: none; } }

.jello {
  animation-name: jello;
  animation-duration: 1s;
  animation-fill-mode: both;
  transform-origin: center; }

@keyframes jello {
  11.1%,
  from,
  to {
    transform: none; }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

.bounceIn {
  animation-name: bounceIn;
  animation-duration: 0.75s;
  animation-fill-mode: both; }

@keyframes bounceIn {
  20%,
  40%,
  60%,
  80%,
  from,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1); } }

.bounceInDown {
  animation-name: bounceInDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceInDown {
  60%,
  75%,
  90%,
  from,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0); }
  75% {
    transform: translate3d(0, -10px, 0); }
  90% {
    transform: translate3d(0, 5px, 0); }
  to {
    transform: none; } }

.bounceInLeft {
  animation-name: bounceInLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceInLeft {
  60%,
  75%,
  90%,
  from,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0); }
  75% {
    transform: translate3d(-10px, 0, 0); }
  90% {
    transform: translate3d(5px, 0, 0); }
  to {
    transform: none; } }

.bounceInRight {
  animation-name: bounceInRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceInRight {
  60%,
  75%,
  90%,
  from,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0); }
  75% {
    transform: translate3d(10px, 0, 0); }
  90% {
    transform: translate3d(-5px, 0, 0); }
  to {
    transform: none; } }

.bounceInUp {
  animation-name: bounceInUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceInUp {
  60%,
  75%,
  90%,
  from,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  75% {
    transform: translate3d(0, 10px, 0); }
  90% {
    transform: translate3d(0, -5px, 0); }
  to {
    transform: translate3d(0, 0, 0); } }

.bounceOut {
  animation-name: bounceOut;
  animation-duration: 0.75s;
  animation-fill-mode: both; }

@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9); }
  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); } }

.bounceOutDown {
  animation-name: bounceOutDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); } }

.bounceOutLeft {
  animation-name: bounceOutLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); } }

.bounceOutRight {
  animation-name: bounceOutRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); } }

.bounceOutUp {
  animation-name: bounceOutUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); } }

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInDownBig {
  animation-name: fadeInDownBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInLeft {
  animation-name: fadeInLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInRight {
  animation-name: fadeInRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInRightBig {
  animation-name: fadeInRightBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInUpBig {
  animation-name: fadeInUpBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOutDown {
  animation-name: fadeOutDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0); } }

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); } }

.fadeOutLeft {
  animation-name: fadeOutLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); } }

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); } }

.fadeOutRight {
  animation-name: fadeOutRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0); } }

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); } }

.fadeOutUp {
  animation-name: fadeOutUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0); } }

.fadeOutUpBig {
  animation-name: fadeOutUpBig;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); } }

.flipInX {
  animation-name: flipInX;
  animation-duration: 1s;
  animation-fill-mode: both;
  backface-visibility: visible !important; }

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in; }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    transform: perspective(400px); } }

.flipInY {
  animation-name: flipInY;
  animation-duration: 1s;
  animation-fill-mode: both;
  backface-visibility: visible !important; }

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in; }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    transform: perspective(400px); } }

.flipOutX {
  animation-name: flipOutX;
  animation-duration: 0.75s;
  animation-fill-mode: both;
  backface-visibility: visible !important; }

@keyframes flipOutX {
  from {
    transform: perspective(400px); }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  animation-name: flipOutY;
  animation-duration: 0.75s;
  animation-fill-mode: both;
  backface-visibility: visible !important; }

@keyframes flipOutY {
  from {
    transform: perspective(400px); }
  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out; }

@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    transform: none;
    opacity: 1; } }

.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in; }

@keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

.rotateIn {
  animation-name: rotateIn;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    transform-origin: center;
    transform: none;
    opacity: 1; } }

.rotateInDownLeft {
  animation-name: rotateInDownLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1; } }

.rotateInDownRight {
  animation-name: rotateInDownRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1; } }

.rotateInUpLeft {
  animation-name: rotateInUpLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1; } }

.rotateInUpRight {
  animation-name: rotateInUpRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1; } }

.rotateOut {
  animation-name: rotateOut;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1; }
  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1; }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

.rotateOutDownRight {
  animation-name: rotateOutDownRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1; }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1; }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpRight {
  animation-name: rotateOutUpRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1; }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

.hinge {
  animation-name: hinge;
  animation-duration: 2s;
  animation-fill-mode: both; }

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out; }
  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out; }
  40%,
  80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

.rollIn {
  animation-name: rollIn;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    transform: none; } }

.rollOut {
  animation-name: rollOut;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

.zoomIn {
  animation-name: zoomIn;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomInDown {
  animation-name: zoomInDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInLeft {
  animation-name: zoomInLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInRight {
  animation-name: zoomInRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInUp {
  animation-name: zoomInUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOut {
  animation-name: zoomOut;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOutDown {
  animation-name: zoomOutDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutLeft {
  animation-name: zoomOutLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center; } }

.zoomOutRight {
  animation-name: zoomOutRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center; } }

.zoomOutUp {
  animation-name: zoomOutUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.slideInDown {
  animation-name: slideInDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInRight {
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInUp {
  animation-name: slideInUp;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideOutDown {
  animation-name: slideOutDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0); } }

.slideOutLeft {
  animation-name: slideOutLeft;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0); } }

.slideOutRight {
  animation-name: slideOutRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(1800%, 0, 0); } }

.slideOutUp {
  animation-name: slideOutRight;
  animation-duration: 1s;
  animation-fill-mode: both; }

.output,
.mixin {
  outline: 0;
  width: 100%;
  border: 0;
  white-space: pre-wrap;
  font: 0.85rem monospace;
  text-align: center;
  color: gray; }

.mixin {
  transition: all 0.5s;
  text-align: left;
  display: table;
  resize: none; }

[id='show-mixin']:not(:checked) ~ .mixin {
  max-height: 0;
  font-size: 0;
  overflow: hidden; }

[id='show-mixin']:checked ~ .mixin {
  max-height: 4000px;
  font-size: 0.85rem;
  min-height: 300px; }

[id='show-mixin']:not(:checked) + label:before {
  content: 'Show '; }

[id='show-mixin']:checked + label:before {
  content: 'Hide '; }

label {
  cursor: pointer;
  font-size: 0.8rem; }

.credit {
  font-size: 0.8rem;
  position: fixed;
  top: 5px;
  right: 5px; }
  .credit:before {
    color: silver;
    content: 'Credits '; }
  .credit:hover:before {
    color: white; }

@keyframes hue {
  from {
    filter: hue-rotate(0); }
  to {
    filter: hue-rotate(-360deg); } }

.page-not-found {
  height: 100%;
  background-color: #d3e9d0; }
  .page-not-found .layout {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%); }

/* Min breakpoint width */
/* MAx breakpoint width */

.pageContainer {
  max-width: 960px;
  margin: 16px; }
  @media (min-width: 768px) {
    .pageContainer {
      margin: 0 auto;
      margin-top: 32px; }
      .pageContainer .gridCard:last-child {
        margin-bottom: 0; } }

.masonryGrid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto; }

.masonryGridColumn {
  background-clip: padding-box; }
  @media (min-width: 768px) {
    .masonryGridColumn {
      padding-right: 17px; } }

@media (min-width: 768px) {
  .masonryGridColumn:last-child {
    padding-left: 17px;
    padding-right: 0; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.navigationTabs {
  display: none;
  margin-top: 16px; }
  @media (min-width: 768px) {
    .navigationTabs {
      display: block; } }
  .navigationTabs button {
    padding: 12px 5px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid white;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    text-transform: capitalize;
    color: #6a6a6a;
    margin-right: 24px;
    cursor: pointer; }
    .navigationTabs button.activeNav {
      font-weight: 600;
      color: #000000;
      margin-right: 23px;
      border-bottom: 2px solid #262726; }

.fixedNavigationTabs {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background-color: white;
  margin-top: 0;
  z-index: 100;
  padding: 0 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 15px;
  row-gap: 18px; }
  @media (min-width: 992px) {
    .fixedNavigationTabs {
      flex-direction: row; } }
  .fixedNavigationTabs button {
    padding: 0 0 10px 0;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid white;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    text-transform: capitalize;
    color: #6a6a6a;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap; }
    @media (min-width: 992px) {
      .fixedNavigationTabs button {
        padding: 0 0 20px 0; } }

.fundFixedHeaderRow {
  display: flex;
  align-items: center;
  padding: 0;
  align-self: self-start; }
  @media (min-width: 768px) {
    .fundFixedHeaderRow {
      flex-direction: row; } }

.fundFixedLogo {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  object-fit: contain;
  margin-bottom: 8px;
  border: 1px solid #e1e1e1; }
  @media (min-width: 768px) {
    .fundFixedLogo {
      margin-right: 16px; } }

.fundFixedHeaderDetails {
  max-width: 250px; }
  .fundFixedHeaderDetails h1 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #262626;
    margin-bottom: 4px;
    margin-left: 10px; }
    @media (min-width: 768px) {
      .fundFixedHeaderDetails h1 {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-transform: capitalize;
        color: #000000;
        margin-bottom: 8px; } }

.actionButtons .fundActionButtons {
  font-family: Inter;
  margin-left: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 0;
  border-top: 1px solid #e1e1e1; }
  @media (min-width: 768px) {
    .actionButtons .fundActionButtons {
      display: flex;
      justify-content: flex-end;
      position: static;
      border-top: none; } }
  .actionButtons .fundActionButtons button {
    align-items: center;
    width: 156px;
    border-radius: 24px;
    padding: 8px 16px;
    height: 40px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: #6a6a6a;
    transition: border 0.1s ease-in, background 0.1s ease-in; }
    @media (min-width: 768px) {
      .actionButtons .fundActionButtons button {
        margin-left: 8px;
        margin-right: 8px;
        height: 40px;
        padding: 6px 16px; } }

.tabsList {
  display: flex;
  overflow-x: scroll;
  max-width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none; }

.tabsList::-webkit-scrollbar {
  display: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundActionButtons {
  font-family: Inter;
  margin-left: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 16px;
  border-top: 1px solid #e1e1e1; }
  @media (min-width: 768px) {
    .fundActionButtons {
      display: flex;
      justify-content: flex-end;
      position: static;
      border-top: none; } }
  .fundActionButtons button {
    align-items: center;
    width: 156px;
    border-radius: 24px;
    padding: 8px 16px;
    height: 40px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: #6a6a6a;
    transition: border 0.1s ease-in, background 0.1s ease-in; }
    @media (min-width: 768px) {
      .fundActionButtons button {
        margin-left: 16px;
        height: 48px;
        padding: 12px 16px; } }
    .fundActionButtons button.oneTime {
      border: 1px solid #d0d0d0;
      background-color: white; }
      .fundActionButtons button.oneTime:disabled {
        color: #d0d0d0;
        cursor: no-drop; }
    .fundActionButtons button.oneTime:hover:not(:disabled) {
      border: 1px solid #5a298b; }
    .fundActionButtons button.sip {
      background-color: #5a298b;
      color: white; }
      .fundActionButtons button.sip:disabled {
        cursor: no-drop;
        background-color: #d0d0d0; }
    .fundActionButtons button.sip:hover:not(:disabled) {
      background-color: #7a26ce; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundPageHeader {
  padding: 16px 16px 0 16px;
  background-color: white;
  z-index: 1; }
  .fundPageHeader.pageHeaderLoggedIn {
    padding-top: 155px; }
  .fundPageHeader.isWebview {
    padding-top: 230px; }
  @media (min-width: 768px) {
    .fundPageHeader {
      border-bottom: 1px solid #e5e5e5; }
      .fundPageHeader.pageHeaderLoggedIn {
        padding-top: 110px; }
      .fundPageHeader.isWebview {
        padding-top: 250px; } }
  .fundPageHeader .headerContainer {
    max-width: 960px;
    margin: 0 auto; }
  .fundPageHeader .fundHeaderRow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0; }
    @media (min-width: 768px) {
      .fundPageHeader .fundHeaderRow {
        flex-direction: row; } }
  .fundPageHeader .fundHeaderDetails {
    flex-shrink: 0;
    max-width: 531px; }
    .fundPageHeader .fundHeaderDetails h1 {
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.18px;
      color: #262626;
      margin-bottom: 4px; }
      @media (min-width: 768px) {
        .fundPageHeader .fundHeaderDetails h1 {
          font-weight: 600;
          font-size: 24px;
          line-height: 32px;
          letter-spacing: -0.01em;
          text-transform: capitalize;
          color: #000000;
          margin-bottom: 8px; } }
    .fundPageHeader .fundHeaderDetails h2 {
      display: inline-block;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.01px;
      color: #6a6a6a; }
      @media (min-width: 768px) {
        .fundPageHeader .fundHeaderDetails h2 {
          font-weight: 500;
          font-size: 14px;
          line-height: 21px; } }
  .fundPageHeader .fundLogo {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    object-fit: contain;
    margin-bottom: 8px;
    border: 1px solid #e1e1e1; }
    @media (min-width: 768px) {
      .fundPageHeader .fundLogo {
        margin-right: 16px; } }

.gridCard {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 32px;
  overflow: hidden; }
  .gridCard .cardHeader {
    background: #f5f5f5; }
  .gridCard .cardHeaderTitle {
    padding: 16px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    font-feature-settings: 'cv10' on, 'cv06' on, 'cv05' on, 'cv01' on, 'cpsp' on;
    color: #000000; }

.fundManagers .fundManagerWrapper {
  padding: 0 16px; }
  .fundManagers .fundManagerWrapper .fundManagerRow {
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5; }
    .fundManagers .fundManagerWrapper .fundManagerRow .managerName {
      font-size: 14px;
      font-family: Inter;
      font-weight: 700;
      line-height: 21px; }
    .fundManagers .fundManagerWrapper .fundManagerRow span {
      color: #6a6a6a;
      font-size: 12px;
      font-family: Inter;
      font-weight: 500;
      line-height: 18px; }
    .fundManagers .fundManagerWrapper .fundManagerRow:last-child {
      border: none; }

.fundManagers table {
  width: 100%; }
  .fundManagers table thead {
    background: var(--dropdown-bg-color); }
    .fundManagers table thead th:first-child {
      width: 45%; }
    .fundManagers table thead th {
      padding: 16px;
      text-align: left;
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 24px;
      font-feature-settings: 'cv10' on, 'cv06' on, 'cv05' on, 'cv01' on, 'cpsp' on;
      color: #000000; }
  .fundManagers table tbody td {
    padding: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    font-feature-settings: 'cv10' on, 'cv06' on, 'cv05' on, 'cv01' on, 'cpsp' on;
    color: #000000; }
  .fundManagers table tbody tr {
    border-bottom: 1px solid #e5e5e5; }
    .fundManagers table tbody tr:hover {
      background-color: transparent !important; }
  .fundManagers table tbody tr:last-child {
    border: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundSummary {
  margin-top: 24px; }
  .fundSummary .fundSummaryDetails {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #e5e5e5; }
    .fundSummary .fundSummaryDetails.rounded {
      border-radius: 8px; }
    .fundSummary .fundSummaryDetails .otherFunds {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      padding: 12px 0;
      color: #41246e;
      border-top: 1px solid #e5e5e5;
      cursor: pointer; }
  .fundSummary .notEnoughInfo {
    display: flex;
    padding: 16px;
    align-items: center; }
    @media (min-width: 768px) {
      .fundSummary .notEnoughInfo {
        padding: 16px 24px; } }
    .fundSummary .notEnoughInfo p {
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: #6a6a6a;
      margin-left: 16px; }
      @media (min-width: 768px) {
        .fundSummary .notEnoughInfo p {
          font-size: 14px;
          line-height: 21px; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.topRatedHeader {
  background: #ead6f8;
  border-radius: 8px 8px 0px 0px;
  color: #5a298b;
  padding: 8px 16px;
  position: relative;
  display: flex; }
  .topRatedHeader .topRatedHeaderContent {
    margin-left: 49px; }
    @media (min-width: 768px) {
      .topRatedHeader .topRatedHeaderContent {
        margin-left: 65px; } }
  .topRatedHeader .header {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    opacity: 1;
    display: block; }
    @media (min-width: 768px) {
      .topRatedHeader .header {
        font-size: 16px;
        line-height: 24px;
        display: inline-block; } }
  .topRatedHeader .subHeader {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px; }
    @media (min-width: 768px) {
      .topRatedHeader .subHeader {
        font-size: 16px;
        line-height: 24px; } }
  .topRatedHeader .ribbon {
    position: absolute;
    left: 16px;
    top: -2px; }
    @media (min-width: 768px) {
      .topRatedHeader .ribbon {
        left: 28px; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.icon {
  height: 32px;
  width: 32px; }
  @media (min-width: 768px) {
    .icon {
      height: 40px;
      width: 40px; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.indicatorContainer {
  display: flex;
  align-items: baseline; }
  .indicatorContainer .indicatorWithArrow {
    display: flex;
    flex-direction: column; }
    .indicatorContainer .indicatorWithArrow img {
      margin-top: 2px; }
  .indicatorContainer .indicator {
    display: inline-block;
    width: 23.33px;
    height: 2px;
    background: #db542a;
    margin-right: 2px;
    border-radius: 1px 1px 0px 0px; }
    .indicatorContainer .indicator.active {
      height: 4px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundSummaryDetailsRow {
  display: flex;
  flex-direction: column;
  padding: 0 16px; }
  @media (min-width: 768px) {
    .fundSummaryDetailsRow {
      flex-direction: row;
      padding: 0; } }
  .fundSummaryDetailsRow button {
    flex: 33.33%;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    padding: 16px 0; }
    .fundSummaryDetailsRow button .summaryRowLeftContent {
      display: flex; }
    .fundSummaryDetailsRow button:last-of-type {
      border: none; }
    .fundSummaryDetailsRow button:not(:disabled) {
      cursor: pointer; }
    @media (min-width: 768px) {
      .fundSummaryDetailsRow button {
        padding: 16px 24px;
        border: none;
        border-right: 1px solid #e5e5e5; } }
    .fundSummaryDetailsRow button:hover:not(:disabled) {
      opacity: 0.8; }
    .fundSummaryDetailsRow button .details {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 16px; }
      .fundSummaryDetailsRow button .details .disabledTitle {
        line-height: 26px; }
    .fundSummaryDetailsRow button .title {
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      color: black; }
      @media (min-width: 768px) {
        .fundSummaryDetailsRow button .title {
          font-size: 16px;
          line-height: 24px; } }
    .fundSummaryDetailsRow button .subtitle {
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: #6a6a6a; }
  .fundSummaryDetailsRow .offcanvas__content-body {
    padding: 0; }

.bottomSheetContent {
  padding: 16px;
  max-height: 90vh;
  overflow-y: scroll; }
  .bottomSheetContent::-webkit-scrollbar {
    display: none; }
  @media (min-width: 768px) {
    .bottomSheetContent {
      padding-top: 0; } }
  .bottomSheetContent .infoTitle {
    margin-bottom: 16px; }
  .bottomSheetContent h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px; }
  .bottomSheetContent .content {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #262626; }
  .bottomSheetContent .bottomSheetHeader {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .bottomSheetContent .bottomSheetDisclaimer {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    padding-top: 16px;
    color: #6a6a6a;
    letter-spacing: 0.01px; }
    .bottomSheetContent .bottomSheetDisclaimer a {
      color: #5a298b; }

.summaryContentItem {
  border-bottom: 1px solid #e1e1e1;
  padding: 16px 0; }
  .summaryContentItem .title {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.09px;
    color: #262626; }
  .summaryContentItem .titleWithIndicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center; }
  .summaryContentItem .percentile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; }
  .summaryContentItem .percentileValue {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    margin-bottom: 6px;
    letter-spacing: -0.09px;
    color: #262626; }
  .summaryContentItem .description {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01px;
    color: #6a6a6a; }
  .summaryContentItem .readMore {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01px;
    color: #5a298b;
    margin-top: 4px;
    cursor: pointer; }

.infoButton {
  display: flex;
  align-items: center; }
  .infoButton img {
    margin-left: 8px;
    cursor: pointer; }

.infoButtonContent {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 16px 16px 16px;
  color: #262626; }
  .infoButtonContent ul {
    list-style: disc;
    margin-top: 10px;
    padding-left: 20px; }
  .infoButtonContent h5 {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 16px; }
  .infoButtonContent h4 {
    font-weight: 700;
    margin: 16px 0 6px 0; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundCharts .chartDescription {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #6a6a6a;
  padding: 0 16px 16px 16px; }

.fundCharts .chartContainer {
  min-height: 232px; }

.fundCharts .chartTypeSelectorContainer {
  display: flex; }
  .fundCharts .chartTypeSelectorContainer .chartTypeSelector {
    height: 88px;
    flex-grow: 1;
    flex-basis: 50%;
    background-color: transparent;
    border: none;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    padding: 16px 8px;
    text-align: left; }
    @media (min-width: 768px) {
      .fundCharts .chartTypeSelectorContainer .chartTypeSelector {
        height: 112px; } }
    .fundCharts .chartTypeSelectorContainer .chartTypeSelector.fundActive {
      box-shadow: inset 0px 4px 0px 0px #41246e; }
    .fundCharts .chartTypeSelectorContainer .chartTypeSelector.categoryActive {
      box-shadow: inset 0px 4px 0px 0px #0e9aa7; }
    .fundCharts .chartTypeSelectorContainer .chartTypeSelector.fdActive {
      box-shadow: inset 0px 4px 0px 0px #e79d0d; }
    .fundCharts .chartTypeSelectorContainer .chartTypeSelector .heading {
      display: block;
      font-style: normal;
      font-weight: 500;
      color: #444444;
      margin-bottom: 8px;
      font-size: 12px;
      line-height: 16px;
      display: flex;
      justify-content: space-between; }
      @media (min-width: 768px) {
        .fundCharts .chartTypeSelectorContainer .chartTypeSelector .heading {
          font-size: 14px;
          line-height: 24px; } }
    .fundCharts .chartTypeSelectorContainer .chartTypeSelector .value {
      font-weight: 700;
      font-size: 12px;
      line-height: 16px;
      display: block; }
      @media (min-width: 768px) {
        .fundCharts .chartTypeSelectorContainer .chartTypeSelector .value {
          font-size: 14px;
          line-height: 24px; } }
    .fundCharts .chartTypeSelectorContainer .chartTypeSelector .percent {
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      display: block; }
      @media (min-width: 768px) {
        .fundCharts .chartTypeSelectorContainer .chartTypeSelector .percent {
          font-size: 14px;
          line-height: 24px; } }

.fundCharts .fundColor {
  color: #41246e; }

.fundCharts .fdColor {
  color: #e79d0d; }

.fundCharts .categoryColor {
  color: #0e9aa7; }

.fundCharts .chartNavPeriodContainer {
  display: flex;
  padding: 24px 0;
  border-top: 1px solid #000000;
  justify-content: center; }
  .fundCharts .chartNavPeriodContainer button {
    background: transparent;
    border: none;
    opacity: 0.5;
    color: #41246e;
    border-left: 1px solid #41246e;
    cursor: pointer;
    padding: 0 12px;
    font-weight: 500;
    font-size: 12px;
    line-height: 26px; }
    @media (min-width: 768px) {
      .fundCharts .chartNavPeriodContainer button {
        font-size: 14px;
        line-height: 24px;
        padding: 0 16px; } }
    .fundCharts .chartNavPeriodContainer button.activeNavPeriod {
      opacity: 1;
      font-weight: 700; }
  .fundCharts .chartNavPeriodContainer button:first-child {
    border-left: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.creditRatingBanner {
  height: 76px;
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px; }
  .creditRatingBanner .title {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.09px; }
    @media (min-width: 768px) {
      .creditRatingBanner .title {
        margin-bottom: 8px; } }
  .creditRatingBanner img {
    margin-right: 16px; }
  .creditRatingBanner .subTitle {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.18px; }
  .creditRatingBanner.elss {
    background: #eeebe6;
    color: #8b6957; }
  .creditRatingBanner.debt {
    background-color: rgba(14, 154, 167, 0.1);
    color: #0e9aa7; }

.buttonLabelModal .rowValueModalContainer {
  max-width: 400px;
  width: 100%;
  background-color: white;
  border-radius: 16px;
  margin: 16px; }
  .buttonLabelModal .rowValueModalContainer .header {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    min-width: 266px;
    color: black;
    width: 100%; }
  .buttonLabelModal .rowValueModalContainer .rowValueModalBody {
    text-align: left; }
  .buttonLabelModal .rowValueModalContainer > div:first-child {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 16px; }
  .buttonLabelModal .rowValueModalContainer div[data-id='closeModalIcon'] {
    border-radius: 50%;
    height: 32px;
    cursor: pointer;
    width: 32px;
    min-width: 32px;
    border: 1.33333px solid #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center; }

.buttonLabelModal .modalTrigger {
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #5a298b;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: Inter; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundInfo .pills {
  display: flex;
  padding: 8px 16px 16px 16px;
  flex-wrap: wrap; }
  @media (min-width: 768px) {
    .fundInfo .pills {
      padding-top: 0; } }
  .fundInfo .pills .pill {
    border-radius: 9999px;
    border: 1px solid #b1b1b1;
    padding: 4px 12px;
    background-color: white;
    margin-right: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-transform: uppercase;
    margin-bottom: 5px; }
    @media (min-width: 768px) {
      .fundInfo .pills .pill {
        font-size: 12px;
        line-height: 16px; } }

@media (max-width: 768px) {
  .fundInfo .cardHeaderTitle {
    padding-bottom: 0; } }

.fundInfo .fundInfoContent {
  padding: 0 16px; }
  .fundInfo .fundInfoContent .contentWrapper {
    padding: 16px; }
  .fundInfo .fundInfoContent .rowItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    padding: 16px 0; }
    .fundInfo .fundInfoContent .rowItem:last-child {
      border: none; }
    .fundInfo .fundInfoContent .rowItem .label {
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      color: #444444; }
      .fundInfo .fundInfoContent .rowItem .label .subLabel {
        font-weight: 500;
        font-size: 12px;
        line-height: 16px; }
    .fundInfo .fundInfoContent .rowItem .rowValue {
      font-weight: 600;
      font-size: 14px;
      line-height: 24px;
      text-align: right;
      color: #000000; }
      .fundInfo .fundInfoContent .rowItem .rowValue .rowSubValue {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #000000;
        opacity: 0.5;
        margin-top: 4px; }
      .fundInfo .fundInfoContent .rowItem .rowValue .modalDescription {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.09px;
        color: #6a6a6a;
        margin-bottom: 28px; }
        .fundInfo .fundInfoContent .rowItem .rowValue .modalDescription a {
          color: #5a298b;
          font-size: 14px; }
      .fundInfo .fundInfoContent .rowItem .rowValue .radioContainer {
        flex-direction: column;
        width: 100%; }
        .fundInfo .fundInfoContent .rowItem .rowValue .radioContainer .radioRowItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0;
          margin-bottom: 24px; }
          .fundInfo .fundInfoContent .rowItem .rowValue .radioContainer .radioRowItem label {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: -0.18px;
            color: #262626; }
          .fundInfo .fundInfoContent .rowItem .rowValue .radioContainer .radioRowItem .subLabel {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: -0.09px;
            color: #6a6a6a;
            max-width: 300px; }
    .fundInfo .fundInfoContent .rowItem ol {
      list-style: decimal;
      padding: revert; }
      .fundInfo .fundInfoContent .rowItem ol li {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.09px;
        color: #6a6a6a;
        margin-bottom: 16px; }

.tabGroup .tab {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: #838383;
  padding: 16px;
  padding-top: 12px;
  text-transform: none; }
  .tabGroup .tab.active {
    color: #111111; }
  .tabGroup .tab.active::before {
    background-color: #111111;
    width: calc(100% - 32px);
    left: 16px;
    border-radius: 0; }
  .tabGroup .tab:hover:not(.disabled), .tabGroup .tab:active:not(.disabled) {
    background-color: transparent;
    color: #111111; }
  .tabGroup .tab:hover:not(.active) {
    color: #838383; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundDistribution .fundAllocations {
  padding: 16px; }

.allocationChart {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .allocationChart .allocationChartLegend {
    flex: 50%;
    margin-left: 36px; }
    @media (min-width: 768px) {
      .allocationChart .allocationChartLegend {
        margin-left: 68px; } }
    .allocationChart .allocationChartLegend .legendItem {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      padding: 16px 0; }
      .allocationChart .allocationChartLegend .legendItem:last-child {
        border: none; }
      .allocationChart .allocationChartLegend .legendItem .legendColor {
        display: inline-block;
        height: 16px;
        width: 16px;
        min-height: 16px;
        min-width: 16px;
        border-radius: 50%; }
      .allocationChart .allocationChartLegend .legendItem .legendLabelContainer {
        display: flex;
        width: 100%;
        justify-content: space-between; }
      .allocationChart .allocationChartLegend .legendItem .legendLabel {
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #444444;
        margin-left: 8px; }
      .allocationChart .allocationChartLegend .legendItem .legendLabelValue {
        font-weight: 600;
        font-size: 14px;
        line-height: 24px; }

.fundRisk .riskRow {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center; }
  .fundRisk .riskRow .riskRowLabel {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #000000; }
  .fundRisk .riskRow .riskValueWithBar {
    display: flex;
    align-items: center; }
  .fundRisk .riskRow .riskRowValue {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    margin-right: 4px; }

.fundRisk .riskDisclaimer {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  border-top: 1px solid #e5e5e5;
  padding: 16px; }

.riskMeter {
  display: flex;
  width: 18.3px;
  height: 11px; }

.taxInfoExitLoad h3 {
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  font-feature-settings: 'cv10' on, 'cv06' on, 'cv05' on, 'cv01' on, 'cpsp' on;
  color: #000000; }

.taxInfoExitLoad .taxSection {
  padding: 16px 16px 0 16px;
  border-bottom: 1px solid #e5e5e5; }

.taxInfoExitLoad .exitLoadSection {
  padding: 16px 16px 0 16px; }

.taxInfoExitLoad .cardRow {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  padding: 14px 0; }
  .taxInfoExitLoad .cardRow .description {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    font-feature-settings: 'cv10' on, 'cv06' on, 'cv05' on, 'cv01' on, 'cpsp' on;
    color: #6a6a6a; }
  .taxInfoExitLoad .cardRow .rate {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: right;
    font-feature-settings: 'cv10' on, 'cv06' on, 'cv05' on, 'cv01' on, 'cpsp' on;
    color: #111111; }

.taxInfoExitLoad .cardRow:last-child {
  border: none; }

.fundHoldings {
  position: relative; }
  .fundHoldings .headerWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px; }
  .fundHoldings .secondaryHeadingRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px; }
  .fundHoldings .viewAll {
    position: absolute;
    bottom: 0;
    background: white;
    width: 100%;
    height: 48px;
    padding: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e5e5e5; }
  .fundHoldings .holdingsBody {
    max-height: 391px;
    overflow: hidden; }
  .fundHoldings .filters {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    width: 100%; }
    .fundHoldings .filters.radioContainer > * + * {
      margin: 0; }
    .fundHoldings .filters .radioRowItem {
      display: flex;
      align-items: center;
      margin-bottom: 32px; }
    .fundHoldings .filters label {
      display: flex;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.18px;
      color: #262626;
      margin-left: 18px; }

.holdingsList {
  padding: 0 16px;
  position: relative; }
  .holdingsList.longList {
    max-height: 600px;
    overflow-y: scroll; }
    .holdingsList.longList::-webkit-scrollbar {
      display: none; }
  .holdingsList .holdingsListItem {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5; }
    .holdingsList .holdingsListItem:last-child {
      border: none; }
    .holdingsList .holdingsListItem img {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(38, 38, 38, 0.1);
      border-radius: 50%; }
    .holdingsList .holdingsListItem .holdingListItemContent {
      flex-grow: 1;
      max-width: 244px;
      margin-left: 12px; }
      .holdingsList .holdingsListItem .holdingListItemContent h3 {
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.09px;
        color: #262626;
        margin-bottom: 8px; }
    .holdingsList .holdingsListItem .progressBar {
      background: #ededed;
      border-radius: 12.4819px;
      width: 100%;
      height: 6.57px;
      flex-grow: 1;
      position: relative; }
      .holdingsList .holdingsListItem .progressBar span {
        height: 100%;
        display: inline-block;
        border-radius: 12.4819px;
        position: absolute;
        top: 0; }
    .holdingsList .holdingsListItem .listValue {
      align-self: center;
      margin-left: auto;
      font-weight: 600;
      font-size: 12px;
      line-height: 16px;
      text-align: right;
      color: #444444;
      min-width: 60px; }

.skeletonWrapper {
  margin-bottom: 32px; }

.fundHouseInfo .fundHousePoints {
  display: flex;
  padding: 16px; }
  .fundHouseInfo .fundHousePoints span {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.01px;
    color: #6a6a6a; }

.fundHouseInfo h3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 4px; }

.fundHouseInfo img {
  object-fit: contain;
  width: 32px;
  height: 32px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  margin-right: 16px; }

.fundHouseInfo .fundHouseDescription {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.09px;
  color: #444444;
  padding: 16px;
  border-top: 1px solid #e5e5e5; }

/* Min breakpoint width */
/* MAx breakpoint width */

.topRatedFunds .topRatedFundsContainer {
  margin-top: 16px;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding-top: 4px; }
  .topRatedFunds .topRatedFundsContainer::-webkit-scrollbar {
    display: none; }
  @media (min-width: 768px) {
    .topRatedFunds .topRatedFundsContainer {
      display: block;
      margin-top: 0; } }
  .topRatedFunds .topRatedFundsContainer .topRatedFundsCard {
    position: relative;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 16px 16px 0 16px;
    flex-shrink: 0;
    max-width: 100%;
    scroll-snap-align: start;
    margin: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none; }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard:first-child {
      border: none; }
    @media (min-width: 768px) {
      .topRatedFunds .topRatedFundsContainer .topRatedFundsCard {
        border-top: 1px solid #e5e5e5;
        padding: 24px 32px;
        flex-direction: row;
        background: white;
        border-radius: 0;
        margin: 0; }
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard:hover {
          background: #f7f4f9;
          cursor: pointer; }
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard:hover h3 {
          color: #5a298b; } }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .ribbon {
      position: absolute;
      top: -3px;
      right: 16px; }
      @media (min-width: 768px) {
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .ribbon {
          right: 17px;
          top: -3px; } }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .logo {
      border: 1px solid #e5e5e5;
      height: 40px;
      width: 40px;
      object-fit: contain;
      border-radius: 50%;
      margin-right: 16px;
      background-color: white; }
      @media (min-width: 768px) {
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .logo {
          height: 32px;
          width: 32px;
          margin-right: 8px; } }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsData {
      display: flex; }
      @media (min-width: 768px) {
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsData {
          align-items: center; } }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard h3 {
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.18px;
      color: #262626;
      max-width: 224px; }
      @media (min-width: 768px) {
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard h3 {
          font-weight: 600;
          font-size: 14px;
          line-height: 20px;
          text-transform: capitalize;
          color: #000000;
          margin-bottom: 8px;
          max-width: 300px; } }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .ratingIndicator {
      display: flex;
      justify-content: normal; }
      @media (min-width: 768px) {
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .ratingIndicator {
          justify-content: space-between; } }
      .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .ratingIndicator span {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        padding-right: 5px; }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .subText {
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: #6a6a6a; }
    .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px; }
      @media (min-width: 768px) {
        .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails {
          margin-right: 33px;
          flex-wrap: nowrap;
          margin-top: 0;
          align-items: baseline; } }
      .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .rowInfo {
        flex-grow: 1;
        max-width: 50%;
        min-width: 50%;
        padding: 0 16px 16px 0; }
        @media (min-width: 768px) {
          .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .rowInfo {
            text-align: left;
            flex-grow: unset;
            min-width: auto;
            padding: 0 16px;
            border-right: 1px solid #e5e5e5;
            max-width: 177px; }
            .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .rowInfo:last-child {
              border: none; } }
      .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .rowInfoMinWidth {
        min-width: 148px; }
      .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .infoLabel {
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        color: #6a6a6a; }
        @media (min-width: 768px) {
          .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .infoLabel {
            margin-bottom: 8px; } }
      .topRatedFunds .topRatedFundsContainer .topRatedFundsCard .topRatedFundsDetails .infoValue {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #000000; }

.topRatedFundsMobile {
  display: inline; }
  .topRatedFundsMobile .cardHeaderTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.47px;
    color: #929292; }

.slideIndicator {
  display: flex;
  align-items: center;
  margin-top: 16px; }
  @media (min-width: 768px) {
    .slideIndicator {
      display: none; } }
  .slideIndicator .slideDot {
    width: 8px;
    height: 8px;
    background: #d0d0d0;
    border-radius: 50%;
    margin-right: 8px; }
  .slideIndicator .activeSlide {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.045em;
    color: #ffffff;
    background-color: black;
    background: #262626;
    border-radius: 16px;
    padding: 2px 6px;
    margin-right: 8px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.signupBanner {
  border: none;
  background: #170730;
  border-radius: 8px; }
  @media (min-width: 768px) {
    .signupBanner {
      display: flex;
      flex-direction: row-reverse;
      align-items: flex-end; } }
  .signupBanner .imgContainer {
    height: 128px;
    overflow: hidden;
    text-align: center;
    position: relative; }
    @media (min-width: 768px) {
      .signupBanner .imgContainer {
        height: 100%; } }
    .signupBanner .imgContainer img {
      width: 252px;
      top: -12px;
      position: relative; }
      @media (min-width: 768px) {
        .signupBanner .imgContainer img {
          width: auto;
          bottom: -3px;
          top: unset; } }
  .signupBanner .content {
    padding: 24px 16px;
    background: #41246e; }
    @media (min-width: 768px) {
      .signupBanner .content {
        flex-basis: 224px; } }
    .signupBanner .content h3 {
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      letter-spacing: -0.03em;
      color: #f7f2ff;
      margin-bottom: 8px; }
    .signupBanner .content p {
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      opacity: 0.75;
      color: #f7f2ff;
      margin-bottom: 24px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.siteFooter {
  width: 100%;
  background-color: var(--footer-bg-color);
  color: #fff;
  padding-block: 64px;
  font-size: 14px; }
  .siteFooter .footer {
    max-width: 1126px;
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 1140px) {
      .siteFooter .footer {
        padding-left: 24px;
        padding-right: 24px; } }
  .siteFooter a {
    text-decoration: none; }

.summary {
  background: #f5f5f5;
  padding: 32px 16px;
  margin-top: 24px; }
  @media (min-width: 768px) {
    .summary {
      padding: 48px 0; } }
  .summary .disclaimer {
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    color: #6a6a6a;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px; }
    @media (min-width: 768px) {
      .summary .disclaimer {
        max-width: 960px;
        margin: 0 auto;
        padding: 32px;
        font-size: 16px;
        line-height: 24px; } }
    .summary .disclaimer a {
      color: #5a298b; }

.fundPageWrapper {
  padding-top: 60px; }
  @media (min-width: 768px) {
    .fundPageWrapper {
      padding-top: 80px; } }

.fundDetailNavBar {
  width: 100%;
  z-index: 2;
  height: auto;
  left: 0;
  bottom: unset; }

/* Min breakpoint width */
/* MAx breakpoint width */

.collection-card {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border: solid 1px rgba(0, 0, 0, 0.08);
  background-color: #eeebe6; }
  @media (min-width: 992px) {
    .collection-card {
      padding: 32px;
      height: 100%;
      min-height: 168px; } }
  .collection-card__content {
    padding-right: 30px; }
  .collection-card__icon {
    margin-right: 0px;
    text-align: center; }
    .collection-card__icon img {
      width: 75px;
      height: 80px; }
    @media (min-width: 992px) {
      .collection-card__icon {
        margin-right: 25px;
        min-width: 120px; }
        .collection-card__icon img {
          width: auto;
          height: auto; } }
  .collection-card__title {
    font-size: 17px;
    margin-bottom: 15px;
    line-height: normal;
    color: #000000; }
    @media (min-width: 992px) {
      .collection-card__title {
        font-size: 20px; } }
  .collection-card__description {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    line-height: normal; }
    @media (min-width: 992px) {
      .collection-card__description {
        font-size: 16px;
        line-height: 24px;
        padding-right: 0px; } }
  .collection-card--style-error {
    background-color: var(--collection-card-error-color); }
  .collection-card--style-warning {
    background-color: var(--collection-card-warning-color); }
  .collection-card--style-info {
    background-color: var(--collection-card-info-color); }
  .collection-card--style-success {
    background-color: var(--collection-card-success-color); }

.fund-collections .layout__header {
  padding-left: 0;
  padding-right: 0; }

.fund-collections__list-item {
  margin-bottom: 20px; }
  @media (min-width: 992px) {
    .fund-collections__list-item {
      padding-left: 10px !important;
      padding-right: 10px !important; } }
  .fund-collections__list-item a {
    text-decoration: none !important;
    color: inherit !important; }

.fund-collections__title {
  /* Invest in top equity mutual funds */
  /* Body / Mobile / Bold */
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
  /* identical to box height, or 150% */
  color: #000000;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  font-family: var(--font-family);
  margin-bottom: 15px;
  line-height: normal; }

/* Min breakpoint width */
/* MAx breakpoint width */

.siteFooter {
  width: 100%;
  background-color: var(--footer-bg-color);
  color: #fff;
  padding-block: 64px;
  font-size: 14px; }
  .siteFooter .footer {
    max-width: 1126px;
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 1140px) {
      .siteFooter .footer {
        padding-left: 24px;
        padding-right: 24px; } }
  .siteFooter a {
    text-decoration: none; }

.slideLoader {
  border-radius: 12px;
  margin: 24px 8px 0 8px; }

.errorContainer {
  margin: 70px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.siteFooter {
  width: 100%;
  background-color: var(--footer-bg-color);
  color: #fff;
  padding-block: 64px;
  font-size: 14px; }
  .siteFooter .footer {
    max-width: 1126px;
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 1140px) {
      .siteFooter .footer {
        padding-left: 24px;
        padding-right: 24px; } }
  .siteFooter a {
    text-decoration: none; }

.slideLoader {
  border-radius: 12px;
  margin: 24px 8px 0 8px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.carouselContainer .carousel {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */ }
  .carouselContainer .carousel::-webkit-scrollbar {
    display: none; }

.carouselContainer .carouselSlide {
  scroll-snap-align: start;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%; }
  @media (min-width: 768px) {
    .carouselContainer .carouselSlide:first-child {
      margin-left: 0 !important; } }

.slideIndicator {
  display: flex;
  align-items: center; }
  @media (min-width: 768px) {
    .slideIndicator {
      display: none; } }
  .slideIndicator .dot {
    width: 8px;
    height: 8px;
    background: #d0d0d0;
    border-radius: 50%;
    margin-right: 8px; }
  .slideIndicator .activeSlide {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.045em;
    color: #ffffff;
    background-color: black;
    background: #262626;
    border-radius: 16px;
    padding: 2px 6px;
    margin-right: 8px; }

.arrowContainer {
  display: flex;
  justify-content: center;
  margin-top: 24px; }
  .arrowContainer .carouselArrow {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.6px solid #444;
    color: #444;
    margin: 0 8px;
    background-color: transparent;
    cursor: pointer; }

/* Min breakpoint width */
/* MAx breakpoint width */

.truthsAboutInvesting {
  background: #dcede8;
  padding-bottom: 16px; }
  .truthsAboutInvesting .truthsCarousel {
    margin-top: 16px; }
    @media (min-width: 768px) {
      .truthsAboutInvesting .truthsCarousel {
        margin-top: 24px;
        padding-left: 0; } }
  .truthsAboutInvesting .truthsCarouselArrows {
    display: none; }
    @media (min-width: 768px) {
      .truthsAboutInvesting .truthsCarouselArrows {
        display: flex; } }
  .truthsAboutInvesting .isCollapsed {
    height: 0;
    overflow: hidden;
    margin: 0; }
  @media (min-width: 768px) {
    .truthsAboutInvesting {
      padding: 40px 0; } }
  @media (min-width: 1280px) {
    .truthsAboutInvesting {
      margin-top: 64px; } }
  .truthsAboutInvesting .foldContainer {
    max-width: 960px; }
    @media (min-width: 768px) {
      .truthsAboutInvesting .foldContainer {
        margin: 0 auto; } }
  .truthsAboutInvesting .headingRow {
    padding: 16px 16px 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media (min-width: 768px) {
      .truthsAboutInvesting .headingRow {
        padding: 0 0 0 0; } }
    .truthsAboutInvesting .headingRow img {
      height: 16px; }
      @media (min-width: 768px) {
        .truthsAboutInvesting .headingRow img {
          height: auto; } }
    .truthsAboutInvesting .headingRow .heading {
      color: #262626;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      letter-spacing: -0.33px; }
      @media (min-width: 768px) {
        .truthsAboutInvesting .headingRow .heading {
          font-size: 32px;
          font-weight: 600;
          margin-bottom: 0;
          letter-spacing: -0.677px; } }
  .truthsAboutInvesting .viewMore {
    display: inline-block;
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    color: #5a298b;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.09px; }
    .truthsAboutInvesting .viewMore:hover {
      text-decoration: none; }
    .truthsAboutInvesting .viewMore .iconWrapper {
      display: block;
      height: 30px;
      width: 30px;
      color: #262626; }
      @media (min-width: 768px) {
        .truthsAboutInvesting .viewMore .iconWrapper {
          display: none; } }
  .truthsAboutInvesting .toggleText {
    display: none; }
    @media (min-width: 768px) {
      .truthsAboutInvesting .toggleText {
        display: block; } }
  .truthsAboutInvesting .readMore {
    margin-top: auto;
    align-self: flex-start; }
  .truthsAboutInvesting .indicators {
    margin-left: 16px;
    margin-top: 16px; }

@media (min-width: 768px) {
  .loggedInTruthsAboutInvesting {
    margin-top: 0px; } }

.slide {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  border-radius: 16px;
  min-height: 130px;
  height: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
  padding: 16px 24px;
  position: relative; }
  @media (min-width: 768px) {
    .slide {
      font-size: 14px;
      min-height: 148px;
      line-height: 21px;
      letter-spacing: -0.369px; } }
  .slide .slideNumber {
    position: absolute;
    font-size: 69.031px;
    font-weight: 600;
    line-height: 82.939px;
    letter-spacing: -3.793px;
    color: #dcede8;
    right: 10px;
    bottom: -18px; }
    @media (min-width: 768px) {
      .slide .slideNumber {
        font-size: 104px;
        letter-spacing: -9.151px;
        bottom: -8px;
        right: 5px; } }
  .slide .slideContent {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.369px;
    color: #262626; }

.slideWidth {
  max-width: 280px; }

.investingTruthsPopup {
  padding: 0 16px 16px 16px; }
  @media (min-width: 768px) {
    .investingTruthsPopup {
      padding: 16px; } }
  .investingTruthsPopup .headline {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 120% */
    letter-spacing: -0.33px;
    color: #262626;
    margin-bottom: 16px; }
    @media (min-width: 768px) {
      .investingTruthsPopup .headline {
        text-align: center;
        font-size: 18px;
        font-style: normal; } }
  .investingTruthsPopup .question {
    position: relative;
    display: flex;
    justify-content: center; }
    .investingTruthsPopup .question span {
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      /* 150% */
      letter-spacing: -0.18px;
      color: #5a298b;
      padding: 0 16px;
      background-color: white;
      z-index: 2; }
    .investingTruthsPopup .question:before {
      content: '';
      display: block;
      background-color: #d0d0d0;
      width: 100%;
      left: 0;
      height: 1px;
      position: absolute;
      top: 50%; }
  .investingTruthsPopup .points li {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.09px;
    color: #6a6a6a;
    padding: 12px 0;
    display: flex;
    align-items: center; }
    .investingTruthsPopup .points li img {
      margin-right: 16px; }
  .investingTruthsPopup .smallText {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.01px;
    color: #6a6a6a;
    text-align: center;
    margin-top: 16px; }
  .investingTruthsPopup .buttonGroup {
    margin-top: 16px;
    display: flex;
    justify-content: space-between; }
  .investingTruthsPopup .linkButton {
    font-size: 16px;
    height: 48px;
    padding: 0 20px;
    flex-grow: 1;
    flex-basis: 50%; }
    .investingTruthsPopup .linkButton:first-child {
      margin-right: 8px; }
    .investingTruthsPopup .linkButton:last-child {
      margin-left: 8px; }
    .investingTruthsPopup .linkButton .buttonContent {
      justify-content: center; }
      .investingTruthsPopup .linkButton .buttonContent a {
        color: inherit;
        font: inherit;
        text-decoration: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.investmentIdeasContainer {
  background-color: #eeebe6;
  padding: 24px 0; }
  @media (min-width: 768px) {
    .investmentIdeasContainer {
      padding: 64px 0; } }
  .investmentIdeasContainer .investmentIdeas {
    max-width: 960px;
    margin: 0 auto; }
    .investmentIdeasContainer .investmentIdeas h2 {
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: -0.47px;
      margin-bottom: 16px;
      padding: 0 16px; }
      @media (min-width: 768px) {
        .investmentIdeasContainer .investmentIdeas h2 {
          font-size: 32px;
          text-align: center;
          line-height: 48px;
          letter-spacing: -0.69px;
          margin-bottom: 48px; } }
  .investmentIdeasContainer .carouselArrows {
    display: none; }
    @media (min-width: 768px) {
      .investmentIdeasContainer .carouselArrows {
        display: flex; } }
  .investmentIdeasContainer .idea {
    max-width: 104px;
    padding: 8px; }
    .investmentIdeasContainer .idea a {
      text-decoration: none;
      color: inherit; }
    @media (min-width: 768px) {
      .investmentIdeasContainer .idea {
        max-width: 174px;
        padding: 16px; } }
    .investmentIdeasContainer .idea .investmentIdeaHeading {
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: -0.09px;
      text-align: center;
      display: block; }
      @media (min-width: 768px) {
        .investmentIdeasContainer .idea .investmentIdeaHeading {
          font-size: 20px;
          font-weight: 600;
          line-height: 26px;
          letter-spacing: -0.09px; } }
    .investmentIdeasContainer .idea img {
      display: block;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin: 0 auto;
      margin-bottom: 12px; }
      @media (min-width: 768px) {
        .investmentIdeasContainer .idea img {
          width: 88px;
          height: 88px; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundCategories {
  max-width: 960px;
  margin: 0 auto; }
  .fundCategories a {
    text-decoration: none; }
  .fundCategories .headingRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 16px 8px 16px; }
    @media (min-width: 768px) {
      .fundCategories .headingRow {
        margin: 64px auto 32px auto; } }
    .fundCategories .headingRow .viewAll {
      display: none; }
      @media (min-width: 768px) {
        .fundCategories .headingRow .viewAll {
          display: block;
          text-decoration: none;
          color: #5a298b;
          text-align: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 700;
          line-height: 20px;
          letter-spacing: -0.09px; } }
  .fundCategories h2 {
    color: #6a6a6a;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.47px; }
    @media (min-width: 768px) {
      .fundCategories h2 {
        font-size: 32px;
        font-weight: 600;
        line-height: 150%;
        /* 48px */
        letter-spacing: -0.677px;
        color: #262626; } }
  .fundCategories .categoryList {
    margin-top: 16px;
    margin-bottom: 40px; }
    @media (min-width: 768px) {
      .fundCategories .categoryList:first-child {
        margin-top: 0; } }
    .fundCategories .categoryList h3 {
      color: #262626;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: -0.18px;
      padding: 0px 16px;
      margin-bottom: 12px; }
      @media (min-width: 768px) {
        .fundCategories .categoryList h3 {
          color: #262626;
          font-size: 20px;
          font-weight: 400;
          line-height: 28px;
          letter-spacing: -0.677px;
          padding: 0 0 16px 0;
          margin-bottom: 0; } }
    .fundCategories .categoryList .categoryListParent {
      display: flex;
      flex-wrap: wrap;
      align-items: self-start; }
      .fundCategories .categoryList .categoryListParent a {
        margin: 4px 16px;
        flex-basis: 100%; }
        @media (min-width: 992px) {
          .fundCategories .categoryList .categoryListParent a {
            margin: 0;
            margin-bottom: 16px;
            margin-right: 16px;
            max-width: 308px;
            width: 100%; }
            .fundCategories .categoryList .categoryListParent a:nth-child(3n) {
              margin-right: 0; } }
      .fundCategories .categoryList .categoryListParent li {
        border-radius: 12px;
        background-color: #f5f5f5;
        padding: 16px;
        display: flex;
        align-items: flex-start;
        cursor: pointer; }
        .fundCategories .categoryList .categoryListParent li img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 12px; }
        .fundCategories .categoryList .categoryListParent li .content {
          display: flex;
          flex-direction: column; }
          .fundCategories .categoryList .categoryListParent li .content .fundCategoryHeading {
            color: #262626;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px;
            letter-spacing: -0.09px; }
          .fundCategories .categoryList .categoryListParent li .content p {
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: 0.01px;
            color: #6a6a6a; }
  .fundCategories .viewAllButton {
    width: calc(100% - 32px);
    height: 48px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 16px; }
    .fundCategories .viewAllButton span {
      margin: 0; }
    .fundCategories .viewAllButton a {
      color: inherit;
      font: inherit;
      text-decoration: none; }
    @media (min-width: 768px) {
      .fundCategories .viewAllButton {
        display: none; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.largeTabs {
  border-bottom: 1px solid #e1e1e1;
  text-align: left;
  overflow-x: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  white-space: nowrap; }
  .largeTabs::-webkit-scrollbar {
    display: none; }
  @media (min-width: 768px) {
    .largeTabs {
      text-align: center;
      border-bottom: none; }
      .largeTabs::after {
        content: '';
        border-top: 1px solid #f2ecfd;
        display: block;
        width: 100%;
        height: 100px;
        background: radial-gradient(75.85% 75.85% at 50% -39.83%, #e5ddf4 0%, rgba(242, 236, 253, 0) 100%); } }
  .largeTabs .tab {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.18px;
    color: #6a6a6a;
    padding: 16px;
    transition: none; }
    @media (min-width: 768px) {
      .largeTabs .tab {
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
        letter-spacing: -0.33px;
        color: #41246e;
        opacity: 0.33;
        margin-right: 76px;
        padding: 0 0 20px 0; }
        .largeTabs .tab:last-child {
          margin-right: 0; } }
    .largeTabs .tab.active {
      color: #5a298b;
      font-weight: 700; }
      @media (min-width: 768px) {
        .largeTabs .tab.active {
          color: #41246e;
          opacity: 1;
          font-weight: 600; } }
      .largeTabs .tab.active::before {
        left: 14px;
        width: calc(100% - 28px);
        border-radius: 0; }
        @media (min-width: 768px) {
          .largeTabs .tab.active::before {
            display: none; } }
  .largeTabs .tab:hover:not(.disabled):not(.active),
  .largeTabs .tab:active:not(.disabled):not(.active) {
    background-color: transparent;
    color: #6a6a6a; }
    @media (min-width: 768px) {
      .largeTabs .tab:hover:not(.disabled):not(.active),
      .largeTabs .tab:active:not(.disabled):not(.active) {
        color: #41246e; } }

.topFundIdeas {
  max-width: 960px;
  margin: 0 auto; }
  .topFundIdeas .topFundIdeasDesktop {
    padding: 80px 0 64px; }
    .topFundIdeas .topFundIdeasDesktop .listDescription {
      color: #6a6a6a;
      font-size: 16px;
      font-weight: 500;
      line-height: 130%;
      letter-spacing: -0.09px;
      margin-bottom: 32px; }
    .topFundIdeas .topFundIdeasDesktop .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .topFundIdeas .topFundIdeasDesktop .content .navSection {
        padding: 16px; }
  .topFundIdeas .topFundIdeasMobile section {
    padding: 24px 16px; }
  .topFundIdeas .topFundIdeasMobile h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.47px; }
  .topFundIdeas .topFundIdeasMobile p {
    margin-top: 4px;
    color: #6a6a6a;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: -0.09px; }
  .topFundIdeas .topFundIdeasMobile .carousel {
    margin-top: 24px; }
  .topFundIdeas .topFundIdeasMobile .bottomRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px; }
  .topFundIdeas .rowLoader {
    margin-bottom: 8px; }
  .topFundIdeas .slideLoader {
    border-radius: 12px;
    margin: 24px 8px 0 8px; }
  .topFundIdeas .viewAll {
    display: block;
    text-decoration: none;
    color: #5a298b;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.09px; }

.table, .row {
  --color-table-light: #f7f9fc;
  --color-table-light-tr-light: rgba(247, 249, 252, 0.6);
  --color-table-light-tr-middle: rgba(247, 249, 252, 0.12);
  --color-table-light-tr-lighter: rgba(247, 249, 252, 0.08);
  --color-table-light-tr-dark: rgba(247, 249, 252, 0.2);
  --color-table-light-hover: #ecf0f8;
  --color-table-light-hover-tr-light: rgba(236, 240, 248, 0.6);
  --color-table-light-hover-tr-middle: rgba(236, 240, 248, 0.12);
  --color-table-light-hover-tr-lighter: rgba(236, 240, 248, 0.08);
  --color-table-light-hover-tr-dark: rgba(236, 240, 248, 0.2); }

.table {
  height: 100%;
  overflow: auto; }
  .table table {
    width: 100%; }
    .table table td {
      background-clip: padding-box; }
    .table table .headerRow {
      border-bottom: 0; }
      .table table .headerRow .header.activeSort {
        color: var(--color-primary); }
        .table table .headerRow .header.activeSort .sortingArrow {
          visibility: visible; }
      .table table .headerRow .sticky-header-cell {
        border-collapse: separate;
        z-index: var(--z-index-table-sticky-header-cell); }
      .table table .headerRow .checkboxHeaderCell {
        left: 0; }
      .table table .headerRow .instrumentHeaderCellSelected {
        left: 62px; }
      .table table .headerRow td {
        background-color: var(--color-white);
        box-shadow: 0 1px 0 0 var(--color-light-gray); }
        .table table .headerRow td .sortingArrow {
          visibility: hidden;
          transform: translateY(2px);
          width: 12px;
          height: 12px;
          font-size: 12px;
          line-height: 1;
          fill: var(--color-primary);
          margin: 0 4px; }
          .table table .headerRow td .sortingArrow svg {
            width: 12px;
            height: 12px; }
        .table table .headerRow td.searchIconCell {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0;
          position: sticky;
          right: 0;
          top: 0;
          z-index: var(--z-index-table-header-cell);
          min-width: 50px; }
          .table table .headerRow td.searchIconCell .searchTableIcon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 49px;
            width: 100%;
            fill: var(--color-black-medium-emphasis);
            color: var(--color-black-medium-emphasis);
            z-index: calc(1 + var(--z-index-table-firstcell)); }
            .table table .headerRow td.searchIconCell .searchTableIcon:hover {
              fill: var(--color-primary);
              color: var(--color-primary);
              background-color: var(--color-table-light); }
          .table table .headerRow td.searchIconCell .searchInput {
            position: absolute;
            display: block;
            width: 272px;
            height: 40px;
            right: 0;
            top: 0; }
            .table table .headerRow td.searchIconCell .searchInput .input {
              border-radius: 4px; }
              .table table .headerRow td.searchIconCell .searchInput .input:focus {
                background-color: white;
                border: solid 1px var(--color-primary-tr-light); }
            .table table .headerRow td.searchIconCell .searchInput .inputCloseBtn {
              border-radius: 0;
              background-color: var(--color-table-light);
              border-left: 1px solid var(--color-black-disabled-fill); }
              .table table .headerRow td.searchIconCell .searchInput .inputCloseBtn:hover {
                background-color: var(--color-4-0-white); }
              .table table .headerRow td.searchIconCell .searchInput .inputCloseBtn:active {
                background-color: var(--color-primary-tr-lighter); }
          .table table .headerRow td.searchIconCell:active {
            background-color: var(--color-primary-tr-lighter); }
  .table.web-4-0 {
    background-color: var(--color-4-0-white); }
    .table.web-4-0 table .headerRow .header.activeSort {
      color: var(--color-4-0-purple); }
    .table.web-4-0 table .headerRow td {
      background-color: var(--color-4-0-white); }
      .table.web-4-0 table .headerRow td .sortingArrow {
        fill: var(--color-4-0-purple); }
      .table.web-4-0 table .headerRow td.searchIconCell .searchTableIcon {
        fill: var(--color-4-0-purple);
        color: var(--color-4-0-purple); }
        .table.web-4-0 table .headerRow td.searchIconCell .searchTableIcon:hover {
          fill: var(--color-4-0-purple);
          color: var(--color-4-0-purple);
          background-color: var(--color-4-0-purple-lighter); }
      .table.web-4-0 table .headerRow td.searchIconCell .searchInput .input:focus {
        background-color: var(--color-4-0-white);
        border: solid 1px var(--color-4-0-purple);
        color: var(--color-4-0-dark); }
      .table.web-4-0 table .headerRow td.searchIconCell .searchInput .inputCloseBtn {
        background-color: var(--color-4-0-purple-lighter); }
        .table.web-4-0 table .headerRow td.searchIconCell .searchInput .inputCloseBtn:active {
          background-color: var(--color-4-0-purple-lighter); }
        .table.web-4-0 table .headerRow td.searchIconCell .searchInput .inputCloseBtn:hover {
          background-color: var(--color-4-0-white); }
      .table.web-4-0 table .headerRow td.searchIconCell:active {
        background-color: var(--color-4-0-purple-lighter); }

.header-cell {
  position: sticky;
  top: 0;
  z-index: var(--z-index-table-header-cell); }

.row {
  height: 49px;
  border-bottom: 1px solid var(--color-light-gray); }

.errorState {
  text-align: center;
  width: 178px;
  margin: 0 auto; }
  .errorStateHeading {
    color: var(--color-dark);
    font-size: var(--size-font-l);
    margin: 16px 0 4px 0; }
  .errorStateText {
    font-size: var(--size-font-s);
    color: var(--color-dark-light); }
  .web-4-0 .errorStateHeading {
    color: var(--color-4-0-dark); }
  .web-4-0 .errorStateText {
    color: var(--color-4-0-dark-lighter); }

.errorSearchState {
  margin: 48px auto 0;
  width: 230px; }
  .errorSearchStateHeading {
    margin: 4px 0;
    font-size: var(--size-font-s);
    font-weight: 600;
    line-height: 1.33;
    color: var(--color-black-high-emphasis); }
  .errorSearchStateText {
    font-size: var(--size-font-xs);
    color: var(--color-black-medium-emphasis); }
  .errorSearchState .heartIcon {
    height: 48px;
    width: 48px; }
    .errorSearchState .heartIcon svg {
      height: 48px;
      width: 48px;
      fill: var(--color-black-outline); }
  .web-4-0 .errorSearchStateHeading {
    color: var(--color-4-0-dark); }
  .web-4-0 .errorSearchStateText {
    color: var(--color-4-0-dark-lighter); }
  .web-4-0 .errorSearchState .heartIcon svg {
    fill: var(--color-4-0-dark-lighter); }

@charset "UTF-8";
.row {
  height: 49px;
  border-bottom: 1px solid var(--color-light-gray); }
  .row .checkBox {
    width: 40px;
    position: sticky;
    vertical-align: middle;
    text-align: left;
    padding: 0 15px;
    left: 0;
    z-index: 1;
    background-color: var(--color-white);
    cursor: default; }
  .row .disabledСheckbox {
    background-color: var(--color-very-light-white); }
  .row.web-4-0 .checkBox {
    background-color: var(--color-4-0-white); }
  .row.web-4-0 .disabledСheckbox {
    background-color: var(--color-4-0-very-light-white); }
  .row .dropdownToggler {
    vertical-align: middle;
    text-align: center;
    width: 70px;
    min-width: 60px; }
  .row .dropdownTrigger {
    visibility: hidden;
    width: 32px;
    height: 32px;
    box-shadow: 0 1px 2px 0 var(--color-black-outline);
    border: solid 1px var(--color-black-disabled-fill);
    background-color: var(--color-white);
    transition: none; }
    @media (hover: none) and (pointer: coarse) {
      .row .dropdownTrigger {
        visibility: visible; } }
  .row.web-4-0 .dropdownTrigger {
    background-color: var(--color-4-0-white); }
  .row:hover .dropdownTrigger {
    visibility: visible; }
  .row:hover, .row.selected, .row.disabled:hover {
    background-color: var(--color-table-light); }
  .row:hover td:nth-child(2) div:first-child {
    color: var(--color-primary); }
  .row:hover .disabledСheckbox,
  .row:hover .checkBox {
    background-color: var(--color-table-light); }
  .row.disabled:hover td:first-child span {
    cursor: not-allowed; }
  .row.disabled:hover td:nth-child(2) div {
    color: var(--color-black-disabled-text); }
  .row.selected:hover {
    background-color: var(--color-table-light-hover); }
    .row.selected:hover .checkBox {
      background-color: var(--color-table-light-hover); }
  .row.disabled {
    background-color: var(--color-white-smoke-opacity); }
    .row.disabled td:nth-child(2) div {
      color: var(--color-black-disabled-text); }
  .row.selected:hover .disabledСheckbox,
  .row.selected:hover td:nth-of-type(2),
  .row.selected:hover td:last-child {
    background-color: var(--color-table-light-hover); }
  .row:first-child {
    border-top: 1px solid transparent; }
  .row.row-clickable:hover .content {
    color: var(--color-primary); }
  .row.row-not-clickable:hover .cell {
    cursor: not-allowed; }
    .row.row-not-clickable:hover .cell .content {
      cursor: not-allowed;
      color: var(--color-black-disabled-text); }
    .row.row-not-clickable:hover .cell .progress-bar {
      color: var(--color-black-disabled-text); }
  .row.web-4-0:hover, .row.web-4-0.selected, .row.web-4-0.disabled:hover {
    background-color: var(--color-4-0-purple-lighter) !important; }
  .row.web-4-0:hover td:nth-child(2) div:first-child {
    color: var(--color-4-0-purple); }
  .row.web-4-0:hover .disabledСheckbox,
  .row.web-4-0:hover .checkBox {
    background-color: var(--color-4-0-purple-lighter) !important; }
  .row.web-4-0:hover, .row.web-4-0.selected, .row.web-4-0.disabled:hover {
    background-color: var(--color-4-0-purple-lighter) !important; }
  .row.web-4-0.disabled:hover td:nth-child(2) div {
    color: var(--color-4-0-dark-lighter); }
  .row.web-4-0.disabled td:nth-child(2) div {
    color: var(--color-4-0-dark-lighter); }
  .row.web-4-0.stock-selected:hover .content {
    color: var(--color-4-0-purple); }
  .row.web-4-0.stock-not-selected:hover .cell .content {
    color: var(--color-4-0-dark-lighter) !important; }
  .row.web-4-0.stock-not-selected:hover .cell .progress-bar {
    color: var(--color-4-0-dark-lighter) !important; }

div.contextMenuContainer {
  display: block;
  z-index: calc(var(--z-index-table-header) + 3); }

.contextMenu {
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 4px 0 var(--color-dark-gray), 0 0 4px 0 var(--color-black-outline); }

.selectionEnabled td:nth-of-type(2) {
  background-color: var(--color-white); }

.selectionEnabled:hover td:nth-of-type(2) {
  background-color: var(--color-table-light); }

.web-4-0 .selectionEnabled {
  background-color: var(--color-4-0-purple-lighter); }

.selectionEnabled.web-4-0 td:nth-of-type(2) {
  background-color: var(--color-4-0-white); }

.selected:not(:hover) .disabledСheckbox,
.selected td:nth-of-type(2) {
  background-color: var(--color-table-light); }

.selected .checkBox {
  background-color: var(--color-table-light); }

.selected.web-4-0:not(:hover) .disabledСheckbox,
.selected.web-4-0 td:nth-of-type(2) {
  background-color: var(--color-4-0-purple-lighter) !important; }

.selected.web-4-0 .checkBox {
  background-color: var(--color-4-0-purple-lighter) !important; }

.contexMenu {
  z-index: var(--z-index-table-contex-menu); }

.clickable {
  cursor: pointer; }

.dropdown {
  position: absolute;
  z-index: var(--z-index-dropdown); }
  .dropdown.animate {
    animation: zoom var(--anim-ui-time) linear; }
  .dropdown.right {
    left: 100%; }
    .dropdown.right.top {
      transform-origin: bottom left; }
    .dropdown.right.bottom {
      transform-origin: top left; }
  .dropdown.left {
    right: 100%; }
    .dropdown.left.top {
      transform-origin: bottom right; }
    .dropdown.left.bottom {
      transform-origin: top right; }
  .dropdown.top {
    bottom: 0; }
  .dropdown.bottom {
    top: 0; }
  .dropdown.web-4-0 {
    border: solid 1px var(--color-4-0-dark-opposite); }

@keyframes zoom {
  from {
    transform: scale(0, 0); }
  to {
    transform: scale(1, 1); } }

.section {
  padding: 8px 0; }
  .section:not(:first-child) {
    border-top: solid 1px var(--color-white-darker); }
  .section .sectionTitle {
    padding: 5px 5px 5px 48px;
    font-size: var(--size-font-s);
    color: var(--color-dark-lighter); }
  .section.web-4-0 {
    background: var(--color-4-0-white);
    border-color: var(--color-4-0-dark-lighter-opacity) !important; }
    .section.web-4-0 .sectionTitle {
      color: var(--color-4-0-dark-lighter); }

.dropdownTitle {
  padding: 8px 0;
  font-size: var(--sizes-font-s);
  color: var(--color-dark-lighter);
  text-align: center; }
  .dropdownTitle + .section {
    border: none; }

.container {
  position: relative;
  display: inline-block;
  flex: 1; }
  .container .focusable:focus {
    outline: none; }
  .container .position {
    position: absolute;
    width: 100%;
    z-index: var(--z-index-dropdown); }
    .container .position.top {
      top: 0; }
    .container .position.bottom {
      bottom: 0; }
    .container .position.left {
      left: -20px; }
    .container .position.right {
      right: 0; }

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-dropdown-container); }

.blockDropDown {
  display: block; }

.noneDropDown {
  display: none; }

.option {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  width: max-content;
  height: 32px;
  width: 100%;
  color: var(--color-dark);
  fill: var(--color-black-medium-emphasis);
  font-size: var(--size-font-m);
  cursor: pointer;
  transition: all var(--anim-notification-time);
  font-size: var(--size-font-s);
  line-height: 1.33; }
  .option.right {
    flex-direction: row; }
  .option.left {
    flex-direction: row-reverse; }
  .option.disabled {
    cursor: not-allowed;
    color: var(--color-black-disabled-text);
    fill: var(--color-black-disabled-text); }
  .option:hover:not(.disabled) {
    background-color: var(--color-alice-blue-lighter);
    color: var(--color-primary);
    fill: var(--color-primary); }
    .option:hover:not(.disabled) .dropdown {
      display: block; }
  .option .selected {
    fill: var(--color-primary);
    color: var(--color-primary); }
  .option .preffix,
  .option .suffix {
    display: flex;
    padding: 0 8px; }
  .option .title {
    flex-grow: 1;
    padding: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis; }
  .option .dropdown {
    top: -9px;
    display: none; }
    .option .dropdown.right {
      left: calc(100% - 12px); }
  .option.web-4-0 {
    fill: var(--color-4-0-dark-lighter);
    color: var(--color-4-0-dark); }
    .option.web-4-0.disabled {
      color: var(--color-4-0-dark-lighter);
      fill: var(--color-4-0-dark-lighter); }
    .option.web-4-0:hover:not(.disabled) {
      background-color: var(--color-4-0-purple-lighter);
      color: var(--color-4-0-purple);
      fill: var(--color-4-0-purple); }
      .option.web-4-0:hover:not(.disabled) .dropdown {
        border: 1px solid var(--color-4-0-dark-opposite) !important; }
    .option.web-4-0 .selected {
      fill: var(--color-4-0-purple);
      color: var(--color-4-0-purple); }
    .option.web-4-0 .title {
      color: var(--color-4-0-dark); }
      .option.web-4-0 .title:hover {
        color: var(--color-4-0-purple); }

.menuIcon {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center; }

.actionButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: background-color var(--anim-transition-time); }
  .actionButton:hover:not(:disabled) {
    border: solid 1px var(--color-alice-blue-opacity);
    background-color: var(--color-white);
    fill: var(--color-primary); }
  .actionButton:active:not(:disabled), .actionButton:focus:not(:disabled) {
    background-color: var(--color-white);
    fill: var(--color-primary); }

.cell {
  vertical-align: middle;
  font-size: var(--size-font-s);
  line-height: 1.33;
  color: var(--color-black-high-emphasis);
  padding: 0 15px; }
  .cell.sticky-left {
    position: sticky;
    left: 0;
    z-index: var(--z-index-table-sticky-cell); }
  .cell.sticky-right {
    position: sticky;
    right: 0;
    z-index: var(--z-index-table-sticky-cell); }
  .cell.web-4-0 {
    color: var(--color-4-0-dark); }

.alignLeft {
  text-align: left; }

.alignRight {
  text-align: right; }

.alignCenter {
  text-align: center; }

.borderLeft {
  border-left: 1px solid var(--color-light-gray); }
  .borderLeft.web-4-0 {
    border-left: 1px solid var(--color-4-0-light-gray-opacity); }

.borderRight {
  border-right: 1px solid var(--color-light-gray); }
  .borderRight.web-4-0 {
    border-right: 1px solid var(--color-4-0-light-gray-opacity); }

.borderBoth {
  border-left: 1px solid var(--color-light-gray);
  border-right: 1px solid var(--color-light-gray); }
  .borderBoth.web-4-0 {
    border-left: 1px solid var(--color-4-0-light-gray-opacity);
    border-right: 1px solid var(--color-4-0-light-gray-opacity); }

.header {
  cursor: pointer; }

.content:hover {
  cursor: pointer; }
  .content:hover svg {
    visibility: visible; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fund-list__sticky-header {
  top: 0;
  z-index: 5;
  background-color: #ffffff; }
  @media (min-width: 992px) {
    .fund-list__sticky-header {
      top: 47px; } }

.fund-list__header {
  padding-top: 0px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  line-height: normal; }
  @media (min-width: 1200px) {
    .fund-list__header {
      width: 960px !important; } }
  @media (min-width: 992px) {
    .fund-list__header {
      padding-top: 20px !important;
      width: 80% !important; } }
  .fund-list__header.fund-name .goto {
    position: relative;
    left: 0 !important; }
  .fund-list__header.fund-name .name {
    display: inline-block;
    width: auto; }

.fund-list__tabs {
  position: relative;
  background-color: #ffffff;
  z-index: 5;
  display: flex;
  justify-content: space-evenly; }
  @media (max-width: 992px) {
    .fund-list__tabs {
      margin-left: -15px;
      margin-right: -15px;
      position: sticky;
      position: -webkit-sticky;
      top: 0px;
      margin-top: 0 !important;
      background-color: #ffffff;
      height: 45px;
      z-index: 5; } }
  .fund-list__tabs::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08); }
  .fund-list__tabs .tab {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    padding: 12px 45px !important; }
    @media (min-width: 992px) {
      .fund-list__tabs .tab {
        font-size: 14px; } }
    .fund-list__tabs .tab.active {
      color: #204fc7;
      background: none; }
      .fund-list__tabs .tab.active::before {
        width: 50%;
        margin: auto;
        right: 0; }
        @media (min-width: 992px) {
          .fund-list__tabs .tab.active::before {
            width: 100%;
            right: auto; } }
    .fund-list__tabs .tab:hover {
      background-color: transparent; }
      .fund-list__tabs .tab:hover::before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: var(--color-primary);
        left: 0%;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        width: 50%;
        margin: auto;
        right: 0; }
        @media (min-width: 992px) {
          .fund-list__tabs .tab:hover::before {
            width: 100%;
            right: auto; } }

.fund-list__table {
  font-family: Inter;
  height: auto !important;
  overflow: inherit !important;
  padding: 0 15px;
  min-width: auto !important;
  margin: auto;
  max-width: 100%; }
  @media (min-width: 992px) {
    .fund-list__table {
      width: 80% !important; } }
  @media (min-width: 1200px) {
    .fund-list__table {
      padding: 0 32px;
      width: 960px !important;
      margin: inherit; } }
  .fund-list__table table {
    table-layout: auto;
    border: 1px solid transparent;
    border-collapse: separate;
    border-spacing: 0 15px; }
  .fund-list__table thead {
    display: none; }
    @media (min-width: 768px) {
      .fund-list__table thead {
        display: table-header-group; } }
    .fund-list__table thead tr.row {
      border: 0; }
      .fund-list__table thead tr.row:hover {
        background-color: transparent; }
    .fund-list__table thead tr td {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.87);
      text-align: left;
      padding: 0px 10px;
      box-shadow: none !important; }
      @media (min-width: 992px) {
        .fund-list__table thead tr td {
          position: sticky;
          position: -webkit-sticky;
          height: min-content; } }
      @media (min-width: 992px) {
        .fund-list__table thead tr td {
          font-size: 13px; } }
      .fund-list__table thead tr td:not(:first-child) {
        text-align: right; }
      .fund-list__table thead tr td .sortingArrow {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0 !important;
        transform: translateY(0) !important; }
      .fund-list__table thead tr td:last-child {
        display: none; }
      .fund-list__table thead tr td span.content {
        position: relative; }
  .fund-list__table tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media (min-width: 768px) {
      .fund-list__table tbody {
        display: table-row-group; } }
    .fund-list__table tbody tr {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      height: auto;
      border: 1px solid var(--table-border-color) !important;
      border-radius: 4px;
      background-color: #ffffff; }
      .fund-list__table tbody tr:hover {
        background-color: var(--table-row-hover-color) !important; }
      .fund-list__table tbody tr:not(:last-child):nth-child(odd) {
        margin-bottom: 20px; }
      @media (min-width: 768px) {
        .fund-list__table tbody tr {
          width: 48.5%; } }
      @media (min-width: 768px) {
        .fund-list__table tbody tr {
          display: table-row;
          width: 100%;
          margin-bottom: 0; } }
      .fund-list__table tbody tr.row + tr {
        display: none; }
      .fund-list__table tbody tr td {
        border-top: 0 !important;
        border-bottom: 0 !important;
        font-size: 14px;
        font-weight: 600;
        padding: 12px 10px 12px 16px;
        vertical-align: middle; }
        .fund-list__table tbody tr td a {
          text-decoration: none !important;
          color: inherit !important; }
        @media (max-width: 767px) {
          .fund-list__table tbody tr td:first-child {
            order: 1;
            padding-bottom: 0; }
          .fund-list__table tbody tr td:nth-child(2) {
            order: 2;
            padding-bottom: 0;
            width: 100%; }
            .fund-list__table tbody tr td:nth-child(2) .type-cell {
              justify-content: flex-start; }
          .fund-list__table tbody tr td:nth-child(3) {
            order: 3;
            text-align: left !important; }
          .fund-list__table tbody tr td:nth-child(4) {
            order: 4;
            text-align: center !important; }
          .fund-list__table tbody tr td:nth-child(5) {
            order: 5; } }
        @media (max-width: 768px) {
          .fund-list__table tbody tr td:nth-child(3), .fund-list__table tbody tr td:nth-child(4), .fund-list__table tbody tr td:nth-child(5) {
            flex: 1; } }
        @media (min-width: 768px) {
          .fund-list__table tbody tr td {
            font-size: 14px;
            border-top: 1px solid var(--table-border-color) !important;
            border-bottom: 1px solid var(--table-border-color) !important; } }
        @media (min-width: 992px) {
          .fund-list__table tbody tr td {
            font-size: 16px; } }
        .fund-list__table tbody tr td:first-child {
          border-radius: 4px 0 0 4px;
          width: 100%; }
          @media (min-width: 768px) {
            .fund-list__table tbody tr td:first-child {
              border-left: 1px solid var(--table-border-color);
              width: 40%; } }
          .fund-list__table tbody tr td:first-child span {
            font-size: 13px;
            color: #000000; }
        .fund-list__table tbody tr td:last-child {
          border-right: 1px solid var(--table-border-color);
          border-radius: 0px 4px 4px 0; }
        .fund-list__table tbody tr td:nth-last-child(2) {
          border-radius: 0px 4px 4px 0; }
          @media (min-width: 768px) {
            .fund-list__table tbody tr td:nth-last-child(2) {
              border-right: 1px solid var(--table-border-color); } }
        .fund-list__table tbody tr td:not(:first-child) {
          text-align: right; }
        .fund-list__table tbody tr td .low-risk {
          color: #388e3c; }
        .fund-list__table tbody tr td .moderate-risk {
          color: #f57c00; }
        .fund-list__table tbody tr td .moderately-high-risk {
          color: #e64a19; }
        .fund-list__table tbody tr td .high-risk {
          color: #bf360c; }
        .fund-list__table tbody tr td .nfo-type-cell,
        .fund-list__table tbody tr td .type-cell {
          display: flex;
          justify-content: flex-end; }
          .fund-list__table tbody tr td .nfo-type-cell .badge,
          .fund-list__table tbody tr td .type-cell .badge {
            padding: 3px 5px;
            text-align: center;
            background-color: #f9f9f9;
            border-color: transparent;
            color: #000000;
            font-weight: 500; }
            .fund-list__table tbody tr td .nfo-type-cell .badge:not(:last-child),
            .fund-list__table tbody tr td .type-cell .badge:not(:last-child) {
              margin-right: 5px; }
        .fund-list__table tbody tr td.dropdownToggler {
          display: none; }

.fund-list__item {
  display: flex;
  align-items: center; }
  .fund-list__item-logo {
    order: 2; }
    @media (min-width: 768px) {
      .fund-list__item-logo {
        padding-right: 15px; } }
    .fund-list__item-logo img {
      border-radius: 50%;
      width: 32px;
      border: 1px solid var(--table-border-color); }
      @media (min-width: 768px) {
        .fund-list__item-logo img {
          border: 0 !important; } }
    @media (min-width: 768px) {
      .fund-list__item-logo {
        order: 1; } }
  .fund-list__item-name {
    line-height: 1.5;
    flex: 1;
    order: 1; }
    @media (min-width: 768px) {
      .fund-list__item-name {
        flex: auto;
        order: 2; } }

.fund-list .nfo-fund-list table tbody tr td:first-child {
  order: 1;
  width: 100%; }
  @media (min-width: 768px) {
    .fund-list .nfo-fund-list table tbody tr td:first-child {
      width: 33%; } }

.fund-list .nfo-fund-list table tbody tr td:nth-child(2) {
  width: 100%; }
  .fund-list .nfo-fund-list table tbody tr td:nth-child(2) .nfo-type-cell {
    justify-content: flex-start; }
    @media (min-width: 768px) {
      .fund-list .nfo-fund-list table tbody tr td:nth-child(2) .nfo-type-cell {
        justify-content: flex-end !important; } }
  @media (min-width: 768px) {
    .fund-list .nfo-fund-list table tbody tr td:nth-child(2) {
      width: auto; } }

.fund-list .nfo-fund-list table tbody tr td:nth-child(4) {
  text-align: right !important; }

.fund-list__pagination {
  margin-bottom: 100px; }
  .fund-list__pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px; }

.fund-list__cell-label {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 5px; }
  @media (min-width: 768px) {
    .fund-list__cell-label {
      display: none; } }

@media (max-width: 767px) {
  .fund-list.collection-list {
    position: fixed;
    top: 0;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow-y: auto;
    z-index: 23; } }

@media (max-width: 992px) {
  .fund-list.collection-list .fund-list__header {
    padding-top: 15px !important; }
  .fund-list.collection-list .fund-list__tabs {
    margin-left: -15px;
    margin-right: -15px;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    margin-top: 0 !important;
    background-color: inherit;
    height: 45px;
    z-index: 5; } }

.badge-etf {
  min-width: 65px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.fund-name {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%; }
  @media (max-width: 992px) {
    .fund-name__meta {
      width: 100%;
      order: 3; } }
  @media (min-width: 992px) {
    .fund-name {
      display: block; } }
  .fund-name .goto {
    display: inline-block;
    position: relative;
    left: auto;
    order: 2;
    vertical-align: middle;
    cursor: pointer; }
    @media (min-width: 1200px) {
      .fund-name .goto {
        left: -35px !important; } }
    @media (min-width: 992px) {
      .fund-name .goto {
        position: absolute;
        left: -15px;
        margin-right: 15px; } }
    @media (min-width: 768px) {
      .fund-name .goto {
        margin-right: 15px; } }
    .fund-name .goto svg {
      width: 20px !important;
      height: 20px !important; }
      .fund-name .goto svg path {
        fill: var(--fund-name-color) !important; }
  .fund-name__close {
    display: inherit;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    padding: 4px;
    width: 24px !important;
    height: 24px !important; }
    @media (min-width: 992px) {
      .fund-name__close {
        display: none; } }
  .fund-name__arrow-left {
    display: none; }
    @media (min-width: 992px) {
      .fund-name__arrow-left {
        display: inherit; } }
  .fund-name .name {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    width: 90%;
    color: rgba(0, 0, 0, 0.87);
    font-size: 16px;
    line-height: normal;
    order: 1; }
    @media (min-width: 992px) {
      .fund-name .name {
        font-size: 20px;
        width: 100%; }
        .fund-name .name.color-primary {
          color: var(--fund-name-color); } }
  .fund-name__meta {
    display: flex;
    align-items: center;
    margin-bottom: 5px; }
    .fund-name__meta .rating {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.38);
      font-weight: 600;
      margin-right: 15px; }
      .fund-name__meta .rating svg {
        width: 16px;
        height: 16px; }
    .fund-name__meta .categories span {
      display: inline-block;
      border: solid 1px var(--badge-border-color);
      border-radius: 3px;
      padding: 4px 8px;
      font-size: 13px; }
      .fund-name__meta .categories span:not(:last-child) {
        margin-right: 12px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.portfolio__performance {
  display: block;
  padding: 5px 0;
  width: 100%; }
  @media (min-width: 768px) {
    .portfolio__performance {
      padding: 5px 15px; } }
  @media (min-width: 992px) {
    .portfolio__performance {
      display: flex;
      align-items: center;
      flex-wrap: wrap; } }
  .portfolio__performance-details {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px; }
    @media (min-width: 768px) {
      .portfolio__performance-details {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0; } }
    @media (min-width: 992px) {
      .portfolio__performance-details {
        justify-content: space-evenly;
        margin-top: 0;
        padding-top: 0;
        border: 0; } }
    .portfolio__performance-details .fieldpair {
      display: flex;
      align-items: flex-start;
      justify-content: space-between; }
      .portfolio__performance-details .fieldpair:not(:last-child) {
        margin-bottom: 20px; }
      @media (min-width: 768px) {
        .portfolio__performance-details .fieldpair {
          display: inline-block;
          margin-bottom: 0px !important; } }
      .portfolio__performance-details .fieldpair__label {
        color: rgba(0, 0, 0, 0.6);
        font-size: 13px; }
        @media (min-width: 768px) {
          .portfolio__performance-details .fieldpair__label {
            font-size: 12px; } }
      .portfolio__performance-details .fieldpair__text {
        margin-top: 0 !important;
        font-size: 13px; }
        @media (min-width: 768px) {
          .portfolio__performance-details .fieldpair__text {
            margin-top: 8px !important;
            font-size: 14px; } }
        .portfolio__performance-details .fieldpair__text svg {
          width: 12px !important;
          height: 12px !important;
          vertical-align: bottom; }
          .portfolio__performance-details .fieldpair__text svg path {
            fill: #00b490; }
  .portfolio__performance-title {
    font-weight: 600;
    font-size: 16px; }
    @media (min-width: 768px) {
      .portfolio__performance-title {
        font-size: 18px; } }
    @media (min-width: 992px) {
      .portfolio__performance-title {
        color: var(--color-primary);
        font-size: 20px; } }
  .portfolio__performance .skeleton {
    justify-content: space-between; }
    .portfolio__performance .skeleton__item {
      flex: 1;
      width: 22%;
      flex: none; }


/* Min breakpoint width */
/* MAx breakpoint width */

.portfolio-order__tabs {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 15px; }
  .portfolio-order__tabs .tab {
    font-size: 13px;
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 15px; }
  .portfolio-order__tabs-custom--title span {
    display: inline-block;
    vertical-align: middle;
    height: auto !important; }
    .portfolio-order__tabs-custom--title span svg {
      width: 16px !important;
      height: 16px !important; }
      .portfolio-order__tabs-custom--title span svg path {
        fill: #ff9494 !important; }

.portfolio .sidebar {
  display: none; }
  @media (min-width: 768px) {
    .portfolio .sidebar {
      display: block;
      margin-top: 25px; } }
  @media (min-width: 992px) {
    .portfolio .sidebar {
      margin-top: 0; } }
  .portfolio .sidebar__card {
    padding: 5px 0 0;
    width: 100%; }
    .portfolio .sidebar__card .portfolio-order__list {
      padding: 0 15px 15px;
      max-height: 480px;
      overflow-y: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      .portfolio .sidebar__card .portfolio-order__list .fundcard {
        width: 48%; }
      @media (min-width: 992px) {
        .portfolio .sidebar__card .portfolio-order__list {
          display: block; }
          .portfolio .sidebar__card .portfolio-order__list .fundcard {
            width: 100%; } }
      .portfolio .sidebar__card .portfolio-order__list::-webkit-scrollbar {
        width: 12px; }
      .portfolio .sidebar__card .portfolio-order__list::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.16); }
      .portfolio .sidebar__card .portfolio-order__list::-webkit-scrollbar-thumb {
        background-color: #ffffff;
        border: 4px solid transparent;
        border-radius: 9px;
        background-clip: content-box; }

.fundcard {
  padding: 15px;
  border-radius: 4px;
  border: solid 1px #d8e3f0; }
  .fundcard:not(:last-child) {
    margin-bottom: 15px; }
  .fundcard__inv-type {
    margin-bottom: 15px; }
    .fundcard__inv-type .badge {
      display: inline-block; }
  .fundcard__name {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    cursor: pointer; }
    .fundcard__name .name {
      color: var(--color-primary);
      font-weight: 600;
      font-size: 14px;
      line-height: 18px;
      margin-right: 2px; }
    .fundcard__name .logo img {
      width: 40px;
      border: 1px solid #d8e3f0;
      border-radius: 50%; }
  .fundcard__metrics {
    display: flex;
    justify-content: space-between; }
    .fundcard__metrics span {
      flex: 1; }
      .fundcard__metrics span.units {
        text-align: left; }
      .fundcard__metrics span.amount {
        text-align: center; }
      .fundcard__metrics span.status {
        text-align: right; }
    .fundcard__metrics .fieldpair__label {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.6); }
    .fundcard__metrics .fieldpair__text {
      font-size: 13px;
      font-weight: 600;
      margin-top: 10px !important;
      text-transform: capitalize; }
  .fundcard__orderSIPMessage {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: bold; }
  .fundcard__orderStatusMessage {
    display: flex;
    justify-content: space-between;
    margin-top: 5%;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6); }
  .fundcard__learnMore {
    display: inline-flex;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.offcanvas.order-details {
  background-color: #fff; }
  .offcanvas.order-details .offcanvas__header {
    padding-bottom: 0; }
  .offcanvas.order-details .offcanvas__content {
    box-shadow: none; }
    .offcanvas.order-details .offcanvas__content-body .badge {
      font-weight: 600;
      display: inline-block;
      margin-bottom: 15px; }
    .offcanvas.order-details .offcanvas__content-footer {
      margin-bottom: 15px; }
      .offcanvas.order-details .offcanvas__content-footer .order-details__actions {
        padding: 0 20px; }
        .offcanvas.order-details .offcanvas__content-footer .order-details__actions-top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px; }
          .offcanvas.order-details .offcanvas__content-footer .order-details__actions-top button {
            width: 100%;
            font-size: 13px; }
            .offcanvas.order-details .offcanvas__content-footer .order-details__actions-top button:not(:only-child):first-child {
              margin-right: 6px; }
            .offcanvas.order-details .offcanvas__content-footer .order-details__actions-top button:not(:only-child):last-child {
              margin-left: 6px; }
        .offcanvas.order-details .offcanvas__content-footer .order-details__actions-bottom button {
          width: 100%;
          font-size: 13px; }
    .offcanvas.order-details .offcanvas__content .fund-name .text {
      color: var(--color-primary);
      font-size: 13px;
      font-weight: 600; }
  .offcanvas.order-details .order-details__meta .fieldpair:not(:last-child) {
    margin-bottom: 20px; }
  .offcanvas.order-details .order-details__meta .fieldpair__label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6); }
  .offcanvas.order-details .order-details__meta .fieldpair__text {
    font-size: 13px; }
  .offcanvas.order-details .order-details__meta .fund-link {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 10px;
    text-decoration: none; }
    .offcanvas.order-details .order-details__meta .fund-link svg {
      width: 16px !important;
      height: 16px !important;
      margin-left: 5px; }
      .offcanvas.order-details .order-details__meta .fund-link svg path {
        fill: var(--color-primary); }

.offcanvas.redeem-fund.pin-approval, .offcanvas.cancel-fund.pin-approval {
  text-align: center; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__loader #loader, .offcanvas.cancel-fund.pin-approval .pin-approval__loader #loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    margin: auto; }
    @media (min-width: 992px) {
      .offcanvas.redeem-fund.pin-approval .pin-approval__loader #loader, .offcanvas.cancel-fund.pin-approval .pin-approval__loader #loader {
        width: 40px;
        height: 40px; } }
  .offcanvas.redeem-fund.pin-approval .pin-approval__loader-title, .offcanvas.cancel-fund.pin-approval .pin-approval__loader-title {
    color: #031930;
    line-height: 22px;
    font-weight: 600;
    font-size: 16px;
    margin-top: 25px; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__loader-description, .offcanvas.cancel-fund.pin-approval .pin-approval__loader-description {
    font-size: 12px;
    color: #f85b67;
    margin-top: 5px; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__loader-icon, .offcanvas.cancel-fund.pin-approval .pin-approval__loader-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: #f5f7fa;
    border-radius: 50%; }
    @media (min-width: 992px) {
      .offcanvas.redeem-fund.pin-approval .pin-approval__loader-icon, .offcanvas.cancel-fund.pin-approval .pin-approval__loader-icon {
        width: 150px;
        height: 150px; } }
  .offcanvas.redeem-fund.pin-approval .pin-approval__failed-title, .offcanvas.cancel-fund.pin-approval .pin-approval__failed-title {
    color: #f85b67;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    margin: 15px 0 5px; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__failed-description, .offcanvas.cancel-fund.pin-approval .pin-approval__failed-description {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 20px; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__footer, .offcanvas.cancel-fund.pin-approval .pin-approval__footer {
    line-height: 16px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 11px; }
    .offcanvas.redeem-fund.pin-approval .pin-approval__footer .hr, .offcanvas.cancel-fund.pin-approval .pin-approval__footer .hr {
      margin: 16px 0 10px; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__status div, .offcanvas.cancel-fund.pin-approval .pin-approval__status div {
    color: rgba(0, 0, 0, 0.38);
    font-size: 12px; }
  .offcanvas.redeem-fund.pin-approval .pin-approval__status-link a, .offcanvas.cancel-fund.pin-approval .pin-approval__status-link a {
    color: var(--color-primary);
    text-decoration: underline; }
  .offcanvas.redeem-fund.pin-approval .offcanvas__content-header, .offcanvas.cancel-fund.pin-approval .offcanvas__content-header {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    line-height: 22px;
    font-size: 14px; }
  .offcanvas.redeem-fund.pin-approval .offcanvas__content-body, .offcanvas.cancel-fund.pin-approval .offcanvas__content-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 60px; }

.offcanvas.redeem-fund .redeem-fund__meta,
.offcanvas.redeem-fund .cancel-fund__meta, .offcanvas.cancel-fund .redeem-fund__meta,
.offcanvas.cancel-fund .cancel-fund__meta {
  display: flex;
  justify-content: space-between;
  padding: 0 20px; }
  .offcanvas.redeem-fund .redeem-fund__meta .fieldpair,
  .offcanvas.redeem-fund .cancel-fund__meta .fieldpair, .offcanvas.cancel-fund .redeem-fund__meta .fieldpair,
  .offcanvas.cancel-fund .cancel-fund__meta .fieldpair {
    text-align: center; }
    .offcanvas.redeem-fund .redeem-fund__meta .fieldpair:first-child,
    .offcanvas.redeem-fund .cancel-fund__meta .fieldpair:first-child, .offcanvas.cancel-fund .redeem-fund__meta .fieldpair:first-child,
    .offcanvas.cancel-fund .cancel-fund__meta .fieldpair:first-child {
      text-align: left; }
    .offcanvas.redeem-fund .redeem-fund__meta .fieldpair:last-child,
    .offcanvas.redeem-fund .cancel-fund__meta .fieldpair:last-child, .offcanvas.cancel-fund .redeem-fund__meta .fieldpair:last-child,
    .offcanvas.cancel-fund .cancel-fund__meta .fieldpair:last-child {
      text-align: right; }
    .offcanvas.redeem-fund .redeem-fund__meta .fieldpair__label,
    .offcanvas.redeem-fund .cancel-fund__meta .fieldpair__label, .offcanvas.cancel-fund .redeem-fund__meta .fieldpair__label,
    .offcanvas.cancel-fund .cancel-fund__meta .fieldpair__label {
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px; }
    .offcanvas.redeem-fund .redeem-fund__meta .fieldpair__text,
    .offcanvas.redeem-fund .cancel-fund__meta .fieldpair__text, .offcanvas.cancel-fund .redeem-fund__meta .fieldpair__text,
    .offcanvas.cancel-fund .cancel-fund__meta .fieldpair__text {
      margin-top: 10px; }

.offcanvas.redeem-fund .otp-help, .offcanvas.cancel-fund .otp-help {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .offcanvas.redeem-fund .otp-help button, .offcanvas.cancel-fund .otp-help button {
    height: auto;
    padding: 0; }
    .offcanvas.redeem-fund .otp-help button .preffix span.icon, .offcanvas.cancel-fund .otp-help button .preffix span.icon {
      margin-right: 0; }

.offcanvas.cancel-failure {
  background-image: url(/mutual-funds/_next/static/da9b96d63e80d06106f5427f9e2aab61.svg), linear-gradient(to bottom, #872636, rgba(199, 43, 20, 0));
  background-position: center 70%; }
  .offcanvas.cancel-failure .hide-suffix {
    display: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.portfolio-reponsive__order, .portfolio-reponsive__investment {
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 23;
  padding-bottom: 60px;
  animation-name: slideInUp;
  animation-duration: 0.3s;
  animation-fill-mode: both; }

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }
  .portfolio-reponsive__order-title, .portfolio-reponsive__investment-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: solid 1px rgba(0, 0, 0, 0.08); }
    .portfolio-reponsive__order-title--close, .portfolio-reponsive__investment-title--close {
      background-color: rgba(0, 0, 0, 0.08);
      border-radius: 50%;
      padding: 4px;
      width: 24px !important;
      height: 24px !important;
      cursor: pointer; }
  .portfolio-reponsive__order-data, .portfolio-reponsive__investment-data {
    height: 100%;
    overflow-y: auto;
    padding: 15px 15px; }
    .portfolio-reponsive__order-data .fundcard .badge, .portfolio-reponsive__investment-data .fundcard .badge {
      display: inline-block; }

.portfolio-reponsive__actions {
  display: flex;
  justify-content: space-between; }
  @media (min-width: 768px) {
    .portfolio-reponsive__actions {
      display: none; } }
  .portfolio-reponsive__actions button {
    font-size: 12px !important;
    height: 40px !important;
    width: 100%; }
    @media (min-width: 360px) {
      .portfolio-reponsive__actions button {
        font-size: 13px !important; } }
    .portfolio-reponsive__actions button:first-child {
      margin-right: 5px; }
    .portfolio-reponsive__actions button:last-child {
      margin-left: 5px; }

.portfolio-reponsive .portfolio-order__tabs {
  position: relative;
  border-bottom: 0; }
  .portfolio-reponsive .portfolio-order__tabs::after {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    bottom: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08); }

@media (max-width: 767px) {
  .portfolio-reponsive .tooltipContainer {
    top: 100%; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.fundcard__metrics.show-inline {
  flex-direction: column; }
  .fundcard__metrics.show-inline span {
    margin-bottom: 15px; }
  .fundcard__metrics.show-inline .fieldpair {
    align-items: center; }
    .fundcard__metrics.show-inline .fieldpair__text {
      margin-top: 0 !important; }

.fundcard__metrics .status {
  max-width: 100%;
  width: 100%;
  margin-top: 0; }

.fundcard__actions {
  margin-top: 15px; }
  .fundcard__actions button {
    font-size: 13px !important; }
  .fundcard__actions-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; }
    .fundcard__actions-top button {
      width: 100%; }
      .fundcard__actions-top button:not(:only-child):first-child {
        margin-right: 6px; }
  .fundcard__actions-bottom button {
    width: 100%; }

.fundcard .fund-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 25px;
  text-decoration: none; }
  .fundcard .fund-link svg {
    width: 16px !important;
    height: 16px !important;
    margin-left: 5px; }
    .fundcard .fund-link svg path {
      fill: var(--color-primary); }

.fundcard__orderStatusMessage {
  display: flex;
  justify-content: space-between;
  margin-top: 5%;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6); }

.fundcard__learnMore {
  display: inline-flex;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.profile-page {
  background-color: #f5f7fa;
  min-height: 100vh; }
  .profile-page .layout {
    padding-bottom: 70px; }
    @media (min-width: 768px) {
      .profile-page .layout {
        padding-bottom: 0px; } }

/* Min breakpoint width */
/* MAx breakpoint width */

.portfolio-investment {
  display: none;
  position: relative;
  font-family: Inter;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px; }
  @media (min-width: 768px) {
    .portfolio-investment {
      display: block; } }
  .portfolio-investment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--table-row-hover-color);
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
    .portfolio-investment__header-title {
      font-weight: 600;
      font-size: 14px; }
    .portfolio-investment__header-export button {
      font-size: 12px !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
      border: solid 1px rgba(0, 0, 0, 0.12);
      height: 27px !important; }
      .portfolio-investment__header-export button.download-statement-btn .text {
        display: flex;
        align-items: center; }
      .portfolio-investment__header-export button.download-statement-btn svg {
        width: 12px !important;
        height: 13px !important; }
  .portfolio-investment__data {
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto; }
    .portfolio-investment__data::-webkit-scrollbar {
      width: 12px; }
    .portfolio-investment__data::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0.16); }
    .portfolio-investment__data::-webkit-scrollbar-thumb {
      background-color: #ffffff;
      border: 4px solid transparent;
      border-radius: 9px;
      background-clip: content-box; }
    .portfolio-investment__data table {
      border-top: solid 1px rgba(0, 0, 0, 0.08); }
      .portfolio-investment__data table.empty-table tbody tr td {
        padding: 0; }
      .portfolio-investment__data table thead tr {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
        border-bottom: 0;
        height: 40px; }
        .portfolio-investment__data table thead tr:hover {
          background-color: transparent; }
        .portfolio-investment__data table thead tr th {
          position: relative;
          color: rgba(0, 0, 0, 0.38);
          font-weight: bold;
          font-size: 12px;
          vertical-align: middle;
          text-align: left;
          padding: 0px 15px; }
          .portfolio-investment__data table thead tr th:nth-child(2) {
            text-align: center; }
          .portfolio-investment__data table thead tr th:nth-child(3) {
            text-align: right; }
          .portfolio-investment__data table thead tr th:nth-child(4), .portfolio-investment__data table thead tr th:nth-child(5) {
            text-align: right; }
          .portfolio-investment__data table thead tr th:not(:last-child) span span {
            position: absolute; }
          .portfolio-investment__data table thead tr th .searchContainer {
            right: 5px;
            bottom: 0; }
            .portfolio-investment__data table thead tr th .searchContainer .searchIconContainer {
              display: flex;
              width: auto;
              height: 100%; }
              .portfolio-investment__data table thead tr th .searchContainer .searchIconContainer #tableSearch svg {
                width: 20px;
                height: 20px; }
                .portfolio-investment__data table thead tr th .searchContainer .searchIconContainer #tableSearch svg path {
                  fill: rgba(0, 0, 0, 0.6) !important; }
            .portfolio-investment__data table thead tr th .searchContainer .inputContainerWrapper {
              position: absolute;
              right: 0;
              top: 0;
              width: 250px; }
              .portfolio-investment__data table thead tr th .searchContainer .inputContainerWrapper input {
                padding-left: 40px;
                height: 40px; }
              .portfolio-investment__data table thead tr th .searchContainer .inputContainerWrapper .inputCloseBtn .tooltipContainer {
                display: none; }
          .portfolio-investment__data table thead tr th.sortable:hover {
            color: var(--color-primary); }
          .portfolio-investment__data table thead tr th.sortable span.arrow {
            position: absolute; }
            .portfolio-investment__data table thead tr th.sortable span.arrow.sorted {
              color: var(--color-primary); }
      .portfolio-investment__data table tbody tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
        .portfolio-investment__data table tbody tr td {
          vertical-align: middle;
          font-size: 13px;
          padding: 0px 15px; }
          .portfolio-investment__data table tbody tr td:first-child {
            font-weight: 600;
            width: 40%;
            line-height: 17px;
            font-size: 12px; }
          .portfolio-investment__data table tbody tr td:nth-child(3) {
            text-align: right; }
          .portfolio-investment__data table tbody tr td:nth-child(2) {
            text-align: center; }
          .portfolio-investment__data table tbody tr td:nth-child(4), .portfolio-investment__data table tbody tr td:nth-child(5) {
            text-align: right; }
          .portfolio-investment__data table tbody tr td.cell-green {
            color: #00b490; }
          .portfolio-investment__data table tbody tr td.cell-red {
            color: #f85b67; }
          .portfolio-investment__data table tbody tr td.dropdownToggler {
            min-width: 30px !important;
            width: auto !important; }
          .portfolio-investment__data table tbody tr td .errorSearchState {
            position: relative;
            margin-top: 0;
            padding: 25px 0; }
    .portfolio-investment__data .navigation {
      margin-bottom: 10px; }
  .portfolio-investment__type-action {
    font-size: 12px !important;
    padding: 4px 8px !important;
    width: 100%;
    height: 25px !important; }
    .portfolio-investment__type-action div {
      color: inherit !important; }
  .portfolio-investment .portfolio__empty {
    padding: 45px 15px; }
  .portfolio-investment .skeleton__item {
    margin: 10px 10px 0 !important; }
    .portfolio-investment .skeleton__item:last-child {
      margin-bottom: 10px !important; }
  .portfolio-investment__empty .portfolio__empty-description {
    width: 190px;
    max-width: 100%;
    padding: 0;
    margin: auto;
    font-weight: normal; }

.navigation {
  display: flex;
  justify-content: center;
  margin-top: var(--size-margin); }

.pagination {
  display: flex; }

.pageLink,
.breakMe {
  font-size: var(--size-font-m);
  color: var(--color-black-tr-light);
  text-decoration: none;
  padding: var(--size-padding-xxs) var(--size-padding-xs);
  outline: none;
  cursor: pointer;
  display: flex; }

.previous,
.next {
  display: flex;
  align-items: center;
  outline: none; }

.chevronLeft,
.chevronRight {
  cursor: pointer;
  padding: 0;
  color: var(--color-black-tr-light);
  background-color: var(--color-white-dark);
  border: none;
  height: auto;
  outline: none;
  display: flex; }

.activeLink {
  color: var(--color-primary); }

.active {
  background-color: var(--color-primary-tr-lighter);
  border-radius: 14px; }

.portfolio-reponsive__investment-title--close {
  background-color: transparent !important;
  vertical-align: middle;
  padding-left: 0; }

.portfolio-reponsive__investment-title--left {
  display: flex;
  align-items: center; }

.portfolio-reponsive__investment-data .fundcard__metrics span {
  text-align: center; }
  .portfolio-reponsive__investment-data .fundcard__metrics span:first-child {
    text-align: left; }
  .portfolio-reponsive__investment-data .fundcard__metrics span:last-child {
    text-align: right; }

.portfolio-reponsive__investment-data .fundcard #nextsip .fieldpair__label {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px; }

.portfolio-reponsive__investment-data .fundcard__nextsip {
  position: relative;
  margin-bottom: -5px; }
  .portfolio-reponsive__investment-data .fundcard__nextsip::before {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    top: 0;
    height: 1px;
    background-color: #d8e3f0; }

.portfolio-reponsive__investment-data .portfolio__empty {
  height: 100%;
  justify-content: center; }

.portfolio-reponsive__investment .download-statement-btn {
  font-size: 13px !important;
  height: auto !important;
  padding: 0 !important; }
  .portfolio-reponsive__investment .download-statement-btn svg {
    display: inline-block;
    vertical-align: middle;
    width: 15px !important;
    height: 13px !important; }

.portfolio-reponsive__investment.hidden {
  display: none; }

/* Min breakpoint width */
/* MAx breakpoint width */

.filter {
  display: none;
  position: sticky;
  left: 0;
  top: 47px;
  padding-bottom: 50px;
  font-family: Inter;
  overflow-y: auto;
  z-index: 22; }
  @media (min-width: 992px) {
    .filter {
      display: block;
      width: 100%;
      max-width: 100%; } }
  .filter__title .collapse__header-title {
    color: #000000 !important; }
  .filter__item .checkboxInput:not(:checked) + span::before {
    border-color: rgba(0, 0, 0, 0.87); }
  .filter__item-selected {
    background-color: var(--filter-header-bg-color); }
    .filter__item-selected .collapse__header-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: var(--color-primary) !important; }
      .filter__item-selected .collapse__header-title .clear-filter span.icon {
        transform: rotate(45deg); }
      .filter__item-selected .collapse__header-title .clear-filter span.icon,
      .filter__item-selected .collapse__header-title .clear-filter svg {
        width: 16px;
        height: 16px;
        vertical-align: middle; }
        .filter__item-selected .collapse__header-title .clear-filter span.icon path,
        .filter__item-selected .collapse__header-title .clear-filter svg path {
          fill: var(--color-primary); }
    .filter__item-selected--option {
      display: inline-block;
      padding: 3px 10px;
      background-color: var(--filter-option-color);
      border-radius: 4px;
      color: var(--color-primary);
      margin-left: 5px;
      margin-bottom: 5px; }
  .filter__item-fund-type .collapse__body.is-open {
    padding-bottom: 10px; }
  .filter__selected-count {
    border-radius: 50%;
    background-color: var(--filter-option-color);
    width: 20px;
    height: 20px;
    margin-left: 5px;
    font-size: 12px;
    display: inline-block;
    line-height: 20px;
    text-align: center; }
  .filter .collapse {
    padding: 15px 15px 0; }
    .filter .collapse:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.1); }
    .filter .collapse__header {
      justify-content: space-between;
      padding-bottom: 15px; }
      .filter .collapse__header-title {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.38); }
    .filter .collapse__body {
      padding-top: 0; }
      .filter .collapse__body-content {
        max-height: 165px;
        overflow-y: auto; }
    .filter .collapse__indicator-icon svg {
      width: 20px !important;
      height: 20px !important; }
      .filter .collapse__indicator-icon svg path {
        fill: rgba(0, 0, 0, 0.6) !important; }
  .filter .collapse.filter__item-fund-type.disabled,
  .filter .collapse.filter__item-fund-risk.disabled {
    cursor: not-allowed; }
    .filter .collapse.filter__item-fund-type.disabled .collapse__header,
    .filter .collapse.filter__item-fund-risk.disabled .collapse__header {
      pointer-events: none; }
  .filter .radio__list-item {
    position: relative;
    display: inline-block;
    margin-bottom: 10px; }
    .filter .radio__list-item label {
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index: 23; }
    .filter .radio__list-item .title {
      position: relative;
      border-radius: 2px;
      border: solid 1px rgba(0, 70, 187, 0.12);
      padding: 3px 10px;
      margin-bottom: 0;
      color: rgba(0, 0, 0, 0.87); }
    .filter .radio__list-item.checked .title {
      background-color: rgba(0, 70, 187, 0.08);
      color: var(--color-primary); }
    .filter .radio__list-item:not(:last-child) {
      margin-right: 10px; }
  .filter .checkbox__list-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px; }
    .filter .checkbox__list-item:last-child {
      margin-bottom: 20px; }
    .filter .checkbox__list-item-title {
      color: rgba(0, 0, 0, 0.87);
      margin-left: 5px; }
    .filter .checkbox__list-item.fund-type {
      position: relative;
      display: inline-block;
      margin-bottom: 10px; }
      .filter .checkbox__list-item.fund-type:not(:last-child) {
        margin-right: 10px; }
      .filter .checkbox__list-item.fund-type .custom-checkbox__field {
        position: absolute;
        opacity: 0; }
        .filter .checkbox__list-item.fund-type .custom-checkbox__field + label.text {
          position: relative;
          border-radius: 2px;
          border: solid 1px rgba(0, 70, 187, 0.12);
          padding: 0px 10px;
          margin-bottom: 0;
          color: rgba(0, 0, 0, 0.87);
          cursor: pointer;
          font-size: 12px;
          line-height: inherit; }
          .filter .checkbox__list-item.fund-type .custom-checkbox__field + label.text:hover {
            background-color: rgba(0, 70, 187, 0.08);
            color: var(--color-primary); }
      .filter .checkbox__list-item.fund-type.checked label.text {
        background-color: rgba(0, 70, 187, 0.08);
        color: var(--color-primary); }
    .filter .checkbox__list-item.submenus-list {
      display: block; }
  @media (min-width: 992px) {
    .filter .checkbox__list .checkbox-submenus {
      padding-left: 14px; } }
  @media (min-width: 1200px) {
    .filter .checkbox__list .checkbox-submenus {
      padding-left: 23px; } }
  .filter .checkbox__list .checkbox-submenus .custom-checkbox .text {
    word-break: break-word; }

.mandate-table {
  font-size: 20px;
  width: fit-content;
  margin-bottom: 25px !important;
  min-width: 400px !important;
  min-width: 700px !important;
  border: black solid 1px !important;
  padding: 0px auto;
  border: 1px solid black; }
  @media only screen and (min-width: 600px) {
    .mandate-table {
      min-width: 500px !important; } }
  .mandate-table .mandate-head {
    background: #41246e;
    color: white;
    font-weight: 600; }
    .mandate-table .mandate-head .mandate-heading {
      height: 24px;
      padding: auto auto;
      padding-top: 7px;
      padding-bottom: 7px; }
  .mandate-table .mandate-failed {
    background: #e95858; }
  .mandate-table .mandate-body {
    color: black; }
    .mandate-table .mandate-body .mandate-row {
      height: 42px !important;
      border: none !important; }
      .mandate-table .mandate-body .mandate-row:nth-child(1) .mandate-label,
      .mandate-table .mandate-body .mandate-row:nth-child(1) .mandate-value {
        padding-top: 10px; }
      .mandate-table .mandate-body .mandate-row:hover {
        background: none !important; }
      .mandate-table .mandate-body .mandate-row .mandate-label {
        width: 160px;
        font-weight: 600; }
      .mandate-table .mandate-body .mandate-row .mandate-value {
        word-wrap: break-word; }
      .mandate-table .mandate-body .mandate-row .mandate-label,
      .mandate-table .mandate-body .mandate-row .mandate-value {
        padding-left: 10px;
        line-height: 30px;
        width: 110;
        padding: 5px 20px; }

/* Min breakpoint width */
/* MAx breakpoint width */

.filter__responsive {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
  z-index: 9999;
  background-color: #ffffff;
  width: 100%;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  animation-name: fadeOutLeft;
  animation-duration: 0.3s;
  animation-fill-mode: both; }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); } }
  .filter__responsive.is-open {
    animation-name: fadeInLeft;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    visibility: visible; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }
  @media (min-width: 768px) {
    .filter__responsive {
      width: 50%; } }
  .filter__responsive-title {
    font-size: 15px;
    font-weight: 600; }
  .filter__responsive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
  .filter__responsive-body {
    flex: 1;
    height: 100%;
    overflow-y: auto; }
  .filter__responsive-footer {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .filter__responsive-footer button {
      width: 100%;
      border-radius: 0; }
      .filter__responsive-footer button:first-child {
        background-color: transparent !important;
        border-color: var(--filter-border-color); }
      .filter__responsive-footer button.clear-filter:disabled {
        color: rgba(0, 0, 0, 0.38);
        background-color: transparent; }
      .filter__responsive-footer button.apply-filter:disabled {
        background-color: rgba(0, 0, 0, 0.38);
        border-color: transparent; }
  .filter__responsive-close {
    margin-right: 20px; }
  .filter__responsive-options {
    display: flex;
    justify-content: space-between;
    height: 100%; }
    .filter__responsive-options > div {
      width: 100%;
      overflow-y: auto; }
  .filter__responsive-list--data {
    padding: 15px 10px; }
    .filter__responsive-list--data .custom-checkbox:not(:last-child) {
      margin-bottom: 5px; }
    .filter__responsive-list--data .custom-checkbox label {
      font-size: 14px;
      padding-left: 5px; }
  .filter__responsive-list--item {
    padding: 18px 15px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
    .filter__responsive-list--item .icon {
      float: right; }
    .filter__responsive-list--item.selected-item {
      background-color: var(--filter-data-bg-color); }
  .filter__responsive-list--data {
    background-color: var(--filter-data-bg-color); }
  .filter__responsive-overlay {
    z-index: 99; }
  .filter__responsive .checkbox-submenus {
    padding-left: 10px; }
  .filter__responsive .filter__responsive-list--data.disabled {
    pointer-events: none; }

@keyframes spinClock {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes spinUnClock {
  from {
    transform: scale(-1, 1) rotate(90deg); }
  to {
    transform: scale(-1, 1) rotate(450deg); } }

@keyframes show {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes hide {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes showFromRight {
  from {
    transform: translateX(-20%);
    opacity: 0; }
  to {
    transform: translateX(0);
    opacity: 1; } }

@keyframes showFromLeft {
  from {
    transform: translateX(20%);
    opacity: 0; }
  to {
    transform: translateX(0);
    opacity: 1; } }

@keyframes hideToRightDelay {
  0% {
    transform: translateX(0);
    opacity: 1; }
  80% {
    transform: translateX(0);
    opacity: 1; }
  100% {
    transform: translateX(-20%);
    opacity: 0; } }

@keyframes hideToLeftDelay {
  0% {
    transform: translateX(0);
    opacity: 1; }
  80% {
    transform: translateX(0);
    opacity: 1; }
  100% {
    transform: translateX(20%);
    opacity: 0; } }

@keyframes slideToRight {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(100%); } }

@keyframes slideFromRight {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0); } }

@keyframes slideToLeft {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0); } }

@keyframes blink {
  0% {
    opacity: 0.2; }
  20% {
    opacity: 1; }
  100% {
    opacity: 0.2; } }

.alignment {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-self: center;
  z-index: var(--z-index-overlay-content-popup);
  padding: var(--size-margin);
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translate(0, -50%);
  animation: show .5s ease; }
  .alignment.center {
    justify-content: center;
    align-items: center; }
  .alignment.left {
    top: 0;
    left: 0; }
  .alignment.right {
    top: 0;
    right: 0; }
  .alignment.fullHeight .popupContainer {
    height: 100%; }

.popupContainer {
  width: 100%;
  max-width: 780px;
  overflow: hidden; }
  .popupContainer .header {
    display: flex;
    align-items: center;
    padding: var(--size-padding-s) var(--size-padding-s) 0; }
    @media (min-width: 1024px) {
      .popupContainer .header {
        padding: 0; } }
    .popupContainer .header .closePopupIcon {
      cursor: pointer;
      margin-right: var(--size-spacer); }
  @media (min-width: 1024px) {
    .popupContainer {
      padding: var(--size-padding-s);
      width: auto; } }

.input[type='password']:not(.with-placeholder) {
  letter-spacing: 5px; }

.input:placeholder-shown {
  letter-spacing: normal; }

/* Min breakpoint width */
/* MAx breakpoint width */

.sorting__responsive {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
  z-index: 9999;
  background-color: #ffffff;
  width: 100%;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  animation-name: fadeOutLeft;
  animation-duration: 0.3s;
  animation-fill-mode: both; }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); } }
  .sorting__responsive.is-open {
    animation-name: fadeInLeft;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    visibility: visible; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }
  @media (min-width: 768px) {
    .sorting__responsive {
      width: 50%; } }
  .sorting__responsive-title {
    font-size: 15px;
    font-weight: 600; }
  .sorting__responsive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
  .sorting__responsive-body {
    flex: 1;
    height: 100%;
    overflow-y: auto; }
  .sorting__responsive-footer {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .sorting__responsive-footer button {
      width: 100%;
      border-radius: 0; }
      .sorting__responsive-footer button:first-child {
        background-color: transparent;
        border-color: #d8e3f0; }
      .sorting__responsive-footer button.clear-filter:disabled {
        color: rgba(0, 0, 0, 0.38);
        background-color: transparent; }
      .sorting__responsive-footer button.apply-filter:disabled {
        background-color: rgba(0, 0, 0, 0.38);
        border-color: transparent; }
  .sorting__responsive-close {
    margin-right: 20px; }
  .sorting__responsive-options {
    display: flex;
    justify-content: space-between;
    height: 100%; }
    .sorting__responsive-options > div {
      width: 100%;
      overflow-y: auto; }
  .sorting__responsive-list--data {
    padding: 15px 10px; }
  .sorting__responsive-list-option:not(:last-child) {
    margin-bottom: 25px; }
  .sorting__responsive-list-option--text {
    font-size: 13px;
    padding-left: 10px; }
  .sorting__responsive-list--item {
    padding: 18px 15px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
    .sorting__responsive-list--item .icon {
      float: right; }
    .sorting__responsive-list--item.selected-item {
      background-color: #f5f7fa; }
  .sorting__responsive-list--data {
    background-color: #f5f7fa; }
  .sorting__responsive-overlay {
    z-index: 99; }