:root { --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .wealthProBlue .primaryHighLight, .wealthProBlue .btn-primary:hover, .wealthProBlue .btn-primary:active, .wealthProBlue .btn-primary:focus, .wealthProBlue .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .wealthProBlue .nav-link { background-color: rgba(72, 171, 224, 0.8) !important; } .wealthProBlue .primaryBgColour, .wealthProBlue .primary-bg, .wealthProBlue .primary-bar, .wealthProBlue .primaryBody, .wealthProBlue .inputGoalImage, .wealthProBlue .deleteGoalImage, .wealthProBlue .ui-widget-header, .wealthProBlue .diamondNormal, .wealthProBlue .diamond, .wealthProBlue .diamondRisk, .wealthProBlue .primaryRow, .wealthProBlue .primaryBox, .wealthProBlue .btn-primary, .wealthProBlue .btn-outline-primary:hover, .wealthProBlue .btn-outline-primary:active, .wealthProBlue .btn-outline-primary:focus, .wealthProBlue .progress-bg-dark, .wealthProBlue .progress-primary-small .progress-bar, .progress-primary-small .wealthProBlue .progress-bar, .wealthProBlue .nav-tabs .nav-item .active, .nav-tabs .nav-item .wealthProBlue .active, .wealthProBlue .goalTotalRow, .wealthProBlue .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .wealthProBlue .monthlyIncreaseValue:hover, .wealthProBlue .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .wealthProBlue .monthlyIncreaseValueRetire:hover, .wealthProBlue .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .wealthProBlue .monthlyIncreaseValue:hover, .wealthProBlue .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .wealthProBlue .monthlyIncreaseValueRetire:hover, .wealthProBlue #radioBtn .active, #radioBtn .wealthProBlue .active, .wealthProBlue #radioBtnRetire .active, #radioBtnRetire .wealthProBlue .active { background-color: #48ABE0 !important; } .wealthProBlue .primaryColour, .wealthProBlue .primary, .wealthProBlue .ui-state-active, .wealthProBlue .loadMoreArrowDiv, .wealthProBlue .loadMoreArrow, .wealthProBlue .sectionHeaderPrimary, .wealthProBlue .btnGoal i::after, .btnGoal .wealthProBlue i::after, .wealthProBlue .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .wealthProBlue input[type="checkbox"]:checked + .label-text:before, .wealthProBlue .logoutDropDown, .wealthProBlue .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .wealthProBlue input[type="radio"]:checked + .label-text:before, .wealthProBlue .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .wealthProBlue input[type="radio"]:checked + .label-text:before, .wealthProBlue .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .wealthProBlue input[type="radio"]:checked + .label-text:before, .wealthProBlue .backIcon, .wealthProBlue .backIcon a, .backIcon .wealthProBlue a, .wealthProBlue .backIcon i, .backIcon .wealthProBlue i, .wealthProBlue .debitAmountChange i, .debitAmountChange .wealthProBlue i, .wealthProBlue .debitAmountChange .fa-times-circle, .debitAmountChange .wealthProBlue .fa-times-circle, .wealthProBlue .additionalLumpSum i, .additionalLumpSum .wealthProBlue i, .wealthProBlue .additionalLumpSum .fa-times-circle, .additionalLumpSum .wealthProBlue .fa-times-circle, .wealthProBlue .darkModal i, .darkModal .wealthProBlue i, .wealthProBlue .darkModal .fa-times-circle, .darkModal .wealthProBlue .fa-times-circle, .wealthProBlue .fundWithdrawal i, .fundWithdrawal .wealthProBlue i, .wealthProBlue .fundWithdrawal .fa-times-circle, .fundWithdrawal .wealthProBlue .fa-times-circle, .wealthProBlue .linkGoal i, .linkGoal .wealthProBlue i, .wealthProBlue .linkGoal .fa-times-circle, .linkGoal .wealthProBlue .fa-times-circle, .wealthProBlue .changeBackAccModal i, .changeBackAccModal .wealthProBlue i, .wealthProBlue .changeBackAccModal .fa-times-circle, .changeBackAccModal .wealthProBlue .fa-times-circle, .wealthProBlue .beneficiaries i, .beneficiaries .wealthProBlue i, .wealthProBlue .beneficiaries .fa-times-circle, .beneficiaries .wealthProBlue .fa-times-circle, .wealthProBlue .activeGoalModal i, .activeGoalModal .wealthProBlue i, .wealthProBlue .activeGoalModal .fa-times-circle, .activeGoalModal .wealthProBlue .fa-times-circle, .wealthProBlue .addBeneficiariesModal i, .addBeneficiariesModal .wealthProBlue i, .wealthProBlue .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .wealthProBlue .fa-times-circle, .wealthProBlue .editBeneficiariesModal i, .editBeneficiariesModal .wealthProBlue i, .wealthProBlue .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .wealthProBlue .fa-times-circle, .wealthProBlue .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .wealthProBlue i, .wealthProBlue .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .wealthProBlue .fa-times-circle, .wealthProBlue .editBankAccModal i, .editBankAccModal .wealthProBlue i, .wealthProBlue .editBankAccModal .fa-times-circle, .editBankAccModal .wealthProBlue .fa-times-circle, .wealthProBlue .oneTimePinModal i, .oneTimePinModal .wealthProBlue i, .wealthProBlue .oneTimePinModal .fa-times-circle, .oneTimePinModal .wealthProBlue .fa-times-circle, .wealthProBlue .changeEmailAddressModal i, .changeEmailAddressModal .wealthProBlue i, .wealthProBlue .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .wealthProBlue .fa-times-circle, .wealthProBlue .deleteConfirmation i, .deleteConfirmation .wealthProBlue i, .wealthProBlue .deleteConfirmation .fa-times-circle, .deleteConfirmation .wealthProBlue .fa-times-circle, .wealthProBlue .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .wealthProBlue i, .wealthProBlue .chevronRightIcon::after { color: #48ABE0 !important; } .wealthProBlue .primaryTextHighlight, .wealthProBlue .progress-bg-dark, .wealthProBlue .backIcon a:hover, .backIcon .wealthProBlue a:hover, .wealthProBlue .backIcon i:hover, .backIcon .wealthProBlue i:hover { color: rgba(72, 171, 224, 0.8) !important; } .wealthProBlue .primaryBorderBottom, .wealthProBlue .dottedPrimaryInput, .wealthProBlue .goalInput, .wealthProBlue .goalInputLrg, .wealthProBlue .goalInputEnd, .wealthProBlue .goalInputEndShort { border-bottom: 3px dotted #48ABE0; } .wealthProBlue .primaryBorder1px, .wealthProBlue .ui-datepicker td, .ui-datepicker .wealthProBlue td, .wealthProBlue #userSignature #resetSignature, #userSignature .wealthProBlue #resetSignature, .wealthProBlue #userSignatureOuter #resetSignature, #userSignatureOuter .wealthProBlue #resetSignature, .wealthProBlue .goalDateInput, .wealthProBlue .dateLumpSumWithdraw, .wealthProBlue .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .wealthProBlue .monthlyIncreaseValue, .wealthProBlue .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .wealthProBlue .monthlyIncreaseValueRetire, .wealthProBlue .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .wealthProBlue .monthlyIncreaseValue, .wealthProBlue .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .wealthProBlue .monthlyIncreaseValueRetire { border: solid 1px #48ABE0; } .wealthProBlue .primaryBorder, .wealthProBlue .btn-outline-primary, .wealthProBlue .tab-panel { border-color: #48ABE0; } .fspRed .primaryHighLight, .fspRed .btn-primary:hover, .fspRed .btn-primary:active, .fspRed .btn-primary:focus, .fspRed .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspRed .nav-link { background-color: rgba(221, 67, 67, 0.8); } .fspRed .primaryBgColour, .fspRed .primary-bg, .fspRed .primary-bar, .fspRed .primaryBody, .fspRed .inputGoalImage, .fspRed .deleteGoalImage, .fspRed .ui-widget-header, .fspRed .diamondNormal, .fspRed .diamond, .fspRed .diamondRisk, .fspRed .primaryRow, .fspRed .primaryBox, .fspRed .btn-primary, .fspRed .btn-outline-primary:hover, .fspRed .btn-outline-primary:active, .fspRed .btn-outline-primary:focus, .fspRed .progress-bg-dark, .fspRed .progress-primary-small .progress-bar, .progress-primary-small .fspRed .progress-bar, .fspRed .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspRed .active, .fspRed .goalTotalRow, .fspRed .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspRed .monthlyIncreaseValue:hover, .fspRed .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspRed .monthlyIncreaseValueRetire:hover, .fspRed .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspRed .monthlyIncreaseValue:hover, .fspRed .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspRed .monthlyIncreaseValueRetire:hover, .fspRed #radioBtn .active, #radioBtn .fspRed .active, .fspRed #radioBtnRetire .active, #radioBtnRetire .fspRed .active { background-color: #dd4343 !important; } .fspRed .primaryColour, .fspRed .primary, .fspRed .ui-state-active, .fspRed .loadMoreArrowDiv, .fspRed .loadMoreArrow, .fspRed .sectionHeaderPrimary, .fspRed .btnGoal i::after, .btnGoal .fspRed i::after, .fspRed .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspRed input[type="checkbox"]:checked + .label-text:before, .fspRed .logoutDropDown, .fspRed .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspRed input[type="radio"]:checked + .label-text:before, .fspRed .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspRed input[type="radio"]:checked + .label-text:before, .fspRed .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspRed input[type="radio"]:checked + .label-text:before, .fspRed .backIcon, .fspRed .backIcon a, .backIcon .fspRed a, .fspRed .backIcon i, .backIcon .fspRed i, .fspRed .debitAmountChange i, .debitAmountChange .fspRed i, .fspRed .debitAmountChange .fa-times-circle, .debitAmountChange .fspRed .fa-times-circle, .fspRed .additionalLumpSum i, .additionalLumpSum .fspRed i, .fspRed .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspRed .fa-times-circle, .fspRed .darkModal i, .darkModal .fspRed i, .fspRed .darkModal .fa-times-circle, .darkModal .fspRed .fa-times-circle, .fspRed .fundWithdrawal i, .fundWithdrawal .fspRed i, .fspRed .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspRed .fa-times-circle, .fspRed .linkGoal i, .linkGoal .fspRed i, .fspRed .linkGoal .fa-times-circle, .linkGoal .fspRed .fa-times-circle, .fspRed .changeBackAccModal i, .changeBackAccModal .fspRed i, .fspRed .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspRed .fa-times-circle, .fspRed .beneficiaries i, .beneficiaries .fspRed i, .fspRed .beneficiaries .fa-times-circle, .beneficiaries .fspRed .fa-times-circle, .fspRed .activeGoalModal i, .activeGoalModal .fspRed i, .fspRed .activeGoalModal .fa-times-circle, .activeGoalModal .fspRed .fa-times-circle, .fspRed .addBeneficiariesModal i, .addBeneficiariesModal .fspRed i, .fspRed .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspRed .fa-times-circle, .fspRed .editBeneficiariesModal i, .editBeneficiariesModal .fspRed i, .fspRed .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspRed .fa-times-circle, .fspRed .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspRed i, .fspRed .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspRed .fa-times-circle, .fspRed .editBankAccModal i, .editBankAccModal .fspRed i, .fspRed .editBankAccModal .fa-times-circle, .editBankAccModal .fspRed .fa-times-circle, .fspRed .oneTimePinModal i, .oneTimePinModal .fspRed i, .fspRed .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspRed .fa-times-circle, .fspRed .changeEmailAddressModal i, .changeEmailAddressModal .fspRed i, .fspRed .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspRed .fa-times-circle, .fspRed .deleteConfirmation i, .deleteConfirmation .fspRed i, .fspRed .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspRed .fa-times-circle, .fspRed .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspRed i, .fspRed .chevronRightIcon::after { color: #dd4343 !important; } .fspRed .primaryTextHighlight, .fspRed .progress-bg-dark, .fspRed .backIcon a:hover, .backIcon .fspRed a:hover, .fspRed .backIcon i:hover, .backIcon .fspRed i:hover { color: rgba(221, 67, 67, 0.8); } .fspRed .primaryBorderBottom, .fspRed .dottedPrimaryInput, .fspRed .goalInput, .fspRed .goalInputLrg, .fspRed .goalInputEnd, .fspRed .goalInputEndShort { border-bottom: 3px dotted #dd4343; } .fspRed .primaryBorder1px, .fspRed .ui-datepicker td, .ui-datepicker .fspRed td, .fspRed #userSignature #resetSignature, #userSignature .fspRed #resetSignature, .fspRed #userSignatureOuter #resetSignature, #userSignatureOuter .fspRed #resetSignature, .fspRed .goalDateInput, .fspRed .dateLumpSumWithdraw, .fspRed .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspRed .monthlyIncreaseValue, .fspRed .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspRed .monthlyIncreaseValueRetire, .fspRed .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspRed .monthlyIncreaseValue, .fspRed .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspRed .monthlyIncreaseValueRetire { border: solid 1px #dd4343; } .fspRed .primaryBorder, .fspRed .btn-outline-primary, .fspRed .tab-panel { border-color: #dd4343; } .fspLightRed .primaryHighLight, .fspLightRed .btn-primary:hover, .fspLightRed .btn-primary:active, .fspLightRed .btn-primary:focus, .fspLightRed .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspLightRed .nav-link { background-color: rgba(240, 115, 115, 0.8); } .fspLightRed .primaryBgColour, .fspLightRed .primary-bg, .fspLightRed .primary-bar, .fspLightRed .primaryBody, .fspLightRed .inputGoalImage, .fspLightRed .deleteGoalImage, .fspLightRed .ui-widget-header, .fspLightRed .diamondNormal, .fspLightRed .diamond, .fspLightRed .diamondRisk, .fspLightRed .primaryRow, .fspLightRed .primaryBox, .fspLightRed .btn-primary, .fspLightRed .btn-outline-primary:hover, .fspLightRed .btn-outline-primary:active, .fspLightRed .btn-outline-primary:focus, .fspLightRed .progress-bg-dark, .fspLightRed .progress-primary-small .progress-bar, .progress-primary-small .fspLightRed .progress-bar, .fspLightRed .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspLightRed .active, .fspLightRed .goalTotalRow, .fspLightRed .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspLightRed .monthlyIncreaseValue:hover, .fspLightRed .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspLightRed .monthlyIncreaseValueRetire:hover, .fspLightRed .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspLightRed .monthlyIncreaseValue:hover, .fspLightRed .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspLightRed .monthlyIncreaseValueRetire:hover, .fspLightRed #radioBtn .active, #radioBtn .fspLightRed .active, .fspLightRed #radioBtnRetire .active, #radioBtnRetire .fspLightRed .active { background-color: #f07373 !important; } .fspLightRed .primaryColour, .fspLightRed .primary, .fspLightRed .ui-state-active, .fspLightRed .loadMoreArrowDiv, .fspLightRed .loadMoreArrow, .fspLightRed .sectionHeaderPrimary, .fspLightRed .btnGoal i::after, .btnGoal .fspLightRed i::after, .fspLightRed .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspLightRed input[type="checkbox"]:checked + .label-text:before, .fspLightRed .logoutDropDown, .fspLightRed .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspLightRed input[type="radio"]:checked + .label-text:before, .fspLightRed .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspLightRed input[type="radio"]:checked + .label-text:before, .fspLightRed .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspLightRed input[type="radio"]:checked + .label-text:before, .fspLightRed .backIcon, .fspLightRed .backIcon a, .backIcon .fspLightRed a, .fspLightRed .backIcon i, .backIcon .fspLightRed i, .fspLightRed .debitAmountChange i, .debitAmountChange .fspLightRed i, .fspLightRed .debitAmountChange .fa-times-circle, .debitAmountChange .fspLightRed .fa-times-circle, .fspLightRed .additionalLumpSum i, .additionalLumpSum .fspLightRed i, .fspLightRed .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspLightRed .fa-times-circle, .fspLightRed .darkModal i, .darkModal .fspLightRed i, .fspLightRed .darkModal .fa-times-circle, .darkModal .fspLightRed .fa-times-circle, .fspLightRed .fundWithdrawal i, .fundWithdrawal .fspLightRed i, .fspLightRed .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspLightRed .fa-times-circle, .fspLightRed .linkGoal i, .linkGoal .fspLightRed i, .fspLightRed .linkGoal .fa-times-circle, .linkGoal .fspLightRed .fa-times-circle, .fspLightRed .changeBackAccModal i, .changeBackAccModal .fspLightRed i, .fspLightRed .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspLightRed .fa-times-circle, .fspLightRed .beneficiaries i, .beneficiaries .fspLightRed i, .fspLightRed .beneficiaries .fa-times-circle, .beneficiaries .fspLightRed .fa-times-circle, .fspLightRed .activeGoalModal i, .activeGoalModal .fspLightRed i, .fspLightRed .activeGoalModal .fa-times-circle, .activeGoalModal .fspLightRed .fa-times-circle, .fspLightRed .addBeneficiariesModal i, .addBeneficiariesModal .fspLightRed i, .fspLightRed .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspLightRed .fa-times-circle, .fspLightRed .editBeneficiariesModal i, .editBeneficiariesModal .fspLightRed i, .fspLightRed .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspLightRed .fa-times-circle, .fspLightRed .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspLightRed i, .fspLightRed .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspLightRed .fa-times-circle, .fspLightRed .editBankAccModal i, .editBankAccModal .fspLightRed i, .fspLightRed .editBankAccModal .fa-times-circle, .editBankAccModal .fspLightRed .fa-times-circle, .fspLightRed .oneTimePinModal i, .oneTimePinModal .fspLightRed i, .fspLightRed .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspLightRed .fa-times-circle, .fspLightRed .changeEmailAddressModal i, .changeEmailAddressModal .fspLightRed i, .fspLightRed .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspLightRed .fa-times-circle, .fspLightRed .deleteConfirmation i, .deleteConfirmation .fspLightRed i, .fspLightRed .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspLightRed .fa-times-circle, .fspLightRed .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspLightRed i, .fspLightRed .chevronRightIcon::after { color: #f07373 !important; } .fspLightRed .primaryBorderBottom, .fspLightRed .dottedPrimaryInput, .fspLightRed .goalInput, .fspLightRed .goalInputLrg, .fspLightRed .goalInputEnd, .fspLightRed .goalInputEndShort { border-bottom: 3px dotted #f07373; } .fspLightRed .primaryBorder1px, .fspLightRed .ui-datepicker td, .ui-datepicker .fspLightRed td, .fspLightRed #userSignature #resetSignature, #userSignature .fspLightRed #resetSignature, .fspLightRed #userSignatureOuter #resetSignature, #userSignatureOuter .fspLightRed #resetSignature, .fspLightRed .goalDateInput, .fspLightRed .dateLumpSumWithdraw, .fspLightRed .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspLightRed .monthlyIncreaseValue, .fspLightRed .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspLightRed .monthlyIncreaseValueRetire, .fspLightRed .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspLightRed .monthlyIncreaseValue, .fspLightRed .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspLightRed .monthlyIncreaseValueRetire { border: solid 1px #f07373; } .fspLightRed .primaryBorder, .fspLightRed .btn-outline-primary, .fspLightRed .tab-panel { border-color: #f07373; } .fspBrown .primaryHighLight, .fspBrown .btn-primary:hover, .fspBrown .btn-primary:active, .fspBrown .btn-primary:focus, .fspBrown .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspBrown .nav-link { background-color: rgba(199, 142, 68, 0.8); } .fspBrown .primaryBgColour, .fspBrown .primary-bg, .fspBrown .primary-bar, .fspBrown .primaryBody, .fspBrown .inputGoalImage, .fspBrown .deleteGoalImage, .fspBrown .ui-widget-header, .fspBrown .diamondNormal, .fspBrown .diamond, .fspBrown .diamondRisk, .fspBrown .primaryRow, .fspBrown .primaryBox, .fspBrown .btn-primary, .fspBrown .btn-outline-primary:hover, .fspBrown .btn-outline-primary:active, .fspBrown .btn-outline-primary:focus, .fspBrown .progress-bg-dark, .fspBrown .progress-primary-small .progress-bar, .progress-primary-small .fspBrown .progress-bar, .fspBrown .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspBrown .active, .fspBrown .goalTotalRow, .fspBrown .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspBrown .monthlyIncreaseValue:hover, .fspBrown .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspBrown .monthlyIncreaseValueRetire:hover, .fspBrown .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspBrown .monthlyIncreaseValue:hover, .fspBrown .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspBrown .monthlyIncreaseValueRetire:hover, .fspBrown #radioBtn .active, #radioBtn .fspBrown .active, .fspBrown #radioBtnRetire .active, #radioBtnRetire .fspBrown .active { background-color: #c78e44 !important; } .fspBrown .primaryColour, .fspBrown .primary, .fspBrown .ui-state-active, .fspBrown .loadMoreArrowDiv, .fspBrown .loadMoreArrow, .fspBrown .sectionHeaderPrimary, .fspBrown .btnGoal i::after, .btnGoal .fspBrown i::after, .fspBrown .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspBrown input[type="checkbox"]:checked + .label-text:before, .fspBrown .logoutDropDown, .fspBrown .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspBrown input[type="radio"]:checked + .label-text:before, .fspBrown .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspBrown input[type="radio"]:checked + .label-text:before, .fspBrown .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspBrown input[type="radio"]:checked + .label-text:before, .fspBrown .backIcon, .fspBrown .backIcon a, .backIcon .fspBrown a, .fspBrown .backIcon i, .backIcon .fspBrown i, .fspBrown .debitAmountChange i, .debitAmountChange .fspBrown i, .fspBrown .debitAmountChange .fa-times-circle, .debitAmountChange .fspBrown .fa-times-circle, .fspBrown .additionalLumpSum i, .additionalLumpSum .fspBrown i, .fspBrown .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspBrown .fa-times-circle, .fspBrown .darkModal i, .darkModal .fspBrown i, .fspBrown .darkModal .fa-times-circle, .darkModal .fspBrown .fa-times-circle, .fspBrown .fundWithdrawal i, .fundWithdrawal .fspBrown i, .fspBrown .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspBrown .fa-times-circle, .fspBrown .linkGoal i, .linkGoal .fspBrown i, .fspBrown .linkGoal .fa-times-circle, .linkGoal .fspBrown .fa-times-circle, .fspBrown .changeBackAccModal i, .changeBackAccModal .fspBrown i, .fspBrown .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspBrown .fa-times-circle, .fspBrown .beneficiaries i, .beneficiaries .fspBrown i, .fspBrown .beneficiaries .fa-times-circle, .beneficiaries .fspBrown .fa-times-circle, .fspBrown .activeGoalModal i, .activeGoalModal .fspBrown i, .fspBrown .activeGoalModal .fa-times-circle, .activeGoalModal .fspBrown .fa-times-circle, .fspBrown .addBeneficiariesModal i, .addBeneficiariesModal .fspBrown i, .fspBrown .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspBrown .fa-times-circle, .fspBrown .editBeneficiariesModal i, .editBeneficiariesModal .fspBrown i, .fspBrown .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspBrown .fa-times-circle, .fspBrown .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspBrown i, .fspBrown .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspBrown .fa-times-circle, .fspBrown .editBankAccModal i, .editBankAccModal .fspBrown i, .fspBrown .editBankAccModal .fa-times-circle, .editBankAccModal .fspBrown .fa-times-circle, .fspBrown .oneTimePinModal i, .oneTimePinModal .fspBrown i, .fspBrown .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspBrown .fa-times-circle, .fspBrown .changeEmailAddressModal i, .changeEmailAddressModal .fspBrown i, .fspBrown .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspBrown .fa-times-circle, .fspBrown .deleteConfirmation i, .deleteConfirmation .fspBrown i, .fspBrown .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspBrown .fa-times-circle, .fspBrown .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspBrown i, .fspBrown .chevronRightIcon::after { color: #c78e44 !important; } .fspBrown .primaryBorderBottom, .fspBrown .dottedPrimaryInput, .fspBrown .goalInput, .fspBrown .goalInputLrg, .fspBrown .goalInputEnd, .fspBrown .goalInputEndShort { border-bottom: 3px dotted #c78e44; } .fspBrown .primaryBorder1px, .fspBrown .ui-datepicker td, .ui-datepicker .fspBrown td, .fspBrown #userSignature #resetSignature, #userSignature .fspBrown #resetSignature, .fspBrown #userSignatureOuter #resetSignature, #userSignatureOuter .fspBrown #resetSignature, .fspBrown .goalDateInput, .fspBrown .dateLumpSumWithdraw, .fspBrown .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspBrown .monthlyIncreaseValue, .fspBrown .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspBrown .monthlyIncreaseValueRetire, .fspBrown .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspBrown .monthlyIncreaseValue, .fspBrown .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspBrown .monthlyIncreaseValueRetire { border: solid 1px #c78e44; } .fspBrown .primaryBorder, .fspBrown .btn-outline-primary, .fspBrown .tab-panel { border-color: #c78e44; } .fspOrange .primaryHighLight, .fspOrange .btn-primary:hover, .fspOrange .btn-primary:active, .fspOrange .btn-primary:focus, .fspOrange .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspOrange .nav-link { background-color: rgba(224, 127, 65, 0.8); } .fspOrange .primaryBgColour, .fspOrange .primary-bg, .fspOrange .primary-bar, .fspOrange .primaryBody, .fspOrange .inputGoalImage, .fspOrange .deleteGoalImage, .fspOrange .ui-widget-header, .fspOrange .diamondNormal, .fspOrange .diamond, .fspOrange .diamondRisk, .fspOrange .primaryRow, .fspOrange .primaryBox, .fspOrange .btn-primary, .fspOrange .btn-outline-primary:hover, .fspOrange .btn-outline-primary:active, .fspOrange .btn-outline-primary:focus, .fspOrange .progress-bg-dark, .fspOrange .progress-primary-small .progress-bar, .progress-primary-small .fspOrange .progress-bar, .fspOrange .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspOrange .active, .fspOrange .goalTotalRow, .fspOrange .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspOrange .monthlyIncreaseValue:hover, .fspOrange .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspOrange .monthlyIncreaseValueRetire:hover, .fspOrange .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspOrange .monthlyIncreaseValue:hover, .fspOrange .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspOrange .monthlyIncreaseValueRetire:hover, .fspOrange #radioBtn .active, #radioBtn .fspOrange .active, .fspOrange #radioBtnRetire .active, #radioBtnRetire .fspOrange .active { background-color: #e07f41 !important; } .fspOrange .primaryColour, .fspOrange .primary, .fspOrange .ui-state-active, .fspOrange .loadMoreArrowDiv, .fspOrange .loadMoreArrow, .fspOrange .sectionHeaderPrimary, .fspOrange .btnGoal i::after, .btnGoal .fspOrange i::after, .fspOrange .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspOrange input[type="checkbox"]:checked + .label-text:before, .fspOrange .logoutDropDown, .fspOrange .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspOrange input[type="radio"]:checked + .label-text:before, .fspOrange .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspOrange input[type="radio"]:checked + .label-text:before, .fspOrange .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspOrange input[type="radio"]:checked + .label-text:before, .fspOrange .backIcon, .fspOrange .backIcon a, .backIcon .fspOrange a, .fspOrange .backIcon i, .backIcon .fspOrange i, .fspOrange .debitAmountChange i, .debitAmountChange .fspOrange i, .fspOrange .debitAmountChange .fa-times-circle, .debitAmountChange .fspOrange .fa-times-circle, .fspOrange .additionalLumpSum i, .additionalLumpSum .fspOrange i, .fspOrange .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspOrange .fa-times-circle, .fspOrange .darkModal i, .darkModal .fspOrange i, .fspOrange .darkModal .fa-times-circle, .darkModal .fspOrange .fa-times-circle, .fspOrange .fundWithdrawal i, .fundWithdrawal .fspOrange i, .fspOrange .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspOrange .fa-times-circle, .fspOrange .linkGoal i, .linkGoal .fspOrange i, .fspOrange .linkGoal .fa-times-circle, .linkGoal .fspOrange .fa-times-circle, .fspOrange .changeBackAccModal i, .changeBackAccModal .fspOrange i, .fspOrange .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspOrange .fa-times-circle, .fspOrange .beneficiaries i, .beneficiaries .fspOrange i, .fspOrange .beneficiaries .fa-times-circle, .beneficiaries .fspOrange .fa-times-circle, .fspOrange .activeGoalModal i, .activeGoalModal .fspOrange i, .fspOrange .activeGoalModal .fa-times-circle, .activeGoalModal .fspOrange .fa-times-circle, .fspOrange .addBeneficiariesModal i, .addBeneficiariesModal .fspOrange i, .fspOrange .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspOrange .fa-times-circle, .fspOrange .editBeneficiariesModal i, .editBeneficiariesModal .fspOrange i, .fspOrange .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspOrange .fa-times-circle, .fspOrange .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspOrange i, .fspOrange .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspOrange .fa-times-circle, .fspOrange .editBankAccModal i, .editBankAccModal .fspOrange i, .fspOrange .editBankAccModal .fa-times-circle, .editBankAccModal .fspOrange .fa-times-circle, .fspOrange .oneTimePinModal i, .oneTimePinModal .fspOrange i, .fspOrange .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspOrange .fa-times-circle, .fspOrange .changeEmailAddressModal i, .changeEmailAddressModal .fspOrange i, .fspOrange .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspOrange .fa-times-circle, .fspOrange .deleteConfirmation i, .deleteConfirmation .fspOrange i, .fspOrange .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspOrange .fa-times-circle, .fspOrange .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspOrange i, .fspOrange .chevronRightIcon::after { color: #e07f41 !important; } .fspOrange .primaryBorderBottom, .fspOrange .dottedPrimaryInput, .fspOrange .goalInput, .fspOrange .goalInputLrg, .fspOrange .goalInputEnd, .fspOrange .goalInputEndShort { border-bottom: 3px dotted #e07f41; } .fspOrange .primaryBorder1px, .fspOrange .ui-datepicker td, .ui-datepicker .fspOrange td, .fspOrange #userSignature #resetSignature, #userSignature .fspOrange #resetSignature, .fspOrange #userSignatureOuter #resetSignature, #userSignatureOuter .fspOrange #resetSignature, .fspOrange .goalDateInput, .fspOrange .dateLumpSumWithdraw, .fspOrange .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspOrange .monthlyIncreaseValue, .fspOrange .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspOrange .monthlyIncreaseValueRetire, .fspOrange .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspOrange .monthlyIncreaseValue, .fspOrange .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspOrange .monthlyIncreaseValueRetire { border: solid 1px #e07f41; } .fspOrange .primaryBorder, .fspOrange .btn-outline-primary, .fspOrange .tab-panel { border-color: #e07f41; } .fspGrey .primaryHighLight, .fspGrey .btn-primary:hover, .fspGrey .btn-primary:active, .fspGrey .btn-primary:focus, .fspGrey .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspGrey .nav-link { background-color: rgba(162, 162, 162, 0.8); } .fspGrey .primaryBgColour, .fspGrey .primary-bg, .fspGrey .primary-bar, .fspGrey .primaryBody, .fspGrey .inputGoalImage, .fspGrey .deleteGoalImage, .fspGrey .ui-widget-header, .fspGrey .diamondNormal, .fspGrey .diamond, .fspGrey .diamondRisk, .fspGrey .primaryRow, .fspGrey .primaryBox, .fspGrey .btn-primary, .fspGrey .btn-outline-primary:hover, .fspGrey .btn-outline-primary:active, .fspGrey .btn-outline-primary:focus, .fspGrey .progress-bg-dark, .fspGrey .progress-primary-small .progress-bar, .progress-primary-small .fspGrey .progress-bar, .fspGrey .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspGrey .active, .fspGrey .goalTotalRow, .fspGrey .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspGrey .monthlyIncreaseValue:hover, .fspGrey .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspGrey .monthlyIncreaseValueRetire:hover, .fspGrey .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspGrey .monthlyIncreaseValue:hover, .fspGrey .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspGrey .monthlyIncreaseValueRetire:hover, .fspGrey #radioBtn .active, #radioBtn .fspGrey .active, .fspGrey #radioBtnRetire .active, #radioBtnRetire .fspGrey .active { background-color: #a2a2a2 !important; } .fspGrey .primaryColour, .fspGrey .primary, .fspGrey .ui-state-active, .fspGrey .loadMoreArrowDiv, .fspGrey .loadMoreArrow, .fspGrey .sectionHeaderPrimary, .fspGrey .btnGoal i::after, .btnGoal .fspGrey i::after, .fspGrey .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspGrey input[type="checkbox"]:checked + .label-text:before, .fspGrey .logoutDropDown, .fspGrey .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspGrey input[type="radio"]:checked + .label-text:before, .fspGrey .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspGrey input[type="radio"]:checked + .label-text:before, .fspGrey .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspGrey input[type="radio"]:checked + .label-text:before, .fspGrey .backIcon, .fspGrey .backIcon a, .backIcon .fspGrey a, .fspGrey .backIcon i, .backIcon .fspGrey i, .fspGrey .debitAmountChange i, .debitAmountChange .fspGrey i, .fspGrey .debitAmountChange .fa-times-circle, .debitAmountChange .fspGrey .fa-times-circle, .fspGrey .additionalLumpSum i, .additionalLumpSum .fspGrey i, .fspGrey .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspGrey .fa-times-circle, .fspGrey .darkModal i, .darkModal .fspGrey i, .fspGrey .darkModal .fa-times-circle, .darkModal .fspGrey .fa-times-circle, .fspGrey .fundWithdrawal i, .fundWithdrawal .fspGrey i, .fspGrey .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspGrey .fa-times-circle, .fspGrey .linkGoal i, .linkGoal .fspGrey i, .fspGrey .linkGoal .fa-times-circle, .linkGoal .fspGrey .fa-times-circle, .fspGrey .changeBackAccModal i, .changeBackAccModal .fspGrey i, .fspGrey .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspGrey .fa-times-circle, .fspGrey .beneficiaries i, .beneficiaries .fspGrey i, .fspGrey .beneficiaries .fa-times-circle, .beneficiaries .fspGrey .fa-times-circle, .fspGrey .activeGoalModal i, .activeGoalModal .fspGrey i, .fspGrey .activeGoalModal .fa-times-circle, .activeGoalModal .fspGrey .fa-times-circle, .fspGrey .addBeneficiariesModal i, .addBeneficiariesModal .fspGrey i, .fspGrey .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspGrey .fa-times-circle, .fspGrey .editBeneficiariesModal i, .editBeneficiariesModal .fspGrey i, .fspGrey .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspGrey .fa-times-circle, .fspGrey .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspGrey i, .fspGrey .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspGrey .fa-times-circle, .fspGrey .editBankAccModal i, .editBankAccModal .fspGrey i, .fspGrey .editBankAccModal .fa-times-circle, .editBankAccModal .fspGrey .fa-times-circle, .fspGrey .oneTimePinModal i, .oneTimePinModal .fspGrey i, .fspGrey .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspGrey .fa-times-circle, .fspGrey .changeEmailAddressModal i, .changeEmailAddressModal .fspGrey i, .fspGrey .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspGrey .fa-times-circle, .fspGrey .deleteConfirmation i, .deleteConfirmation .fspGrey i, .fspGrey .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspGrey .fa-times-circle, .fspGrey .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspGrey i, .fspGrey .chevronRightIcon::after { color: #a2a2a2 !important; } .fspGrey .primaryBorderBottom, .fspGrey .dottedPrimaryInput, .fspGrey .goalInput, .fspGrey .goalInputLrg, .fspGrey .goalInputEnd, .fspGrey .goalInputEndShort { border-bottom: 3px dotted #a2a2a2; } .fspGrey .primaryBorder1px, .fspGrey .ui-datepicker td, .ui-datepicker .fspGrey td, .fspGrey #userSignature #resetSignature, #userSignature .fspGrey #resetSignature, .fspGrey #userSignatureOuter #resetSignature, #userSignatureOuter .fspGrey #resetSignature, .fspGrey .goalDateInput, .fspGrey .dateLumpSumWithdraw, .fspGrey .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspGrey .monthlyIncreaseValue, .fspGrey .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspGrey .monthlyIncreaseValueRetire, .fspGrey .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspGrey .monthlyIncreaseValue, .fspGrey .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspGrey .monthlyIncreaseValueRetire { border: solid 1px #a2a2a2; } .fspGrey .primaryBorder, .fspGrey .btn-outline-primary, .fspGrey .tab-panel { border-color: #a2a2a2; } .fspGreen .primaryHighLight, .fspGreen .btn-primary:hover, .fspGreen .btn-primary:active, .fspGreen .btn-primary:focus, .fspGreen .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspGreen .nav-link { background-color: rgba(110, 171, 72, 0.8); } .fspGreen .primaryBgColour, .fspGreen .primary-bg, .fspGreen .primary-bar, .fspGreen .primaryBody, .fspGreen .inputGoalImage, .fspGreen .deleteGoalImage, .fspGreen .ui-widget-header, .fspGreen .diamondNormal, .fspGreen .diamond, .fspGreen .diamondRisk, .fspGreen .primaryRow, .fspGreen .primaryBox, .fspGreen .btn-primary, .fspGreen .btn-outline-primary:hover, .fspGreen .btn-outline-primary:active, .fspGreen .btn-outline-primary:focus, .fspGreen .progress-bg-dark, .fspGreen .progress-primary-small .progress-bar, .progress-primary-small .fspGreen .progress-bar, .fspGreen .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspGreen .active, .fspGreen .goalTotalRow, .fspGreen .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspGreen .monthlyIncreaseValue:hover, .fspGreen .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspGreen .monthlyIncreaseValueRetire:hover, .fspGreen .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspGreen .monthlyIncreaseValue:hover, .fspGreen .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspGreen .monthlyIncreaseValueRetire:hover, .fspGreen #radioBtn .active, #radioBtn .fspGreen .active, .fspGreen #radioBtnRetire .active, #radioBtnRetire .fspGreen .active { background-color: #6eab48 !important; } .fspGreen .primaryColour, .fspGreen .primary, .fspGreen .ui-state-active, .fspGreen .loadMoreArrowDiv, .fspGreen .loadMoreArrow, .fspGreen .sectionHeaderPrimary, .fspGreen .btnGoal i::after, .btnGoal .fspGreen i::after, .fspGreen .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspGreen input[type="checkbox"]:checked + .label-text:before, .fspGreen .logoutDropDown, .fspGreen .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspGreen input[type="radio"]:checked + .label-text:before, .fspGreen .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspGreen input[type="radio"]:checked + .label-text:before, .fspGreen .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspGreen input[type="radio"]:checked + .label-text:before, .fspGreen .backIcon, .fspGreen .backIcon a, .backIcon .fspGreen a, .fspGreen .backIcon i, .backIcon .fspGreen i, .fspGreen .debitAmountChange i, .debitAmountChange .fspGreen i, .fspGreen .debitAmountChange .fa-times-circle, .debitAmountChange .fspGreen .fa-times-circle, .fspGreen .additionalLumpSum i, .additionalLumpSum .fspGreen i, .fspGreen .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspGreen .fa-times-circle, .fspGreen .darkModal i, .darkModal .fspGreen i, .fspGreen .darkModal .fa-times-circle, .darkModal .fspGreen .fa-times-circle, .fspGreen .fundWithdrawal i, .fundWithdrawal .fspGreen i, .fspGreen .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspGreen .fa-times-circle, .fspGreen .linkGoal i, .linkGoal .fspGreen i, .fspGreen .linkGoal .fa-times-circle, .linkGoal .fspGreen .fa-times-circle, .fspGreen .changeBackAccModal i, .changeBackAccModal .fspGreen i, .fspGreen .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspGreen .fa-times-circle, .fspGreen .beneficiaries i, .beneficiaries .fspGreen i, .fspGreen .beneficiaries .fa-times-circle, .beneficiaries .fspGreen .fa-times-circle, .fspGreen .activeGoalModal i, .activeGoalModal .fspGreen i, .fspGreen .activeGoalModal .fa-times-circle, .activeGoalModal .fspGreen .fa-times-circle, .fspGreen .addBeneficiariesModal i, .addBeneficiariesModal .fspGreen i, .fspGreen .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspGreen .fa-times-circle, .fspGreen .editBeneficiariesModal i, .editBeneficiariesModal .fspGreen i, .fspGreen .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspGreen .fa-times-circle, .fspGreen .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspGreen i, .fspGreen .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspGreen .fa-times-circle, .fspGreen .editBankAccModal i, .editBankAccModal .fspGreen i, .fspGreen .editBankAccModal .fa-times-circle, .editBankAccModal .fspGreen .fa-times-circle, .fspGreen .oneTimePinModal i, .oneTimePinModal .fspGreen i, .fspGreen .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspGreen .fa-times-circle, .fspGreen .changeEmailAddressModal i, .changeEmailAddressModal .fspGreen i, .fspGreen .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspGreen .fa-times-circle, .fspGreen .deleteConfirmation i, .deleteConfirmation .fspGreen i, .fspGreen .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspGreen .fa-times-circle, .fspGreen .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspGreen i, .fspGreen .chevronRightIcon::after { color: #6eab48 !important; } .fspGreen .primaryBorderBottom, .fspGreen .dottedPrimaryInput, .fspGreen .goalInput, .fspGreen .goalInputLrg, .fspGreen .goalInputEnd, .fspGreen .goalInputEndShort { border-bottom: 3px dotted #6eab48; } .fspGreen .primaryBorder1px, .fspGreen .ui-datepicker td, .ui-datepicker .fspGreen td, .fspGreen #userSignature #resetSignature, #userSignature .fspGreen #resetSignature, .fspGreen #userSignatureOuter #resetSignature, #userSignatureOuter .fspGreen #resetSignature, .fspGreen .goalDateInput, .fspGreen .dateLumpSumWithdraw, .fspGreen .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspGreen .monthlyIncreaseValue, .fspGreen .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspGreen .monthlyIncreaseValueRetire, .fspGreen .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspGreen .monthlyIncreaseValue, .fspGreen .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspGreen .monthlyIncreaseValueRetire { border: solid 1px #6eab48; } .fspGreen .primaryBorder, .fspGreen .btn-outline-primary, .fspGreen .tab-panel { border-color: #6eab48; } .fspDarkGreen .primaryHighLight, .fspDarkGreen .btn-primary:hover, .fspDarkGreen .btn-primary:active, .fspDarkGreen .btn-primary:focus, .fspDarkGreen .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspDarkGreen .nav-link { background-color: rgba(57, 178, 112, 0.8); } .fspDarkGreen .primaryBgColour, .fspDarkGreen .primary-bg, .fspDarkGreen .primary-bar, .fspDarkGreen .primaryBody, .fspDarkGreen .inputGoalImage, .fspDarkGreen .deleteGoalImage, .fspDarkGreen .ui-widget-header, .fspDarkGreen .diamondNormal, .fspDarkGreen .diamond, .fspDarkGreen .diamondRisk, .fspDarkGreen .primaryRow, .fspDarkGreen .primaryBox, .fspDarkGreen .btn-primary, .fspDarkGreen .btn-outline-primary:hover, .fspDarkGreen .btn-outline-primary:active, .fspDarkGreen .btn-outline-primary:focus, .fspDarkGreen .progress-bg-dark, .fspDarkGreen .progress-primary-small .progress-bar, .progress-primary-small .fspDarkGreen .progress-bar, .fspDarkGreen .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspDarkGreen .active, .fspDarkGreen .goalTotalRow, .fspDarkGreen .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspDarkGreen .monthlyIncreaseValue:hover, .fspDarkGreen .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspDarkGreen .monthlyIncreaseValueRetire:hover, .fspDarkGreen .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspDarkGreen .monthlyIncreaseValue:hover, .fspDarkGreen .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspDarkGreen .monthlyIncreaseValueRetire:hover, .fspDarkGreen #radioBtn .active, #radioBtn .fspDarkGreen .active, .fspDarkGreen #radioBtnRetire .active, #radioBtnRetire .fspDarkGreen .active { background-color: #39b270 !important; } .fspDarkGreen .primaryColour, .fspDarkGreen .primary, .fspDarkGreen .ui-state-active, .fspDarkGreen .loadMoreArrowDiv, .fspDarkGreen .loadMoreArrow, .fspDarkGreen .sectionHeaderPrimary, .fspDarkGreen .btnGoal i::after, .btnGoal .fspDarkGreen i::after, .fspDarkGreen .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspDarkGreen input[type="checkbox"]:checked + .label-text:before, .fspDarkGreen .logoutDropDown, .fspDarkGreen .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspDarkGreen input[type="radio"]:checked + .label-text:before, .fspDarkGreen .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspDarkGreen input[type="radio"]:checked + .label-text:before, .fspDarkGreen .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspDarkGreen input[type="radio"]:checked + .label-text:before, .fspDarkGreen .backIcon, .fspDarkGreen .backIcon a, .backIcon .fspDarkGreen a, .fspDarkGreen .backIcon i, .backIcon .fspDarkGreen i, .fspDarkGreen .debitAmountChange i, .debitAmountChange .fspDarkGreen i, .fspDarkGreen .debitAmountChange .fa-times-circle, .debitAmountChange .fspDarkGreen .fa-times-circle, .fspDarkGreen .additionalLumpSum i, .additionalLumpSum .fspDarkGreen i, .fspDarkGreen .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspDarkGreen .fa-times-circle, .fspDarkGreen .darkModal i, .darkModal .fspDarkGreen i, .fspDarkGreen .darkModal .fa-times-circle, .darkModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .fundWithdrawal i, .fundWithdrawal .fspDarkGreen i, .fspDarkGreen .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspDarkGreen .fa-times-circle, .fspDarkGreen .linkGoal i, .linkGoal .fspDarkGreen i, .fspDarkGreen .linkGoal .fa-times-circle, .linkGoal .fspDarkGreen .fa-times-circle, .fspDarkGreen .changeBackAccModal i, .changeBackAccModal .fspDarkGreen i, .fspDarkGreen .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .beneficiaries i, .beneficiaries .fspDarkGreen i, .fspDarkGreen .beneficiaries .fa-times-circle, .beneficiaries .fspDarkGreen .fa-times-circle, .fspDarkGreen .activeGoalModal i, .activeGoalModal .fspDarkGreen i, .fspDarkGreen .activeGoalModal .fa-times-circle, .activeGoalModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .addBeneficiariesModal i, .addBeneficiariesModal .fspDarkGreen i, .fspDarkGreen .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .editBeneficiariesModal i, .editBeneficiariesModal .fspDarkGreen i, .fspDarkGreen .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspDarkGreen i, .fspDarkGreen .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspDarkGreen .fa-times-circle, .fspDarkGreen .editBankAccModal i, .editBankAccModal .fspDarkGreen i, .fspDarkGreen .editBankAccModal .fa-times-circle, .editBankAccModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .oneTimePinModal i, .oneTimePinModal .fspDarkGreen i, .fspDarkGreen .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .changeEmailAddressModal i, .changeEmailAddressModal .fspDarkGreen i, .fspDarkGreen .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspDarkGreen .fa-times-circle, .fspDarkGreen .deleteConfirmation i, .deleteConfirmation .fspDarkGreen i, .fspDarkGreen .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspDarkGreen .fa-times-circle, .fspDarkGreen .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspDarkGreen i, .fspDarkGreen .chevronRightIcon::after { color: #39b270 !important; } .fspDarkGreen .primaryBorderBottom, .fspDarkGreen .dottedPrimaryInput, .fspDarkGreen .goalInput, .fspDarkGreen .goalInputLrg, .fspDarkGreen .goalInputEnd, .fspDarkGreen .goalInputEndShort { border-bottom: 3px dotted #39b270; } .fspDarkGreen .primaryBorder1px, .fspDarkGreen .ui-datepicker td, .ui-datepicker .fspDarkGreen td, .fspDarkGreen #userSignature #resetSignature, #userSignature .fspDarkGreen #resetSignature, .fspDarkGreen #userSignatureOuter #resetSignature, #userSignatureOuter .fspDarkGreen #resetSignature, .fspDarkGreen .goalDateInput, .fspDarkGreen .dateLumpSumWithdraw, .fspDarkGreen .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspDarkGreen .monthlyIncreaseValue, .fspDarkGreen .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspDarkGreen .monthlyIncreaseValueRetire, .fspDarkGreen .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspDarkGreen .monthlyIncreaseValue, .fspDarkGreen .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspDarkGreen .monthlyIncreaseValueRetire { border: solid 1px #39b270; } .fspDarkGreen .primaryBorder, .fspDarkGreen .btn-outline-primary, .fspDarkGreen .tab-panel { border-color: #39b270; } .fspDarkEmeraldGreen .primaryHighLight, .fspDarkEmeraldGreen .btn-primary:hover, .fspDarkEmeraldGreen .btn-primary:active, .fspDarkEmeraldGreen .btn-primary:focus, .fspDarkEmeraldGreen .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspDarkEmeraldGreen .nav-link { background-color: rgba(0, 85, 65, 0.8); } .fspDarkEmeraldGreen .primaryBgColour, .fspDarkEmeraldGreen .primary-bg, .fspDarkEmeraldGreen .primary-bar, .fspDarkEmeraldGreen .primaryBody, .fspDarkEmeraldGreen .inputGoalImage, .fspDarkEmeraldGreen .deleteGoalImage, .fspDarkEmeraldGreen .ui-widget-header, .fspDarkEmeraldGreen .diamondNormal, .fspDarkEmeraldGreen .diamond, .fspDarkEmeraldGreen .diamondRisk, .fspDarkEmeraldGreen .primaryRow, .fspDarkEmeraldGreen .primaryBox, .fspDarkEmeraldGreen .btn-primary, .fspDarkEmeraldGreen .btn-outline-primary:hover, .fspDarkEmeraldGreen .btn-outline-primary:active, .fspDarkEmeraldGreen .btn-outline-primary:focus, .fspDarkEmeraldGreen .progress-bg-dark, .fspDarkEmeraldGreen .progress-primary-small .progress-bar, .progress-primary-small .fspDarkEmeraldGreen .progress-bar, .fspDarkEmeraldGreen .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspDarkEmeraldGreen .active, .fspDarkEmeraldGreen .goalTotalRow, .fspDarkEmeraldGreen .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspDarkEmeraldGreen .monthlyIncreaseValue:hover, .fspDarkEmeraldGreen .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspDarkEmeraldGreen .monthlyIncreaseValueRetire:hover, .fspDarkEmeraldGreen .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspDarkEmeraldGreen .monthlyIncreaseValue:hover, .fspDarkEmeraldGreen .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspDarkEmeraldGreen .monthlyIncreaseValueRetire:hover, .fspDarkEmeraldGreen #radioBtn .active, #radioBtn .fspDarkEmeraldGreen .active, .fspDarkEmeraldGreen #radioBtnRetire .active, #radioBtnRetire .fspDarkEmeraldGreen .active { background-color: #005541 !important; } .fspDarkEmeraldGreen .primaryColour, .fspDarkEmeraldGreen .primary, .fspDarkEmeraldGreen .ui-state-active, .fspDarkEmeraldGreen .loadMoreArrowDiv, .fspDarkEmeraldGreen .loadMoreArrow, .fspDarkEmeraldGreen .sectionHeaderPrimary, .fspDarkEmeraldGreen .btnGoal i::after, .btnGoal .fspDarkEmeraldGreen i::after, .fspDarkEmeraldGreen .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspDarkEmeraldGreen input[type="checkbox"]:checked + .label-text:before, .fspDarkEmeraldGreen .logoutDropDown, .fspDarkEmeraldGreen .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspDarkEmeraldGreen input[type="radio"]:checked + .label-text:before, .fspDarkEmeraldGreen .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspDarkEmeraldGreen input[type="radio"]:checked + .label-text:before, .fspDarkEmeraldGreen .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspDarkEmeraldGreen input[type="radio"]:checked + .label-text:before, .fspDarkEmeraldGreen .backIcon, .fspDarkEmeraldGreen .backIcon a, .backIcon .fspDarkEmeraldGreen a, .fspDarkEmeraldGreen .backIcon i, .backIcon .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .debitAmountChange i, .debitAmountChange .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .debitAmountChange .fa-times-circle, .debitAmountChange .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .additionalLumpSum i, .additionalLumpSum .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .darkModal i, .darkModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .darkModal .fa-times-circle, .darkModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .fundWithdrawal i, .fundWithdrawal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .linkGoal i, .linkGoal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .linkGoal .fa-times-circle, .linkGoal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .changeBackAccModal i, .changeBackAccModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .beneficiaries i, .beneficiaries .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .beneficiaries .fa-times-circle, .beneficiaries .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .activeGoalModal i, .activeGoalModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .activeGoalModal .fa-times-circle, .activeGoalModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .addBeneficiariesModal i, .addBeneficiariesModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .editBeneficiariesModal i, .editBeneficiariesModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .editBankAccModal i, .editBankAccModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .editBankAccModal .fa-times-circle, .editBankAccModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .oneTimePinModal i, .oneTimePinModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .changeEmailAddressModal i, .changeEmailAddressModal .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .deleteConfirmation i, .deleteConfirmation .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspDarkEmeraldGreen .fa-times-circle, .fspDarkEmeraldGreen .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspDarkEmeraldGreen i, .fspDarkEmeraldGreen .chevronRightIcon::after { color: #005541 !important; } .fspDarkEmeraldGreen .primaryBorderBottom, .fspDarkEmeraldGreen .dottedPrimaryInput, .fspDarkEmeraldGreen .goalInput, .fspDarkEmeraldGreen .goalInputLrg, .fspDarkEmeraldGreen .goalInputEnd, .fspDarkEmeraldGreen .goalInputEndShort { border-bottom: 3px dotted #005541; } .fspDarkEmeraldGreen .primaryBorder1px, .fspDarkEmeraldGreen .ui-datepicker td, .ui-datepicker .fspDarkEmeraldGreen td, .fspDarkEmeraldGreen #userSignature #resetSignature, #userSignature .fspDarkEmeraldGreen #resetSignature, .fspDarkEmeraldGreen #userSignatureOuter #resetSignature, #userSignatureOuter .fspDarkEmeraldGreen #resetSignature, .fspDarkEmeraldGreen .goalDateInput, .fspDarkEmeraldGreen .dateLumpSumWithdraw, .fspDarkEmeraldGreen .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspDarkEmeraldGreen .monthlyIncreaseValue, .fspDarkEmeraldGreen .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspDarkEmeraldGreen .monthlyIncreaseValueRetire, .fspDarkEmeraldGreen .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspDarkEmeraldGreen .monthlyIncreaseValue, .fspDarkEmeraldGreen .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspDarkEmeraldGreen .monthlyIncreaseValueRetire { border: solid 1px #005541; } .fspDarkEmeraldGreen .primaryBorder, .fspDarkEmeraldGreen .btn-outline-primary, .fspDarkEmeraldGreen .tab-panel { border-color: #005541; } .fspLightBlue .primaryHighLight, .fspLightBlue .btn-primary:hover, .fspLightBlue .btn-primary:active, .fspLightBlue .btn-primary:focus, .fspLightBlue .nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .fspLightBlue .nav-link { background-color: rgba(65, 181, 204, 0.8); } .fspLightBlue .primaryBgColour, .fspLightBlue .primary-bg, .fspLightBlue .primary-bar, .fspLightBlue .primaryBody, .fspLightBlue .inputGoalImage, .fspLightBlue .deleteGoalImage, .fspLightBlue .ui-widget-header, .fspLightBlue .diamondNormal, .fspLightBlue .diamond, .fspLightBlue .diamondRisk, .fspLightBlue .primaryRow, .fspLightBlue .primaryBox, .fspLightBlue .btn-primary, .fspLightBlue .btn-outline-primary:hover, .fspLightBlue .btn-outline-primary:active, .fspLightBlue .btn-outline-primary:focus, .fspLightBlue .progress-bg-dark, .fspLightBlue .progress-primary-small .progress-bar, .progress-primary-small .fspLightBlue .progress-bar, .fspLightBlue .nav-tabs .nav-item .active, .nav-tabs .nav-item .fspLightBlue .active, .fspLightBlue .goalTotalRow, .fspLightBlue .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .fspLightBlue .monthlyIncreaseValue:hover, .fspLightBlue .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncrease .fspLightBlue .monthlyIncreaseValueRetire:hover, .fspLightBlue .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .fspLightBlue .monthlyIncreaseValue:hover, .fspLightBlue .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .fspLightBlue .monthlyIncreaseValueRetire:hover, .fspLightBlue #radioBtn .active, #radioBtn .fspLightBlue .active, .fspLightBlue #radioBtnRetire .active, #radioBtnRetire .fspLightBlue .active { background-color: #41b5cc !important; } .fspLightBlue .primaryColour, .fspLightBlue .primary, .fspLightBlue .ui-state-active, .fspLightBlue .loadMoreArrowDiv, .fspLightBlue .loadMoreArrow, .fspLightBlue .sectionHeaderPrimary, .fspLightBlue .btnGoal i::after, .btnGoal .fspLightBlue i::after, .fspLightBlue .customCheckPrimary input[type="checkbox"]:checked + .label-text:before, .customCheckPrimary .fspLightBlue input[type="checkbox"]:checked + .label-text:before, .fspLightBlue .logoutDropDown, .fspLightBlue .customRadioPrimary input[type="radio"]:checked + .label-text:before, .customRadioPrimary .fspLightBlue input[type="radio"]:checked + .label-text:before, .fspLightBlue .presentBiasRadio input[type="radio"]:checked + .label-text:before, .presentBiasRadio .fspLightBlue input[type="radio"]:checked + .label-text:before, .fspLightBlue .confirmationBiasRadio input[type="radio"]:checked + .label-text:before, .confirmationBiasRadio .fspLightBlue input[type="radio"]:checked + .label-text:before, .fspLightBlue .backIcon, .fspLightBlue .backIcon a, .backIcon .fspLightBlue a, .fspLightBlue .backIcon i, .backIcon .fspLightBlue i, .fspLightBlue .debitAmountChange i, .debitAmountChange .fspLightBlue i, .fspLightBlue .debitAmountChange .fa-times-circle, .debitAmountChange .fspLightBlue .fa-times-circle, .fspLightBlue .additionalLumpSum i, .additionalLumpSum .fspLightBlue i, .fspLightBlue .additionalLumpSum .fa-times-circle, .additionalLumpSum .fspLightBlue .fa-times-circle, .fspLightBlue .darkModal i, .darkModal .fspLightBlue i, .fspLightBlue .darkModal .fa-times-circle, .darkModal .fspLightBlue .fa-times-circle, .fspLightBlue .fundWithdrawal i, .fundWithdrawal .fspLightBlue i, .fspLightBlue .fundWithdrawal .fa-times-circle, .fundWithdrawal .fspLightBlue .fa-times-circle, .fspLightBlue .linkGoal i, .linkGoal .fspLightBlue i, .fspLightBlue .linkGoal .fa-times-circle, .linkGoal .fspLightBlue .fa-times-circle, .fspLightBlue .changeBackAccModal i, .changeBackAccModal .fspLightBlue i, .fspLightBlue .changeBackAccModal .fa-times-circle, .changeBackAccModal .fspLightBlue .fa-times-circle, .fspLightBlue .beneficiaries i, .beneficiaries .fspLightBlue i, .fspLightBlue .beneficiaries .fa-times-circle, .beneficiaries .fspLightBlue .fa-times-circle, .fspLightBlue .activeGoalModal i, .activeGoalModal .fspLightBlue i, .fspLightBlue .activeGoalModal .fa-times-circle, .activeGoalModal .fspLightBlue .fa-times-circle, .fspLightBlue .addBeneficiariesModal i, .addBeneficiariesModal .fspLightBlue i, .fspLightBlue .addBeneficiariesModal .fa-times-circle, .addBeneficiariesModal .fspLightBlue .fa-times-circle, .fspLightBlue .editBeneficiariesModal i, .editBeneficiariesModal .fspLightBlue i, .fspLightBlue .editBeneficiariesModal .fa-times-circle, .editBeneficiariesModal .fspLightBlue .fa-times-circle, .fspLightBlue .addBeneficiariesModalOnEditInvestment i, .addBeneficiariesModalOnEditInvestment .fspLightBlue i, .fspLightBlue .addBeneficiariesModalOnEditInvestment .fa-times-circle, .addBeneficiariesModalOnEditInvestment .fspLightBlue .fa-times-circle, .fspLightBlue .editBankAccModal i, .editBankAccModal .fspLightBlue i, .fspLightBlue .editBankAccModal .fa-times-circle, .editBankAccModal .fspLightBlue .fa-times-circle, .fspLightBlue .oneTimePinModal i, .oneTimePinModal .fspLightBlue i, .fspLightBlue .oneTimePinModal .fa-times-circle, .oneTimePinModal .fspLightBlue .fa-times-circle, .fspLightBlue .changeEmailAddressModal i, .changeEmailAddressModal .fspLightBlue i, .fspLightBlue .changeEmailAddressModal .fa-times-circle, .changeEmailAddressModal .fspLightBlue .fa-times-circle, .fspLightBlue .deleteConfirmation i, .deleteConfirmation .fspLightBlue i, .fspLightBlue .deleteConfirmation .fa-times-circle, .deleteConfirmation .fspLightBlue .fa-times-circle, .fspLightBlue .goalOverlayModel .modal-content .modal-body a i, .goalOverlayModel .modal-content .modal-body a .fspLightBlue i, .fspLightBlue .chevronRightIcon::after { color: #41b5cc !important; } .fspLightBlue .primaryBorderBottom, .fspLightBlue .dottedPrimaryInput, .fspLightBlue .goalInput, .fspLightBlue .goalInputLrg, .fspLightBlue .goalInputEnd, .fspLightBlue .goalInputEndShort { border-bottom: 3px dotted #41b5cc; } .fspLightBlue .primaryBorder1px, .fspLightBlue .ui-datepicker td, .ui-datepicker .fspLightBlue td, .fspLightBlue #userSignature #resetSignature, #userSignature .fspLightBlue #resetSignature, .fspLightBlue #userSignatureOuter #resetSignature, #userSignatureOuter .fspLightBlue #resetSignature, .fspLightBlue .goalDateInput, .fspLightBlue .dateLumpSumWithdraw, .fspLightBlue .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .fspLightBlue .monthlyIncreaseValue, .fspLightBlue .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncrease .fspLightBlue .monthlyIncreaseValueRetire, .fspLightBlue .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .fspLightBlue .monthlyIncreaseValue, .fspLightBlue .monthlyIncreaseRetire .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .fspLightBlue .monthlyIncreaseValueRetire { border: solid 1px #41b5cc; } .fspLightBlue .primaryBorder, .fspLightBlue .btn-outline-primary, .fspLightBlue .tab-panel { border-color: #41b5cc; } .dark, .tab-panel { color: #363f48; } .secondary { color: #979EA8; } .warning { color: #DDb02F; } .light { color: #f6f9fa; } .light-grey { color: #e8e9eb; } .success { color: #13D59F; } .alert-color { color: red; } .weight300 { font-weight: 300; } .weight400 { font-weight: 400; } .weight500 { font-weight: 500; } .weight700 { font-weight: 700; } .lineh-1 { line-height: 1em !important; } .lineh-2 { line-height: 1.2em !important; } .lineh-3 { line-height: 1.5em !important; } .lineh-4 { line-height: 1.8em !important; } *, *::before, *::after { box-sizing: border-box; } .border-w { border: 1px solid white; border-radius: 2px; } html { height: 100%; font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 12px; font-weight: 300; line-height: 20px; } /*@-ms-viewport { width: device-width; }*/ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { height: 90%; font-family: Montserrat, "Work Sans", sans-serif; color: #fff; background-color: #363f48; } .hidden { display: none; } .footer { background-color: #363f48; padding: 1%; } footer { background-color: #363f48; padding: 1%; } p { line-height: 0.9em; font-size: 14px; } h1 { font-size: 1.6em; font-weight: bold; line-height: 1em; text-transform: uppercase; } h2 { font-size: 2.5em; font-weight: bold; line-height: 1.5em; } h3 { font-size: 1.6em; font-weight: bold; } h4 { font-size: 1.6em; font-weight: 300; } h5 { font-size: 0.9em; line-height: 1.2em; } h6 { font-size: 0.8em; font-weight: 600; } label, .custom-file-input, .custom-file-input-1, .smallerLabel { font-size: 1em; font-weight: 600; margin-bottom: 0; } .largerLabel { font-size: 14px; } .h2 { font-size: 2.5em !important; } .h3 { font-size: 1.6em !important; } .h5 { font-size: 0.8em !important; } .p { font-size: 1em !important; line-height: 0.9em; } b { font-weight: 600; } .h-8 { height: 8px !important; } .hw-60 { height: 60px !important; width: 60px !important; } @media (max-width: 640px) { .hw-60 { height: 50px !important; width: 50px !important; } } .hw-80 { height: 80px !important; width: 80px !important; } @media (max-width: 640px) { .hw-80 { height: 60px !important; width: 60px !important; } } .fullWhiteBody { background-color: #fff; color: #363F48; text-align: center; } .whiteBody { background-color: #fff; color: #363F48; } .d-flex { display: -ms-flexbox !important; display: flex !important; display: -webkit-flex !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; -webkit-flex-direction: column !important; } .flex-fill { -ms-flex: 1 1 auto !important; -webkit-flex: 1 1 auto !important; flex: 1 1 auto !important; } .textAlignLeft { text-align: left !important; } .textAlignRight { text-align: right !important; } .background-img { background: url("?c=index/xfilefrontend&name=home-banner.jpg") center center fixed; } .text-normal { font-weight: normal; } .text-bold { font-weight: bold; } .primary-bar { z-index: 1; } .primaryBody { width: 100%; height: 100%; color: #fff; padding: 5%; } .autoCompleteResult { background-color: white; margin-top: -5px; padding: 5px; border-radius: 0 0 3px 3px; z-index: 1; position: absolute; } .autoCompleteResult p { padding: 5px 0; border-bottom: solid 1px #f6f9fa; color: black; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .darkBackground { width: 100%; background-color: #363f48 !important; } a { color: #47AAE0; text-decoration: none; background-color: transparent; } a:hover { color: #2084bb; text-decoration: underline; } .tooltip { font-size: 1.2em; } .img-fluid { max-width: 100%; height: auto; } .inputGoalImage { width: 3.5em; height: 3.5em; color: #fff; border-radius: 50%; cursor: pointer; } .inputGoalImage .fa-2x { font-size: 1.4em; } .deleteGoalImage { width: 3.5em; height: 3.5em; color: #fff; border-radius: 50%; cursor: pointer; } .deleteGoalImage .fa-2x { font-size: 1.4em; } .pt-2-5 { padding-top: 0.8rem !important; } .word-break { -ms-word-break: break-all; word-break: break-all; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .truncate { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Limit image width to avoid overflow the container */ .goalImg { width: 120px; max-width: 100%; /* This rule is very important, please do not ignore this! */ } .cropper-container { max-width: 640px; margin: 20px auto; } #goalImageResult { border-radius: 50%; width: 100px; height: 100px; } .showConfirmationBias { display: none !important; } .showPresentBias { display: none !important; } .logo { margin-left: auto; margin-right: auto; } /*the width of the main body*/ .mobile-body { width: 700px; padding: 2.5em 5em; } .container { max-width: 1140px; } .fullBody { min-height: 100%; } .darkBody { background-color: #363f48; width: 800px; padding: 2em 8em 8em; text-align: center; } .list-icon { background: #ffc0c0; width: 100px; height: 100px; border-radius: 50%; text-align: center; line-height: 100px; vertical-align: middle; padding: 30px; } .custom-select { margin: 0 0 0px; font-size: 1.4em !important; height: calc(3.5rem + 2px) !important; } .login-input { margin: 5px 0 10px; } select, select:hover, select:active, select:focus { border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } textarea, input { font-size: 1.4em !important; height: calc(3.5rem + 2px) !important; -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } textarea:focus, input:focus { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; outline: none; border: none; } textarea:active, input:active { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; outline: none; border: none; } .increaseEnd { line-height: 2.5em; } .ui-widget-content { background: none; background-color: #fff; border: solid 4px #fff; color: #979EA8; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Montserrat, "Work Sans", sans-serif; font-size: 1em; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 3em; text-align: center; } .ui-datepicker-title { color: #f6f9fa !important; } .ui-widget-header { border: none; border-bottom: solid 1px #979EA8; color: #979EA8; font-weight: bold; padding: 2em 0; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: 0; } .ui-datepicker td a { text-align: center; } .ui-icon-circle-triangle-w { background-position: -16px -192px; } .ui-icon-circle-triangle-e { background-position: 0 -192px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: none; background: none; font-weight: bold; color: #363f48; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none; background: none; font-weight: 800; } .ui-state-hover, .ui-widget-content .ui-state-hover { border: none; background: none; font-weight: bold; color: #979EA8; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: none; background: none; color: #979EA8; } .greyText { color: grey !important; } .loadMoreArrowDiv { padding-top: 1.8em; font-weight: 800 !important; } .loadMoreArrowDiv i { float: right; margin-right: 0 !important; } .loadMoreArrowDiv i::before { content: "\f105"; font-family: "FontAwesome"; speak: none; font-style: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; background-color: transparent; font-size: 2em; border: none; display: inline-block; text-rendering: auto; } .loadMoreArrow { float: right; margin-right: 0 !important; } .loadMoreArrow::before { content: "\f105"; font-family: "FontAwesome"; speak: none; font-style: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; background-color: transparent; font-size: 2em; border: none; display: inline-block; text-rendering: auto; } .diamondNormal { height: 40px; width: 40px; margin-left: auto; margin-right: auto; transform: rotate(45deg); margin-top: -20px; } .diamond { height: 40px; width: 40px; margin-left: auto; margin-right: auto; margin-top: -25%; transform: rotate(45deg); } .diamondRisk { height: 26px; width: 26px; margin-left: auto; margin-right: auto; margin-top: -20%; transform: rotate(45deg); } .caretDown { height: inherit; padding: 0; } .caretDown img { vertical-align: top !important; height: 100%; } .riskProfileIndicator { height: inherit; padding: 0; } .riskProfileHeight { height: 25px; } .otpMsg { color: #DDb02F; font-style: italic; } .dottedPrimaryInput { border: none; color: #363f48; width: 100%; text-align: center; } .lrgInput { font-size: 2.5em !important; font-weight: 700; } .primaryRow { color: #fff; } .primaryRow p, .primaryRow h1 { margin-left: auto; margin-right: auto; } .correctAnswer { color: #fff; background-color: #00c28e; } .correctAnswer p, .correctAnswer h1 { margin-left: auto; margin-right: auto; } .incorrectAnswer { color: #fff; background-color: #d69a00; } .incorrectAnswer p, .incorrectAnswer h1 { margin-left: auto; margin-right: auto; } .form-control { height: 34px; } [type=reset], [type=submit], button, html [type=button] { -webkit-appearance: none; } .col-form-label { font-size: 14px; line-height: 1.2em; margin: auto 0; } .dashboardLogo { width: 20em; } .sectionHeaderPrimary { text-transform: uppercase; font-weight: 700; } a { text-decoration: none !important; } .box { border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.4) 3px 7px 10px; } .primaryBox { border-radius: 5px; padding: 1em; text-align: right; } .btn { font-family: Montserrat, "Work Sans"; font-size: 1.5em !important; font-weight: 500; padding: .55rem 0; line-height: 1.9em; } .btn:hover, .btn:active, .btn:visited, .btn:focus { box-shadow: none !important; } .btn-block:hover, .btn-block:active, .btn-block:visited, .btn-block:focus { box-shadow: none !important; } .btn-logout { font-size: 1.3em !important; } .btn-white-default { width: 100%; border-color: #363f48; color: #363f48 !important; } .btn-white { display: inline-block; width: 100%; background-color: #fff; color: #363f48; padding: 10px; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.4) 3px 7px 10px; line-height: 2em; margin-top: 0.3em; margin-bottom: 0.3em; } .btn-white span { text-transform: uppercase; font-size: 1.2em; font-weight: 700; } .btn-white:hover { text-decoration: none; box-shadow: none; color: #363f48; } .btn-white-dark-shadow { display: inline-block; width: 100%; background-color: #fff; color: #363f48; padding: 10px; border-radius: 2px; box-shadow: 2px 5px 5px #23292E; margin-top: 0.3em; margin-bottom: 0.3em; } .btn-white-dark-shadow span { text-transform: uppercase; font-size: 1.2em; font-weight: 700; } .btn-white-dark-shadow:hover { text-decoration: none; box-shadow: none; color: #363f48; } .btn-primary { color: #fff; border: none; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: #fff; border: none; } .btn-secondary { color: #212529; background-color: #979EA8; border-color: #979EA8; } .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { color: #212529; background-color: #828b97; border-color: #7b8491; } .btn-outline-secondary { color: #979EA8; border-color: #979EA8; } .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus { color: #363f48; background-color: #979EA8; border-color: #979EA8; } .btn-outline-dark { color: #363f48; border-color: #363f48; } .btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark:focus { color: #fff; background-color: #363f48; border-color: #363f48; } .btn-dark { color: white; background-color: #363f48; border-color: #363f48; } .btn-dark:hover, .btn-dark:active, .btn-dark:focus { color: #fff; background-color: #23292E; border-color: #23292E; } .btn-outline-primary { color: #fff; background-color: transparent; } .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus { color: #fff; } .btn-success { color: #fff; background-color: #13d59f; border-color: #13d59f; } .btn-success:hover, .btn-success:active, .btn-success:focus { color: #fff; background-color: #10b285; border-color: #0fa67c; } .btn-outline-success { color: #13d59f; background-color: transparent; border-color: #13d59f; } .btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success:focus { color: #fff; background-color: #10b285; border-color: #0fa67c; } .btn-warning { color: #fff; background-color: #DDb02F; border-color: #DDb02F; } .btn-warning:after { color: #fff; } .btn-warning:hover, .btn-warning:active, .btn-warning:focus { color: #fff; background-color: #C29B29; border-color: #C29B29; } .btn-outline-warning { color: #fff; background-color: transparent; border-color: #DCAF2E; } .btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning:focus { color: #fff; background-color: #DCAF2E; border-color: #DCAF2E; } .btn-outline-light { color: #fff; background-color: transparent; border-color: #fff; } .btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light:focus { color: #e8e9eb; background-color: transparent; border-color: #e8e9eb; } .btn-light { color: #979EA8; border: none; background-color: transparent; } .btn-light:hover, .btn-light:active, .btn-light:focus { background-color: transparent !important; border: none; color: #363f48; } .btn-light-invert { color: #fff; border: none; background-color: transparent; } .btn-light-invert:hover, .btn-light-invert:active, .btn-light-invert:focus { background-color: transparent !important; border: none; color: #e8e9eb; } .btn-motivation { padding: 1.15em 10px 1em; line-height: 1em !important; display: block; } .btn-motivation span { font-size: 14px !important; } .btnGoal i::after { font-size: 2.1em; font-family: FontAwesome, "Font Awesome 5 Free"; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .btnGoalWhite i::after { font-size: 2.1em; font-family: FontAwesome, "Font Awesome 5 Free"; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; color: #fff !important; } .btnGoalSelection { padding: 1.3em 0 0.6em; } .btnGoalSelection span { font-size: 0.8em !important; } .btn-h-8 { height: calc(8rem + 12px) !important; } #btnTravelGoal1 i::after { content: "\f29d"; } #btnTravelGoal2 i::after { content: "\f1ae"; } #btnTravelGoal3 i::after { content: "\f1b9"; } #btnTravelGoal4 i::after { content: "\f015"; } #btnTravelGoal5 i::after { content: "\f0f2"; } #btnTravelGoal6 i::after { content: "\f19c"; } #btnTravelGoal7 i::after { content: "\f072"; } #btnTravelGoal8 i::after { content: "\f21e"; } #btnTravelGoal9 i::after { content: "\f201"; } #btnTravelGoal10 i::after { content: "\f155"; } .card-summary { font-size: 1em; } .card-summary a { color: #363f48; cursor: pointer; } .card-summary h3 { font-size: 1.4em !important; } .pendingGoalTitle { text-transform: capitalize; } #userSignature { height: 300px; width: 500px; background: #f5f5f5; color: #363F48; border-radius: 3px; } #userSignatureOuter { background: #f5f5f5; color: #363F48; border-radius: 3px; } .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: 0; } .check-light input[type="checkbox"] + .label-text:before { color: #fff; } .check-light input[type="checkbox"]:checked + .label-text:before { color: #fff; } .check-dark input[type="checkbox"] + .label-text:before { color: #fff; } .check-dark input[type="checkbox"]:checked + .label-text:before { background-color: #fff; color: #363f48 !important; content: "\f00c" !important; font-size: 1em !important; } .customCheck { font-size: 14px; line-height: inherit; } .customCheck input[type="checkbox"] + .label-text:before { content: "\f0c8"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: 900; font-size: 1.2em; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; text-transform: none; display: inline; margin-right: 10px; } .customCheck input[type="checkbox"]:checked + .label-text:before { content: "\f14a"; font-weight: 400; font-size: 1.2em; margin-right: 10px; } .defaultCheck input[type="checkbox"]:checked { display: inherit; } .defaultCheck input[type="checkbox"] { display: inherit; } input[type="checkbox"]:checked { display: none; } input[type="checkbox"] { display: none; } .customCheckPrimary { font-size: 1.2em; line-height: inherit; margin-left: 35%; } .customCheckPrimary input[type="checkbox"]:checked { display: none; } .customCheckPrimary input[type="checkbox"] { display: none; } .customCheckPrimary input[type="checkbox"] + .label-text:before { content: "\f096"; font-family: "FontAwesome"; speak: none; color: #e8e9eb; font-style: normal; font-weight: 900; font-size: 1.2em; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; text-transform: none; display: inline; margin-right: 10px; } .customCheckPrimary input[type="checkbox"]:checked + .label-text:before { content: "\f14a"; font-weight: 400; font-size: 1.2em; margin-right: 10px; } .cursor { cursor: pointer; } .logoutDropDown { -webkit-appearance: none; background-color: transparent; float: right; border: none; box-shadow: none; } .logoutDropDown:hover, .logoutDropDown:active, .logoutDropDown:focus, .logoutDropDown .active { -webkit-appearance: none; background-color: transparent; } .logoutDropDown::before { content: "\f13a"; font-family: "FontAwesome"; speak: none; font-size: 2.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .logoutDropDown::after { display: none; } .font-upper { text-transform: uppercase; } .fs-1 { font-size: 1em; } .custom-file { margin: 5px 0; height: calc(3.5rem + 2px) !important; } .empty .custom-file-label, .empty .custom-file-label-1 { color: #DDb02F; font-size: 1.2em; font-weight: 400; margin-bottom: 0; padding: 0.6em; height: calc(3.5rem + 2px) !important; overflow: hidden; white-space: nowrap; } .empty .upload-file-input { position: absolute; right: -25; cursor: pointer; } .empty .custom-file-input:lang(en) ~ .custom-file-label::after, .empty .custom-file-input-1:lang(en) ~ .custom-file-label-1::after { content: "\f0aa"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; background-color: transparent; font-size: 1.7em; margin-right: 5px; padding: 0.1em; color: transparent; border: none; display: inline-block; text-rendering: auto; } .done .custom-file-label, .done .custom-file-label-1 { color: #979EA8; font-size: 1.2em; font-weight: 400; margin-bottom: 0; padding: 0.6em; height: calc(3.5rem + 2px) !important; overflow: hidden; white-space: nowrap; } .done .custom-file-input:lang(en) ~ .custom-file-label::after, .done .custom-file-input-1:lang(en) ~ .custom-file-label-1::after { content: "\f00d"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; background-color: transparent; font-size: 1.7em; margin-right: 5px; padding: 0.1em; color: transparent; border: none; display: inline-block; text-rendering: auto; } .downloadIcon { background-color: white; padding: 3px 7px; color: #DDb02F; font-size: 2.4em; font-weight: 400; } .rand-icon { position: relative; } .rand-icon > i { font-size: 1.2em !important; position: absolute; display: block; transform: translate(0, -30%); top: 17px; pointer-events: none; width: 25px; text-align: center; font-style: normal; color: #495057; } .rand-icon > input { padding-left: 25px; padding-right: 0; } .icon-done::after { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; float: right; content: "\f058"; font-family: FontAwesome; color: #13D59F; margin-right: 0.5em; } .icon-add::after { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; float: right; content: "\f055"; font-family: FontAwesome; color: #DDb02F; margin-right: 0.5em; } .icon-active-goal { margin-left: auto; margin-right: auto; } .icon-active-goal::before { font-size: 4em !important; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: FontAwesome; color: #fff; } @media (max-width: 640px) { .icon-active-goal::before { font-size: 2.8em !important; } } .icon-pending-goal { margin-left: auto; margin-right: auto; } .icon-pending-goal::before { font-size: 3em !important; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: FontAwesome; color: #fff; } @media (max-width: 640px) { .icon-pending-goal::before { font-size: 2.5em !important; } } .downloadImageIcon { font-size: 1.4em; margin-left: 10px; margin-top: 4.5px; } .infoIcon { font-size: 16px; margin-left: 10px; } .house::before { content: "\f015"; } .briefcase::before { content: "\f0b1"; } .blind::before { content: "\f29d"; } .child::before { content: "\f1ae"; } .bank::before { content: "\f19c"; } .plane::before { content: "\f072"; } .heart::before { content: "\f21e"; } .line-chart::before { content: "\f201"; } .dollar::before { content: "\f155"; } .signIn::before { margin-right: 5px; font-family: FontAwesome; content: "\f090"; } .fileTypeIconBefore::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: 1.5em; content: "\f15b"; font-family: FontAwesome; margin-right: 0.5em; } .userIconBefore::before { content: "\f2bd"; font-family: "FontAwesome"; font-size: 1.3em; font-weight: 700; speak: none; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; text-transform: none; display: inline; margin-right: 10px; } .riskCapacityBefore::before { content: "\f24e"; font-family: "FontAwesome"; font-size: 1.3em; font-weight: 700; speak: none; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; text-transform: none; display: inline; margin-right: 10px; } .riskToleranceBefore::before { content: "\f071"; font-family: "FontAwesome"; font-size: 1.3em; font-weight: 700; speak: none; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; text-transform: none; display: inline; margin-right: 10px; } .top-25 { top: -25%; } .progress-bg-dark { border-radius: 5px; height: 1em; } .progress { border-radius: 5px; background-color: rgba(54, 63, 72, 0.4); height: 0.5em; } .progress-thick { border-radius: 5px; background-color: rgba(54, 63, 72, 0.4); height: 1em; } .progress-light { border-radius: 5px; background-color: #f6f9fa; height: 0.5em; } .progress-small { border-radius: 5px; height: 1.5em; background-color: #e8e9eb; } .progress-small .progress-bar { font-weight: 600; background-color: #13D59F; } .progress-primary-small { border-radius: 5px; height: 1.5em; background-color: #e8e9eb; } .progress-primary-small .progress-bar { font-weight: 600; } .progress-bar { background-color: #fff; border-radius: 5px; } .progress-bar-success { background-color: #13D59F; height: 0.5em; } .customProgressBar { font-size: 1.5em; font-weight: 700; } .customProgressBar .veryLow { color: #47AAE0; } .customProgressBar .low { color: #34B9C8; } .customProgressBar .mediumLow { color: #22C7B2; } .customProgressBar .medium { color: #13D59F; } .customProgressBar .mediumHigh { color: #52C97B; } .customProgressBar .high { color: #99BC54; } .customProgressBar .veryHigh { color: #DDb02F; } .customRadio { font-size: inherit; line-height: inherit; } .customRadio input[type="radio"] + .label-text:before { content: "\f111"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: 400; font-size: 1.2em; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; text-rendering: auto; display: inline; margin-right: 10px; } .customRadio input[type="radio"]:checked + .label-text:before { content: "\f192"; font-weight: 400; color: #fff; margin-right: 10px; display: inline-block; font-size: 1.2em; font-family: "FontAwesome"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .customRadioPrimary { font-size: 1.5em; line-height: inherit; } .customRadioPrimary input[type="radio"] + .label-text:before { content: "\f10c"; font-family: "FontAwesome"; speak: none; font-style: normal; font-size: 1.2em; font-weight: 400; color: #e8e9eb; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; text-rendering: auto; display: inline; margin-right: 10px; } .customRadioPrimary input[type="radio"]:checked + .label-text:before { content: "\f192"; font-weight: 400; margin-right: 10px; display: inline-block; font-family: "FontAwesome"; font-size: 1.2em; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .presentBiasRadio { font-size: 1.5em; font-weight: normal; } .presentBiasRadio input[type="radio"] + .label-text:before { content: "\f10c"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-size: 1.2em; color: #e8e9eb; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; text-rendering: auto; display: inline; margin-right: 10px; } .presentBiasRadio input[type="radio"]:checked + .label-text:before { content: "\f192"; font-weight: 400; margin-right: 10px; font-size: 1.2em; display: inline-block; font-family: "FontAwesome"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .confirmationBiasRadio { font-size: 1.5em; margin-right: 0.5em; font-weight: normal; } .confirmationBiasRadio input[type="radio"] + .label-text:before { content: "\f10c"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; color: #e8e9eb; font-size: 1.2em; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; text-rendering: auto; display: inline; margin-right: 10px; } .confirmationBiasRadio input[type="radio"]:checked + .label-text:before { content: "\f192"; font-weight: 400; margin-right: 10px; display: inline-block; font-size: 1.2em; font-family: "FontAwesome"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } input[type="radio"]:checked { display: none; } input[type="radio"] { display: none; } .mainNavTab { border-bottom: none; margin-left: auto; margin-right: auto; } .mainNavTab li { padding: 0 0.2em; } .nav-tabs .nav-item .nav-link { border: none; color: #fff; text-align: center; padding: 1em 0; font-size: 14px; font-weight: 500; } .nav-tabs .nav-item .nav-link:hover { border: none; } .nav-tabs .nav-item .active { border: none; color: #fff; } .tab-content { margin-bottom: 50px; border-radius: 3px; } .tab-panel { background-color: #e8e9eb; border-top: 10px solid; } .totalPortfolioInfo { border-bottom: 1px solid #fff; padding-bottom: 0.8em; } .detailsOnDark { border-radius: 2px; box-shadow: 2px 5px 5px #23292E; color: #363f48; padding: 2em 2em 1em 2em; } .detailsOnDark .alignContentRight { text-align: right; } .detailsOnDark:hover { box-shadow: none; } .detailsOnDark #moreFundInfo { text-align: right; margin-top: 3em; } .detailsOnDark #moreFundInfo h6 { margin-bottom: 1em; text-align: left; font-weight: 700; font-size: 1.2em; } .detailsOnDark .loadMore::after { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; float: right; content: "\f078"; font-family: FontAwesome; color: #363f48; margin-right: 0.5em; } .detailsOnDark .loadMore[aria-expanded="true"]::after { content: "\f077"; } .backIcon { padding: 0 !important; } .headerBorderB { border-bottom: 1px solid #fff; } .openNextBtn::after { float: right; content: "\f054"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .noLinkedGoal { background-color: #DDb02F; color: #fff; } .noLinkedGoal:hover { color: #fff; } .noLinkedGoal .openNextBtn::after { color: #fff; } .goalIsNotLinkedHeading { color: #DDb02F; } .goalIsNotLinkedHeading::before { font-size: inherit; content: "\f071"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } #totalMonthlyContributionDisplayIcon::before { font-size: inherit; content: "\f133"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } #totalValueDisplayIcon::before { content: "\f1ec"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } #accUpdatedDisplayIcon::before { content: "\f021"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .modal { overflow-y: scroll; } .modal-top-15 { top: 15em; } .modal-top-17 { top: 17em; } .modal-top-20 { top: 20em; } .withDrawalConfirmation, .providentConfirmationModal { font-size: 1.2em; } .withDrawalConfirmation .modal-body, .providentConfirmationModal .modal-body { padding: 0; } .withDrawalConfirmation .modal-footer, .providentConfirmationModal .modal-footer { padding-right: 0; padding-left: 0; margin-left: 0 !important; margin-right: 0 !important; } .debitAmountChange, .additionalLumpSum, .darkModal, .fundWithdrawal, .linkGoal, .changeBackAccModal, .beneficiaries, .activeGoalModal, .addBeneficiariesModal, .editBeneficiariesModal, .addBeneficiariesModalOnEditInvestment, .editBankAccModal, .oneTimePinModal, .changeEmailAddressModal, .deleteConfirmation { color: #fff; background-color: #363e47; } .debitAmountChange .modal-content, .additionalLumpSum .modal-content, .darkModal .modal-content, .fundWithdrawal .modal-content, .linkGoal .modal-content, .changeBackAccModal .modal-content, .beneficiaries .modal-content, .activeGoalModal .modal-content, .addBeneficiariesModal .modal-content, .editBeneficiariesModal .modal-content, .addBeneficiariesModalOnEditInvestment .modal-content, .editBankAccModal .modal-content, .oneTimePinModal .modal-content, .changeEmailAddressModal .modal-content, .deleteConfirmation .modal-content { background-color: transparent; border: none; } .debitAmountChange .modal-content .container-fluid, .additionalLumpSum .modal-content .container-fluid, .darkModal .modal-content .container-fluid, .fundWithdrawal .modal-content .container-fluid, .linkGoal .modal-content .container-fluid, .changeBackAccModal .modal-content .container-fluid, .beneficiaries .modal-content .container-fluid, .activeGoalModal .modal-content .container-fluid, .addBeneficiariesModal .modal-content .container-fluid, .editBeneficiariesModal .modal-content .container-fluid, .addBeneficiariesModalOnEditInvestment .modal-content .container-fluid, .editBankAccModal .modal-content .container-fluid, .oneTimePinModal .modal-content .container-fluid, .changeEmailAddressModal .modal-content .container-fluid, .deleteConfirmation .modal-content .container-fluid { padding: 0; } .debitAmountChange .modal-content .container-fluid p, .additionalLumpSum .modal-content .container-fluid p, .darkModal .modal-content .container-fluid p, .fundWithdrawal .modal-content .container-fluid p, .linkGoal .modal-content .container-fluid p, .changeBackAccModal .modal-content .container-fluid p, .beneficiaries .modal-content .container-fluid p, .activeGoalModal .modal-content .container-fluid p, .addBeneficiariesModal .modal-content .container-fluid p, .editBeneficiariesModal .modal-content .container-fluid p, .addBeneficiariesModalOnEditInvestment .modal-content .container-fluid p, .editBankAccModal .modal-content .container-fluid p, .oneTimePinModal .modal-content .container-fluid p, .changeEmailAddressModal .modal-content .container-fluid p, .deleteConfirmation .modal-content .container-fluid p { font-size: 1em; } .debitAmountChange .modal-content .modal-header, .additionalLumpSum .modal-content .modal-header, .darkModal .modal-content .modal-header, .fundWithdrawal .modal-content .modal-header, .linkGoal .modal-content .modal-header, .changeBackAccModal .modal-content .modal-header, .beneficiaries .modal-content .modal-header, .activeGoalModal .modal-content .modal-header, .addBeneficiariesModal .modal-content .modal-header, .editBeneficiariesModal .modal-content .modal-header, .addBeneficiariesModalOnEditInvestment .modal-content .modal-header, .editBankAccModal .modal-content .modal-header, .oneTimePinModal .modal-content .modal-header, .changeEmailAddressModal .modal-content .modal-header, .deleteConfirmation .modal-content .modal-header { border: none; } .debitAmountChange .modal-content .modal-header p, .additionalLumpSum .modal-content .modal-header p, .darkModal .modal-content .modal-header p, .fundWithdrawal .modal-content .modal-header p, .linkGoal .modal-content .modal-header p, .changeBackAccModal .modal-content .modal-header p, .beneficiaries .modal-content .modal-header p, .activeGoalModal .modal-content .modal-header p, .addBeneficiariesModal .modal-content .modal-header p, .editBeneficiariesModal .modal-content .modal-header p, .addBeneficiariesModalOnEditInvestment .modal-content .modal-header p, .editBankAccModal .modal-content .modal-header p, .oneTimePinModal .modal-content .modal-header p, .changeEmailAddressModal .modal-content .modal-header p, .deleteConfirmation .modal-content .modal-header p { margin-bottom: 0; margin-top: 10px; } .debitAmountChange .modal-content h1, .additionalLumpSum .modal-content h1, .darkModal .modal-content h1, .fundWithdrawal .modal-content h1, .linkGoal .modal-content h1, .changeBackAccModal .modal-content h1, .beneficiaries .modal-content h1, .activeGoalModal .modal-content h1, .addBeneficiariesModal .modal-content h1, .editBeneficiariesModal .modal-content h1, .addBeneficiariesModalOnEditInvestment .modal-content h1, .editBankAccModal .modal-content h1, .oneTimePinModal .modal-content h1, .changeEmailAddressModal .modal-content h1, .deleteConfirmation .modal-content h1 { line-height: 1em; } .debitAmountChange .modal-content .currentStatus, .additionalLumpSum .modal-content .currentStatus, .darkModal .modal-content .currentStatus, .fundWithdrawal .modal-content .currentStatus, .linkGoal .modal-content .currentStatus, .changeBackAccModal .modal-content .currentStatus, .beneficiaries .modal-content .currentStatus, .activeGoalModal .modal-content .currentStatus, .addBeneficiariesModal .modal-content .currentStatus, .editBeneficiariesModal .modal-content .currentStatus, .addBeneficiariesModalOnEditInvestment .modal-content .currentStatus, .editBankAccModal .modal-content .currentStatus, .oneTimePinModal .modal-content .currentStatus, .changeEmailAddressModal .modal-content .currentStatus, .deleteConfirmation .modal-content .currentStatus { color: #DDb02F; float: right; } .addBeneficiariesModal .modal-dialog { max-width: 600px; } .editBeneficiariesModal .modal-dialog { max-width: 600px; } .addBeneficiariesModalOnEditInvestment .modal-dialog { max-width: 600px; } .modalWhiteBack { background-color: #fff; color: #363f48; text-align: center; } .modalWhiteBack .modal-dialog, .modalWhiteBack .modal-dialog-centered { max-width: 700px; } .modalWhiteBack .modal-content { background-color: transparent; border: none; margin-top: -15%; } .modalWhiteBack .modal-content .modal-header { border: none; } .modalDarkBack { background-color: #363e47; color: #fff; text-align: center; } .modalDarkBack .modal-dialog, .modalDarkBack .modal-dialog-centered { max-width: 700px; } .modalDarkBack .modal-content { background-color: transparent; border: none; } .modalDarkBack .modal-content .modal-header { border: none; } .modalDarkBack .modal-content .modal-header .modal-title { margin-left: auto; margin-right: auto; align-content: center; } .modalDarkBack .modal-content .modal-header .modal-title h3 { font-size: 1em; } .goalOverlayModel { color: #fff; background-color: rgba(54, 62, 71, 0.6); } .goalOverlayModel .modal-content { background-color: transparent; border: none; } .goalOverlayModel .modal-content .modal-header { border: none; } .goalOverlayModel .modal-content .h4 { margin-bottom: 2em; } .goalOverlayModel .modal-content button { color: #fff; z-index: 2; background-color: transparent; } .goalOverlayModel .modal-content button:hover { color: #fff; } .goalOverlayModel .modal-content .modal-body a { background-color: #fff; border-radius: 3px; } .goalOverlayModel .modal-content .modal-body a .h5 { color: #363f48; } .goalOverlayModel .modal-content .modal-body a:hover { box-shadow: 5px 7px 15px #363f48; } .motivationOverlayModel { white-space: normal; background-color: rgba(54, 62, 71, 0.6); } .motivationOverlayModel .modal-content { background-color: transparent; border: none; } .motivationOverlayModel .modal-content .modal-header { border: none; color: #fff; } .motivationOverlayModel .modal-content .h4 { margin-bottom: 2em; } .motivationOverlayModel .modal-content button { color: #fff; z-index: 2; background-color: transparent; height: calc(3.5rem + 2px); } .motivationOverlayModel .modal-content button:hover { color: #fff; } .motivationOverlayModel .modal-content span { white-space: normal !important; } .motivationOverlayModel .modal-content .modal-body .error { margin: 0; } .motivationOverlayModel .modal-content .modal-body .motivationDiv { background-color: #fff; border-radius: 3px; padding: 0.4em 0; } .motivationOverlayModel .modal-content .modal-body .motivationDiv .btnInput { width: 100%; text-align: left; } .motivationOverlayModel .modal-content .modal-body .motivationDiv .h5 { color: #363f48; } .motivationOverlayModel .modal-content .modal-body .motivationDiv:hover { box-shadow: 5px 7px 15px #363f48; } .motivationOverlayModel .modal-content .modal-body .motivationDiv .motivationInput { padding-left: 10px; color: #363f48 !important; background-color: lightgrey; } .motivationOverlayModel .modal-content .modal-body a { background-color: #fff; border-radius: 3px; } .motivationOverlayModel .modal-content .modal-body a .h5 { color: #363f48; } .motivationOverlayModel .modal-content .modal-body a:hover { box-shadow: 5px 7px 15px #363f48; } .placeholder-white { margin: 1.4em; border: 3px dashed white; border-radius: 3px; color: white; text-align: center; padding: 5em; } .placeholder-white p { margin: 2em; text-transform: uppercase; font-weight: 700; } #goalTitle { text-transform: capitalize; } .goalPlaceholder { margin: 1.4em; border: 3px dashed #363f48; border-radius: 3px; color: #363f48; text-align: center; padding: 5em; } .goalPlaceholder p { margin: 2em; text-transform: uppercase; font-weight: 700; } .universalContainer { width: 700px; padding: 1em; } .text-1 { font-size: 1em !important; } .goalInput { text-align: center; font-size: 2em !important; font-weight: 700; border: none; width: 8em; color: #363f48; } .goalInputLrg { text-align: center; font-size: 2em !important; font-weight: 700; border: none; width: 11em; color: #363f48; } .goalDateInput, .dateLumpSumWithdraw { font-size: 1.3em !important; border-radius: 4px; font-weight: 600; padding: 0.5em 2em; text-align: center; } .goalInputEnd { text-align: center; font-size: 2em !important; font-weight: 700; border: none; width: 7em; color: #363f48; } .goalInputEndLrg, .goalInputEndMed { width: 7em; } .goalInputEndShort { display: inline-block; text-align: center; font-size: 2em !important; font-weight: 700; border: none; width: 6em; color: #363f48; } pre { font-family: Montserrat, "Work Sans", sans-serif; font-size: 1em; color: #363f48; overflow: hidden; } .goalLabel { font-size: 2em; font-weight: 700; } .goalTotal { font-size: 2.8em; font-weight: 600; } .yearInput { width: 3em; } .goalOverviewLabel { width: 20%; } .goalOverviewInput { width: 80%; } .goalTotalRow { color: #fff; padding: 2em 0; z-index: 1; } .goalIcons { font-size: 2.5em; color: #e8e9eb; margin: 0; font-family: FontAwesome; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .resetSignature { background: none; border: none; outline: none; } .resetSignature:hover, .resetSignature:active, .resetSignature:focus { border: none; outline: none; } .resetSignature::before { content: "\f12d"; font-size: 1.2em; color: #363f48; margin: 0; font-family: FontAwesome; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .addPlusIcon, .addPlusIconEnd { padding-right: 0; background: none; border: none; outline: none; } .addPlusIcon:hover, .addPlusIcon:active, .addPlusIcon:focus, .addPlusIconEnd:hover, .addPlusIconEnd:active, .addPlusIconEnd:focus { border: none; outline: none; } .addPlusIcon::before, .addPlusIconEnd::before { content: "\f055"; font-size: 2.5em; margin: 0; font-family: FontAwesome; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .addMinusIcon, .addMinusIconEnd { background: none; border: none; outline: none; padding-left: 0; } .addMinusIcon:hover, .addMinusIcon:active, .addMinusIcon:focus, .addMinusIconEnd:hover, .addMinusIconEnd:active, .addMinusIconEnd:focus { border: none; outline: none; } .addMinusIcon::before, .addMinusIconEnd::before { content: "\f056"; font-size: 2.5em; margin: 0; font-family: FontAwesome; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .chevronRightIcon { background: none; border: none; outline: none; } .chevronRightIcon:hover, .chevronRightIcon:active, .chevronRightIcon:focus { border: none; outline: none; } .chevronRightIcon::after { content: "\f105"; font-size: 1.5em; margin: 0; font-family: FontAwesome; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .saveGoalIcon { font-size: 2.5em; color: #e8e9eb; background-color: #363f48; margin: 0; } li { list-style-type: none; } .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } .error-yellow { margin-top: 0.5em; color: #f6c604; font-size: 1em; font-weight: 500; } .error-yellow a:hover, .error-yellow:hover { color: #f6c604 !important; } .reason-block { display: block; } .reason-block span, .reason-block h5 { display: inline-block; margin-right: 1%; } #changeEmailAddressForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #bankAccountForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #editBankAccDetailsForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #passwordResetRequestForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #idVerificationQuizdashboardIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #idVerificationQuizpersonalIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #idVerificationQuizstartInvestmentIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #insertOTPdashboardIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #insertOTPpersonalIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #insertOTPInvestmentIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #userMobileNrInputdashboardIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #userMobileNrInputpersonalIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #userMobileNrInputstartInvestmentIdVerification .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #riskCapacity .error { margin-top: 0.5em; color: red !important; font-size: 1em; font-weight: 500; } #addBeneficiary .error, #editBeneficiary .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #passwordResetRequestForm .error { color: #f6c604; } #signupForm .error { margin-top: 0; margin-bottom: 10px; color: #f6c604 !important; font-size: 1em; font-weight: 500; position: static; } #changeLinkedGoalForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #changeDebitOrderForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #changeLumpSumForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #requestWithdrawlForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #changeBankAccountForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #addBeneficiaryFormOnEditInvestment .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #passwordResetForm .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #personalInfoForm .personalInfoFormInput { margin-top: 0; } #personalInfoFormStartInv .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #physicalAddress .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #postalAddress .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } #physicalAddForm .error { margin-top: 0.5em; color: black !important; font-size: 1em; font-weight: 500; } #postalAddForm .error { margin-top: 0.5em; color: black !important; font-size: 1em; font-weight: 500; } #editBeneficiaryFormOnEditInvestment .error { margin-top: 0.5em; color: #f6c604 !important; font-size: 1em; font-weight: 500; } .note { margin-top: 0.5em; color: #979EA8; } .noteWhite { margin-top: 0.5em; color: #fff; } .monthlyIncrease, .monthlyIncreaseRetire { font-size: 1em; font-weight: bold; margin-left: auto; margin-right: auto; text-align: center; } .monthlyIncrease a:first-child .monthlyIncreaseValue, .monthlyIncrease a .monthlyIncreaseValueRetire, .monthlyIncreaseRetire a:first-child .monthlyIncreaseValue, .monthlyIncreaseRetire a .monthlyIncreaseValueRetire { border-radius: 4px 0 0 4px; } .monthlyIncrease a:last-child .monthlyIncreaseValue, .monthlyIncrease a .monthlyIncreaseValueRetire, .monthlyIncreaseRetire a:last-child .monthlyIncreaseValue, .monthlyIncreaseRetire a .monthlyIncreaseValueRetire { border-radius: 0 4px 4px 0; } .monthlyIncrease .monthlyIncreaseValue, .monthlyIncrease .monthlyIncreaseValueRetire, .monthlyIncreaseRetire .monthlyIncreaseValue, .monthlyIncreaseRetire .monthlyIncreaseValueRetire { display: inline-flex; margin: 0; width: 3.5em; height: 3.1em; float: left; } .monthlyIncrease .monthlyIncreaseValue span, .monthlyIncrease .monthlyIncreaseValueRetire span, .monthlyIncreaseRetire .monthlyIncreaseValue span, .monthlyIncreaseRetire .monthlyIncreaseValueRetire span { margin: auto; font-weight: bold; } .monthlyIncrease .monthlyIncreaseValue:hover, .monthlyIncrease .monthlyIncreaseValueRetire:hover, .monthlyIncreaseRetire .monthlyIncreaseValue:hover, .monthlyIncreaseRetire .monthlyIncreaseValueRetire:hover { color: #fff; } #radioBtn .active, #radioBtnRetire .active { color: #fff; } #radioBtn .notActive, #radioBtnRetire .notActive { color: #363f48; background-color: #fff; } .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { background-color: #ffff; } .jconfirm .jconfirm-box { color: #ffffff; background-color: #3f7797 !important; } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default { color: #ffffff; background-color: #3f7797 !important; } /* holdon overlay */ #holdon-overlay { filter: alpha(opacity=80); position: fixed; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; z-index: 1060; } .sk-rect > div { background-color: #fff; } #holdon-overlay { opacity: 1; transition: width 1s; } #holdon-message { width: 100%; text-align: center; position: absolute; top: 55%; color: white; font-size: 20px; } .goalOverviewTab { align-content: center; } .goalTriangle { margin-top: -2px; width: 4em; } .sprite { background-repeat: no-repeat; margin-left: auto; margin-right: auto; display: block; margin-top: 10px; } .sprite_blue_1 { background-position: 0 0; } .sprite_blue_2 { background-position: -80px 0; } .sprite_blue_3 { background-position: -160px 0; } .sprite_blue_4 { background-position: -240px 0; } .sprite_white_1 { background-position: -320px 0; } .sprite_white_2 { background-position: -400px 0; } .sprite_white_3 { background-position: -480px 0; } .sprite_white_4 { background-position: -560px 0; } /*social media buttons styling*/ .social-m { color: #fff; font-size: 1em; font-weight: 300; } .social-m:hover { color: #fff !important; text-decoration: none; } .facebook { background-color: #4869AD; } .facebookIcon::before { content: "\f230"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .linkedin { background-color: #00A0DC; } .linkedinIcon::before { content: "\f08c"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .google { background-color: #FB5A46; } .googleIcon::before { content: "\f1a0"; font-family: FontAwesome; margin-right: 0.5em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /*a shorter input field*/ .short-text { width: 220px; } .copyRight { font-weight: 200; } .tabVis { visibility: hidden; } #overlay { position: fixed; /* Sit on top of the page content */ display: none; /* Hidden by default */ width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ cursor: pointer; /* Add a pointer on hover */ } .overlayContainer { position: absolute; top: 50%; left: 50%; color: white; font-size: 1.2em; text-align: center; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } @media (max-width: 576px) { .lrgInput { font-size: 2.2em !important; font-weight: 700; } .modal-top-25 { top: 5%; } .riskProfileHeight { height: 15px; } .riskCapacityModal .container-fluid { padding: 0; } .riskCapacitySummaryModal .container-fluid { padding: 0; } .pendingGoalIcon, .activeGoalIcon { padding: 2px 5px; } .diamondRisk { margin-top: -35%; } .diamond { height: 25px; width: 25px; margin-top: -35%; } .overlayContainer { width: 80%; } p { line-height: 1.3em; } h5 { font-size: 0.9em; line-height: 1.2em; } .goalImg { width: 80px; height: 80px; max-width: 100%; /* This rule is very important, please do not ignore this! */ } .addMinusIconEnd::before { font-size: 1.8em; } .addPlusIconEnd::before { font-size: 1.8em; } #userSignature { height: 300px; width: 300px; background: #f5f5f5; color: #363F48; border-radius: 3px; } .universalContainer, .mobile-body { width: 100%; padding: 1em; } .darkBody { background-color: #363f48; width: 100%; padding: 2em; text-align: center; } .monthlyIncrease .monthlyIncreaseValue { width: 3em; } .goalTotal { font-size: 2.5em; } .goalTriangle { margin-top: -10px; width: 2em; } label, .col-form-label { font-size: 14px; line-height: 1.2em; font-weight: 500; } .sprite_blue_1 { background-position: 0 0; } .sprite_blue_2 { background-position: -50px 0; } .sprite_blue_3 { background-position: -100px 0; } .sprite_blue_4 { background-position: -150px 0; } .sprite_white_1 { background-position: -200px 0; } .sprite_white_2 { background-position: -250px 0; } .sprite_white_3 { background-position: -300px 0; } .sprite_white_4 { background-position: -350px 0; } .goalIcons { font-size: 2em; } .goalLabelEnd, .goalInputEnd, .goalInputEndShort, .goalInputSmall, .goalInputLrg { font-size: 1.5em !important; font-weight: 700; } .goalInputEndLrg { width: 6.5em; } .goalInputEndMed { width: 3.5em; } .goalInputEndShort { width: 2.5em; } .btn { font-size: 1em; } } @media (max-width: 550px) { #userSignature { height: 300px; width: 90vw; background: #f5f5f5; color: #363F48; border-radius: 3px; } } @media (min-width: 640px) { .activeGoalIcon::before { font-size: 40px; } .pendingGoalIcon::before { font-size: 30px; } .goalInputEndLrg { width: 8em; } .goalInputEndMed { width: 4em; } .goalInputEndShort { width: 3em; } } /* responsive fonts */ @media (min-width: 992px) { h1 { font-size: 1.7em; line-height: 1.25em; } h2 { font-size: 2.7em; line-height: 1.75em; } h3 { font-size: 1.7em; line-height: 1.25em; } h4 { font-size: 1.8em; } h5 { font-size: 0.9em; line-height: 1.2em; } h6 { font-size: 0.8em; line-height: 1em; } p { font-size: 1.15em; line-height: 1em; } label { font-size: 1em; line-height: 1.25em; } .h5 { font-size: 0.5em !important; line-height: 1em !important; } } /* holdon overlay */ #holdon-overlay { filter: alpha(opacity=80); position: fixed; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; z-index: 1060; } .sk-rect > div { background-color: #fff; } #holdon-message { width: 100%; text-align: center; position: absolute; top: 55%; color: white; font-size: 20px; } .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { background-color: #ffff; } .jconfirm .jconfirm-box { color: #ffffff; background-color: #3f7797 !important; } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default { color: #ffffff; background-color: #3f7797 !important; } .break-word { display: inline-block; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; line-break: strict; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; } .hCalc { height: calc(5rem + 5px) !important; line-height: 1em !important; } .wAuto { width: auto !important; } @media screen and (min-width: 300px) and (max-width: 1079px) { .w60-300-1 { width: 60% !important; } } @media (max-width: 3000px) and (min-width: 1080px) { .w43-3000-1 { width: 43% !important; } } @media (max-width: 3000px) and (min-width: 1080px) { .w55-3000-1 { width: 55% !important; } } @media screen and (min-width: 300px) and (max-width: 1079px) { .w100-300-1 { width: 100% !important; } } @media (max-width: 3000px) and (min-width: 1080px) { .w70-3000-1 { width: 70% !important; } } @media (min-width: 300px) and (max-width: 1080px) { .w80-300-1 { width: 80% !important; } } @media screen and (min-width: 300px) and (max-width: 1079px) { .w45-300-1 { width: 45% !important; } } @media screen and (min-width: 300px) and (max-width: 1079px) { .w65-300-1 { width: 65% !important; } } @media (max-width: 3000px) and (min-width: 1080px) { .w33-3000-1 { width: 33% !important; } } .ui-link:not(.disabled) { cursor: pointer; text-decoration: none; } .circle-btn { width: 55px; height: 55px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--bs-body-color); background-color: transparent; border: 1px solid var(--bs-primary); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .circle-btn:hover, .circle-btn.hover { transform: scale(1.2); background: var(--bs-primary); } .circle-btn:focus, .circle-btn.focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(243, 156, 18, 0.25); } .circle-btn:active, .circle-btn.active { background: var(--bs-primary-border-subtle); border: 1px solid var(--bs-primary-border-subtle); } .btn-transform { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .btn-transform:active { transform: translateY(4px); } .bg-checkered { background-color: #3a3a3a; opacity: 1; background-image: radial-gradient(ellipse farthest-corner at 10px 10px, #212529, #212529 50%, #303438 50%); background-size: 10px 10px; } .wiki-main-wrapper pre:has(> code) { background: var(--bs-tertiary-bg); padding: 10px; border-radius: 5px; margin-bottom: 2rem; } .auto-expand-text-area { width: 100%; padding: 10px; box-sizing: border-box; overflow: hidden; /* Prevents scrollbar */ resize: none; /* Disable manual resizing */ } /*# sourceMappingURL=style-new.css.map */