/* Margin and Padding Utilities for 16px and 32px */

/* Padding 16px */
.pad-t-16 { padding-top: 16px !important; }
.pad-b-16 { padding-bottom: 16px !important; }
.pad-l-16 { padding-left: 16px !important; }
.pad-r-16 { padding-right: 16px !important; }
.pad-16   { padding: 16px !important; }

/* Padding 24px */
.pad-t-24 { padding-top: 24px !important; }
.pad-b-24 { padding-bottom: 24px !important; }
.pad-l-24 { padding-left: 24px !important; }
.pad-r-24 { padding-right: 24px !important; }
.pad-24   { padding: 24px !important; }

/* Padding 32px */
.pad-t-32 { padding-top: 32px !important; }
.pad-b-32 { padding-bottom: 32px !important; }
.pad-l-32 { padding-left: 32px !important; }
.pad-r-32 { padding-right: 32px !important; }
.pad-32   { padding: 32px !important; }

/* Padding 64px */
.pad-t-64 { padding-top: 64px !important; }
.pad-b-64 { padding-bottom: 64px !important; }
.pad-l-64 { padding-left: 64px !important; }
.pad-r-64 { padding-right: 64px !important; }
.pad-64   { padding: 64px !important; }

/* Margin 16px */
.mar-t-16 { margin-top: 16px !important; }
.mar-b-16 { margin-bottom: 16px !important; }
.mar-l-16 { margin-left: 16px !important; }
.mar-r-16 { margin-right: 16px !important; }
.mar-16   { margin: 16px !important; }

/* Margin 24px */
.mar-t-24 { margin-top: 24px !important; }
.mar-b-24 { margin-bottom: 24px !important; }
.mar-l-24 { margin-left: 24px !important; }
.mar-r-24 { margin-right: 24px !important; }
.mar-24   { margin: 24px !important; }

/* Margin 32px */
.mar-t-32 { margin-top: 32px !important; }
.mar-b-32 { margin-bottom: 32px !important; }
.mar-l-32 { margin-left: 32px !important; }
.mar-r-32 { margin-right: 32px !important; }
.mar-32   { margin: 32px !important; }

/* Margin 64px */
.mar-t-64 { margin-top: 64px !important; }
.mar-b-64 { margin-bottom: 64px !important; }
.mar-l-64 { margin-left: 64px !important; }
.mar-r-64 { margin-right: 64px !important; }
.mar-64   { margin: 64px !important; }

/* Mobile (max-width: 639px) overrides for padding and margin utilities */
@media screen and (max-width: 639px) {
  /* Padding 16px */
  .mob-pad-t-16 { padding-top: 16px !important; }
  .mob-pad-b-16 { padding-bottom: 16px !important; }
  .mob-pad-l-16 { padding-left: 16px !important; }
  .mob-pad-r-16 { padding-right: 16px !important; }
  .mob-pad-16   { padding: 16px !important; }

  /* Padding 24px */
  .mob-pad-t-24 { padding-top: 24px !important; }
  .mob-pad-b-24 { padding-bottom: 24px !important; }
  .mob-pad-l-24 { padding-left: 24px !important; }
  .mob-pad-r-24 { padding-right: 24px !important; }
  .mob-pad-24   { padding: 24px !important; }

  /* Padding 32px */
  .mob-pad-t-32 { padding-top: 32px !important; }
  .mob-pad-b-32 { padding-bottom: 32px !important; }
  .mob-pad-l-32 { padding-left: 32px !important; }
  .mob-pad-r-32 { padding-right: 32px !important; }
  .mob-pad-32   { padding: 32px !important; }

  /* Padding 64px */
  .mob-pad-t-64 { padding-top: 64px !important; }
  .mob-pad-b-64 { padding-bottom: 64px !important; }
  .mob-pad-l-64 { padding-left: 64px !important; }
  .mob-pad-r-64 { padding-right: 64px !important; }
  .mob-pad-64   { padding: 64px !important; }

  /* Margin 16px */
  .mob-mar-t-16 { margin-top: 16px !important; }
  .mob-mar-b-16 { margin-bottom: 16px !important; }
  .mob-mar-l-16 { margin-left: 16px !important; }
  .mob-mar-r-16 { margin-right: 16px !important; }
  .mob-mar-16   { margin: 16px !important; }

  /* Margin 24px */
  .mob-mar-t-24 { margin-top: 24px !important; }
  .mob-mar-b-24 { margin-bottom: 24px !important; }
  .mob-mar-l-24 { margin-left: 24px !important; }
  .mob-mar-r-24 { margin-right: 24px !important; }
  .mob-mar-24   { margin: 24px !important; }

  /* Margin 32px */
  .mob-mar-t-32 { margin-top: 32px !important; }
  .mob-mar-b-32 { margin-bottom: 32px !important; }
  .mob-mar-l-32 { margin-left: 32px !important; }
  .mob-mar-r-32 { margin-right: 32px !important; }
  .mob-mar-32   { margin: 32px !important; }

  /* Margin 64px */
  .mob-mar-t-64 { margin-top: 64px !important; }
  .mob-mar-b-64 { margin-bottom: 64px !important; }
  .mob-mar-l-64 { margin-left: 64px !important; }
  .mob-mar-r-64 { margin-right: 64px !important; }
  .mob-mar-64   { margin: 64px !important; }
}


.text-left-centered-list {
	width: 250px;

	margin-left: auto;

	margin-right: auto;
}

.img-reverse {
	transform: scaleX(-1);
}

#fhsaModal {
	max-width: 600px;
}

@media screen and (min-width: 640px) {
	.custom-bnr {
		background-position: 75% 50% !important;
	}

	.increased-mar-b li,
	.mar-b-20 {
		margin-bottom: 20px;
	}
}

@media screen and (min-width: 768px) {
	.custom-bnr {
		width: 320px !important;
	}

	.invest-height {
		min-height: 55px;
	}

	.modal .modal-inner {
		min-height: 0px !important;
	}

	.desktop-right {
		text-align: right !important;
	}
}

@media screen and (max-width: 639px) {
	.custom-bnr {
		background-position: 75% 10% !important;
	}

	.mar-b-20 {
		margin-bottom: 15px;
	}

	section.disclaimer .table-cell a {
		word-break: break-word;
	}
}

.bg-cool-blue {
	background-color: #e3f4ff;
}

.more-toggle:before {
	content: "";
	height: 1px;
	width: 100%;
	background-color: #c4c8cc;
	position: absolute;
	top: 25%;
	left: 0;
	z-index: 0;
}

.blue-border {
	border-top-style: solid;

	border-top-color: #006ac3;

	border-top-width: 2px;

	border-bottom-style: solid;

	border-bottom-color: #006ac3;

	border-bottom-width: 2px;
}

.tooltip-trigger > .trigger-icon {
	margin-left: 5px;
}

.more-toggle .collapsed .tfsa span:after {
    content: "Show Ways to Invest in a TFSA";
}

.more-toggle .tfsa span:after {
    content: "Hide Ways to Invest in a TFSA";
}

.more-toggle .collapsed .rrsp span:after {
    content: "Show Ways to Invest in a RRSP";
}

.more-toggle .rrsp span:after {
    content: "Hide Ways to Invest in a RRSP";
}

.more-toggle .collapsed .fhsa span:after {
    content: "Show Ways to Invest in a FHSA";
}

.more-toggle .fhsa span:after {
    content: "Hide Ways to Invest in a FHSA";
}

.more-toggle .collapsed .resp span:after {
    content: "Show Ways to Invest in a RESP";
}

.more-toggle .resp span:after {
    content: "Hide Ways to Invest in a RESP";
}

.more-toggle .collapsed .rdsp span:after {
    content: "Show Ways to Invest in a RDSP";
}

.more-toggle .rdsp span:after {
    content: "Hide Ways to Invest in a RDSP";
}

.more-toggle .collapsed .rrif span:after {
    content: "Show Ways to Invest in a RRIF";
}

.more-toggle .rrif span:after {
    content: "Hide Ways to Invest in a RRIF";
}

.more-toggle .collapsed .gic span:after {
    content: "Show Ways to Invest in a GIC";
}

.more-toggle .gic span:after {
    content: "Hide Ways to Invest in a GIC";
}

.more-toggle .collapsed .mutual-funds span:after {
    content: "Show Ways to Buy Mutual Funds";
}

.more-toggle .mutual-funds span:after {
    content: "Hide Ways to Buy Mutual Funds";
}

.more-toggle .collapsed .stocks-and-bonds span:after {
    content: "Show Ways to Buy Stocks and Bonds";
}

.more-toggle .stocks-and-bonds span:after {
    content: "Hide Ways to Buy Stocks and Bonds";
}

.more-toggle .collapsed .etfs span:after {
    content: "Show Ways to Buy ETFs";
}

.more-toggle .etfs span:after {
    content: "Hide Ways to Buy ETFs";
}

.more-content .grid-one-third {
	display: flex;
	flex-direction: column;
}

.more-content .grid-one-third p:last-child {
	margin-top: auto;
}

.secure-btn .btn:not(.tablesaw-nav-btn).tertiary {
    background: #FEDF01;
    box-shadow: none;
    color: #252525 !important;
}

/* Left Nav */
.lvl-root-menu {
    padding: 16px 29px !important;
}
.lvl-root-menu .actionPanelLink,
.leftnav-menu ul.link-list li > a:not(.btn),
.leftnav-menu ul.link-list li.dropdown > .lvl-toggle {
    font-size: 16px;
    line-height: 24px;
}
.lvl-root-menu .actionPanelLink {
    font-weight: 500;
}
.leftnav-menu ul.link-list li > a:not(.btn),
.leftnav-menu ul.link-list li.dropdown > .lvl-toggle {
    font-weight: 400;
}
.leftnav-menu ul.link-list li > a:not(.btn) {
    margin: 0 24px 0 42px;
    padding: 16px 0;
}
.leftnav-menu ul.link-list li.dropdown > .lvl-toggle {
    padding: 16px 29px;
}
.leftnav-menu ul.link-list ul > li.active-open,
.leftnav-menu ul.link-list ul > li.dropdown {
    background-color: #F3F4F6;
}
.leftnav-menu ul.link-list li.dropdown > .lvl-toggle.active-lvl:before {
    width: 6px;
}

/* Section Tabs */
.section-tabs .tab-nav li.active a:after {
    height: 2px;
    left: -15px;
    width: 175px;
}

section.section-tabs>.section-inner>.tab-nav {
    border-bottom: 1px solid #E0E0E0;
}

section.section-tabs>.section-inner>.tab-nav li {
    padding: 14px 16px 0px 16px !important;
}

.section-tabs .tab-nav li a{
    padding-bottom: 12px;
    color: #6F6F6F;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.section-tabs .tab-nav li.active a{
    color: #006AC3;
}

section.section-tabs>.section-inner>.tab-nav li:before {
    width: 0px !important;
}

/* Filter Buttons */

.filter-text {
    color: #6F6F6F;
    font-family: 'RBCDisplay';
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    line-height: 20px;
}

.filter-container {
    display: flex;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: scroll;
    gap: 16px;
    margin-left: 16px;
}

@media only screen and (min-width: 720px) {
    .filter-container {
        justify-content: center;
    }
}

.type-btn {
    display: flex;
    flex: 0 0 auto;
    border-radius: 63px;
    border: 1px solid #B3B3B3;
    background: #FFF;
    padding: 8px 15px;
    align-items: center;
    justify-content: center;
    height: 33px;
    cursor: pointer;
}

.type-btn.active {
    border: 2px solid #006AC3;
    background: #E3F4FF;
}

.type-btn a {
    color: #006AC3;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}

[role=button] {
    cursor: pointer;
}

/* Personalized Offer */

.personalized-offer {
    border: 1px solid #D4D7DA;

    .account-title-container {
        background: #006AC3;
    }

    .account-title {
        font-size: 30px;
        font-weight: 500;
    }

    .account-description {
        font-family: 'RBCDisplay';
        font-size: 20px;
        font-weight: 500;
        line-height: 25px; 
    }

    .offer-expiry {
        font-family: 'Roboto';
        font-size: 11px;
        font-weight: 400;
        line-height: 12px;
    }

    .divider {
        border-top: 1px solid #C6C7C9;
    }

    .collapse-content {
        .check-list li {
            color: #1F1F1F;
            font-family: 'Roboto';
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;

            /* make saturation 0 using css filter */
            /* filter: saturate(0); */
        }
    }

    .btn.tertiary {
        padding: 14px 20px;

        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .more-content {
        .more-content-title {
            font-family: 'RBCDisplay';
            font-size: 24px;
            font-weight: 500;
            line-height: 30px;
        }

        .account-open-options {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            align-self: stretch;

            .snipe.pill {
                border-radius: 4px;
            }
            
            .option-block {
                background: #FAFAFA;
                padding: 24px;
                max-width: 228px;
                min-height: 239px;
                text-align: center;

                h4 {
                    font-family: 'RBCDisplay';
                    font-size: 18px !important;
                    font-weight: 500;
                    line-height: 27px !important;

                    margin-bottom: 8px;
                }

                .invest-height {
                    font-family: 'Roboto';
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 24px;
                }
            }

            .special-block {
                position: relative;
                border: 1px solid #010101;
                background: #F3F7F8;

                .snipe {
                    position: absolute;
                    top: 0%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .btn {
                    background: #006AC3;
                    color: #FFF !important;
                    font-family: Roboto;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 20px;
                }
            }
        }
    }
}

/* No Offer */
.no-offer {
    border: 1px solid #D4D7DA;

    .account-title-container {
        background: #FFF;
        border-bottom: 1px solid #D4D7DA;
    }

    .account-title {
        font-size: 24px;
        font-weight: 500;
    }

    .account-description {
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
    }

    .divider {
        border-top: 1px solid #C6C7C9;
    }

    .collapse-content {
        .check-list li {
            color: #1F1F1F;
            font-family: 'Roboto';
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;

            /* make saturation 0 using css filter */
            /* filter: saturate(0); */
        }
    }

    .btn.tertiary {
        padding: 14px 20px;

        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .more-content {
        .more-content-title {
            font-family: 'RBCDisplay';
            font-size: 24px;
            font-weight: 500;
            line-height: 30px;
        }

        .account-open-options {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            align-self: stretch;
            
            .option-block {
                background: #FAFAFA;
                padding: 24px;
                max-width: 228px;
                min-height: 239px;
                text-align: center;

                h4 {
                    font-family: 'RBCDisplay';
                    font-size: 18px !important;
                    font-weight: 500;
                    line-height: 27px !important;

                    margin-bottom: 8px;
                }

                .invest-height {
                    font-family: 'Roboto';
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 24px;
                }
            }
        }
    }
}

.wealth-planning-block {
    .block-inner {
        display: flex;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;

        background: #EDF7FC;

        img {
            margin-right: 8px;
            margin-top: 2px;
        }

        h5 {
            color: #001B32;
            font-family: 'Roboto';
            font-size: 14px !important;
            font-weight: 500;
            line-height: 20px !important;
        }

        p {
            color: #252525;
            font-family: 'Roboto';
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
        }

        a {
            color: #006AC3;
            font-family: 'Roboto';
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
        }
    }
}

.personalized-offer, .no-offer {
    .yellow-pill {
        display: inline-block;
        border-radius: 19.5px;
        padding: 4px 12px;
        border: 1px solid #FBAA26;

        p {
            font-family: 'Roboto';
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }
    }
}

.blue-callout-header {
    background: #006AC3 !important;

    .account-title {
        color: #FFF !important;
    }
}

#callout-fhsa .more-content .account-open-options .option-block,
#callout-gic .more-content .account-open-options .option-block {
    max-width: 356px;
    width: 100%;
}

  .more-gic-wpr {
    display: flex;
    justify-content: center;
  }
  .more-gic-wpr > div:first-child {
    border-right: 1px solid #c4c8cc;
    padding-right: 40px;
    display: flex;
    align-items: flex-end;
  }
  .more-gic-wpr > div:last-child {
    padding-left: 40px;
  }
  .more-gic-wpr a {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    text-transform: none !important;
  }
  .more-gic-wpr p {
    font-weight: 400;
  }
  @media only screen and (max-width: 639px){
    .more-gic-wpr > div:last-child {
      padding-left: 15px;
    }
    .more-gic-wpr > div:first-child {
      padding-right: 15px;
    }
    .more-gic-wpr a {
      margin-right: 0 !important;
    }
    .more-gic-wpr > div {
      flex-basis: 50%;
    }
  }

/* Mobile */

@media (max-width: 639px) {
    .columns-wpr .leftnav-column {
        max-width: 100%;
        max-height: 83px;
    }

    section.section-tabs>.section-inner>.tab-nav {
        display: flex !important;
    }

    section.section-tabs>.section-inner>.tab-nav li.active {
        border-bottom: 2px solid #006AC3 !important;
    }

    .section-tabs .tab-nav li.active, .tabs .tab-nav li.active {
        -webkit-box-shadow: unset;
        box-shadow: unset;
    }

    section.section-tabs>.section-inner>.tab-nav li {
        padding: 14px 16px 12px 16px !important;
        border-top: 0px !important;
        max-width: 176px;
    }

    .inv-account-content, .inv-product-content {
        padding: 16px
    }

    .personalized-offer, .no-offer {
        .account-title {
            font-weight: 500;
            line-height: 25px;
        }
    }

    .personalized-offer {
        .account-title {
            font-size: 20px;
        }
    }

    .no-offer {
        .account-title {
            font-size: 18px;
        }
    }

    .personalized-offer, .no-offer {
        & .collapse-content {
            .check-list li {
                margin-bottom: 8px;
            }
        }
    }

    .personalized-offer, .no-offer {
        & .more-content {
            .more-content-title {
                font-size: 18px;
                line-height: 27px;
            }
        }
    }

    .personalized-offer, .no-offer {
        & .more-content {
            .account-open-options {
                flex-direction: column;
            }
        }
    }

    .personalized-offer, .no-offer {
        & .more-content {
            & .account-open-options {
                .option-block {
                    padding: 16px;
                    max-width: 100%;
                    min-height: 155px;
                }
            }
        }
    }

    .personalized-offer {
        .account-description {
            font-size: 18px;
        }
    }
}