.html5 label {
    margin-bottom: 4px;
}

.html5 .row {
    margin-left: 0;
    margin-right: 0;
}

.alignRight {
    text-align: right;
}

.medium {
    font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
}

/* .semibold {
  font-family: Whitney-Semibld-Pro, Arial, Helvetica, sans-serif;
} */

.hide-for-desktop {
    display: none;
}

.hide-for-mobile {
    display: block;
}

.clear {
    clear: both;
}

.searchWrapper {
    padding-right: 13px;
}

#search {
    width: 100%;
    height: 60px;
    border-color: #86888a;
    border-radius: 4px;
    padding-left: 50px;
    font-size: 16px;
}

#search:focus-visible {
    border: 2px solid #383b3e;
}

.searchWrapper .searchIcon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    left: 25px;
}

.searchWrapper .searchIcon.mag {
    background: url(/content/dam/cibc-public-assets/personal-banking/investment/etfs/images/search-20x20-charcoal.svg) no-repeat;
}

.searchWrapper .searchIcon.spin {
    background: url(/content/dam/cibc-public-assets/personal-banking/investment/etfs/images/search-circle-20x20-charcoal.svg) no-repeat;
    transform: rotate(0deg);
    display: none;
}

.searchWrapper #clearSearchBtn {
    position: absolute;
    color: #383b3e;
    left: calc(100% - 46px);
    top: 21px;
    line-height: 18px;
    height: 19px;
    font-size: 18px;
    display: none;
}

.searchWrapper #clearSearchBtn:hover,
.searchWrapper #clearSearchBtn:focus {
    border-bottom: 1px solid #c41f3e;
    color: #c41f3e;
}

.filterButton {
    margin-top: 8px;
    text-align: right;
    padding-right: 0;
    float: right;
}

.filterButton button {
    width: 165px;
    padding: 11px 20px;
}

html[lang="fr"] .filterButton button {
    width: 211px;
}

.filterButton button .filters-header-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 12px;
    background: url(/content/dam/cibc-public-assets/personal-banking/investment/etfs/images/filter-icon-24x24.svg) no-repeat 0 0;
    background-size: cover;
}

.filterButton button:hover .filters-header-icon,
.filterButton button:focus .filters-header-icon {
    background: url(/content/dam/cibc-public-assets/personal-banking/investment/etfs/images/filter-icon-24x24-reverse.svg) no-repeat 0 0;
    background-size: cover;
}

.filterButton button span {
    text-align: left;
}

@media (hover: none) and (pointer: coarse) {

    #showFilters:hover,
    #hideFilters:hover {
        color: #c41f3e !important;
        background-color: rgba(0, 0, 0, 0) !important;
        border: 2px solid #c41f3e !important;
    }

    .filterButton button:hover .filters-header-icon {
        background: url(/content/dam/cibc-public-assets/personal-banking/investment/etfs/images/filter-icon-24x24.svg) no-repeat 0 0;
    }
}

#hideFilters {
    display: none;
    margin-top: 0;
}

#filtersDropdowns {
    background-color: #fff;
    padding: 14px 10px 10px 10px;
    border-radius: 8px;
    display: none;
}

.tooltipandlabelContainer {
    display: flex;
}

.tooltipandlabelContainer .tooltip-wrapper.tooltip-inline {
    top: 0;
}

.selectedFilters {
    display: none;
    padding: 10px 20px 6px 20px;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.selectedFilters .selected-list {
    display: inline;
    width: auto;
}

.selectedFilters .selected-list li.selected-option {
    display: inline-block;
    width: auto;
    margin: 0 14px 14px 0 !important;
    padding: 0;
    border: none;
}

.selectedFilters .selected-list li.selected-option a {
    display: block;
    padding: 5px 16px;
    width: 100%;
    line-height: 26px;
    border: 2px solid #86888a;
    border-radius: 4px;
}

.selectedFilters .selected-list li.selected-option a:hover {
    background-color: #8b1d41;
    border-color: #8b1d41;
}

.selectedFilters .selected-list li.selected-option a .icon {
    color: #383b3e;
}

.selectedFilters .selected-list li.selected-option:hover a .icon {
    color: #fff;
}

#filtersDropdowns .combobox-wrapper.multiselect .listbox {
    max-height: 19rem;
}

#filtersDropdowns .combobox-wrapper.multiselect .listbox.checkbox-style li {
    padding: 0.625rem 15px 0.625rem 3.5rem;
}

#filtersDropdowns .label-wrapper {
    margin-bottom: 0;
}

#filtersDropdowns .label-wrapper label {
    margin-bottom: 0;
}

.combobox-wrapper.multiselect .combobox .multiselect-button:focus {
    padding: 9px 29px 9px 14px;
}

.combobox-wrapper.multiselect .combobox:hover .multiselect-button {
    padding: 10px 30px 10px 15px !important;
}

.combobox-wrapper.multiselect .combobox:hover .multiselect-button:focus {
    padding: 9px 29px 9px 14px !important;
}

.combobox-wrapper.multiselect .multiselect-button:active,
.combobox-wrapper.multiselect .multiselect-button:focus {
    border: 2px solid #383b3e !important;
    background-color: #fafafa !important;
}

.resetFiltersLinkWrapper {
    position: absolute;
    right: 10px;
    bottom: 20px;
    text-align: right;
}

.resetFiltersLinkWrapper a:hover {
    border-bottom: none;
}

.resetFiltersLinkWrapper img {
    margin-top: -5px;
}

.resetFiltersLinkWrapper p {
    display: inline;
    color: #333;
}

.resetFiltersLinkWrapper a:hover p {
    color: #c41f3e;
    border-bottom: 1px solid #c41f3e;
}

.topNote {
    margin-top: 20px;
    margin-bottom: 4px;
}

.tableWrapper {
    border-radius: 8px;
    background-color: #fff;
    display: none;
}

table,
th,
td {
    border: none;
    border-collapse: collapse;
    font-size: 1rem !important;
}

table.etfTable {
    width: 100%;
    margin: 0;
    background-color: transparent;
}

table.etfTable thead {
    height: 64px;
    background-color: transparent;
}

table.etfTable th {
    padding: 12px 37px 12px 0;
}

html[lang="fr"] table.etfTable th {
    padding: 12px 24px 12px 0;
}

table.etfTable td {
    padding: 10px 37px 10px 0;
}

html[lang="fr"] table.etfTable td {
    padding: 10px 24px 10px 0;
}

table.etfTable td.ticker {
    padding-right: 60px;
}

table.etfTable th,
table.etfTable tr {
    text-align: left;
    border-bottom: 4px solid #f2f3f2;
}

table.etfTable th:last-child,
table.etfTable td:last-child {
    padding-right: 0;
}

table.etfTable th {
    font-size: 16px;
    line-height: 26px;
    font-weight: normal;
    vertical-align: middle;
    font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
}

table.etfTable td {
    background-color: #fff;
    vertical-align: middle;
    line-height: 26px;
}

table.etfTable a.sortIcon {
    color: #333;
}

table.etfTable a.sortIcon:hover,
table.etfTable a.sortIcon:focus {
    border-bottom: 1px solid transparent;
}

table.etfTable a.sortIcon:hover span,
table.etfTable a.sortIcon:focus span {
    color: #c41f3e;
    border-bottom: 1px solid #c41f3e;
}

table.etfTable sup {
    line-height: 12px;
}

table.etfTable sup a:hover,
table.etfTable sup a:focus {
    border-bottom: #c41f3e 1px solid;
}

table.etfTable td .tickerLabel {
    padding: 6px 0;
    background-color: #383b3e;
    color: #fff;
    font-size: 14px;
    margin: 0 18px 0 16px;
    flex: 0 0 68px;
    text-align: center;
    line-height: 11px;
    height: 23px;
    border-radius: 2px;
    font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
}

table.etfTable td .tickerName {
    font-size: 1.125rem;
    line-height: 28px;
    color: #333;
    margin: 8px 0;
    width: 80%;
    font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
}

table.etfTable td .tickerName span {
    display: inline;
    /* border-bottom: 1px solid #333; */
}

table.etfTable td div {
    /* display: block; */
    width: 95%;
    height: 100%;
    /* border-bottom: none; */
}

html[lang="fr"] table.etfTable td div {
    vertical-align: middle;
}

table.etfTable th a {
    margin-left: 0;
    display: flex;
    width: 100%;
    height: 100%;
}

table.etfTable th div {
    float: left;
}

/* table.etfTable th a:focus {
  border-bottom: none;
}

table.etfTable a:hover {
  border-bottom: none;
} */

/* table.etfTable a:hover .tickerName span,
table.etfTable a:focus .tickerName span {
  color: #c41f3e;
  border-bottom: none;
} */

/* table.etfTable a:hover .tickerLabel,
table.etfTable a:focus .tickerLabel {
  background-color: #c41f3e;
} */

table.etfTable sup {
    display: inline-block;
}

.html5 .noResult {
    background-color: #fff;
    padding: 40px 0;
    margin-bottom: 15px;
    border-radius: 8px;
    display: none;
}

.html5 .noResult p {
    margin-bottom: 20px;
    text-align: center;
    font-size: 26px;
    line-height: 36px;
}

.html5 .noResult .content {
    width: 380px;
    margin: 0 auto;
}

.html5 .noResult .content p {
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    font-weight: bold;
}

.html5 .noResult .content li {
    margin-bottom: 0;
}

.pagenition {
    width: 100%;
    background-color: #fff;
    padding: 0 20px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pagenition .currentRange {
    white-space: nowrap;
}

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

.pagenition .rightArea ul {
    list-style: none;
    margin: 0;
    display: inline-block;
}

.pagenition .rightArea ul > li {
    display: inline !important;
}

.pagenition .rightArea button {
    text-align: center;
    border-radius: 4px;
    margin: 0;
    padding: 6px 12px;
    background-color: transparent;
    font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
    transition: none;
    width: auto;
}

.pagenition .rightArea button.chevron {
    padding: 0px;
}

.pagenition .rightArea button:hover {
    border-bottom: none;
}

.pagenition .rightArea button:focus {
    border-bottom: none;
}

.pagenition .rightArea button span {
    color: #8b1d41;
    margin: 0;
    border-bottom: 1px solid transparent;
}

.pagenition .rightArea button span.ellipsis,
.pagenition .rightArea button:hover span.ellipsis {
    color: #8b1d41 !important;
    border-bottom: none;
}

.pagenition .rightArea button:hover span {
    border-bottom: 1px solid #c41f3e;
    color: #c41f3e;
}

.pagenition .rightArea button.selected {
    background-color: #383b3e;
}

.pagenition .rightArea button.selected span {
    color: #fff;
}

.pagenition .rightArea button.selected:hover span {
    border-bottom: 1px solid transparent;
    color: #fff;
}

.pagenition button.chevron:hover {
    background-color: transparent;
}

.pagenition #tickersPerPage {
    width: 78px;
    margin: 8px 20px 8px 8px;
}

.pagenition .chevron img {
    width: 20px;
    height: 20px;
    margin-top: -4px;
}

/* Tablet & Mobile */
.tableWrapperMobile {
    display: none;
}

.tableWrapperMobile .card {
    background-color: #fff;
    padding: 15px;
    width: 100%;
    margin: 0;
    border-bottom: 4px solid #f2f3f2;
}

.tableWrapperMobile .card:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.tableWrapperMobile .tickerLabel {
    margin: 0;
    margin-bottom: 4px;
    display: block;
    padding: 6px 0;
    background-color: #383b3e;
    color: #fff;
    font-size: 14px;
    width: 68px;
    display: block;
    text-align: center;
    line-height: 11px;
    height: 23px;
    border-radius: 2px;
    font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
}

.tableWrapperMobile .tickerName {
    font-family: "Whitney-Medium-Pro";
    font-size: 18px;
}

sup.placeholder {
    position: absolute;
    top: -9999px;
}

@media screen and (max-width: 959px) {
    .hide-for-desktop {
        display: block;
    }

    .hide-for-mobile {
        display: none;
    }

    .searchWrapper {
        width: calc(100vw - 220px);
        padding-right: 0;
    }

    html[lang="fr"] .searchWrapper {
        width: calc(100vw - 266px);
    }

    .searchWrapper .searchIcon {
        left: 15px;
    }

    .searchWrapper #search {
        padding-left: 38px;
    }

    .searchWrapper #clearSearchBtn {
        left: calc(100% - 36px);
    }

    .sortDropdownWrapper {
        float: none;
        padding: 15px 13px 0 0;
    }

    .selectedFilters {
        padding: 10px 20px 6px 15px;
    }

    #sortDropdownLabel {
        font-family: Whitney-Book-Pro, Arial, Helvetica, sans-serif;
    }

    #filtersDropdowns {
        padding: 9px 5px 5px 5px;
    }

    .topNote {
        margin-left: 15px;
    }

    table.etfTable th {
        font-size: 1rem;
        /* 16px */
        font-family: Whitney-Book-Pro, Arial, Helvetica, sans-serif;
    }

    table.etfTable td {
        line-height: unset;
        font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
    }

    .cardLeft {
        padding-left: 0;
        padding-right: 20px;
    }

    .cardRight .columns {
        margin-bottom: 10px;
    }

    .cardDataTable {
        width: 100%;
        margin: 0;
    }

    .cardDataTable tr {
        background-color: transparent !important;
    }

    .cardDataTable tr td {
        padding: 0 0 10px 0;
        line-height: 26px;
    }

    .cardDataTable tr td.columnHeader {
        width: 80px;
        vertical-align: baseline;
    }

    html[lang="fr"] .cardDataTable tr td.columnHeader {
        width: 120px;
    }

    .cardDataTable tr:last-child td {
        padding: 0;
    }

    .cardDataTable tr td:last-child {
        text-align: right;
        font-family: Whitney-Medium-Pro, Arial, Helvetica, sans-serif;
    }

    .pagenition {
        margin-bottom: 15px;
    }

    #backToFiltersBtn {
        font-size: 16px;
        line-height: 26px;
        width: fit-content;
        margin: 0 auto 30px auto;
        color: #8b1d41;
    }

    #backToFiltersBtn img {
        margin-top: -4px;
        filter: brightness(70%);
    }

    #backToFiltersBtn:hover {
        border-bottom: none;
    }

    #backToFiltersBtn span {
        border-bottom: 1px solid transparent;
    }

    #backToFiltersBtn:hover span {
        border-bottom: solid 1px #c41f3e;
        color: #c41f3e;
    }

    #backToFiltersBtn:hover img {
        filter: none;
    }
}

@media screen and (max-width: 768px) {
    .card {
        font-size: 16px;
    }

    .cardLeft {
        padding-left: 0;
    }

    .pagenition {
        padding: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .pagenition .rightArea {
        margin-top: 30px;
    }

    .pagenition #tickersPerPage {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 580px) {
    .cardLeft {
        width: 33.33333%;
    }

    .cardRight {
        width: 66.66667%;
    }

    .pagenition {
        font-size: 16px;
    }
}

@media screen and (max-width: 520px) {
    #filtersDropdowns {
        padding: 15px 5px 5px 5px;
    }

    #filtersDropdowns .label-wrapper {
        margin-bottom: 4px;
    }

    .html5 .new-small-12 {
        width: 100% !important;
    }

    .searchWrapper {
        margin-bottom: 15px;
        padding-right: 0;
        width: 100% !important;
        float: none;
    }

    .sortDropdownWrapper {
        padding-right: 0;
    }

    .searchWrapper #clearSearchBtn {
        left: calc(100% - 44px);
    }

    .filterButton {
        float: none;
    }

    .filterButton button {
        width: 100% !important;
    }

    .filterButton button span.primary-label {
        text-align: left;
        width: 121px;
        margin: 0 auto;
    }

    html[lang="fr"] .filterButton button span.primary-label {
        width: 167px;
    }

    .filterButton {
        padding-left: 0;
        margin-top: 0;
    }

    .resetFiltersLinkWrapper {
        position: relative;
        text-align: center;
        font-size: 16px;
        padding: 26px 0 0 0;
    }

    .html5 .noResult {
        padding: 30px 15px;
    }

    .html5 .noResult .content {
        width: auto;
        margin: 0;
    }

    .html5 .noResult .content li {
        margin-left: 5px;
    }

    .cardRight {
        padding-left: 0;
        padding-right: 0;
    }

    .pagenition .rightArea .pageNumbers {
        width: fit-content;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
}

/* DIT9 - remove later!!!!!!!!!!!!!!! */
#enterprise-chat-wrapper {
    display: none;
}