body,
div,
p,
section {
    display: block;
    position: relative
}

# body,
body,
header,
html,
p {
    padding: 0
}

.inner,
body,
div,
p,
section {
    position: relative
}

.page - home.inner,
footer.inner,
header.inner {
    max - width: 1200 px !important
}

# alert,
.inner,
header {
    box - sizing: border - box
}

# alert a,
#alert a: hover,
body,
html {
    color: #333
}

.author,
.authors,
.gallery-container {
    grid-auto-flow: column
}

*,
input[type=range]: focus {
    outline: 0
}

.comment,
.page - body ol li,
textarea {
    word - break: break -word
}

.input - inline>a,
h1,
h2,
h3,
h4,
h5,
h6,
header {
    -webkit - font - smoothing: antialiased
}

.review - content.ProsCons table tbody td,
div,
p,
section {
    vertical - align: top
}

.carousel - item,
.review - card - inner>div {
    scroll - snap - align: start
}

@font - face {
    font - family: "Trebuchet MS";
    font - size: 16 px;
    line - height: 1.6;
    font - weight: 400;
    letter - spacing: -.45 px;
    word - spacing: 0.4 px
}

@font - face {
    font - family: Lato - fallback;
    size - adjust: 97.38 %;
    ascent - override: 99 %;
    src: local("Arial")
}

: root {
    --master - link - color: #195E84;
    --master-link-color-hover: # 144966;
    --master - color: #133d54;
    --master-secondary-color: # 133 d54;
    --master - light - color: #f5f8fa;
    --master - backdrop - color: #f5fafc;
    --master - logo: url("forexbrokers.svg") 0 0 no - repeat;
    --master - footer - logo: url("forexbrokers.svg") 0 0 no - repeat contain;
    --master - dark - logo: url("fx.webp") 0 0 no - repeat;
    --master - hero - mobile: url("FX-Hero-900x600-mobile.webp") top center;
    --master - hero: url("forex-homepage-masthead-1800x600.webp") top center;
    --color - array - background: #231f20;
    --color-array-foreground: # fff;
    --color - array - footer: #231f20;
    --color-array-menu_link: # ffffff;
    --color - array - star_rating_color: #2978A3;
    --color-array-cta_button_bg_color: # f8f8f8;
    --color - array - cta_button_bg_color_hover: #f0f7fb;
    --color - array - cta_background: #f8f8f8;
    --color - array - nav: #133d54;
    --color-array-navlink: # fff;
    --color - array - navlinkhover: #fff;
    --color - array - navlinkhoverunderline: #fff;
    --color - array - subnavlink: #133d54;
    --color-array-subnavlinkhover: # 133 d54;
    --color - array - sidebarrail: #3A92C3;
    --color-array-edusubheader: # F5FAFC;
    --css - array - a: underline;
    --css - array - a - hover: underline;
    --main - gray - med: #545454;
    --main-gray-black: # 231 f20;
    --main - light: var (--master - light - color);
    --main - green: var (--master - color);
    --main - green - black: var (--master - link - color)
}

body,
html {
    margin: 0;
    font - weight: 400;
    font - size: 16 px;
    font - family: Lato, Lato - fallback, "Trebuchet MS", serif;
    font - display: swap;
    min - height: 100 vh;
    background: var (--color - array - background, #231f20)
}

.hidden,
.mobile,
.mobile-menu-active .navigationv4-div-sub-left-selector,
.sticky-mode.force-no-sticky # sticky - offer,
header ul.navigationv3.material - icons {
    display: none !important
}

body {
    overflow - y: scroll
}

# body {
    background - position: center center;
    background - repeat: no - repeat;
    z - index: 5;
    background: var (--color - array - foreground, #fff)
}

# alert,
.admin# body>.inner {
    padding: 20 px 0
}

.fixed {
    overflow: hidden;
    overflow - y: hidden
}

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

::-webkit - input - placeholder {
    font - weight: 400;
    font - family: inherit;
    - webkit - font - smoothing: antialiased;
    font - family: inherit;
    font - size: 20 px;
    color: #9fa3a7
}

.compare-table tbody tr:last-child,
img {
    border: 0
}

textarea {
    padding: 10px !important;
    white-space: normal;
    resize: none;
    text-indent: 0
}

div,
p,
section {
    margin: 0;
    padding: 0
}

p {
    font-size: 18px
}

.desktop {
    display: inline;
    visibility: visible
}

b {
    font-weight: 700
}

header {
    width: 100%;
    text-align: left;
    top: 0;
    z-index: 1000;
    display: flex;
    background: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
}

.inner {
    display: block;
    margin: 0 auto;
    height: auto;
    max-width: 940px;
    width: calc(100% - 40px)
}

header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100
}

.ad-trk {
    width: 1px;
    height: 1px;
    position: absolute;
    display: inline;
    font-size: 0
}

.floater,
.gallery-floater {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.ad-trk img,
.hover-display {
    visibility: hidden
}

.noscroll {
    overflow: hidden !important
}

.locked {
    color: green;
    font-size: 21px;
    vertical-align: bottom
}

.no-scroll-bar::-webkit-scrollbar {
    width: 0 !important
}

.material-icons[data-icon]:after {
    display: block;
    content: attr(data-icon);
    font-family: "Material Icons"
}

.gallery-floater {
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center
}

# alert,
.dispatches,
.floater,
.hidden_a_list,
.mobile - responsive.compare - table tr td: first - child span[data - info],
.mobile - responsive.compare - table tr th: first - child span[data - info],
.sticky - mode# sticky - offer a[data - location=legacysummarycard],
.sticky - mode# sticky - offer: empty,
.sticky - offer - exit {
    display: none
}

.gallery - floater img {
    width: 90 %;
    height: 90 %;
    object - fit: contain
}

.floater {
    background: rgba(255, 255, 255, .5);
    overflow - y: scroll;
    - webkit - overflow - scrolling: touch;
    padding - bottom: 40 px
}

.dispatches {
    position: relative;
    margin: auto;
    height: auto;
    border - radius: 3 px;
    background: #fff;
    box - shadow: 0 0 10 px rgba(0, 0, 0, .3);
    vertical - align: middle;
    text - align: left;
    min - width: 300 px;
    width: auto;
    max - width: 700 px
}

.dispatches.exit {
    position: absolute;
    top: 5 px;
    right: 5 px;
    padding: 3 px 10 px;
    color: #fff;
    font - size: 24 px;
    opacity: .8;
    z - index: 5;
    text - decoration: none
}

.carousel - navigate - arrow: hover,
.dispatches.exit: hover {
    opacity: 1;
    text - decoration: none
}

.dispatch h4 {
    background: #231f20;
    color: # fff;
    padding: 12 px 20 px;
    font - size: 22 px;
    letter - spacing: .08 em
}

.active - section>form,
.dispatch - body,
.sub - form - dropdown.floating - dropdown {
    padding: 20 px
}

.dispatch.splitter {
    border - bottom: 1 px solid# d4d4d4;
    margin - top: 20 px;
    margin - bottom: 20 px
}

# alert {
    position: fixed;
    bottom: 10 %;
    left: 50 %;
    z - index: 10010;
    margin - left: -300 px;
    width: 600 px;
    height: auto;
    border: 5 px solid rgba(0, 0, 0, .5);
    border - radius: 10 px;
    background: padding - box# eee;
    - webkit - box - shadow: 0 5 px 15 px rgba(0, 0, .4);
    - moz - box - shadow: 0 5 px 15 px rgba(0, 0, .4);
    box - shadow: 0 5 px 15 px rgba(0, 0, 0, .4);
    text - align: center;
    font - weight: 200
}

# alertText {
    color: #000;
    font-size: 26px;
    padding: 3px 6px
}

.sticky-mode # sticky - offer {
    position: fixed;
    left: 0;
    right: 0;
    background: var (--color - array - cta_background);
    z - index: 10000000;
    top: 0;
    display: block !important;
    padding: 10 px !important
}

.sticky - mode# sticky - offer.sticky - offer - exit {
    display: block;
    position: fixed;
    right: 20 px;
    top: 20 px
}

.sticky - mode# sticky - offer.sticky - offer - body {
    margin: 0 auto;
    text - align: left;
    display: flex;
    flex - flow: row - reverse;
    justify - content: space - between;
    align - items: center;
    max - width: 940 px
}

.featured - partners.featured - on.inner.feature - logo - container i,
.filters input[type=text],
.sticky - mode# sticky - offer.btn,
header ul.navigationv3>li {
    display: inline - block
}

.sticky - mode# sticky - offer.offertext: not(.disclaimertext) {
    text - align: left;
    font - size: 20 px !important
}

.note - taker: not(.hidden),
.public - note: not(.hidden),
.sticky - mode# sticky - offer a[data - location=top - offer - icon],
.sticky - mode# sticky - offer a[data - location=top - offer] {
    display: block !important
}

.sticky - mode# sticky - offer.offertext {
    text - align: left !important;
    display: inline !important;
    font - size: 20 px !important;
    line - height: 32 px;
    color: #231f20
}

.sticky-mode # sticky - offer.sticky - offer - text {
    display: grid;
    grid - auto - flow: column;
    gap: 16 px;
    align - items: center
}

.sticky - mode# sticky - offer.disclaimertext {
    color: #545454
}

.sticky-mode # sticky - offer.offertext: not(.disclaimertext): has(+.disclaimertext: not(: empty)): after {
    content: "|";
    display: inline - block;
    font - size: inherit;
    color: #231f20;
    margin-left: 6px;
    margin-right: 4px
}

.sticky-mode # sticky - offer a[data - location=top - offer] {
    background: var (--master - link - color);
    border: none;
    color: #fff;
    margin: 0
}

.sticky - mode# sticky - offer a[data - location=top - offer]: hover {
    background: var (--master - link - color - hover) !important
}

.debug_master {
    display: block;
    font - size: 13 px;
    position: fixed;
    line - height: 1.6 em;
    top: auto;
    z - index: 9999999999;
    background: #fff;
    border: 5 px solid# b0b1b2;
    padding: 20 px;
    bottom: 30 px;
    right: -300 px;
    transition: .2 s;
    white - space: nowrap;
    width: 250 px
}

.input - drop,
.mobile - responsive.compare - table tr td: first - child,
.mobile - responsive.compare - table tr th: first - child {
    z - index: 1000
}

.debug_master: before {
    display: block;
    content: "!";
    width: 40 px;
    height: 40 px;
    background: #b0b1b25e;
    left: -40 px;
    top: -5 px;
    position: absolute;
    border - top - left - radius: 10 px;
    border - bottom - left - radius: 10 px;
    text - align: center;
    color: #fff;
    line - height: 1.8 em;
    font - size: 22 px;
    cursor: pointer
}

.debug_master: hover {
    right: -10 px
}

.expansion - 2025 {
    border: 2 px solid# e4e4eb;
    padding: 12 px;
    margin - bottom: 20 px
}

.expansion - 2025 - title.direction: before {
    font - family: "Material Icons";
    content: "arrow_downward";
    color: #7f8ca4;
    font-size: 20px;
    display: block;
    position: relative;
    transition: 90ms
}

.expansion-2025-content {
    height: 0;
    overflow: hidden;
    transition: 90ms
}

.expansion-2025-content.active {
    padding-top: 12px;
    height: auto
}

.expansion-2025-title.active .direction:before,
h3.has-section.active-h3:after {
    transform: rotate(180deg)
}

.table-admin-dashboard {
    width: 100%;
    border-collapse: collapse
}

.carousel-container,
.compare-table .tooltip,
.dropdown-ul li,
.overflow,
.star_half,
.table-admin-dashboard-loading td,
table thead td {
    position: relative
}

.table-admin-dashboard-loading td:after {
    content: "loading_text_here";
    background: # eee;
    color: #eee
}

.table - admin - dashboard - loading td: before {
    display: block;
    content: "";
    position: absolute;
    width: 100 px;
    height: 100 %;
    z - index: 10;
    animation: 1 s ease - in -out infinite bgslide;
    background: linear - gradient(90 deg, rgba(0, 0, 0, 0), #ffffff34 50 %, rgba(0, 0, 0, 0))
}

@keyframes bgslide {
    0 % {
        left: -100 px
    }

    100 % {
        left: 100 px
    }
}

.table - admin - dashboard td {
    padding: 18 px 8 px;
    border - bottom: 1 px solid #7f8ca4;
    color: # 545454;
    max - width: 600 px
}

.admin,
.page - body p {
    color: #231f20
}

.table-admin-dashboard td:first-child {
    padding-left: 0
}

.table-admin-dashboard td:last-child {
    padding-right: 0
}

.table-admin-dashboard thead tr {
    position: sticky;
    top: 0;
    background: # fff;
    z - index: 100
}

.admin: not(.insights_stockbrokers_com, .insights_forexbrokers_com, .insights_reinkmedia_com).inner {
    max - width: none !important
}

.admin: is(.insights_stockbrokers_com, .insights_forexbrokers_com, .insights_reinkmedia_com).page - body {
    padding: 32 px 0 !important
}

.admin: is(.insights_stockbrokers_com, .insights_forexbrokers_com, .insights_reinkmedia_com).inner {
    max - width: 1376 px !important;
    width: calc(100 % -64 px)
}

.insights_forexbrokers_com header,
.insights_reinkmedia_com header,
.insights_stockbrokers_com header {
    z - index: 10
}

.admin.body - split {
    display: grid;
    grid - template - columns: 4 fr 1 fr
}

.insights - category - links a {
    display: block;
    margin - bottom: 16 px;
    font - size: 20 px;
    text - decoration: underline
}

.no - expand.expand,
.note - taker p {
    padding - bottom: 20 px
}

.a_list,
.compare - table.sorting thead td,
.mobile - menu - button,
.sort thead td[data - sort],
td[data - sort] {
    cursor: pointer
}

.a_list: hover.hidden_a_list {
    display: block;
    position: absolute;
    background: #fff;
    padding: 20 px;
    border - radius: 20 px;
    min - width: 180 px;
    left: 0;
    top: 0;
    font - size: 12 px;
    max - height: 180 px;
    overflow: auto;
    box - shadow: 0 0 10 px rgba(0, 0, 0, .2);
    z - index: 100000000
}

.hidden_a_list a {
    display: block;
    margin - bottom: 7 px
}

.table - admin - dashboard tfoot td {
    border - bottom: none !important
}

.admin header.navigation {
    justify - content: flex - end;
    grid - gap: 20 px
}

.page - body {
    padding: 10 px 0
}

.page - body p {
    font - size: 20 px;
    line - height: 1.9 rem;
    font - weight: 400;
    margin - bottom: 20 px;
    overflow: hidden
}

.list - object label,
.page - home.page - body {
    padding: 0
}

.page - home.hero p {
    color: #fff
}

p+small {
    display: block;
    margin - bottom: 20 px
}

.page - body p: last - child {
    overflow: visible
}

.page - body h1 {
    font - size: 48 px
}

.page - body h2 {
    font - size: 32 px;
    padding - top: 24 px
}

.page - body h3 {
    font - size: 27 px;
    padding - top: 24 px
}

.page - body h4 {
    font - size: 21 px;
    padding - top: 24 px
}

.page - body h1,
.page - body h2,
.page - body h3,
.page - body h4 {
    margin - bottom: 24 px;
    font - weight: 700
}

.admin.page - body h1,
.admin.page - body h2 {
    padding: 0;
    margin - bottom: 16 px;
    font - size: 32 px
}

.page - body ol,
.page - body ul {
    display: block;
    line - height: 32 px;
    position: relative;
    margin - bottom: 20 px
}

.boxes.boxes - content: last - child,
.page - body ul ul,
.select - brokers - dropdown ul li: last - child,
.site - advisorsearchorg.boxes.boxes - content img,
.site - stockbrokerscom.featured - partners - carousel - container.carousel - item.ranting,
header ul.navigationv3>li ul li a: last - child {
    margin - bottom: 0
}

.page - body ul {
    list - style - type: disc
}

.page - body ol {
    list - style - type: initial
}

.page - body li {
    position: relative;
    margin - left: 7 px;
    font - size: 20 px
}

.page - body ol li {
    list - style: decimal
}

.page - body img[style *="float:left"] {
    display: inline - block;
    z - index: 100;
    margin - right: 24 px;
    margin - bottom: 100 vmax
}

.page - body img,
.reviews.review - content.review - stats.toggle - tab.act {
    height: auto
}

.authors {
    display: grid;
    grid - gap: 30 px
}

.authorship {
    padding - bottom: 36 px
}

.action - buttons,
.authorship.dates,
.floating - dropdown label[ for=none] {
    text - align: right
}

.author {
    display: grid;
    grid - gap: 24 px;
    align - items: center;
    font - weight: 700
}

.profile - picture {
    border - radius: 100 %;
    width: 64 px;
    height: 64 px;
    background - size: cover !important;
    overflow: hidden
}

.profile - picture img {
    margin: 0 !important;
    object - fit: cover !important;
    width: 100 %;
    height: 100 %
}

.breadcrumbs {
    padding - bottom: 16 px !important
}

.breadcrumbs a {
    text - decoration: none
}

.breadcrumbs a: hover,
footer.menu - footer ul li a: hover,
footer.middle - footer p a: hover {
    text - decoration: underline
}

.gallery - container {
    margin - bottom: 20 px;
    display: inline - grid;
    border - radius: 12 px
}

.gallery - container.gallery - item: nth - child(1n + 2) {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

h3.has - section {
    padding - right: 30 px
}

.page - body h3.has - section {
    padding - right: 33 px;
    cursor: pointer;
    content - visibility: auto;
    contain - intrinsic - size: 60 px
}

.inner>div: has(h3.has - section) h2: first - child+h3,
article>div: has(h3.has - section) h2: first - child+h3 {
    border - top: 4 px solid #555 !important
}

.inner>div:has(h3.has-section) section:last-child,
article>div:has(h3.has-section) section:last-child {
    border-bottom: 4px solid # 555 !important;
    margin - bottom: 60 px
}

h3.has - section: after {
    display: block;
    content: "\e313";
    color: #7f8ca4;
    font-family: "Material Icons";
    font-size: 38px;
    position: absolute;
    right: 0;
    top: 20px;
    transition: 90ms
}

h3.has-section+section.active-section {
    max-height: 6000px;
    transition: .2s ease-in-out;
    overflow: visible;
    content-visibility: auto
}

.dropdown-selector-master,
.review-cards-outter {
    content-visibility: auto
}

h3.has-section+section {
    height: auto;
    overflow: hidden;
    max-height: 0;
    border-bottom: 4px solid # e4e4eb
}

.first - section {
    border - top: 4 px solid #555
}

.last-section+section {
    border-bottom: 4px solid # 555 !important;
    margin - bottom: 60 px
}

# image - galley.item - gallery - container img,
.submit input {
    margin: 0 auto
}

# image - galley.image - description {
    text - align: center;
    color: #fff;
    margin - bottom: 20 px
}

.microhead,
.page - body img: not(.logo - broker img): not(.starv2),
.sidebar - nav.flip - direction {
    margin - bottom: 20 px
}

.compare - table {
    position: relative;
    max - width: none;
    border: 0;
    margin - bottom: 40 px;
    border - collapse: collapse
}

.compare - table thead img {
    max - width: 100 px
}

.compare - table tr {
    display: table - row;
    width: 100 %;
    color: #36383d;
    background: # fff
}

.compare - table tr td,
.compare - table tr th {
    display: table - cell;
    width: auto;
    border - right: 1 px solid# d8dadb;
    border - bottom: 1 px solid# d8dadb;
    padding: 7 px 5 px;
    font - size: 16 px;
    text - align: center
}

# image - galley,
.big - data - table>div>div {
    padding: 0 20 px
}

.compare - table tr td,
.image - gallery - container,
.pagination {
    text - align: center
}

.compare - table tr td: first - child,
.compare - table tr th: first - child {
    position: sticky;
    left: 0;
    height: auto;
    background: #fff;
    text - align: left;
    padding - left: 32 px;
    font - weight: 700;
    word - break: break -word
}

.compare - table thead tr td: first - child,
.compare - table thead tr th: first - child {
    z - index: 1
}

.compare - table tbody tr td: first - child,
.compare - table tbody tr th: first - child {
    border - right: 3 px solid# eee
}

.table - 2025.compare - table {
    display: table !important;
    max - width: none !important
}

.table - 2025.compare - table tbody tr td: first - child {
    text - align: left;
    padding - left: 32 px;
    max - width: 391 px;
    width: 50 %
}

.table - 2025.compare - table tbody tr td {
    min - width: auto !important
}

.table - 2025.table - footer - link {
    text - align: center;
    display: flex;
    justify - content: center;
    padding: 6 px
}

.review - card - inner {
    display: flex;
    justify - content: space - between;
    white - space: nowrap;
    overflow: hidden;
    overflow - y: hidden !important;
    transition: .1 s ease - in -out;
    scrollbar - width: none;
    flex: 1
}

.review - card - inner::-webkit - scrollbar {
    width: 0;
    background: 0 0
}

.review - card - inner>div {
    min - width: calc(100 % -30 px);
    display: block;
    padding: 15 px;
    scroll - snap - stop: always;
    transition: .1 s ease - in -out;
    white - space: normal;
    scroll - snap - type: y
}

# body.review - card - inner p,
.review - card - inner li {
    font - size: 16 px !important;
    line - height: 1.5 em
}

.review - cards {
    display: grid;
    grid - gap: 30 px;
    grid - template - columns: repeat(auto - fit, minmax(320 px, 360 px));
    justify - content: center;
    margin: 40 px 0
}

.review - card {
    background: #fff;
    border - radius: 20 px;
    box - shadow: 0 0 10 px 0 rgba(0, 0, 0, .16);
    transition: .1 s ease - in -out;
    display: flex;
    align - content: flex - start;
    flex - direction: column
}

.navigationv4 - div - sub - active.navigationv4 - div - sub - right.navigationv4 - div - sub - heading,
.review - card li {
    font - size: 16 px
}

.review - card - sponsored: after {
    display: block;
    position: absolute;
    content: "Sponsored";
    left: 0;
    top: -20 px;
    background: #fff;
    padding: 9 px 11 px;
    border - top - left - radius: 10 px;
    border - top - right - radius: 10 px;
    font - size: 13 px;
    color: #050505;
    font-weight: 400;
    letter-spacing: .2px
}

.review-card-nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid # f5f8fa
}

.review - card - nav>a {
    text - align: center;
    border: none !important;
    font - size: 14 px;
    padding: 15 px;
    font - weight: 600 !important;
    cursor: pointer;
    color: #231f20;
    text-decoration: none
}

.link:hover,
.review-card-nav>a.active,
a:hover {
    color: var(--master-link-color-hover)
}

.review-card-nav>a:hover {
    border-bottom: 2px solid # 231 f20 !important
}

.review - card - nav>a.active {
    border - bottom: 4 px var (--master - link - color - hover) solid !important
}

.overflow.m6 {
    max - width: 890 px;
    position: relative
}

.m6.ng - star - inserted {
    font - size: 18 px
}

.insights p a: hover {
    color: var (--master - link - color - hover, inherit) !important
}

.overflow.m6.compare - table {
    width: 100 %;
    max - width: fit - content;
    display: block;
    - ms - overflow - style: none;
    scrollbar - width: none;
    position: relative;
    overflow - x: auto;
    overflow - y: clip
}

.overflow.m6.compare - table::-webkit - scrollbar {
    display: none
}

.compare - table thead tr {
    border - bottom: 1 px solid #231f20
}

.compare-table thead tr td,
.compare-table thead tr th {
    border: 0;
    padding: 0 16px 8px;
    font-weight: 700;
    height: 50px
}

.compare-table thead tr td b {
    font-size: 16px;
    color: # 231 f20;
    font - weight: 700;
    line - height: 24 px
}

.compare - table tbody tr {
    hyphens: auto;
    white - space: normal;
    border - bottom: 1 px solid# e4e4eb
}

.compare - table tbody tr td {
    color: #545454;
    font-size: 16px;
    border: 0;
    padding: 12px 16px;
    min-width: 92px
}

.compare-table tbody tr td:first-child img,
.compare-table tbody tr th:first-child img {
    max-width: 128px
}

.compare-table .tooltip # tooltip {
    position: absolute;
    top: 100 %;
    left: 50 %;
    transform: translate(-50 %, 0);
    max - width: 238 px;
    width: 100 %;
    white - space: nowrap;
    font - size: 12 px;
    line - height: 16 px;
    color: #545454;
    background: # fff;
    box - shadow: 0 0 10 px rgba(0, 0, 0, .16);
    padding: 20 px 32 px 20 px 16 px;
    border - radius: 20 px;
    z - index: 3
}

.compare - table.tooltip# tooltip: before {
    content: "";
    display: block;
    position: absolute;
    left: 50 %;
    top: -12 px;
    width: 15 px;
    height: 15 px;
    background: #fff;
    transform: rotate(-45 deg) translate(-50 %, 0);
    z - index: -1
}

.compare - table.tooltip# tooltip a {
    position: absolute;
    top: 10 px;
    right: 15 px;
    color: #7f8ca4 !important;
    text-decoration: none
}

.tablestars {
    margin-bottom: 1.67px !important
}

.tablestars.arrows {
    margin-bottom: 16px !important
}

.carousel-container>div>div:after,
.featured-partners .featured-on:after,
.hub-resources:after,
.hub-top .inner .hub-top-title-progress:after,
.reviews .review-content .review-stats ul.nav-tabs:after,
.side-by-side-comparisons:after,
.tablestars.arrows:after,
.whitearea-leftimage:after,
footer .top-footer:after,
header ul.navigationv3>li ul:after {
    content: "";
    display: block;
    clear: both
}

.tablestars.arrows span {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 35px;
    text-align: center;
    line-height: 32px;
    text-decoration: none;
    background: # e4e4eb;
    border: 2 px solid# e4e4eb !important;
    border - radius: 100 px;
    margin - left: 16 px;
    cursor: pointer
}

.tablestars.arrows span: hover {
    background: #f8fcf8
}

.reviews.review - content.review - score.score - deposit.score - deposit - right,
.reviews.review - content.review - score.score - stars.score - stars - right,
.tablestars.arrows span.left,
.tablestars.arrows span.right {
    float: right
}

.tablestars.arrows span.right {
    margin - right: 15 px
}

.tablestars.arrows span.left: before {
    font - family: "Material Icons";
    content: "\e314";
    color: var (--master - link - color);
    margin - left: -2 px
}

.tablestars.arrows span.right: before {
    font - family: "Material Icons";
    content: "\e315";
    color: var (--master - link - color)
}

@media only screen and(max - width: 768 px) {

    .overflow.m6: after,
    .overflow.m6: before {
        content: "";
        height: 100 %;
        position: absolute;
        top: 0;
        z - index: 1
    }

    .compare - table tbody tr td,
    .compare - table thead tr td b {
        font - size: 14 px;
        line - height: 18 px
    }

    .tablestars {
        margin - bottom: 17.67 px !important
    }

    .tablestar.rating: before,
    .tablestar: after {
        font - size: 18 px
    }

    .tablestar+b {
        font - size: 16 px
    }

    .overflow.m6: before {
        width: 30 px;
        right: -2 px;
        background: linear - gradient(90 deg, transparent, #fff)
    }

    .overflow.m6: after {
        width: 20 px;
        left: -2 px;
        background: 0 0
    }

    .tablestars.arrows a {
        display: none
    }

    .compare - table tr td {
        width: calc(25 % -42.33 px)
    }

    .compare - table tr td: first - child,
    .compare - table tr th: first - child {
        width: 128 px
    }

    .table - 2025.compare - table tbody tr td: first - child,
    .table - 2025.compare - table tbody tr th: first - child,
    .table - 2025.compare - table tr td {
        width: 0 !important;
        padding - left: 6 px !important;
        max - width: 129 px !important
    }

    .compare - table tr td: last - child {
        padding - right: 27 px
    }

    .compare - table thead tr td b {
        display: -webkit - box;
        - webkit - line - clamp: 2;
        - webkit - box - orient: vertical;
        overflow: hidden
    }

    .compare - table tbody tr {
        border - bottom: 3 px solid# e4e4eb
    }

    .compare - table tbody tr td: first - child img,
    .compare - table tbody tr th: first - child img {
        max - width: 96 px
    }

    .compare - table.tooltip# tooltip {
        white - space: normal
    }
}

.green {
    color: green
}

.red {
    color: red
}

.grey {
    color: #8c8c8c
}

.link,
a {
    color: var(--master-link-color);
    text-decoration: none;
    cursor: pointer
}

.link,
li a,
p a {
    text-decoration: var(--css-array-a, none);
    text-underline-offset: 2px
}

.insights a:hover {
    color: # f2f2f2 !important
}

.page - body.link,
.page - body li a,
.page - body p a {
    text - decoration - color: var (--color - array - linkunderline, inherit);
    text - underline - offset: 2 px
}

article a: hover,
li a: hover,
p a: hover {
    text - decoration: var (--css - array - a - hover, underline)
}

.error - message {
    color: #f44336 !important;
    font - size: 16 px;
    padding - bottom: 24 px !important
}

.error - message: empty {
    margin: 0 !important;
    padding: 0 !important
}

.tr - closed {
    opacity: .4
}

.locked {
    color: var (--master - link - color)
}

.site - advisorsearchorg.pros - cons - 2.material - icons {
    color: #262262 !important
}

.site-brokernotesco .pros-cons-2 .material-icons {
    color: # 097 d86 !important
}

.input - flex - between {
    display: flex !important;
    justify - content: space - between;
    align - items: center
}

.input - flex - between label,
.input - flex - between select {
    width: calc(50 % -10 px)
}

.label - counter {
    display: block;
    position: absolute;
    right: 4 px;
    bottom: 4 px;
    font - size: 12 px;
    color: #666;
    background: # fff;
    padding: 0 4 px
}

.input - inline>a {
    font - family: inherit;
    font - weight: 700;
    display: inline - block;
    margin: 2 px
}

.sub - form - dropdown label {
    padding: 0 0 20 px !important
}

label: has(a[onclick *=setField]) a[onclick *=setField] {
    font - size: 0
}

label: has(a[onclick *=setField]) a: not(: has(span))[onclick *=setField]: after {
    content: "\f09b";
    font - size: 16 px;
    font - family: "Material Icons";
    display: block
}

.button,
.material - button,
button,
input[type=button],
input[type=submit] {
    display: inline - flex;
    border: none;
    box - shadow: none;
    cursor: pointer;
    vertical - align: middle
}

a[onclick *=setField]: has(+input: placeholder - shown) {
    filter: saturate(0)
}

.input - inline>a: hover {
    text - decoration: line - through
}

.hover - selector: hover.hover - display {
    visibility: visible !important
}

.material - button {
    align - items: center;
    text - decoration: none;
    color: #000;
    opacity: .5
}

.material-button .material-icons {
    font-size: 39px
}

.button,
button,
input[type=button],
input[type=submit] {
    width: auto;
    align - items: center;
    - webkit - appearance: none;
    font - size: 20 px;
    font - family: inherit;
    border - radius: 3 px;
    padding: 0 16 px;
    height: 40 px;
    background: var (--master - link - color, #000) !important;
    color: # fff;
    font - weight: 400 !important;
    white - space: nowrap;
    text - decoration: none !important;
    transition: width 1 s;
    position: relative;
    text - align: center;
    justify - content: center
}

.button - hover - menu: hover.button - hover - menu - floater {
    display: block !important;
    border - radius: 20 px;
    min - width: 180 px;
    position: absolute;
    padding: 20 px;
    background: #fff;
    box - shadow: 0 0 20 px rgba(0, 0, 0, .4)
}

.button - upload {
    display: inline - block;
    vertical - align: middle;
    margin: 0 20 px;
    color: inherit;
    position: absolute;
    right: 0
}

.big - data - table {
    margin: -20 px
}

.big - data - table h1 {
    padding: 10 px 20 px;
    font - weight: 700
}

.big - data - table span {
    font - size: 14 px
}

.big - data - table>div>div input,
.big - data - table>div>div select {
    height: 40 px !important;
    font - size: 13 px !important
}

.big - data - table a {
    font - size: 13 px
}

.big - data - table label {
    padding: 6 px 0;
    display: grid;
    grid - template - columns: minmax(160 px, 280 px) minmax(300 px, 100 %);
    gap: 10 px
}

.big - data - table label: has(div: last - child) {
    grid - template - columns: minmax(160 px, 280 px) minmax(300 px, 100 %) minmax(auto, 1 fr)
}

.button - floater {
    position: absolute;
    right: 0;
    bottom: 20 px;
    border - radius: 0
}

.button.material - icons {
    vertical - align: top !important;
    margin - right: -10 px
}

.button: hover,
button: hover,
input[type=button]: hover,
input[type=submit]: hover {
    cursor: pointer;
    background: var (--master - link - color - hover, inherit) !important;
    color: #fff
}

.input - drop,
.selector.dropdown {
    background: #fff;
    box - sizing: border - box
}

.button i {
    vertical - align: middle
}

input[type=submit][disabled=disabled] {
    opacity: .5
}

form {
    font - size: 0
}

.page - form - floater {
    margin: 0 auto;
    min - width: 320 px;
    border - radius: 10 px;
    padding: 40 px;
    box - shadow: 0 0 20 px rgba(0, 0, 0, .07)
}

form.splitter {
    margin: 20 px auto;
    width: 100 %
}

.selector {
    display: inline - block;
    width: auto;
    margin: 0 auto;
    box - sizing: border - box
}

.selector>a {
    padding: 10 px 50 px;
    box - sizing: border - box;
    border - bottom: 1 px solid rgba(0, 0, 0, .3)
}

.selector.dropdown {
    display: none;
    position: absolute;
    z - index: 1000;
    left: 0;
    right: 1 px;
    top: 100 %;
    font - size: 0;
    text - align: left;
    margin - top: 7 px;
    box - shadow: 0 1 px 3 px# bbb
}

# image - galley.image - gallery - container>div.item - gallery - container,
.active - session footer,
.active - session header.logo,
.block - all - inputs.fake - input input,
.carousel - navigate - arrow.disabled,
.compare - tables table thead tr td,
.compare - tables table.close tbody,
.compare - tables table.close thead tr th span.open,
.compare - tables table: not(.close) thead tr th span.close,
.dropdown - ul ul,
.hidden - checkbox input,
.hide - children>div,
.logo img,
.microhead - expanded - mobile,
.multi - block>div,
.navigation - dropdown,
.navigationv4 - div - sub - right>div,
.page - home.site - forexbrokerscom.page - body.featured - partners: nth - child(2).ranting+p,
.page - home.site - uk.page - body.featured - partners: nth - child(2).ranting+p,
.read - more,
.review - content.ProsCons table tbody td li: empty,
.select - brokers - dropdown ul li input: checked~.no - checked,
.select - brokers - dropdown ul li input: not(: checked)~.checked,
body.open - popup - select - brokers.carousel - container>div.carousel - item.add - broker.btn - green>div.add - open,
body.open - popup - select - brokers.select - brokers>span.open,
body: not(.open - popup - select - brokers).carousel - container>div.carousel - item.add - broker.btn - green>div.add - close,
body: not(.open - popup - select - brokers).select - brokers>span.close,
debug,
disclaimer,
header ul.navigationv3>li ul li: last - child: before,
header ul.navigationv3>li: hover>a span.close,
header ul.navigationv3>li: not(: hover)>a span.open,
html.mobile - menu - active.mobile - menu - button.open,
html: not(.mobile - menu - active).mobile - menu - button.close {
    display: none
}

.fake - input,
.fake - input: after {
    display: flex;
    align - items: center
}

.hidden - checkbox b {
    display: block;
    font - size: 12 px;
    cursor: pointer;
    text - align: center;
    user - select: none;
    - webkit - user - select: none
}

.hidden - checkbox b: after {
    content: "\e835";
    font - family: 'Material Icons';
    font - size: 26 px
}

.hidden - checkbox input: checked~b: after {
    content: "\e834";
    font - family: 'Material Icons'
}

::placeholder,
input::-webkit - input - placeholder,
textarea::-webkit - input - placeholder {
    font - size: 16 px;
    color: #545454
}

.fake-input,
.input,
.textarea,
input[type=date],
input[type=datetime - local],
input[type=email],
input[type=number],
input[type=password],
input[type=range],
input[type=tel],
input[type=text],
input[type=time],
select,
textarea {
    padding: 0 16 px;
    width: 100 %;
    height: 40 px;
    background: #fff;
    border - radius: 3 px;
    color: #333;
    text-align: left;
    border: 1px solid # 7 f8ca4;
    vertical - align: middle;
    font - size: 14 px;
    font - family: inherit;
    box - sizing: border - box;
    - webkit - font - smoothing: antialiased
}

input[disabled] {
    background: #f5f8fa
}

.fake - input: after {
    position: absolute;
    content: "keyboard_arrow_down";
    font - family: "Material Icons";
    color: #231f20;
    font-size: 26px;
    right: 0;
    border-left: 1px solid # 7 f8ca4;
    padding - left: 6 px;
    padding - right: 10 px;
    height: calc(98 % -8 px);
    cursor: pointer
}

.loading: after,
form.processing# publish: after,
form.saved# publish: after {
    font - family: "Material Icons";
    color: #fff !important;
    left: 0;
    position: absolute;
    right: 0
}

input: -webkit - autofill {
    background - color: transparent !important;
    - webkit - box - shadow: 0 0 0 1000 px# fff inset !important;
    box - shadow: 0 0 0 1000 px# fff inset !important;
    color: inherit !important
}

input: -moz - autofill {
    background - color: transparent !important
}

textarea {
    height: auto;
    field - sizing: content
}

.fake - input: has(input: focus),
.fake - input: has(~.input - drop),
input[type=email]: focus,
input[type=number]: focus,
input[type=password]: focus,
input[type=tel]: focus,
input[type=text]: focus,
textarea: focus {
    border: 2 px var (--master - link - color, #000) solid !important
}

.page-form-v2 label:has(input[type=email]: focus) span: first - child,
.page - form - v2 label: has(input[type=number]: focus) span: first - child,
.page - form - v2 label: has(input[type=password]: focus) span: first - child,
.page - form - v2 label: has(input[type=text]: focus) span: first - child,
.page - form - v2 label: has(textarea: focus) span: first - child,
.portal - container label: has(input[type=email]: focus) span: first - child,
.portal - container label: has(input[type=number]: focus) span: first - child,
.portal - container label: has(input[type=password]: focus) span: first - child,
.portal - container label: has(input[type=text]: focus) span: first - child,
.portal - container label: has(textarea: focus) span: first - child {
    color: var (--master - link - color, inherit) !important
}

.admin.btn {
    max - width: 340 px;
    border: 1 px var (--master - link - color) solid;
    background: 0 0 !important;
    border - radius: 3 px;
    padding: 11 px 14 px
}

.admin.btn - blue[disabled]: hover,
.admin button[disabled],
.admin button[disabled]: hover,
.page - html.admin.btn - blue[disabled]: hover {
    border: 1 px solid #7f8ca4 !important;
    background: # f5f8fa !important;
    color: #545454 !important;
    cursor: inherit
}

select[multiple] {
    min-height: 250px;
    background-image: none;
    padding: 10px
}

.sortable {
    user-select: none
}

.fake-input {
    padding: 7px 50px 7px 12px !important;
    white-space: normal;
    height: auto;
    flex-flow: wrap;
    line-height: 15px;
    min-height: 40px;
    gap: 4px
}

.fake-input input,
.fake-input input:focus {
    background: 0 0;
    padding: 0 !important;
    margin: 0 !important;
    height: 18px;
    overflow: visible;
    box-sizing: border-box;
    width: 180px;
    border: none !important
}

.admin:is(.insights_stockbrokers_com, .insights_forexbrokers_com, .insights_reinkmedia_com) .fake-input input {
    width: 100px
}

.fake-input:has(a) input::placeholder {
    font-size: 0
}

.fake-input>a,
.fake-input>span {
    text-decoration: none;
    display: inline-block;
    font-weight: 400;
    background: # f5f8fa;
    padding: 4 px;
    cursor: pointer;
    color: var (--master - link - color - hover);
    font - size: 12 px;
    color: #231f20
}

.input-drop a,
.input-drop>span {
    color: # 545454;
    padding: 8 px;
    display: block;
    font - size: 12 px;
    text - decoration: none;
    white - space: nowrap;
    text - overflow: ellipsis
}

.fake - input.hover - placeholder {
    display: inline - block;
    font - weight: 700;
    background: #f2f2f2;
    padding: 3 px 6 px;
    border: 1 px solid# dcdcdc;
    border - radius: 3 px;
    opacity: .5
}

.fake - input.sort - target {
    text - decoration: none !important;
    box - shadow: 0 0 0 3 px rgba(0, 0, 0, .432);
    cursor: pointer !important
}

.page - home.hero.inner.guide - label,
.reviews.review - content,
header {
    box - shadow: 0 0 10 px 0 rgba(0, 0, 0, .16)
}

.fake - input>a: after,
.fake - input>span: after {
    content: "×";
    font - size: 18 px;
    font - weight: 400;
    vertical - align: bottom;
    padding - left: 4 px
}

.input - drop {
    position: absolute;
    left: 0;
    top: auto;
    width: 100 %;
    max - height: 320 px;
    overflow - y: auto;
    border: 1 px solid #7f8ca4;
    border-radius: 3px
}

.featured-partners .featured-on .inner .feature-logo-container,
.input-drop a,
.no-expand,
html.mobile-menu-active,
html.mobile-menu-active body {
    overflow: hidden
}

.input-drop a {
    font-weight: 400;
    -webkit-user-drag: none
}

.input-drop a[data-link-active] {
    background: var(--color-array-cta_button_bg_color_hover);
    font-weight: 700;
    color: var(--master-link-color)
}

.input-drop a[data-link-active]:after {
    content: "checkmark";
    font-family: "Material Icons";
    color: var(--master-link-color);
    float: right;
    width: 32px
}

.disabled,
.input-drop a.active,
.navigation li>ul li a:hover,
.selector .dropdown a:hover {
    background: # eee
}

.input - drop>span {
    font - weight: 700
}

.input - drop: has(span) a {
    padding - left: 20 px
}

.input - drop a: hover {
    background: var (--color - array - cta_button_bg_color_hover);
    font - weight: 700;
    color: var (--master - link - color);
    text - decoration: none
}

div.input {
    height: auto;
    display: block
}

.ad - content.ad - top - content,
div.input - flex {
    display: flex;
    align - items: center
}

input[type=range] {
    -webkit - appearance: none;
    width: 100 %;
    background: 0 0
}

input[type=range]::-webkit - slider - thumb {
    -webkit - appearance: none;
    background - color: #00f;
    opacity: .5;
    width: 10px;
    height: 26px
}

input[type=range]::-ms - track {
    -webkit - appearance: none;
    background - color: #00f;
    opacity: .5;
    width: 10px;
    height: 26px
}

input[type=number]::-webkit - inner - spin - button,
input[type=number]::-webkit - outer - spin - button {
    -webkit - appearance: none;
    margin: 0
}

input[type=number] {
    -moz - appearance: textfield
}

input[readonly],
select[readonly] {
    pointer - events: none;
    cursor: not - allowed
}

.input>input,
.input>select {
    display: inline - block;
    background: 0 0;
    padding: 0;
    border - left: 0;
    border - top: 0;
    border - right: 0;
    text - align: left;
    min - width: 60 px;
    text - indent: 5 px;
    border: none !important;
    width: 100 %
}

.input - inline>select {
    width: auto;
    vertical - align: bottom
}

.featured - partners - carousel - container.carousel - item.btn - green,
.multi - input,
.select - brokers - dropdown>.btn - green {
    width: 100 %
}

.multi - input>div {
    display: block;
    width: 100 %;
    margin - bottom: 5 px
}

.multi - input>div.handle {
    display: block;
    width: 20 px;
    height: 20 px;
    position: absolute;
    right: 0;
    top: 10 px;
    cursor: pointer
}

.multi - input.ui - sortable - helper,
.sortable - ghost {
    transform: rotate(3 deg);
    top: -10 px
}

.selector.dropdown a {
    display: block;
    font - size: 17 px;
    padding: 10 px
}

.filters {
    display: flex;
    align - items: flex - end;
    justify - content: flex - end
}

.filters label {
    align - items: center;
    align - content: center
}

form label {
    box - sizing: border - box;
    display: block;
    align - items: center;
    justify - content: space - between;
    padding: 0 0 24 px;
    position: relative
}

form label>span {
    display: block;
    margin - bottom: 6 px;
    font - size: 14 px;
    font - weight: 700;
    padding - left: 0;
    vertical - align: middle
}

form label: last - child {
    padding - bottom: 0 !important
}

label: focus - within {
    color: #000 !important
}

form label>span small {
    font-weight: 400;
    background: # fff;
    padding: 5 px;
    display: block;
    border - left: 4 px solid #777;
    margin: 5px 0
}

.clear-form {
    font-size: 12px
}

.submit {
    text-align: right;
    padding: 0;
    justify-content: flex-end
}

.floating-dropdown {
    display: none;
    position: absolute;
    z-index: 1000000000;
    background: # fff;
    border: 1 px solid# eee;
    box - shadow: 0 4 px 10 px rgba(0, 0, 0, .1);
    flex - direction: column;
    min - width: 360 px;
    border - radius: 8 px;
    padding: 10 px 0;
    top: 37 px
}

.floating - dropdown label {
    padding: 3 px 20 px
}

.floating - dropdown.submit {
    display: block;
    background: #fff;
    margin: 0;
    text - align: center
}

.floating - dropdown label[ for=none] input[type=submit] {
    font - size: 14 px;
    padding: 0 10 px;
    height: 35 px
}

.floating - dropdown - enabled.floating - dropdown {
    display: flex
}

.floating - dropdown - enabled.floating - dropdown - single {
    display: grid;
    grid - auto - flow: column;
    padding: 10 px !important;
    justify - content: normal;
    grid - gap: 10 px
}

.floating - dropdown - single label,
.nopadding {
    padding: 0 !important
}

.block - all - inputs.fake - input,
.block - all - inputs input[type=date],
.block - all - inputs input[type=number],
.block - all - inputs input[type=password],
.block - all - inputs input[type=tel],
.block - all - inputs input[type=text],
.block - all - inputs select {
    background: #d9d9d9 !important;
    pointer - events: none !important
}

# sidebar form {
    position: sticky;
    top: 20 px
}

form input[type=submit] {
    transition: .3 s ease - in -out
}

.page - form - v2.button,
.page - form - v2 input[type=submit],
.popup - only.button,
.popup - only input[type=button],
.popup - only input[type=submit],
.portal - container input[type=submit],
button {
    width: 100 %;
    box - sizing: border - box
}

.admin.page - body p,
.boxes.boxes - content,
.compare - tables table tbody tr: last - child td {
    margin - bottom: 24 px
}

.loading,
form.processing# publish,
form.saved# publish {
    color: transparent !important
}

.loading: after,
form.processing# publish: after {
    content: "\e5d5";
    font - size: 16 px;
    animation: 1 s linear infinite butback
}

form.saved# publish: after {
    content: "\e876";
    font - size: 16 px
}

.popup - messages {
    display: block;
    position: fixed;
    bottom: 40 px;
    left: 0;
    right: 0;
    max - width: 480 px;
    margin: 0 auto;
    z - index: 10000000;
    padding: 20 px;
    background: var (--master - link - color) !important;
    box - shadow: 0 0 20 px rgba(0, 0, 0, .4);
    border - radius: 10 px;
    color: #fff;
    text - align: center
}

.popup - messages p {
    padding: 10 px;
    font - size: 20 px
}

@keyframes butback {
    0 % {
        transform: rotate(0)
    }

    50 % {
        transform: rotate(360 deg)
    }

    100 % {
        transform: rotate(720 deg)
    }
}

.portal - container {
    display: grid;
    grid - template - columns: 1 fr 1 fr;
    height: 100 vh;
    gap: 24 px
}

.portal - container form {
    max - width: 320 px;
    width: 100 %;
    justify - self: center
}

.portal - container h1 {
    color: #fff;
    font - weight: 700;
    font - size: 56 px;
    line - height: 72 px;
    text - align: center;
    margin - bottom: 24 px
}

.portal - container h2 {
    font - size: 32 px;
    font - weight: 700;
    color: #231f20;
    margin-bottom: 24px
}

.page-form-v2>label>span:first-child,
.portal-container label span:first-child {
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    left: 14px;
    top: -8px;
    background: # fff;
    padding: 0 4 px;
    z - index: 10
}

.page - form - v2 label span: last - child,
.portal - container label span: last - child {
    font - size: 10 px;
    font - weight: 400;
    padding - top: 2 px
}

# sidebar.page - form - v2 label span: first - child,
#sidebar.portal - container label span: first - child {
    background: linear - gradient(to bottom, #f6f8fa 50 %, #fff 50 %)
}

.page - form - v2 label: has(input[disabled]) span: first - child,
.portal - container label: has(input[disabled]) span: first - child {
    background: linear - gradient(to bottom, #fff 50 %, #f5f8fa 50 %)
}

# sidebar.page - form - v2 label: has(input[readonly]) span: first - child,
#sidebar.portal - container label: has(input[readonly]) span: first - child {
    background: linear - gradient(to bottom, #f6f8fa 50 %, #f6f8fa 50 %) !important
}

footer {
    text - align: left;
    display: block;
    font - size: 16 px;
    color: #fff;
    min - height: 150 px;
    padding: 40 px 0;
    background: var (--color - array - footer)
}

.footer - links {
    display: grid;
    text - align: left;
    grid - template - columns: 30 % auto
}

# backtop,
.action - buttons a,
.adv - footer,
.header - boxes {
    text - align: center
}

.footer - links a {
    font - weight: 400;
    display: block;
    margin - bottom: 5 px;
    font - size: 14 px
}

footer small {
    font - size: 11 px;
    line - height: 23 px
}

footer.logo {
    font - size: 24 px
}

.disclaimer {
    line - height: 15 px
}

.logo,
.logo: hover {
    background - image: var (--master - logo);
    background - repeat: no - repeat;
    background - position: center center;
    display: block;
    font - size: 0;
    font - weight: 300;
    font - family: Raleway;
    color: #fff;
    white - space: nowrap;
    height: 50 px;
    width: 150 px;
    background - size: contain !important
}

.btn.processing: after,
.btn.saved: after,
.play - icon: after,
.star_half: after {
    font - family: "Material Icons"
}

.active - menu header.logo,
.page header.logo {
    background - image: url("")
}

.selector>a: after {
    content: "";
    width: 20 px;
    height: 20 px;
    background: url("arrows.png") center center no - repeat;
    position: absolute;
    right: 10 px;
    top: 0
}

select {
    width: 100 %;
    background: url("arrows.png") right 10 px center no - repeat# fff;
    - webkit - appearance: none;
    - moz - appearance: none;
    box - sizing: border - box;
    border - radius: 3 px;
    padding: 0 30 px 0 10 px
}

input[name *=icon],
input[name *=logo] {
    padding - right: 100 px
}

.navigationv4 - floater - mobile - jumper {
    display: none;
    cursor: pointer
}

.navigationv4 - floater {
    display: flex;
    height: 100 %;
    position: unset;
    z - index: 2000
}

.navigationv4 - ul {
    list - style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid - auto - flow: column;
    align - items: center;
    height: 100 %;
    z - index: 3000
}

.navigationv4 - li - nav - bottom,
.navigationv4 - ul - nav - bottom {
    border - top: 1 px solid# e4e4eb;
    padding: 24 px 40 px;
    text - decoration: none !important
}

.navigationv4 - ul li {
    list - style: none;
    margin: 0;
    padding: 0;
    height: 100 %;
    align - items: center;
    display: flex
}

.navigationv4 - ul>li>a,
.navigationv4 - ul>li>span {
    color: var (--color - array - navlink);
    text - decoration: none;
    font - weight: 700;
    cursor: pointer;
    height: 100 %;
    display: flex;
    align - items: center;
    padding: 0 16 px;
    position: relative
}

.navigationv4 - ul ul {
    display: none;
    margin: 0;
    padding: 0;
    z - index: 4000
}

.navigationv4 - ul>li: hover>a: after,
.navigationv4 - ul>li: hover>a: before {
    display: block;
    background: rgba(0, 0, 0, 0);
    width: 100 px;
    height: 100 px;
    content: " ";
    z - index: 1000;
    position: absolute;
    top: 40 px
}

.navigationv4 - ul>li: hover,
.navigationv4 - ul>li: hover>a,
.navigationv4 - ul>li: hover>span {
    background: var (--color - array - cta_button_bg_color_hover);
    color: #000 !important
}

.navigation a:hover,
.navigationv4-div-sub-left-selector a:hover {
    text-decoration: none !important
}

.navigationv4-ul ul a {
    color: # 231 f20;
    text - decoration: none;
    font - weight: 400;
    display: flex;
    gap: 8 px
}

.navigationv4 - ul ul a: hover,
.navigationv4 - ul - nav - bottom: hover {
    color: var (--color - array - subnavlinkhover) !important;
    text - decoration: underline
}

.navigationv4 - ul>li: hover>a: before {
    transform: rotate(36 deg);
    left: -40 px
}

.navigationv4 - ul>li: hover>a: after {
    transform: rotate(54 deg);
    right: -40 px
}

body: has(.navigationv4 - ul li: hover): before,
html.mobile - menu - active body: before {
    content: " ";
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 0;
    right: 0;
    top: 71 px;
    bottom: 0;
    z - index: 1000;
    animation: 120 ms ease - in -out fadeIn
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.navigationv4 - ul - sub - right - default.navigationv4 - ul - sub - sub {
    display: grid;
    padding: 32 px 40 px;
    grid - template - columns: repeat(auto - fill, minmax(100 px, 1 fr));
    gap: 24 px;
    grid - template - columns: repeat(4, 1 fr);
    background: #fff
}

.mobile - menu - active.navigationv4 - div - sub - active.navigationv4 - ul - sub,
.navigationv4 - ul li: hover.navigationv4 - ul - sub {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 100 %;
    background: #fff;
    width: auto;
    padding: 32 px 40 px;
    grid - template - columns: repeat(4, 1 fr);
    gap: 24 px;
    align - items: baseline
}

.navigationv4 - div - sub - active,
.navigationv4 - ul li: hover.navigationv4 - div - sub {
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
    width: 100 % !important;
    justify - content: flex - start;
    grid - auto - flow: column;
    display: flex;
    top: 100 %;
    z - index: 10000000;
    align - items: flex - start;
    background: var (--color - array - cta_button_bg_color_hover)
}

# image - galley.image - gallery - container>div.item - gallery - container.act,
.action - menu: hover>ul,
.ad - content.ad - top - content.ad - top - content - logo img,
.big - blog - boxes.has - image: first - child,
.compare - brokers - cards.carousel - container>div.carousel - item.remove - broker span,
.dropdown - ul ul li,
.mobile - menu - active.navigationv4 - ul li,
.navigation li>ul li,
.navigationv4 - div - sub - active.navigationv4 - ul - nav - active,
.navigationv4 - ul li: hover.navigationv4 - ul - nav - active,
.open - popup - select - brokers.select - brokers - dropdown,
.tab - navigation - expand a {
    display: block
}

.mobile - menu - active.navigationv4 - ul - nav - active.navigationv4 - ul - nav,
.navigationv4 - ul li: hover.navigationv4 - ul - nav - active ul {
    display: grid;
    padding: 32 px 40 px;
    gap: 24 px;
    background: #fff;
    grid - template - columns: repeat(3, 1 fr);
    min - height: 250 px;
    height: 100 %;
    position: relative;
    align - content: flex - start;
    align - items: baseline
}

.navigationv4 - div - sub - right,
.navigationv4 - ul - nav - active li {
    flex - grow: 1
}

.navigationv4 - ul li: hover.navigationv4 - div - sub - left - selector {
    display: flex;
    flex - flow: column;
    margin - top: 20 px
}

.navigationv4 - div - sub - left - selector a,
.navigationv4 - div - sub - left - selector span {
    padding: 16 px;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 16px;
    min-width: 200px;
    cursor: pointer
}

.navigationv4-div-sub-left-li-active a,
.navigationv4-div-sub-left-li-active span {
    background: var(--color-array-nav);
    color: var(--color-array-navlink) !important;
    cursor: pointer;
    text-decoration: none !important
}

.navigationv4-ul-nav-bottom {
    font-weight: 700;
    background: # fff;
    display: block;
    color: #231f20
}

.navigationv4-li-nav-bottom {
    background: # fff;
    display: block;
    color: #231f20;
    grid-column: 1/-1;
    padding-top: 12px !important
}

.navigationv4-li-nav-bottom a {
    font-weight: 700 !important;
    text-decoration: none !important
}

.navigationv4-li-nav-bottom:after,
.navigationv4-ul-nav-bottom:after {
    color: # 231 f20;
    content: "→";
    font - size: 16 px;
    margin - left: 8 px
}

.navigationv4 - floater - mobile - jumper: before {
    color: #545454;
    content: "←";
    display: inline-block;
    margin-right: 10px;
    top: -1px;
    position: relative
}

.mobile-menu-active .navigationv4-floater {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background: # fff;
    height: calc(100 vh - 88 px);
    padding - bottom: 24 px
}

.mobile - menu - active.navigationv4 - ul {
    display: block;
    height: auto
}

.mobile - menu - active.navigationv4 - ul a {
    color: var (--main - gray - med);
    padding: 16 px;
    border - bottom: 1 px solid# e4e4eb;
    font - size: 20 px;
    color: #231f20
}

.mobile-menu-active .navigationv4-ul a:has(+ .navigationv4-div-sub):after,
.mobile-menu-active .navigationv4-ul span:has(+ .navigationv4-div-sub):after {
    content: "›";
    font-size: 32px;
    color: # 7 f8ca4;
    position: absolute;
    right: 20 px;
    font - weight: 400;
    top: 6 px
}

.mobile - menu - active.navigationv4 - ul li: hover a: has(+.navigationv4 - div - sub): after,
.mobile - menu - active.navigationv4 - ul li: hover a: has(+.navigationv4 - div - sub): before,
.mobile - menu - active.navigationv4 - ul li: hover span: has(+.navigationv4 - div - sub): after,
.mobile - menu - active.navigationv4 - ul li: hover span: has(+.navigationv4 - div - sub): before {
    all: unset !important
}

.navigationv4 - div - sub - active {
    top: 62 px !important;
    display: block !important;
    z - index: 10000000 !important;
    align - items: flex - start;
    background: #fff !important;
    height: 100 %
}

.mobile - menu - active.navigationv4 - ul li: hover.navigationv4 - ul - nav - active ul,
.mobile - menu - active.navigationv4 - ul - nav - active.navigationv4 - ul - nav,
.navigationv4 - div - sub - active.navigationv4 - ul - nav,
.navigationv4 - div - sub - active.navigationv4 - ul - sub {
    grid - template - columns: auto !important;
    padding: 16 px !important;
    gap: 16 px !important
}

.navigationv4 - div - sub - active.navigationv4 - div - sub - right {
    padding - bottom: 16 px
}

.mobile - menu - active.navigationv4 - ul ul a {
    padding: 0;
    border: none;
    font - size: 16 px
}

.navigationv4 - sub - active.navigationv4 - floater - mobile - jumper {
    display: block !important;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 80 px;
    z - index: 1000000;
    text - align: left;
    padding: 20 px 16 px 0;
    color: #545454;
    font-size: 16px
}

.navigationv4-div-sub-heading,
.navigationv4-div-sub-right-heading {
    display: none;
    padding-top: 0 !important
}

.navigationv4-div-sub-active .navigationv4-div-sub-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    background: # fff;
    text - align: left;
    padding: 12 px 16 px 0 !important;
    cursor: pointer;
    position: relative
}

.navigationv4 - div - sub - active.navigationv4 - div - sub - right.navigationv4 - div - sub - heading: after {
    content: "›";
    position: absolute;
    right: 25 px;
    top: 4 px;
    font - size: 32 px;
    transform: rotate(90 deg);
    font - weight: 400;
    color: #545454
}

.navigationv4-div-sub-active .navigationv4-div-sub-right .navigationv4-div-sub-heading:has(+ .navigationv4-ul-nav-active):after {
    transform: rotate(-90deg);
    right: 34px
}

.mobile-menu-active .navigationv4-ul-nav-bottom {
    padding: 0 16px 16px !important
}

.mobile-menu-active .navigationv4-li-nav-bottom,
.mobile-menu-active .navigationv4-ul-nav-bottom {
    text-align: left;
    font-size: 16px !important;
    border-top: none
}

.mobile-menu-active .navigationv4-li-nav-bottom {
    padding: 0 !important;
    display: flex !important
}

.navigationv4-div-sub-active .navigationv4-div-sub-right-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    background: # fff;
    text - align: left;
    padding: 16 px 16 px 0
}

.navigationv4 - div - sub - active: not(: has(.navigationv4 - div - sub - left - selector)).navigationv4 - ul - sub {
    display: grid !important;
    top: 36 px !important
}

@media(hover: none) and(pointer: coarse) {
    .navigationv4 - floater {
        -webkit - user - select: none;
        - webkit - touch - callout: none;
        user - select: none
    }
}

.navigation,
.navigation - dropdown {
    justify - content: flex - start;
    align - items: center;
    padding: 0;
    margin: 0;
    display: grid;
    grid - auto - flow: column;
    grid - gap: 30 px;
    font - size: 16 px
}

.action - buttons a {
    display: inline - block;
    font - size: 13 px;
    padding: 5 px
}

.action - buttons a span {
    display: block;
    font - size: 30 px !important
}

.exit - sidebar {
    position: absolute;
    right: 20 px;
    top: 20 px;
    z - index: 500
}

.forced - form - label - padding form label {
    margin: 0 32 px;
    box - sizing: border - box
}

.navigation li {
    display: flex;
    margin: 0;
    padding: 0;
    list - style: none;
    align - content: center;
    align - items: center;
    position: relative
}

.navigation hr {
    margin - top: 2 px;
    margin - bottom: 2 px;
    border - bottom: 2 px solid# dfdfdf;
    width: calc(100 % +61 px);
    margin - left: -30 px
}

.navigation>li {
    height: 40 px
}

.navigation li.active,
.navigation li: hover {
    box - shadow: 0 - 4 px 0 inset# fff;
    cursor: pointer
}

.navigation li: hover.navigation - dropdown {
    display: block;
    position: absolute;
    z - index: 1000;
    background: #fff;
    border: 1 px solid# eee;
    top: calc(100 %);
    left: 0;
    box - shadow: 0 0 20 px rgba(0, 0, 0, .2)
}

.navigation - dropdown a {
    color: #333 !important;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 700
}

.navigation a {
    font-weight: 700;
    white-space: nowrap;
    color: # fff;
    font - size: 20 px;
    text - decoration: none !important
}

.admin.navigation a,
[class *=insights].navigation a {
    color: var (--color - array - navlink, #fff);
    font - size: 16 px;
    text - decoration: none !important
}

[class *=insights].navigation a,
h1 {
    font - size: 20 px
}

.tab - navigation {
    display: grid;
    grid - auto - flow: column;
    grid - gap: 0;
    justify - content: flex - start;
    white - space: nowrap;
    font - size: 16 px;
    font - weight: 700;
    max - width: 47 vw;
    z - index: 10000
}

.navigation li>ul,
.tab - navigation - expand {
    display: none;
    width: auto;
    box - shadow: 0 5 px 5 px rgb(0 0 0 / 10 %);
    position: absolute;
    white - space: nowrap
}

.tab - navigation - expand {
    top: 30 px;
    right: 0;
    background: #fff;
    left: auto;
    margin - left: -20 px;
    flex - flow: row wrap;
    padding: 30 px
}

.tab - navigation a.active~.tab - navigation - expand {
    display: grid
}

.tab - navigation a {
    padding: 9 px;
    border - radius: 6 px
}

.header - boxes>div,
.layer1 {
    box - shadow: 0 1 px 2 px rgba(0, 0, 0, .1);
    padding: 10 px;
    background: #fff
}

.tab - navigation a.target {
    border - bottom: 2 px var (--master - link - color) solid;
    background: 0 0 !important;
    border - radius: 0 !important
}

.tab - navigation a: hover {
    background: #eee;
    text - decoration: none !important
}

.navigation li>ul {
    top: 40 px;
    background: #fff;
    flex - flow: row wrap;
    padding: 0;
    right: -60 px
}

.tab - navigation - expand a.target {
    border: none !important;
    background: var (--master - link - color) !important;
    color: #fff !important
}

# backtop,
.header - boxes>div,
.layer1 {
    border - radius: 8 px
}

.navigation li>ul li a {
    display: block;
    color: #36383d !important;
    text-decoration: none !important;
    padding: 8px 16px;
    cursor: pointer
}

.navigation li:hover>ul {
    display: grid;
    text-align: left
}

.hide-children div.target {
    display: block !important;
    position: relative
}

.active-session .page-body .inner {
    padding: 30px 0 30px 75px;
    max-width: 1400px
}

.starv2 {
    max-width: 110px !important;
    margin: 0;
    width: 100% !important
}

.ad-content,
.reviews .review-content {
    max-width: 752px;
    box-sizing: border-box
}

.header-boxes {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 20px
}

.header-boxes>div {
    display: block;
    line-height: 15px
}

.header-boxes b {
    font-size: 22px;
    font-weight: 700;
    display: block;
    padding: 10px 0
}

.header-boxes span {
    font-size: 11px
}

.handle {
    cursor: move
}

.table-expand {
    display: block;
    position: absolute;
    bottom: 20px
}

# map>div>div>div: first - child>div: nth - child(1)>div: nth - child(4) div div div div {
    font - size: 10 px !important;
    background: #fff;
    padding: 2 px;
    border - radius: 5 px;
    font - weight: 700;
    border: 2 px solid# e94335
}

.mobileviewonly.active - session# body {
    height: 95 vh
}

.comment {
    display: inline - block;
    background: #f3f3f3;
    border - radius: 20 px;
    padding: 7 px 17 px;
    font - size: 16 px;
    word - wrap: break -word;
    clear: both
}

.highlighted - comment.comment {
    background: #ffffcb
}

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

.flex - around {
    display: flex;
    justify - content: space - around;
    align - items: center
}

.list - object,
.settings label {
    justify - content: space - between;
    display: flex
}

.microhead - expanded {
    background - size: cover;
    background - repeat: no - repeat;
    background - position: center center;
    left: 0;
    right: 0;
    height: 100 %;
    top: 0;
    width: 100 %;
    position: absolute
}

.microhead h1 {
    font - size: 70 px;
    padding: 40 px 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    font - weight: 400
}

.reviews.review - content.review - score.score - stars,
hr {
    margin - bottom: 32 px
}

.sidebar - nav h2 {
    font - size: 20 px;
    font - weight: 500
}

hr {
    border: none;
    border - bottom: 1 px solid# d4d4d4;
    margin - top: 32 px
}

.label - set - action {
    position: absolute;
    font - size: 14 px;
    z - index: 100;
    right: 0;
    bottom: 20 px;
    vertical - align: middle
}

.label - set - file input {
    padding - right: 120 px
}

.list - object {
    border: 1 px solid# ddd;
    padding: 15 px;
    margin - bottom: 10 px;
    grid - gap: 20 px;
    word - break: break -all;
    font - size: 18 px
}

.settings label>span {
    width: 20 %;
    margin - top: 8 px
}

.autoflex {
    display: flex;
    justify - content: space - between;
    width: 100 %
}

.variable - group {
    border - bottom: 1 px solid# ccc;
    margin - bottom: 60 px;
    padding - bottom: 60 px
}

.inline - splitter {
    display: inline - block;
    height: 100 %;
    width: 1 px;
    background: #fff;
    padding: 20 px 0;
    margin: 0 15 px;
    vertical - align: middle
}

.splitter {
    display: block;
    height: 1 px;
    width: 100 %;
    background: rgba(255, 255, 255, .1);
    margin: 10 px 0;
    vertical - align: middle
}

.pagination a {
    color: #8c8c8c;
    text-decoration: none;
    font-size: 16px;
    margin: 3px;
    font-weight: 400
}

.pagination .box {
    border: 1px solid # d8dce4
}

blockquote {
    font - family: Lato;
    font - size: 48 px;
    font - weight: 300;
    font - stretch: normal;
    font - style: normal;
    line - height: 1.33;
    letter - spacing: normal;
    text - align: left;
    color: #545454;
    border: none;
    margin-left: -10%;
    margin-right: -10%;
    border-left: 2px solid # fbb040;
    padding: 20 px 30 px !important
}

.tiktok - embed {
    min - height: 779 px
}

.arrow - pagination {
    display: flex;
    justify - content: right;
    align - items: center;
    margin - top: 24 px
}

.arrow - pagination.pag {
    display: inline - block;
    font - size: 20 px;
    line - height: 1.6;
    color: var (--main - gray - med);
    margin - right: 18 px
}

.arrow - pagination.navigate - arrow {
    display: inline - flex;
    justify - content: center;
    align - items: center;
    width: 40 px;
    height: 40 px;
    border - radius: 3 px;
    color: var (--master - link - color);
    border: solid 1 px var (--master - link - color);
    margin - left: 16 px
}

.arrow - pagination.navigate - arrow: hover {
    text - decoration: none;
    background: var (--master - link - color);
    background - blend - mode: lighten;
    background - image: linear - gradient(rgb(255 255 255 / 81 %), rgb(255 255 255 / 81 %))
}

.arrow - pagination.navigate - arrow span {
    font - size: 40 px;
    font - weight: 400
}

.play - icon: after {
    display: grid;
    content: "play_circle_filled";
    font - size: 78 px;
    color: #000;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.no-expand {
    max-height: 0;
    transition: 50ms linear
}

.btn.processing,
.btn.saved,
.flip-direction>.material-icons {
    font-size: 0
}

.continuereading,
.expansion:after {
    font-size: 16px;
    font-weight: 700;
    bottom: 0;
    text-transform: uppercase
}

.flip-direction>.material-icons:after {
    font-size: 24px !important;
    color: inherit;
    display: block;
    position: relative;
    font-family: "Material Icons";
    content: "expand_more"
}

.expand {
    max-height: max-content;
    overflow: visible !important
}

# sidebar {
    background - color: #f5f8fa;
    min - width: 470 px;
    padding: 20 px;
    min - height: calc(100 vh - 280 px)
}

.side - bar - publish {
    display: flex;
    justify - content: space - between;
    align - items: center;
    padding: 16 px 24 px;
    border - bottom: 2 px solid# fff;
    position: sticky;
    top: 0;
    z - index: 1000600;
    background: #fff
}

.continuereading,
.sidebar - nav {
    align - items: center;
    cursor: pointer
}

# sidebar>div[style *='background: #d4dbdd'] {
    position: sticky;
    top: 0;
    z - index: 10
}

# sidebar hr {
    margin - left: -25 px;
    margin - right: -25 px;
    border - bottom: 2 px solid# fff
}

.sidebar - nav {
    display: flex
}

.pros - cons - 2 {
    display: grid;
    grid - auto - flow: column;
    background - color: rgba(228, 228, 235, .3);
    padding: 24 px;
    border - radius: 16 px;
    border: 2 px solid# e4e4eb;
    grid - gap: 20 px
}

.pros - cons - 2 ul li {
    margin - left: -20 px !important;
    color: #545454 !important
}

.pros-cons-2 .material-icons {
    color: var(--color-array-nav)
}

.star_half:after {
    display: block;
    content: "star";
    color: var(--color-array-star_rating_color);
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 50%
}

.expansion:before,
.star_half:before {
    content: " ";
    position: absolute;
    left: 0;
    display: block
}

.ad-content .ad-content-text a,
.compare-top-section h4 a,
.continuereading,
.expansion:after,
.select-brokers {
    color: var(--main-green-black)
}

.star_half:before {
    top: 0;
    overflow: hidden;
    width: 50%;
    height: 25px;
    background: # fff
}

.expansion {
    max - height: 120 px;
    overflow: hidden;
    position: relative;
    padding - bottom: 60 px;
    margin - bottom: 48 px
}

.adv - box,
.adv - footer {
    width: 320 px;
    overflow: visible
}

.expansion: before {
    right: 0;
    bottom: 0;
    height: 120 px;
    background: linear - gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 70 px);
    z - index: 10000
}

# backtop,
.continuereading,
.expansion: after {
    height: 40 px;
    display: flex
}

.continuereading {
    width: 320 px;
    border: 1 px solid var (--main - green - black);
    border - radius: 3 px;
    margin: 0 auto 60 px;
    justify - content: center
}

.expansion: after {
    content: "Continue Reading";
    cursor: pointer;
    position: absolute;
    z - index: 1000000000;
    width: 320 px;
    border: 1 px solid var (--main - green - black);
    border - radius: 3 px;
    align - items: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    justify - content: center
}

.clipboard: hover: after,
.continuereading: hover,
.expansion: hover: after {
    background: var (--color - array - cta_button_bg_color_hover)
}

.overflow.m6: has(.continuereading).compare - table {
    margin - bottom: 0 !important
}

.overflow.m6: has(.continuereading).compare - table: after {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80 px;
    background: linear - gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100 %);
    z - index: 10000
}

.ads - container,
.page - ads.page - body {
    min - height: 600 px
}

.ads - container {
    display: flex;
    justify - content: center;
    align - items: center
}

.ad - content {
    border: 2 px solid# e4e4eb;
    margin: 0 auto 20 px;
    padding: 16 px
}

.ad - content.ad - top - content.badget {
    position: relative;
    color: #7f8ca4;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.29;
    padding: 7px 22px 7px 16px;
    margin-left: -16px
}

.ad-content .ad-top-content .badget:after {
    content: "";
    position: absolute;
    right: -22px;
    top: 0;
    height: 32px;
    width: 32px;
    background: # fff;
    - webkit - transform: rotate(45 deg) skew(15 deg, 15 deg);
    - moz - transform: rotate(45 deg) skew(15 deg, 15 deg);
    - ms - transform: rotate(45 deg) skew(15 deg, 15 deg);
    - o - transform: rotate(45 deg) skew(15 deg, 15 deg);
    transform: rotate(45 deg) skew(15 deg, 15 deg)
}

.ad - content.featured - broker.ad - top - content.badget {
    color: #fff;
    background: var (--main - green - black);
    padding - left: 18 px;
    margin - left: -18 px
}

.ad - content.ad - top - content.ad - top - content - logo {
    margin - left: auto
}

.ad - content.ad - title {
    color: var (--main - gray - black);
    font - size: 20 px;
    line - height: 1.2;
    font - weight: 900;
    margin: 0 0 8 px;
    padding: 0
}

.ad - content.ad - content - text {
    color: var (--main - gray - med);
    font - size: 20 px;
    line - height: 1.6;
    margin - bottom: 3 px
}

.ad - content.ad - content - text a {
    font - weight: 700;
    text - decoration: underline
}

.adv - box {
    min - height: 350 px
}

.adv - box>a {
    display: block;
    min - height: 260 px
}

.adv - native,
.adv - sponsored {
    min - height: 227 px
}

.adv - footer {
    height: 60 px;
    margin: 0 auto
}

.page - compare b,
.page - compare strong {
    font - weight: 800
}

.compare - top - section {
    max - width: 940 px;
    margin: auto
}

.compare - top - section p.date,
.select - brokers {
    font - size: 16 px;
    margin - bottom: 40 px;
    line - height: 1.5
}

.page - compare.carousel - container.carousel - item img {
    width: -webkit - fill - available !important;
    height: auto;
    max - width: 100 %
}

.compare - top - section h1,
.hub - top.inner.hub - top - title - progress.hub - top - title h1 {
    color: var (--main - gray - black);
    font - size: 56 px;
    line - height: 1.29;
    font - weight: 900;
    margin - bottom: 16 px
}

.compare - top - section h4 {
    font - size: 20 px;
    line - height: 1.6;
    font - weight: 400;
    color: var (--main - gray - med);
    margin - bottom: 24 px
}

.compare - top - section h4 a {
    text - decoration: underline
}

.select - brokers {
    display: inline - block;
    width: 363 px;
    text - decoration: none;
    font - weight: 900;
    padding: 14 px 16 px;
    border: 2 px solid# e4e4eb;
    border - radius: 16 px;
    cursor: pointer;
    user - select: none;
    background: #fff
}

.select - brokers>span {
    color: #7f8ca4;
    z-index: 1000;
    position: absolute;
    right: 20px;
    width: 360px;
    text-align: right
}

.compare-brokers-cards {
    max-width: 1140px;
    margin: auto;
    position: sticky;
    top: 0;
    z-index: 10000000;
    background: # fff
}

.compare - brokers - cards.carousel - container>div>.brokers - carousel - container {
    width: 1140 px;
    display: flex
}

.compare - brokers - cards.carousel - container>div.carousel - item {
    width: 209 px;
    padding: 16 px 12 px;
    margin - right: 17 px;
    display: flex;
    flex - flow: column;
    justify - content: space - between
}

.carousel - container>div.carousel - item: last - child,
.compare - brokers - cards.carousel - container>div.carousel - item: last - child,
.financial - advisor - firm - card.financial - advisor - firm - card - top p a: last - child,
footer.middle - footer ul li: last - child,
header ul.navigationv3>li>a: last - child {
    margin - right: 0
}

.compare - brokers - cards.carousel - container>div.carousel - item.remove - broker {
    color: #7f8ca4;
    font-size: 21px;
    text-decoration: none;
    margin-bottom: 12px;
    position: absolute;
    right: 6px;
    top: 0;
    z-index: 10000
}

.compare-brokers-cards .carousel-container>div .carousel-item .logo-broker {
    clear: both;
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--main-gray-black);
    text-decoration: none;
    margin-top: 12px;
    margin-bottom: 19.8px
}

.compare-brokers-cards .carousel-container>div .carousel-item .logo-broker img {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    vertical-align: middle
}

.compare-brokers-cards .carousel-container>div .carousel-item p {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--main-gray-med);
    margin-bottom: 0
}

.compare-brokers-cards .carousel-container>div .carousel-item p.offer {
    min-height: 36px
}

.compare-brokers-cards .carousel-container>div .carousel-item p.risk-disclaimer {
    font-size: 14px !important;
    line-height: 1.33
}

.compare-brokers-cards .carousel-container>div .carousel-item p span.bonus,
.featured-partners-carousel-container .carousel-item p .bonus {
    color: var(--main-gray-black);
    font-weight: 500
}

.compare-brokers-cards .carousel-container>div .carousel-item .btn-green {
    padding: 10px 20px;
    margin: 6px 0
}

.compare-brokers-cards .carousel-container>div .carousel-item.suggested-broker .suggested-broker-text {
    color: var(--main-gray-med);
    font-size: 11px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 40px;
    right: 40px;
    top: -8px;
    background: var(--color-array-cta_button_bg_color)
}

.compare-brokers-cards .carousel-container>div .carousel-item.add-broker {
    padding: 0;
    box-shadow: none
}

.compare-brokers-cards .carousel-container>div .carousel-item.add-broker .btn-green {
    width: 100%;
    height: 100%;
    border-color: transparent;
    color: var(--master-link-color);
    background: var(--color-array-cta_button_bg_color)
}

.compare-brokers-cards .carousel-container>div .carousel-item.add-broker .btn-green>div,
.review-content .ProsCons table tbody tr {
    display: flex;
    flex-direction: column
}

.compare-brokers-cards .carousel-container>div .carousel-item.add-broker .btn-green>div span {
    color: # 7 f8ca4;
    font - size: 40 px;
    margin - bottom: 16 px
}

.compare - brokers - cards.carousel - container>div.carousel - item.add - broker.btn - green>div.add - close {
    color: #7f8ca4
}

.compare-brokers-cards .carousel-container>span.carousel-navigate-arrow:not(.disabled) {
    display: flex !important;
    z-index: 9
}

.compare-brokers-cards .carousel-container>span.carousel-navigate-arrow span {
    pointer-events: none
}

.compare-tables {
    max-width: 1140px;
    margin: auto;
    padding-bottom: 0
}

.compare-tables table {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 12px;
    border-collapse: collapse;
    position: relative
}

.compare-tables table thead {
    display: block;
    height: 57px;
    background: # fff;
    z - index: 1;
    overflow - x: hidden
}

.compare - tables table thead tr th {
    display: block;
    font - size: 32 px;
    font - weight: 900;
    color: var (--main - gray - black);
    padding - bottom: 16 px;
    border - bottom: 1 px solid #000;
    cursor: pointer
}

.compare-tables table thead tr th span {
    float: right;
    font-size: 40px;
    color: # 7 f8ca4
}

.compare - tables table thead: after {
    display: block;
    content: "❯";
    position: absolute;
    transform: rotate(-90 deg);
    right: 12 px;
    top: 5 px;
    font - size: 22 px
}

.compare - tables table.close thead: after {
    display: block;
    content: "❯";
    position: absolute;
    transform: rotate(90 deg);
    right: 10 px;
    top: 5 px;
    font - size: 22 px
}

.compare - tables table tbody tr: last - child {
    border - bottom: 1 px solid# fff
}

.compare - tables table tbody tr th {
    position: absolute;
    width: 100 %;
    font - size: 16 px;
    font - weight: 900;
    padding: 11 px 0 7 px;
    color: var (--main - gray - black)
}

.compare - tables table tbody tr.overall - number td {
    font - size: 20 px;
    font - weight: 900;
    color: var (--main - gray - black);
    margin: 37.69 px 0 8 px
}

.compare - tables table tbody tr td span.star {
    color: #e4e4eb;
    margin - right: 2 px;
    vertical - align: bottom
}

.compare - tables table tbody tr: not(.overall - number) td span.star {
    margin - top: -8 px;
    transform: translateY(5 px)
}

.compare - tables table tbody tr td span.star+span.star {
    margin - left: -5 px
}

.compare - tables table tbody tr td span.star.active,
.featured - partners - carousel - container.carousel - item.ranting.icon - asset.active,
.ranting.ng - star - inserted,
.reviews.review - content.review - score.score - stars.score - stars - right.icon - asset.active {
    color: var (--color - array - star_rating_color)
}

.compare - tables table tbody tr td span.verified {
    position: relative;
    color: #3baa13;
    font-size: 24px;
    margin-left: 8px;
    margin-top: -3px;
    vertical-align: middle;
    cursor: help
}

.select-brokers-dropdown {
    display: none;
    position: absolute;
    width: calc(100% + 4px);
    max-width: 399px;
    left: 0;
    top: 60px;
    border-radius: 16px;
    border: 2px solid # e4e4eb;
    background - color: #fff;
    padding: 25 px 16 px 16 px;
    box - sizing: border - box;
    z - index: 9000000000000;
    cursor: auto
}

.select - brokers - dropdown ul {
    max - height: 402 px;
    margin: 0 0 24 px;
    padding: 0;
    overflow - y: auto
}

.select - brokers - dropdown ul::-webkit - scrollbar {
    width: 4 px
}

.select - brokers - dropdown ul::-webkit - scrollbar - track {
    background: 0 0
}

.select - brokers - dropdown ul::-webkit - scrollbar - thumb {
    border - radius: 30 px;
    background - color: rgba(84, 84, 84, .42)
}

.select - brokers - dropdown ul li {
    position: relative;
    color: var (--main - gray - med);
    font - weight: 400;
    list - style: none;
    margin - bottom: 15 px
}

.select - brokers - dropdown ul li input {
    position: absolute;
    width: 100 %;
    height: 24 px;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.select - brokers - dropdown ul li span {
    color: var (--main - green - black);
    font - size: 24 px;
    margin - right: 16 px;
    vertical - align: middle
}

.select - brokers - dropdown>.btn - green span {
    margin: 0 5 px
}

.select - brokers - dropdown.select - brokers - dropdown - arrow - add: before,
.select - brokers - dropdown.select - brokers - dropdown - arrow: before {
    content: "";
    position: absolute;
    top: -11 px;
    width: 15 px;
    height: 15 px;
    background: #fff;
    transform: rotateY(0) rotate(45 deg);
    border: 2 px solid# e4e4eb;
    border - right: 0;
    border - bottom: 0
}

.select - brokers - dropdown.select - brokers - dropdown - arrow: before {
    left: 90 px
}

.open - popup - select - brokers - carousel - item - right.select - brokers - dropdown: before {
    left: auto;
    right: 125 px
}

# backtop {
    position: fixed;
    right: 32 px;
    bottom: -64 px;
    width: 40 px;
    justify - content: center;
    align - items: center;
    text - decoration: none;
    line - height: 40 px;
    border: 1 px solid# e4e4eb;
    background - color: #f8fcf8;
    z - index: 9
}

.compare - brokers - cards - scroll# backtop {
    bottom: 32 px
}

# backtop span {
    font - size: 32 px;
    color: #1e6006
}

.compare-tables:after,
.page-compare section .carousel-container:after {
    content: "";
    position: absolute;
    right: -16px;
    top: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(270deg, # fff 0, rgba(255, 255, 255, 0) 100 %);
    pointer - events: none
}

.compare - tables table tbody {
    display: grid;
    width: 100 %;
    overflow: hidden;
    padding - bottom: 12 px
}

.compare - tables table tbody tr {
    width: 1140 px;
    padding - top: 37.5 px;
    border - bottom: 1 px solid# e4e4eb
}

.compare - tables table thead tr th {
    width: 90 vw
}

.compare - tables table tbody tr td {
    font - size: 16 px;
    color: var (--main - gray - med);
    float: left;
    margin: 42.5 px 0 11 px;
    box - sizing: border - box;
    width: 226 px
}

.compare - brokers - cards.carousel - container>span.carousel - navigate - arrow.carousel - arrow - left {
    left: 0
}

.compare - brokers - cards.carousel - container>span.carousel - navigate - arrow.carousel - arrow - right {
    right: 0
}

.financial - advisor - firm - card {
    text - align: left;
    margin: 40 px 0 20 px;
    padding: 18 px 24 px 1 px !important;
    border - top: 16 px solid #262262
}

.financial-advisor-firm-card .title {
    display: flex;
    align-items: center;
    color: # 000;
    font - size: 14 px;
    line - height: 1.29;
    font - weight: 900
}

.financial - advisor - firm - card.content {
    display: flex;
    align - items: center;
    color: var (--main - gray - med);
    font - size: 20 px;
    line - height: 1.6;
    margin - top: 30 px
}

.financial - advisor - firm - card.content a {
    color: #262262;
    text-decoration: underline
}

.financial-advisor-firm-card .financial-advisor-firm-card-top {
    width: calc(100% - 195px);
    float: left;
    text-align: left;
    margin-right: 24px
}

.financial-advisor-firm-card .financial-advisor-firm-card-top h2 {
    color: # 000;
    font - size: 32 px;
    line - height: 1.25;
    font - weight: 900;
    margin - bottom: 16 px
}

.financial - advisor - firm - card.financial - advisor - firm - card - top p a {
    color: #262262;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
    text-decoration: underline;
    margin-right: 24px
}

.financial-advisor-firm-card .financial-advisor-firm-card-img {
    width: 171px;
    height: 112px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 2px solid # e4e4eb;
    box - sizing: border - box
}

.financial - advisor - firm - card.financial - advisor - firm - card - img span {
    color: #7f8ca4;
    font-size: 48px;
    line-height: 48px
}

.financial-advisor-firm-card .financial-advisor-firm-card-conflict-alerts,
.financial-advisor-firm-card .financial-advisor-firm-card-disciplinary-alerts,
.financial-advisor-firm-card .financial-advisor-firm-card-overall-rating,
.financial-advisor-firm-card .financial-advisor-firm-card-year-registered {
    float: left;
    width: calc(25% - 16px);
    margin: 40px 16px 0 0;
    border-right: 2px solid # e4e4eb;
    box - sizing: border - box
}

.financial - advisor - firm - card.financial - advisor - firm - card - conflict - alerts {
    border - color: transparent
}

.financial - advisor - firm - card.financial - advisor - firm - card - overall - rating.ranting {
    letter - spacing: -5 px
}

.financial - advisor - firm - card.financial - advisor - firm - card - overall - rating.ranting span {
    font - size: 16 px;
    color: #e4e4eb;
    margin - top: 4 px
}

.financial - advisor - firm - card.financial - advisor - firm - card - overall - rating.ranting span.active {
    color: #fbb040
}

.financial - advisor - firm - card.financial - advisor - firm - card - overall - rating.number {
    color: #3c34b5;
    font-size: 40px;
    line-height: 30px;
    margin-top: 8px
}

.financial-advisor-firm-card .financial-advisor-firm-card-conflict-alerts span,
.financial-advisor-firm-card .financial-advisor-firm-card-disciplinary-alerts span {
    color: # e77e04;
    margin - right: 9 px
}

.financial - advisor - firm - card.financial - advisor - firm - card - firm {
    clear: both;
    color: var (--main - gray - med);
    line - height: 1.6;
    padding - top: 40 px
}

.financial - advisor - firm - card.financial - advisor - firm - card - firm a {
    color: #262262;
    font-weight: 700;
    text-decoration: underline
}

.hub-top {
    background: var(--color-array-sidebarrail, inherit);
    position: absolute;
    width: 100%;
    min-height: 460px;
    top: -40px
}

.page-inveducation .page-body {
    padding-top: 0
}

.page-inveducation .page-body .inner {
    background: var(--color-array-edusubheader, inherit);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding: 30px 40px;
    max-width: 1200px !important;
    margin-top: 40px
}

.hub-page-content-nav ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.hub-page-content-nav ul li a {
    display: block;
    color: var(--main-gray-med);
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 15px 8px 16px;
    border-left: 4px solid # e4e4eb;
    font - weight: 400;
    text - decoration: none !important
}

.hub - page - content - nav ul li.act a,
.hub - page - content - nav ul li: hover a {
    color: var (--main - gray - black);
    text - decoration: none;
    border - color: var (--color - array - sidebarrail, inherit);
    background: #f7f7f9
}

.hub - resources {
    margin - bottom: 40 px
}

.hub - top.inner.hub - top - title - progress.hub - top - title {
    width: calc(100 % -338 px);
    float: left
}

.hub - top.inner.hub - top - title - progress.hub - top - title p {
    max - width: 653 px;
    color: var (--main - gray - med);
    font - size: 20 px;
    line - height: 1.6
}

.hub - top.inner.hub - top - title - progress.hub - top - progress {
    width: 279 px;
    float: left;
    margin - top: 32 px
}

.hub - top.inner.hub - top - title - progress.hub - top - progress.progress - title {
    color: var (--main - gray - black);
    font - size: 32 px;
    line - height: 1.25;
    font - weight: 900;
    margin - bottom: 27 px
}

.hub - top.inner.hub - top - title - progress.hub - top - progress.progress - bar {
    width: 242 px;
    height: 16 px;
    border - radius: 20 px;
    border: 2 px solid# e4e4eb;
    background - color: #fff;
    box - sizing: border - box
}

.hub - top.inner.hub - top - title - progress.hub - top - progress.progress - bar.bar - progress {
    position: relative;
    top: -2 px;
    left: -2 px;
    width: 1 %;
    height: 16 px;
    border - radius: 20 px;
    background - color: #3c34b5;
    transition: width .8s
}

.hub-top .inner .hub-top-title-progress .hub-top-progress .progress-description {
    color: var(--main-gray-black);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 900;
    margin-top: 8px
}

.hub-resources .resource-title {
    float: left;
    width: 24.755%;
    text-align: left
}

.resource-count {
    display: inline-block;
    font-size: 14px;
    line-height: 1.29;
    font-weight: 900;
    margin-bottom: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    background-color: # d7df23
}

.hub - resources.resource - title h2 {
    color: var (--main - gray - black);
    font - size: 32 px;
    line - height: 1.25;
    font - weight: 900;
    padding: 0
}

.hub - resources.resource - title img {
    display: block;
    max - width: 158 px;
    max - height: 160 px;
    width: 100 %;
    height: auto;
    margin: auto
}

.hub - resources.resource - content {
    float: left;
    width: 37.638 %;
    text - align: left;
    border - left: 1 px solid# e4e4eb;
    padding: 34 px 24 px;
    margin - left: 26 px;
    box - sizing: border - box
}

.hub - resources.resource - content h3 {
    color: var (--main - gray - black);
    font - size: 20 px;
    line - height: 1.6;
    font - weight: 900;
    margin - bottom: 24 px;
    padding: 0
}

.hub - resources.resource - content.sect - content p {
    color: var (--main - gray - med);
    font - size: 20 px;
    line - height: 1.6;
    margin - bottom: 24 px
}

.hub - resources.resource - content a.learn - more,
.hub - resources.resource - content a.learn - more: hover {
    display: inline - flex;
    align - items: center;
    color: #262262;
    font-size: 20px;
    line-height: 1.6;
    text-decoration: none;
    font-weight: 700
}

.btn-green .icon-asset,
.featured-comparison .featured-comparison-carousel .featured-comparison-carousel-container .carousel-item .vs:after,
.hub-resources .resource-content a.learn-more img {
    margin-left: 8px
}

.hub-resources .resource-list {
    float: left;
    width: 34%;
    text-align: left;
    padding: 34px 0
}

.hub-resources .resource-list h3 {
    color: var(--main-gray-black);
    font-size: 20px;
    line-height: 1.6;
    font-weight: 800;
    margin-bottom: 24px;
    padding: 0
}

.hub-resources .resource-list ol {
    text-align: left;
    list-style: none;
    counter-reset: item;
    padding: 0;
    margin: 0
}

.hub-resources .resource-list ol li {
    position: relative;
    counter-increment: item;
    padding: 0 0 5px 40px;
    list-style: none;
    line-height: 1.4em
}

.hub-resources .resource-list ol li:before {
    content: counter(item);
    position: absolute;
    top: 5px;
    left: 0;
    width: 24px;
    height: 24px;
    color: # 7 f8ca4;
    font - size: 14 px;
    line - height: 20 px;
    font - weight: 900;
    text - align: center;
    border: 2 px solid #7f8ca4;
    border-radius: 50px;
    box-sizing: border-box
}

.hub-resources .resource-list ol li.check:before {
    content: "";
    border: 0;
    background-image: url("")
}

.hub-resources .resource-list ol li a {
    color: # 262262;
    font - size: 16 px;
    line - height: 1 em;
    font - weight: 700;
    text - decoration: none !important
}

.reviews h2 {
    font - size: 48 px;
    line - height: 1.17;
    font - weight: 900;
    color: var (--main - gray - black);
    margin: 41 px 0 51 px
}

.reviews.review - content {
    padding: 28 px 24 px 40 px;
    border - radius: 8 px;
    border: 1 px solid# f4f4f7;
    background - color: #fff;
    margin: 0 auto 40 px
}

.reviews.review - content.review - logo {
    width: 305 px;
    float: left;
    margin - right: 57 px
}

.reviews.review - content.review - logo img {
    display: block;
    max - width: 100 %;
    height: auto;
    margin: 12.4 px auto 53.3 px
}

.btn {
    display: block;
    font - size: 20 px;
    line - height: .8;
    font - weight: 700;
    text - align: center;
    text - decoration: none;
    padding: 13 px 14 px;
    margin - bottom: 8 px;
    border: 2 px solid# e4e4eb;
    border - radius: 8 px;
    color: var (--master - link - color);
    background: var (--color - array - cta_button_bg_color);
    white - space: nowrap
}

.btn - hot: active,
.btn - hot: hover {
    filter: saturate(.5) !important
}

.btn - green: hover,
.btn: hover {
    background: var (--color - array - cta_button_bg_color_hover);
    text - decoration: none
}

.btn.processing: after {
    content: "\e5d5";
    font - size: 20 px;
    position: absolute;
    left: 0;
    right: 0;
    top: 11 px;
    animation: 1 s linear infinite butback
}

.btn.saved: after {
    font - size: 20 px;
    content: "\e876"
}

.admin.insights_stockbrokers_com.btn - blue: hover,
.site - stockbrokerscom.admin.btn - blue: hover {
    background: #edf7ec !important
}

.admin.insights_forexbrokers_com.btn - blue: hover,
.site - forexbrokerscom.admin.btn - blue: hover {
    background: #f5fafc !important
}

body[class *=insights_] footer: has(.footer - links) {
    display: none !important
}

.btn span {
    vertical - align: sub
}

.offertext,
.reviews.review - content.review - logo p {
    color: var (--main - gray - med);
    font - size: 1 em !important;
    font - weight: 400;
    line - height: 1.33 !important;
    text - align: center;
    margin: 0 0 4 px !important
}

.reviews.review - content.review - logo p: last - child {
    margin: 0
}

.reviews.review - content.review - score {
    width: 340 px;
    float: left;
    font - size: 20 px;
    line - height: 1.6;
    color: var (--main - gray - med)
}

.reviews.review - content.review - score.score - left - title {
    color: var (--main - gray - black);
    font - weight: 800
}

.reviews.review - content.review - score.score - stars.score - stars - right.icon - asset {
    color: #e4e4eb;
    margin: 0 - 2 px;
    vertical - align: text - bottom
}

.reviews.review - content.review - score.score - stars.score - stars - right.icon - asset: last - child {
    margin - right: 7 px
}

.reviews.review - content.review - score.score - deposit {
    clear: both;
    margin - bottom: 24 px
}

.reviews.review - content.review - score.score - risk {
    clear: both;
    margin - bottom: 4 px
}

.reviews.review - content.review - score.score - risk.score - risk - right {
    float: right;
    font - weight: 800
}

.reviews.review - content.review - score.score - percentage {
    clear: both;
    display: flex;
    color: var (--main - gray - black);
    font - size: 24 px;
    font - weight: 800;
    justify - content: center;
    align - items: center;
    justify - content: space - between;
    padding - top: 8 px;
    background - size: auto 8 px;
    background - repeat: no - repeat
}

.reviews.review - content.review - score.score - percentage.forexbroker {
    background - image: url("")
}

.reviews.review - content.review - score.score - percentage>div {
    display: inline - block;
    width: 52 px;
    text - align: center;
    border: 4 px solid# ccc
}

.reviews.review - content.review - score.score - percentage>div: first - child {
    border - top - left - radius: 100 px;
    border - bottom - left - radius: 100 px
}

.reviews.review - content.review - score.score - percentage>div: last - child {
    border - top - right - radius: 100 px;
    border - bottom - right - radius: 100 px
}

.reviews.review - content.review - score.score - percentage>div.per20 {
    border - color: #ab0e0e;
    background - color: #ab0e0e
}

.reviews.review - content.review - score.score - percentage>div.per40 {
    border - color: #f31212;
    background - color: #f31212
}

.reviews.review - content.review - score.score - percentage>div.per60 {
    border - color: #fbb040;
    background - color: #fbb040
}

.reviews.review - content.review - score.score - percentage>div.per80 {
    border - color: #3baa13;
    background-color: # 3 baa13
}

.reviews.review - content.review - score.score - percentage>div.per100 {
    border - color: #1e6006;
    background-color: # 1e6006
}

.reviews.review - content.review - score.score - percentage>div.act {
    width: 44 px;
    height: 44 px;
    line - height: 44 px;
    border - width: 8 px;
    border - radius: 100 %;
    background - color: transparent
}

.reviews.review - content.review - stats {
    clear: both;
    padding - top: 40 px
}

.reviews.review - content.review - stats ul.nav - tabs {
    margin: 0 - 24 px 22 px;
    padding: 0;
    border - bottom: 2 px solid# e4e4eb
}

.reviews.review - content.review - stats ul.nav - tabs li {
    float: left;
    list - style: none;
    padding: 0 12 px 8 px;
    margin - bottom: -2 px
}

.reviews.review - content.review - stats ul.nav - tabs li.act {
    border - bottom: 2 px solid var (--main - gray - black)
}

.reviews.review - content.review - stats ul.nav - tabs li a {
    font - size: 14 px;
    font - weight: 800;
    text - decoration: none
}

.reviews.review - content.review - stats ul.nav - tabs li.act a {
    color: var (--main - gray - black)
}

.reviews.review - content.review - stats.toggle - tab {
    color: var (--main - gray - med);
    font - size: 16 px;
    line - height: 1.5;
    overflow: hidden;
    height: 0
}

.reviews.review - content.review - stats.toggle - tab a {
    color: #2e759c;
    text-decoration: underline
}

.reviews .review-content .review-stats .toggle-tab table tr th {
    color: var(--main-gray-black);
    font-size: 14px;
    text-align: left;
    padding-top: 17px;
    padding-right: 13px
}

.review-content .ProsCons table tbody {
    display: flex;
    justify-content: space-between;
    grid-gap: 20px;
    flex-flow: column
}

.review-content .ProsCons table tbody td li {
    font-size: inherit;
    margin-left: -25px
}

@media screen and (min-width:768px) {

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) .carousel-navigate-arrow,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .carousel-navigate-arrow,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .ranting+p,
    .reviews .review-content .review-logo .score-stars,
    .reviews .review-content .review-stats .toggle-tab .toggle-nav {
        display: none
    }

    .reviews .review-content .review-stats .toggle-tab {
        transform: translateY(20px);
        opacity: 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out
    }

    .reviews .review-content .review-stats .toggle-tab.act {
        opacity: 1;
        transform: translateY(0)
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) img:not(.logo-broker img):not(.starv2),
    .page-home.site-uk .page-body .featured-partners:nth-child(2) img:not(.logo-broker img):not(.starv2) {
        margin-bottom: 10px
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) hr,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) hr {
        margin: 0
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) .carousel-item p,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .carousel-item p {
        line-height: normal;
        margin-bottom: 10px
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) .SB-Homepage-Desktop,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .SB-Homepage-Desktop {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) .ranting,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .ranting {
        border: none;
        margin: 0 auto 10px;
        padding: 0
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) .featured-partners-carousel-container,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .featured-partners-carousel-container {
        grid-template-columns: repeat(auto-fill, minmax(267px, 1fr));
        grid-auto-flow: dense
    }

    .page-home.site-forexbrokerscom .page-body .featured-partners:nth-child(2) .carousel-item,
    .page-home.site-uk .page-body .featured-partners:nth-child(2) .carousel-item {
        width: auto
    }
}

.reviews {
    margin-top: 36px
}

header {
    position: relative;
    height: auto
}

header a.logo,
header a.logo:hover {
width: auto;
  height: 72px !important;
  background: url('photo_2025-10-30_12-19-11.jpg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-position: center center;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
}

header ul.navigationv3 {
    padding: 0;
    margin: 0
}

.site-brokernotesco .compare-offer-minimums,
.site-forexbrokerscom .compare-offer-minimums {
    min-height: 134px !important
}

.star-rating-loc small,
.ten10s {
    font-size: 12px;
    font-weight: 400;
    color: # 5 d5d5d
}

header ul.navigationv3 li {
    list - style: none
}

header ul.navigationv3>li>a {
    display: block;
    font - size: 16 px;
    font - weight: 700;
    color: var (--color - array - navlink);
    text - decoration: none;
    padding: 24 px 0;
    margin: 0 16 px;
    border - bottom: 4 px solid transparent
}

header ul.navigationv3>li>a span.close,
header ul.navigationv3>li>a span.open {
    position: relative;
    bottom: -5 px;
    color: #7f8ca4
}

header ul.navigationv3>li:hover>a {
    font-weight: 700;
    color: var(--color-array-navlinkhover);
    border-color: var(--color-array-navlinkhoverunderline)
}

header ul.navigationv3>li ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 0
}

header ul.navigationv3>li ul li {
    position: relative;
    float: right;
    width: 25%;
    padding: 30px;
    border-top: 1px solid # e4e4eb;
    background: #fff;
    box - sizing: border - box
}

header ul.navigationv3>li ul li a {
    position: relative;
    display: block;
    color: var (--color - array - subnavlink);
    font - size: 16 px;
    font - weight: 700;
    line - height: 1.5;
    margin - bottom: 25 px;
    text - decoration: none
}

header ul.navigationv3>li ul li a img {
    margin - right: 10 px
}

header ul.navigationv3>li ul li a: hover {
    color: var (--color - array - subnavlinkhover);
    text - decoration: underline;
    font - weight: 700
}

header ul.navigationv3>li ul li a: hover span.icon - asset {
    color: var (--color - array - subnavlink);
    font - weight: 400
}

header ul.navigationv3>li ul li a span.ng - star - inserted,
header ul.navigationv3>li ul li a: hover span.ng - star - inserted {
    font - weight: 400
}

header ul.navigationv3>li ul li a.all - guides {
    color: var (--color - array - subnavlink);
    font - weight: 700
}

header ul.navigationv3>li ul li a.icon - asset {
    font - family: 'Material Icons';
    display: inline - block;
    position: relative;
    bottom: -6 px;
    margin - right: 10 px;
    font - size: 24 px;
    line - height: 0;
    color: #7f8ca4
}

header ul.navigationv3>li ul li a.all-guides .icon-asset {
    margin-left: 5px
}

header .mobile-menu-button a i,
header .mobile-menu-button span i {
    display: block;
    color: var(--color-array-menu_link, var(--main-green-black));
    font-size: 24px !important
}

body.active-header-menu:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .43);
    z-index: 6
}

.page-home section {
    padding-left: 32px;
    padding-right: 32px
}

.page-home section:not(.hero) {
    max-width: 1376px;
    margin-left: auto;
    margin-right: auto
}

.round-box {
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);
    padding: 24px 27px 24px 26px;
    background-color: # fff
}

.spc - title {
    font - size: 32 px;
    font - weight: 800;
    line - height: 1.25;
    color: var (--main - gray - black)
}

.spc - title: after {
    content: "";
    display: block;
    width: 80 px;
    height: 4 px;
    margin: 8 px 0 16 px;
    background: var (--main - green)
}

.text - aftertitle {
    max - width: 750 px;
    color: var (--main - gray - med);
    font - size: 20 px;
    line - height: 1.6;
    margin - bottom: 40 px;
    margin - top: 0
}

.btn - green,
.btn - green: hover,
.carousel - navigate - arrow {
    color: var (--main - green - black)
}

ul.text - aftertitle {
    padding - left: 21 px
}

ul.text - aftertitle li {
    line - height: 32 px;
    margin - bottom: 15 px
}

.btn - green {
    display: inline - flex;
    justify - content: center;
    align - items: center;
    font - size: 20 px;
    text - align: center;
    padding: 10 px 24 px;
    box - sizing: border - box;
    border - radius: 8 px;
    border: 2 px solid# e4e4eb;
    background - color: var (--color - array - cta_button_bg_color);
    cursor: pointer;
    text - decoration: none
}

.action - menu,
.td - right {
    text - align: right
}

.btn - green: hover {
    text - decoration: none
}

.SB - Homepage - Desktop {
    background - color: var (--main - light);
    border - radius: 40 px;
    padding - top: 80 px;
    padding - bottom: 80 px
}

.whitearea {
    padding - top: 140 px;
    padding - bottom: 140 px
}

.whitearea - leftimage.whitearea - leftimage - image {
    width: calc(50 % -17 px);
    margin - right: 17 px;
    float: left
}

.whitearea - leftimage.whitearea - leftimage - image img {
    max - width: 100 %;
    height: auto;
    border - radius: 48 px
}

.whitearea - leftimage.whitearea - leftimage - content {
    width: calc(50 % -17 px);
    margin - left: 17 px;
    float: left
}

.whitearea - leftimage.whitearea - leftimage - content h2 {
    margin - top: 20 px
}

@media screen and(max - width: 1000 px) {

    .SB - Homepage - Desktop,
    .whitearea {
        padding - top: 40 px;
        padding - bottom: 40 px
    }

    .responsive - reverse.inner>div,
    .whitearea - leftimage.whitearea - leftimage - content,
    .whitearea - leftimage.whitearea - leftimage - image {
        width: 100 %;
        float: none;
        margin - right: 0;
        margin - left: 0
    }

    .SB - Homepage - Desktop {
        border - radius: 0
    }

    .whitearea - leftimage.whitearea - leftimage - image img {
        border - radius: 40 px
    }

    .responsive - reverse.inner {
        display: flex;
        flex - flow: column - reverse
    }

    .side - by - side - comparisons.side - by - side - content {
        margin - top: 25 px
    }
}

.carousel - navigate - arrow {
    display: flex;
    justify - content: center;
    align - items: center;
    width: 36 px;
    height: 36 px;
    position: absolute;
    top: calc(50 % -12 px);
    transform: translateY(-50 %);
    border - radius: 80 px;
    border: 2 px solid# e4e4eb;
    background - color: #fff;
    cursor: pointer;
    user - select: none;
    opacity: .5
}

.carousel - navigate - arrow span {
    font - size: 30 px
}

.carousel - navigate - arrow.carousel - arrow - left {
    left: -20 px
}

.carousel - navigate - arrow.carousel - arrow - right {
    right: -20 px
}

.page - home.hero {
    position: relative;
    background: #ccc var (--master - hero);
    background - size: cover;
    color: #fff;
    padding: 118 px 32 px 220 px
}

.page - home.hero.inner {
    display: grid;
    gap: 20 px;
    grid - template - columns: minmax(300 px, 1 fr) 1 fr;
    max - width: 1200 px
}

.page - home.hero.inner>div: last - child {
    display: grid;
    justify - content: end;
    grid - template - columns: repeat(auto - fill, 260 px)
}

.page - home.hero.inner>div h1 {
    max - width: 500 px;
    font - size: 56 px;
    font - weight: 800;
    line - height: 1.29;
    margin: 8 px 0 16 px
}

.page - home.hero.inner>div p {
    font - size: 16 px;
    font - weight: 100;
    line - height: 1.5
}

.page - home.hero.inner.guide - label {
    position: relative;
    font - size: 14 px;
    font - weight: 900;
    line - height: 1.71;
    color: var (--main - gray - black);
    padding: 16 px 16 px 16 px 50 px;
    margin: 0 8 px 16 px;
    border - radius: 16 px;
    background - color: #fff;
    white - space: nowrap;
    overflow: hidden;
    text - overflow: ellipsis
}

.guide - label: hover,
.page - home.hero.inner a>.guide - label: hover {
    background: #e4e4eb;
    text - decoration: none !important
}

.page - home.hero.inner.guide - label.icon - asset {
    position: absolute;
    left: 16 px;
    top: 48 %;
    transform: translateY(-50 %);
    color: var (--main - green);
    font - size: 26 px
}

.page - home.hero.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100 %;
    height: 100 %;
    background: linear - gradient(0 deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 100 %)
}

.featured - partners.featured - on {
    color: var (--main - gray - med);
    font - size: 16 px;
    line - height: 1.5;
    text - align: center;
    background: #fff;
    border - top - left - radius: 40 px;
    border - top - right - radius: 40 px
}

.featured - partners.featured - on.inner.feature - logo - container div {
    display: flex;
    justify - content: space - around;
    margin: 34 px 0;
    align - items: center
}

.featured - partners.featured - on.inner.feature - logo - container div img {
    max - height: 36 px;
    width: auto;
    height: auto
}

.featured - partners.featured - on.inner.feature - logo - container i.wsj {
    background: url("") no - repeat
}

.featured - partners.featured - on.inner.feature - logo - container i.cnbc,
.featured - partners.featured - on.inner.feature - logo - container i.cnn - money,
.featured - partners.featured - on.inner.feature - logo - container i.finance - yahoo,
.featured - partners.featured - on.inner.feature - logo - container i.the - new - york - time {
    background: url("") no - repeat
}

.featured - partners.featured - on.inner.feature - logo - container i.chicago - tribune {
    background: url("") no - repeat
}

.featured - partners.featured - on.inner.feature - logo - container i.wsj {
    width: 54 px;
    height: 36 px;
    background - size: 54 px
}

.featured - partners.featured - on.inner.feature - logo - container i.the - new - york - time {
    width: 124 px;
    height: 36 px;
    background - size: 124 px;
    background - position: center - 340 px
}

.featured - partners.featured - on.inner.feature - logo - container i.chicago - tribune {
    width: 127 px;
    height: 36 px;
    background - size: 127 px;
    background - position: center center
}

.featured - partners.featured - on.inner.feature - logo - container i.cnbc {
    width: 40 px;
    height: 36 px;
    background - size: 108 px;
    background - position: -33 px - 29 px
}

.featured - partners.featured - on.inner.feature - logo - container i.finance - yahoo {
    width: 92 px;
    height: 36 px;
    background - size: 110 px;
    background - position: -13 px - 369 px
}

.featured - partners.featured - on.inner.feature - logo - container i.cnn - money {
    width: 134 px;
    height: 36 px;
    background - size: 134 px;
    background - position: -13 px - 369 px
}

.featured - partners.featured - partners - carousel {
    border - top - left - radius: 0;
    border - top - right - radius: 0
}

.featured - partners - carousel - container.carousel - item {
    padding: 24 px 16 px 16 px
}

.featured - partners - carousel - container.carousel - item img,
.side - by - side - comparisons.side - by - side - img img {
    max - width: 100 %;
    height: auto
}

.featured - partners - carousel - container.carousel - item.ranting {
    max - width: 210 px;
    font - size: 20 px;
    font - weight: 800;
    line - height: 1.2;
    color: var (--main - gray - black);
    padding - top: 27.3 px;
    border - top: 1 px solid# e4e4eb;
    margin: 18.5 px auto 16 px
}

.featured - partners - carousel - container.carousel - item.ranting.icon - asset {
    font - size: 16.7 px
}

.featured - partners - carousel - container.carousel - item p {
    min - height: 48 px;
    line - height: 1.5;
    color: var (--main - gray - med);
    margin - bottom: 23 px;
    white - space: normal
}

.dropdown - ul ul li ul,
.site - stockbrokerscom.featured - partners - carousel - container.carousel - item.ranting.icon - asset,
.site - stockbrokerscom.featured - partners - carousel - container.carousel - item p.cfd {
    display: none !important
}

.toughest - review.whitearea - leftimage - content img {
    float: right;
    max - width: 100 px
}

.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item {
    padding: 24 px 26 px;
    font - size: 20 px;
    font - weight: 800;
    line - height: 1.2;
    color: var (--main - gray - black)
}

.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item a,
.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item a: hover,
.featured - review.featured - review - carousel - container.carousel - item a,
.featured - review.featured - review - carousel - container.carousel - item a: hover {
    color: var (--main - gray - black);
    text - decoration: none
}

.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item img {
    width: 24 px;
    height: 24 px;
    margin - right: 16 px;
    vertical - align: top
}

.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item.vs {
    position: relative;
    display: block;
    font - size: 16 px;
    font - weight: 800;
    line - height: 1.5;
    letter - spacing: normal;
    text - align: center;
    color: #677182;
    background: # fff;
    padding: 16 px 8 px
}

.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item.vs: after,
.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item.vs: before {
    content: "";
    position: relative;
    top: -5 px;
    width: 37 px;
    display: inline - block;
    height: 1 px;
    background - color: #e4e4eb
}

.featured - comparison.featured - comparison - carousel.featured - comparison - carousel - container.carousel - item.vs: before {
    margin - right: 8 px
}

.side - by - side - comparisons.inner>div {
    float: left
}

.side - by - side - comparisons.side - by - side - content {
    width: calc(51 % -32 px);
    margin - right: 32 px
}

.side - by - side - comparisons.side - by - side - img {
    width: 49 %
}

.featured - comparison - carousel - container,
.featured - partners - carousel - container,
.featured - review.featured - review - carousel - container {
    display: grid;
    gap: 20 px;
    grid - auto - flow: column;
    scroll - snap - type: x mandatory;
    overflow: hidden;
    overflow - x: scroll;
    white - space: nowrap;
    padding: 10 px;
    scrollbar - width: none;
    - ms - overflow - style: none;
    justify - content: flex - start
}

.featured - comparison - carousel - container::-webkit - scrollbar,
.featured - partners - carousel - container::-webkit - scrollbar,
.featured - review.featured - review - carousel - container::-webkit - scrollbar {
    width: 0 !important
}

.page - body h3.material - icons {
    font - size: 32 px;
    display: inline - block;
    position: relative;
    top: 5 px
}

.featured - review.featured - review - carousel - container.carousel - item {
    font - size: 20 px;
    font - weight: 800;
    line - height: 1.2;
    color: var (--main - gray - black)
}

.featured - review.featured - review - carousel - container.carousel - item img {
    width: 24 px;
    height: 24 px;
    vertical - align: middle;
    margin - bottom: 5 px !important;
    margin - right: 8 px
}

.carousel - container>div {
    padding: 10 px;
    margin: -10 px;
    overflow: hidden
}

.carousel - container>div.carousel - item {
    width: 267 px;
    box - sizing: border - box;
    display: inline - block
}

.site - advisorsearchorg.carousel - container>div.carousel - item {
    width: auto !important
}

.carousel - container.carousel - bullets {
    text - align: center;
    padding: 24 px 0 0;
    margin: 0
}

.carousel - container.carousel - bullets li {
    position: relative;
    display: inline - block;
    margin: 0 4 px;
    list - style: none
}

.carousel - container.carousel - bullets li a {
    display: block;
    width: 8 px;
    height: 8 px;
    border: 2 px solid #7f8ca4;
    border-radius: 100%
}

.carousel-container .carousel-bullets li a.act {
    border-color: var(--main-green-black);
    background-color: var(--main-green-black)
}

.gallery-container .gallery-item {
    position: relative;
    display: inline-block;
    image-rendering: auto;
    font-size: 0;
    border-radius: 12px;
    overflow: hidden;
    counter-increment: ccc
}

# image - galley.image - gallery - container>div.item - gallery - container img {
    width: auto;
    max - width: 100 %
}

.gallery - container.gallery - item: before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100 %;
    height: 65 %;
    background - image: linear - gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .63), rgba(0, 0, 0, 0));
    pointer - events: none
}

.gallery - container: after {
    display: block;
    content: "View Gallery ("
        counter(ccc) " Images)";
    font - size: 13 px;
    position: absolute;
    left: 0;
    top: 153 px;
    color: #fff;
    pointer - events: none;
    right: 0;
    margin: 0 auto;
    text - align: center
}

.gallery - container.gallery - item img {
    width: 180 px;
    height: 180 px;
    object - fit: cover;
    pointer - events: none;
    object - position: top;
    margin: 0 !important
}

.gallery - container.gallery - item>span.material - icons {
    position: absolute;
    right: 8 px;
    bottom: 8 px;
    color: #fff;
    font - size: 24 px;
    pointer - events: none
}

# image - galley {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100 %;
    width: 100 %;
    background - color: rgba(0, 0, 0, .71);
    z - index: 100000000;
    overflow: auto;
    box - sizing: border - box
}

# image - galley::-webkit - scrollbar {
    width: 0 !important
}

# image - galley.open {
    display: block;
    z - index: 1000000000
}

# image - galley>a.close {
    position: absolute;
    top: 10 px;
    right: 10 px;
    color: #fff;
    z - index: 9
}

# image - galley>a.material - icons.close {
    font - size: 40 px !important
}

.image - description {
    margin - top: 30 px
}

# image - galley.image - arrow - nav {
    display: flex;
    margin: 16 px auto;
    gap: 20 px;
    justify - content: center
}

# image - galley.image - arrow - nav>a {
    display: inline - block;
    width: 32 px;
    height: 32 px;
    line - height: 32 px;
    text - align: center;
    color: var (--main - green - black);
    border - radius: 80 px;
    border: 2 px solid# e4e4eb;
    background - color: var (--main - light)
}

# image - galley.image - arrow - nav>a span {
    font - size: 32 px;
    pointer - events: none
}

# image - galley.image - bullet - nav {
    text - align: center;
    margin: 0;
    padding: 0
}

# image - galley.image - bullet - nav li {
    display: inline - block;
    margin: 0 4 px
}

# image - galley.image - bullet - nav li a {
    display: block;
    width: 8 px;
    height: 8 px;
    border: 2 px solid# e4e4eb;
    border - radius: 100 px
}

# image - galley.image - bullet - nav li.act a {
    background - color: #fff
}

.container - boxes {
    max - width: 744 px;
    margin: auto;
    padding: 50 px 0;
    box - sizing: border - box
}

.boxes,
.clipboard {
    display: block;
    padding: 24 px;
    margin - bottom: 20 px
}

.boxes {
    border - radius: 16 px;
    border: 2 px solid# e4e4eb;
    background - color: var (--master - backdrop - color)
}

.boxes.boxes - content p {
    color: var (--main - gray - med);
    font - size: 20 px;
    line - height: 1.6;
    font - weight: 400;
    margin - bottom: auto
}

.boxes.boxes - content.box - title {
    display: flex;
    align - items: center;
    color: var (--main - gray - black);
    font - weight: 800;
    margin - bottom: 8 px
}

.boxes.boxes - content.box - title.material - icons {
    font - size: 30 px;
    color: var (--main - green);
    margin - right: 8 px
}

.clipboard {
    border: 1 px solid# e4e4eb;
    font - size: 20 px;
    line - height: 32 px;
    border - radius: 8 px
}

.clipboard.copied: after {
    content: "check";
    background: var (--color - array - cta_button_bg_color_hover)
}

.clipboard: after {
    content: "content_copy";
    font - family: 'Material Icons';
    position: absolute;
    bottom: 24 px;
    right: 24 px;
    font - size: 20 px;
    color: #545454;
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 8px
}

.boxes-v2 {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid # e4e4eb;
    border - radius: 16 px
}

.boxes - v2 h3,
.boxes - v2 h4,
.boxes - v2 h5 {
    font - size: 20 px;
    font - weight: 800;
    margin: 0 0 12 px;
    padding: 0;
    color: #231f20
}

.boxes-v2 p {
    line-height: 32px;
    margin: 0 0 12px;
    font-size: 20px
}

footer .logo-footer {
    float: left;
    clear: both
}

footer .logo-footer img {
    max-width: 283px;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    padding: 0 20px 30px 0;
    border-bottom: 2px solid var(--main-gray-med)
}

footer .top-footer>.menu-footer {
    width: calc(100% - 303px);
    float: left
}

footer .menu-footer ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: flex-start;
    grid-gap: 24px;
    overflow-x: auto
}

footer .menu-footer ul::-webkit-scrollbar {
    width: 0 !important
}

footer .menu-footer ul li {
    display: inline-block;
    white-space: nowrap
}

footer .menu-footer ul li a {
    color: # fff;
    font - size: 16 px;
    text - transform: uppercase;
    font - weight: 800;
    text - decoration: none
}

footer.middle - footer ul {
    padding: 0;
    margin: 0 0 50 px
}

footer.middle - footer ul li {
    display: inline - block;
    list - style: none;
    margin - right: 18 px
}

footer.middle - footer ul li a img {
    display: block;
    filter: brightness(0) invert(1)
}

footer.middle - footer p {
    max - width: 1076 px;
    color: #fff;
    font - size: 16 px;
    line - height: 24 px;
    font - weight: 400;
    margin - bottom: 24 px
}

footer.middle - footer p a {
    color: #fff;
    text - decoration: none
}

footer.footer - certified {
    padding: 16 px 0 40 px
}

footer.footer - certified img {
    width: 59 px;
    height: 96 px;
    margin: 0 32 px 0 0
}

.read - more.show {
    display: inherit !important
}

@media screen and(min - width: 1071 px) {

    .mobile - menu - button,
    header.mobile - menu - button,
    header ul.navigationv3.mobile - menu {
        display: none
    }

    header ul.navigationv3>li: hover>a+ul {
        display: flex;
        justify - content: flex - end
    }
}

@media screen and(max - width: 1070 px) {

    .navigationv4 - floater,
    body.active - header - menu: before,
    header ul.navigationv3>li ul li: before,
    header ul.navigationv3>li.open>a span.close,
    header ul.navigationv3>li: not(.open)>a span.open,
    html: not(.mobile - menu - active) body header.navigation,
    html: not(.mobile - menu - active) body header.navigationv3 {
        display: none
    }

    .navigationv4 - div - sub - active.navigationv4 - div - sub - right.navigationv4 - div - sub - heading {
        padding: 8 px 16 px !important
    }

    .mobile - menu - button,
    .mobile - menu - button a {
        vertical - align: middle
    }

    html.mobile - menu - active body header.navigationv3>li.open>a {
        color: var (--main - gray - black);
        font - weight: 700;
        border - left: 4 px solid var (--main - green);
        padding: 15 px 8 px 15 px 12 px;
        border - top: 1 px solid# e4e4eb;
        border - bottom: 1 px solid# e4e4eb
    }

    html.mobile - menu - active body header.mobile - menu - button a i {
        color: #7f8ca4;
        font-weight: 600
    }

    html.mobile-menu-active body header .navigation li a,
    html.mobile-menu-active body header .navigationv3>li>a {
        color: var(--main-gray-med);
        font-size: 20px;
        font-weight: 400;
        text-transform: none;
        padding: 16px 8px 16px 16px;
        border: 0;
        margin: 0
    }

    html.mobile-menu-active body header .navigationv3>li:hover>a>span.close,
    html.mobile-menu-active body header .navigationv3>li:hover>a>span.open {
        color: # 7 f8ca4;
        pointer - events: none
    }

    header ul.navigationv3>li.open>ul {
        display: flex;
        flex - direction: column
    }

    header ul.navigationv3>li.open>a span.open,
    header ul.navigationv3>li: not(.open)>a span.close {
        display: inline - block
    }

    html.mobile - menu - active body header.navigation {
        position: fixed;
        top: 64 px;
        left: 0;
        width: 100 %;
        height: 100 %;
        overflow - y: scroll;
        overflow - x: hidden;
        background: #fff;
        display: block
    }

    .navigation li.active {
        box - shadow: 4 px 0 0 inset var (--color - array - nav, #224a56)
    }

    html.mobile-menu-active body header .navigation>li {
        border-top: 1px solid # e4e4eb;
        height: auto;
        display: block
    }

    html.mobile - menu - active body header.navigation li a {
        display: block
    }

    html.mobile - menu - active body header.navigation li ul li a {
        font - size: 16 px;
        padding: 8 px
    }

    html.mobile - menu - active body header ul.navigation>li>a span.close,
    html.mobile - menu - active body header ul.navigation>li>a span.open,
    html.mobile - menu - active body header ul.navigationv3>li>a span.close,
    html.mobile - menu - active body header ul.navigationv3>li>a span.open {
        bottom: 8 px;
        color: #7f8ca4;
        float: right;
        font-size: 40px
    }

    html.mobile-menu-active body header ul.navigation li:hover>ul {
        position: relative;
        top: auto;
        padding: 0;
        margin: 0 0 20px 20px;
        display: block;
        box-shadow: none
    }

    html.mobile-menu-active,
    html.mobile-menu-active body header ul.navigation li,
    html.mobile-menu-active body header ul.navigationv3>li ul {
        position: relative
    }

    html.mobile-menu-active body header .navigationv3 {
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        height: calc(100% - 64px);
        overflow-y: scroll;
        overflow-x: hidden;
        background: # fff
    }

    html.mobile - menu - active body header.navigationv3>li {
        display: block;
        border - top: 1 px solid# e4e4eb
    }

    html.mobile - menu - active body header ul.navigationv3>li ul li {
        float: none;
        width: 100 %;
        padding: 0 12 px;
        border: 0
    }

    html.mobile - menu - active body header ul.navigationv3>li ul li a {
        padding: 12 px 6 px;
        margin: 0
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul {
        display: flex;
        align - items: center;
        padding - top: 41 px;
        padding - left: 19 px
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul>li {
        display: inline - block;
        margin - right: 24 px;
        padding: 0
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul>li img {
        width: 100 %;
        height: auto
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul>li.mb - ig {
        max - width: 21 px
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul>li.mb - fb {
        max - width: 12.9 px
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul>li.mb - tw {
        max - width: 24 px
    }

    html.mobile - menu - active body header ul.navigationv3.mobile - social>ul>li>a {
        padding: 0
    }

    body header.inner>div: not(.mobile - menu - button) {
        width: 100 %;
        text - align: center
    }

    .active - session.mobile - menu - button {
        display: none !important
    }

    .active - session.mobile - menu - button a i,
    .mobile - menu - button a {
        color: #fff
    }

    .mobile - menu - button a i {
        font - size: 29 px !important
    }
}

@media screen and(max - width: 767 px) {
    .ad - content.ad - top - content.badget {
        padding: 8 px 24 px 8 px 16 px
    }

    .ad - content.ad - title {
        font - size: 16 px;
        line - height: 1.25
    }

    .ad - content.ad - content - text {
        font - size: 16 px;
        line - height: 1.5;
        margin - bottom: 0
    }

    .site - advisorsearchorg.financial - advisor - firm - card - top img {
        height: 70 px !important;
        width: auto !important
    }

    .financial - advisor - firm - card.title {
        justify - content: flex - end
    }

    .financial - advisor - firm - card.title.material - icons,
    .page - home.hero.overlay,
    .reviews.review - content.review - score.score - stars,
    .reviews.review - content.review - stats.toggle - tab.act a.toggle - nav>span.close,
    .reviews.review - content.review - stats.toggle - tab: not(.act) a.toggle - nav>span.open,
    .reviews.review - content.review - stats ul.nav - tabs,
    .show - more - content,
    .show - more.open.show - more - click {
        display: none
    }

    .financial - advisor - firm - card - overall - rating {
        text - align: right !important
    }

    .hub - page - content - nav {
        float: none;
        width: calc(100 % +30 px);
        margin: 0 - 16 px;
        padding: 16 px;
        background: #fff;
        box - shadow: 0 0 10 px 0 rgb(0 0 0 / 16 %);
        overflow - x: auto;
        box - sizing: border - box
    }

    .page - inveducation# body {
        background: #f7f6fc
    }

    .hub - resources.resource - list ol li {
        margin - left: 0
    }

    .carousel - container>a,
    .hub - top {
        display: none !important
    }

    .page - inveducation.page - body.inner {
        margin - top: 0 !important;
        padding: 20 px 0 0;
        background: 0 0
    }

    .cluster - name {
        font - size: 18 px !important
    }

    .cluster - nav img {
        max - width: 30 px;
        height: auto
    }

    .hub - page - content - nav ul {
        display: flex
    }

    .hub - page - content - nav ul li {
        display: inline - block;
        padding - right: 22 px
    }

    .hub - page - content - nav ul li a {
        color: #262262;
        font-size: 14px;
        line-height: 1.29;
        font-weight: 700;
        white-space: nowrap;
        padding: 0;
        border: 0
    }

    .hub-page-content-nav ul li.act a {
        color: # 5 b667a;
        background: 0 0
    }

    .reviews {
        max - width: 343 px;
        margin: 36 px auto auto
    }

    .reviews h2 {
        font - size: 20 px;
        margin: 24 px 0
    }

    .reviews.review - content {
        padding: 34 px 16 px 0
    }

    .reviews.review - content.review - logo {
        width: auto;
        float: none;
        margin: 0 0 42 px
    }

    .reviews.review - content.review - logo img {
        margin: 0 auto 16 px !important
    }

    .reviews.review - content.review - logo.score - stars {
        display: flex;
        justify - content: center;
        align - items: center;
        font - size: 16 px;
        line - height: 1.5;
        color: var (--main - gray - med);
        margin - bottom: 24 px
    }

    .reviews.review - content.review - logo.score - stars span.ng - star - inserted {
        font - size: 16 px;
        color: #e4e4eb
    }

    .reviews.review - content.review - logo.score - stars span.ng - star - inserted: last - child {
        margin - right: 4 px
    }

    .reviews.review - content.review - logo.score - stars span.ng - star - inserted.active {
        color: var (--color - array - star_rating_color)
    }

    .reviews.review - content.review - score {
        width: 100 %;
        float: none;
        font - size: 16 px
    }

    .reviews.review - content.review - score.score - deposit {
        padding - bottom: 18 px;
        margin - bottom: 18 px;
        border - bottom: 2 px solid# e4e4eb
    }

    .reviews.review - content.review - score.score - percentage>div {
        width: 46 px
    }

    .reviews.review - content.review - score.score - percentage>div.act {
        font - size: 20 px;
        width: 40 px;
        height: 40 px;
        line - height: 38 px
    }

    .reviews.review - content.review - score.score - risk {
        margin - bottom: 5 px
    }

    .reviews.review - content.review - score.score - risk.score - risk - right,
    .spc - title {
        font - size: 20 px
    }

    .reviews.review - content.review - stats {
        padding - top: 31 px
    }

    .reviews.review - content.review - stats.toggle - tab {
        height: 52 px;
        margin: 0 - 16 px;
        padding: 0 16 px;
        border - top: 2 px solid# e4e4eb
    }

    .reviews.review - content.review - stats.toggle - tab.act {
        padding - bottom: 15 px
    }

    .reviews.review - content.review - stats.toggle - tab a.toggle - nav {
        display: block;
        line - height: 1.25;
        color: var (--main - gray - black);
        font - weight: 800;
        text - decoration: none;
        padding: 15 px 0
    }

    .reviews.review - content.review - stats.toggle - tab a.toggle - nav: after {
        display: block;
        content: "expand_more";
        font - family: "Material Icons";
        position: absolute;
        right: 10 px;
        top: 15 px;
        font - size: 20 px
    }

    .reviews.review - content.review - stats.toggle - tab.act a.toggle - nav: after {
        content: "expand_less"
    }

    .reviews.review - content.review - stats.toggle - tab a.toggle - nav>span {
        float: right;
        color: #7f8ca4;
        font-size: 24px
    }

    body.no-scroll {
        overflow: hidden
    }

    # body>.page - body {
        padding - bottom: 0
    }

    body header {
        padding: 15 px 0
    }

    .mobile - flex - left {
        justify - content: start !important
    }

    .page - reviews.financial - advisor - firm - top.date {
        font - size: 14 px;
        line - height: 1.29;
        padding: 8 px 0 16 px
    }

    .financial - advisor - firm - top.financial - advisor - firm - card {
        padding: 10 px 16 px 24 px;
        border - top: 12 px solid #262262
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-top {
        width: 100%;
        float: none;
        margin: 0 0 34px
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-top h2 {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 8px
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .content,
    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-top p a {
        font-size: 16px;
        line-height: 1.5
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-img {
        width: 132px;
        height: 80px;
        margin-right: 16px
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-overall-rating {
        width: calc(100% - 148px);
        margin: 0;
        border: 0
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-conflict-alerts,
    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-disciplinary-alerts,
    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-year-registered {
        display: flex;
        justify-content: space-between;
        width: 100%;
        float: none;
        clear: both;
        margin: 0;
        padding: 44px 0 22px;
        border: 0
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-conflict-alerts>div,
    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-disciplinary-alerts>div,
    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-year-registered>div {
        margin: 0
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-disciplinary-alerts {
        padding: 0 0 26px
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-conflict-alerts {
        padding: 0
    }

    .financial-advisor-firm-top .financial-advisor-firm-card .financial-advisor-firm-card-firm {
        padding: 27px 0 0
    }

    .show-more .show-more-click {
        color: var(--main-green-black);
        text-decoration: underline
    }

    .page-about-us .top-about {
        padding-top: 0 !important
    }

    .text-aftertitle {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 24px
    }

    .btn-green {
        width: 100%;
        padding: 10px
    }

    .page-home section {
        padding-left: 0;
        padding-right: 0
    }

    .page-home .hero {
        padding: 0 0 34px;
        background: 0 0
    }

    .page-home .hero .inner {
        width: 100%;
        padding: 0;
        margin: 0;
        display: block
    }

    .page-home .hero .inner>div:last-child,
    footer .middle-footer p span {
        display: block
    }

    .page-home .hero .inner>div {
        padding: 0 16px
    }

    .page-home .hero .inner>div:first-child {
        position: relative;
        background: # ccc var (--master - hero - mobile) no - repeat !important;
        background - size: cover !important;
        margin - bottom: 40 px;
        padding - top: 39 px;
        padding - bottom: 59 px
    }

    .page - home.hero.inner>div: first - child: before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100 %;
        height: 100 %;
        background - image: linear - gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
    }

    .page - home.hero.inner>div h1 {
        max - width: 300 px;
        font - size: 32 px;
        line - height: 40 px
    }

    .page - home.hero.inner>div p {
        max - width: 300 px
    }

    .carousel - container>div {
        overflow - x: auto;
        scroll - behavior: smooth;
        scroll - snap - type: x mandatory
    }

    .carousel - container>div.carousel - item {
        scroll - snap - align: center
    }

    .page - compare.carousel - container>div.carousel - item {
        scroll - snap - align: none !important
    }

    .featured - partners {
        font - size: 14 px;
        line - height: 1.29
    }

    .featured - partners.featured - on.inner.feature - logo - container div {
        justify - content: space - around;
        margin - top: 16 px;
        margin - bottom: 40 px;
        justify - content: center;
        align - items: center;
        grid - auto - flow: row;
        flex - flow: column;
        grid - gap: 20 px
    }

    .featured - partners.featured - on.inner.feature - logo - container i.wsj {
        width: 39 px;
        height: 24 px;
        background - size: 39 px
    }

    .featured - partners.featured - on.inner.feature - logo - container i.the - new - york - time {
        width: 86 px;
        height: 24 px;
        background - size: 91 px;
        background - position: center - 253 px
    }

    .featured - partners.featured - on.inner.feature - logo - container i.chicago - tribune {
        width: 89 px;
        height: 24 px;
        background - size: 89 px;
        background - position: center center
    }

    .featured - partners.featured - on.inner.feature - logo - container i.cnbc {
        display: none;
        width: 37 px;
        height: 24 px;
        background - size: 89 px;
        background - position: -23 px - 25 px
    }

    .featured - partners.featured - on.inner.feature - logo - container i.finance - yahoo {
        display: none;
        width: 92 px;
        height: 24 px;
        background - size: 110 px;
        background - position: -13 px - 369 px
    }

    .featured - partners.featured - on.inner.feature - logo - container i.cnn - money {
        display: none;
        width: 134 px;
        height: 24 px;
        background - size: 134 px;
        background - position: -13 px - 369 px
    }

    .toughest - review.whitearea - leftimage - content img {
        float: none;
        max - width: 87 px
    }

    # image - galley.image - gallery - container>div.item - gallery - container img {
        max - width: 100 %;
        max - height: 80 vh
    }

    # image - galley.gallery - nav - container {
        margin: 0 16 px
    }

    footer {
        padding - top: 24 px;
        padding - bottom: 40 px
    }

    footer.logo - footer {
        float: none;
        padding - bottom: 14 px;
        margin - bottom: 24 px;
        border - bottom: 2 px solid var (--main - gray - med)
    }

    footer.logo - footer img {
        max - width: 212 px;
        margin: 0;
        padding: 0;
        border: 0
    }

    footer.menu - footer {
        width: 100 % !important;
        float: none
    }

    footer.menu - footer ul {
        display: block;
        margin: 0;
        padding: 0 0 16 px
    }

    footer.menu - footer ul li {
        display: block;
        margin - bottom: 24 px
    }

    footer.middle - footer ul {
        margin - bottom: 25 px
    }

    footer.middle - footer p {
        font - size: 14 px;
        line - height: 18 px
    }
}

.icon - mini - boxes>a,
.icon - mini - boxes>div {
    padding: 24 px;
    box - shadow: 0 0 10 px #00000029
}

.collapsable-content {
    height: auto;
    overflow: hidden;
    transition: .2s ease-out;
    max-height: 0
}

.collapsable-content.expand {
    max-height: 6000px;
    overflow: visible;
    padding-top: 20px
}

.icon-mini-boxes {
    display: grid;
    gap: 24px;
    margin: 24px 0 60px
}

.icon-mini-boxes>a span {
    display: block;
    font-size: 54px;
    margin-bottom: 10px;
    text-decoration: none !important
}

.icon-mini-boxes>div b,
.icon-mini-boxes>div p {
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.icon-mini-boxes>a {
    border-radius: 16px;
    text-align: center
}

.icon-mini-boxes>div {
    border-radius: 16px;
    text-align: left;
    display: grid;
    align-items: start
}

.icon-mini-boxes>a:hover,
.icon-mini-boxes>div:hover {
    background: var(--master-backdrop-color);
    text-decoration: none !important
}

.icon-mini-boxes>div b {
    font-size: 20px;
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
    overflow: hidden
}

.icon-mini-boxes>div p {
    color: # 545454;
    - webkit - line - clamp: 4;
    overflow: hidden !important
}

.table tbody p,
.table td,
.tablev2 tr td {
    text - overflow: ellipsis;
    overflow: hidden
}

.icon - mini - boxes p {
    font - size: 16 px;
    line - height: 24 px;
    margin: 0
}

.icon - mini - boxes>a: hover b,
.icon - mini - boxes>a: hover p {
    text - decoration: underline;
    color: var (--master - link - color - hover) !important
}

.icon - mini - boxes.author - line {
    color: #545454;
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    align-self: end
}

.icon-mini-boxes img {
    margin: 0 !important;
    max-width: 160px
}

.icon-mini-boxes .has-image {
    display: flex;
    gap: 20px
}

.icon-mini-boxes .has-image img {
    width: 169px;
    height: auto;
    max-height: 100px;
    border-radius: 16px;
    object-fit: cover
}

.icon-mini-boxes .has-wide-image img {
    width: 100%;
    height: 190px;
    max-width: none;
    margin: 0 0 10px !important;
    border-radius: 16px
}

.article-boxes .has-image,
.big-blog-boxes .has-image:nth-child(1n+2),
.image-boxes>div {
    padding: 0 0 20px !important;
    box-shadow: none !important
}

.article-boxes .has-image,
.big-blog-boxes .has-image:nth-child(1n+2) {
    border-bottom: 1px solid # ccc;
    border - radius: 0
}

.big - blog - boxes.has - image: last - child {
    border - bottom: none
}

.big - blog - boxes.has - image: first - child img {
    width: 100 %;
    height: auto;
    max - width: none;
    margin - bottom: 10 px
}

.big - blog - boxes>a: hover,
.big - blog - boxes>div: hover,
.image - boxes>div: hover {
    background: 0 0 !important
}

.image - boxes {
    align - items: start
}

.page - body.inner {
    max - width: 1140 px !important
}

.popup - text,
span[data - info]: active: after,
span[data - info]: hover: after {
    font - size: 12 px;
    border - radius: 5 px;
    box - shadow: 0 2 px 10 px rgba(0, 0, 0, .1);
    white - space: normal;
    line - height: 1.4 em;
    z - index: 100000;
    display: block;
    position: absolute;
    background: #fff
}

.popup - text,
div.table {
    padding: 10 px
}

span[data - info],
span[data - popup] {
    cursor: pointer;
    font - size: 16 px;
    vertical - align: bottom;
    display: inline - block;
    position: relative;
    color: #7d7d7d
}

span[data-info]:active:after,
span[data-info]:hover:after {
    content: attr(data-info);
    top: -20px;
    font-family: Arial;
    padding: 10px;
    max-width: 170px;
    min-width: 120px;
    font-weight: 400
}

.popup-text {
    max-width: 130px;
    min-width: 100px
}

.dropdown-ul,
.table,
.td-right,
div.table {
    position: relative
}

.table,
.tableV3 {
    font-size: 0;
    width: 100%;
    z-index: 5;
    border-collapse: collapse;
    table-layout: auto;
    box-sizing: border-box
}

.dropdown-ul {
    margin: 0 10px;
    cursor: pointer
}

.dropdown-ul.active ul,
.dropdown-ul:hover ul {
    display: block;
    position: absolute;
    right: 0;
    width: auto;
    margin: 0;
    padding: 0;
    background: # fff;
    border: 1 px solid# eee;
    border - radius: 6 px;
    min - width: 140 px;
    z - index: 1000;
    top: 7 px;
    box - shadow: 0 0 10 px rgba(0, 0, 0, .1)
}

.dropdown - ul ul li: hover ul {
    left: 100 % !important;
    top: 0;
    display: block !important
}

table thead td.down: after,
table thead td.up: after {
    left: 0;
    right: 0;
    margin: 0 auto;
    font - family: "Material Icons"
}

.dropdown - ul ul li a {
    display: block;
    padding: 8 px 12 px;
    text - decoration: none;
    font - size: 16 px
}

.dropdown - ul ul li a: hover {
    background: #cbdeff
}

.tablev2 {
    width: 100 %;
    border - collapse: collapse;
    font - size: 0
}

.tablev2 tr td {
    padding: 12 px 10 px;
    white - space: nowrap;
    font - size: 15 px;
    border - bottom: 1 px solid# f1f1f1
}

.tablev2 thead tr td {
    color: #888;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700
}

.active-section {
    background: # fff
}

.active - section h1 {
    font - size: 18 px;
    font - weight: 700;
    color: #333;
    margin-block: 10px
}

.table {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.tableV3 {
    background-color: # fff;
    border - radius: 3 px;
    border: 1 px solid# e0e0e0
}

.table thead tr td {
    font - weight: 700;
    color: rgba(0, 0, 0, .54)
}

.table td.material - icons {
    vertical - align: bottom
}

.table td {
    padding: 10 px 15 px;
    white - space: nowrap;
    font - size: 15 px;
    border - bottom: 1 px solid# e8e8e8;
    background: #fff;
    max - width: 300 px
}

.table thead tr td: first - child {
    border - top - left - radius: 8 px
}

.table thead tr td: last - child {
    border - top - right - radius: 8 px
}

.table - actions td {
    border - bottom: solid #0077d6;
    background: # fff;
    padding: 20 px
}

.table - actions td i {
    color: #0077d6
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px
}

.table tbody p {
    font-size: 14px;
    color: # 222;
    letter - spacing: .06 em;
    font - weight: 700
}

.table tbody tr: hover {
    background: rgba(0, 0, 0, .03)
}

.table a {
    font - weight: inherit;
    text - decoration: none
}

table thead td.up: after {
    display: block;
    position: absolute;
    bottom: -3 px;
    content: "arrow_drop_up"
}

table thead td.down: after {
    display: block;
    position: absolute;
    bottom: 0;
    content: "arrow_drop_down"
}

.action - menu {
    cursor: pointer;
    overflow: visible !important;
    z - index: 1
}

.action - menu ul {
    position: absolute;
    background: #fff;
    z - index: 10000;
    white - space: nowrap;
    font - size: 0;
    text - align: left;
    box - shadow: 0 2 px 7 px rgba(0, 0, 0, .12);
    display: none;
    width: auto;
    right: 10 px;
    list - style: none;
    margin: -20 px 0 0;
    padding: 0;
    border - radius: 10 px
}

.action - menu li a {
    padding: 5 px 15 px;
    display: block;
    font - size: 16 px
}

.action - menu.button {
    font - size: 13 px;
    padding: 6 px 7 px;
    height: auto
}

.action - menu li a: hover {
    opacity: .8
}

tr.highlight td {
    background: #fffbc5 !important
}

.action - menu li: hover ul {
    left: 100 %;
    background: #fff;
    display: block;
    width: fit - content;
    top: auto
}

.table sub {
    display: inline - block;
    position: relative;
    font - size: 14 px;
    background: #eee;
    padding: 3 px 7 px;
    text - align: center;
    border - radius: 5 px;
    text - transform: uppercase;
    font - weight: 700
}

.td - 50 td {
    width: 50 %
}

td[data - sort]: after {
    font - family: "Material Icons";
    display: inline;
    content: "unfold_more";
    opacity: .5
}

td[data - sort - direction="1"]: after {
    content: "arrow_drop_down" !important;
    opacity: 1
}

td[data - sort - direction="-1"]: after {
    content: "arrow_drop_up" !important;
    opacity: 1
}

@media screen and(min - width: 768 px) {

    .adv - footer,
    .carousel - container.carousel - bullets,
    .show - more - click {
        display: none
    }

    .featured - partners {
        margin - top: -100 px
    }

    .featured - partners.featured - on.inner>div {
        width: calc(100 % -152 px);
        float: left
    }

    .featured - partners.featured - on.inner>div: first - child {
        width: 119 px;
        text - align: left;
        padding: 6 px 0;
        margin: 32 px 31.5 px 32 px 0;
        border - right: 1 px solid# e4e4eb
    }

    header {
        height: 71 px
    }

    .mobile - only {
        display: none !important;
        position: absolute
    }

    .navigation2 span[data - hover]: after {
        content: attr(data - hover);
        position: absolute;
        left: 80 %;
        top: 5 px;
        font - size: 0;
        border - radius: 8 px;
        z - index: -1;
        color: #fff;
        padding: 8 px;
        transition: left .1 s ease - out, opacity .1 s ease - out;
        opacity: 0
    }

    .navigation2 a: hover span[data - hover]: after {
        left: 100 %;
        z - index: 10000;
        top: 4 px;
        font - size: 14 px;
        background: #222;
        opacity: 1
    }

    .overflow.m6 {
        overflow-x: hidden;
        overflow-y: clip
    }

    .mobile-max-6 {
        max-height: 140px
    }
}

@media screen and (max-width:768px) {
    .page-body h1 {
        font-size: 36px
    }

    iframe[title*=YouTube] {
        width: 100 %;
        height: auto
    }

    .sticky - mode# sticky - offer.sticky - offer - exit {
        position: absolute;
        right: 0;
        top: -34 px
    }

    .sticky - mode# sticky - offer.sticky - offer - exit span {
        font - size: 20 px
    }

    .sticky - mode# sticky - offer {
        top: auto;
        bottom: 0
    }

    .sticky - mode# sticky - offer.offertext,
    .sticky - mode# sticky - offer.offertext: not(.disclaimertext) {
        font - size: 14 px !important;
        line - height: 24 px
    }

    .page - body h2 {
        font - size: 32 px;
        margin - bottom: 12 px;
        margin - top: 12 px;
        padding: 0
    }

    h2.has - section {
        margin - top: 16 px;
        padding - right: 30 px
    }

    .page - body h2.has - section {
        padding - right: 33 px
    }

    h2.has - section: after {
        display: block;
        content: "\e313";
        color: #7f8ca4;
        font-family: "Material Icons";
        font-size: 38px;
        position: absolute;
        right: 0;
        top: -10px
    }

    .page-body h3 {
        font-size: 27px;
        margin-bottom: 18px
    }

    .page-body h4 {
        font-size: 21px;
        margin-bottom: 18px
    }

    .authorship {
        grid-auto-flow: row !important;
        grid-gap: 20px;
        justify-content: normal !important
    }

    .authorship .profile-picture {
        width: 70px !important;
        height: 70px !important;
        float: left;
        margin-right: 10px
    }

    .author-line i,
    .authorship .authors .author,
    .portal-container,
    .review-content .ProsCons table tbody {
        display: block
    }

    .authorship .dates,
    .sticky-mode .disclaimertext,
    li.language_mode li {
        text-align: left
    }

    .hub-resources .resource-title {
        float: none;
        width: 100%;
        margin-bottom: 24px
    }

    .active-session .navigation2 ul,
    .adv-box,
    .article-boxes .description,
    .hub-resources .resource-content,
    header .navigation2,
    header .seperator {
        display: none
    }

    .hub-resources .resource-list {
        float: none;
        width: 100%;
        padding: 0;
        margin: 0 0 8px
    }

    .icon-mini-boxes>a,
    .icon-mini-boxes>div {
        display: grid;
        grid-auto-flow: column;
        gap: 20px
    }

    .icon-mini-boxes {
        grid-template: none !important
    }

    .big-blog-boxes .has-image:nth-child(1n+2) img,
    .icon-mini-boxes.blog-boxes:not(.image-boxes) img {
        width: 78px !important;
        height: auto !important
    }

    .icon-mini-boxes>a {
        justify-content: left;
        align-items: center;
        padding: 16px;
        text-align: left
    }

    .icon-mini-boxes>div {
        justify-content: left;
        align-items: center
    }

    .icon-mini-boxes>a span {
        margin: 0;
        font-size: 36px
    }

    .icon-mini-boxes img {
        margin: 8px !important
    }

    .big-blog-boxes .has-image:first-child,
    .blog-boxes>div,
    .flex-desktop-only {
        display: block !important
    }

    .icon-mini-boxes .has-image {
        display: flex !important;
        align-items: start
    }

    .big-blog-boxes .has-image {
        border: none
    }

    .icon-vs-logos>a {
        grid-auto-flow: row;
        text-align: center
    }

    .blog-boxes {
        gap: 20px
    }

    .big-blog-boxes .has-image:nth-child(1n+2) {
        gap: 10px !important
    }

    .v6-boxes .has-image:first-child img {
        width: 100% !important;
        margin: 0 0 20px !important
    }

    .image-boxes>div {
        padding: 24px !important;
        box-shadow: 0 0 10px # 00000029 !important;
        border - radius: 16 px !important
    }

    .icon - mini - boxes.has - wide - image img {
        height: auto !important
    }

    .active - session.navigation2 a span,
    blockquote {
        font - size: 32 px
    }

    .mobile - stacked {
        display: flex;
        flex - direction: column;
        text - align: center
    }

    .active - session header.logo,
    .carousel - navigate - arrow {
        display: none !important
    }

    li.language_mode {
        width: 100 %
    }

    span[data - info]: active: after,
    span[data - info]: hover: after {
        font - size: 11 px !important
    }

    .adv - box {
        position: absolute;
        left: 0;
        height: 0;
        overflow: hidden
    }

    blockquote {
        margin: 0 0 20 px auto !important
    }

    .page - body {
        padding - bottom: 40 px
    }

    .active - session.page - body.inner {
        padding: 20 px 0
    }

    .active - session.avoid - navi {
        padding: inherit
    }

    .active - session header.inner {
        width: auto
    }

    .active - session header {
        position: fixed;
        width: 100 vw !important;
        height: auto;
        bottom: 0;
        top: auto
    }

    .active - session.navigation2 {
        display: flex !important;
        flex - flow: row;
        justify - content: space - between;
        width: calc(100 vw - 30 px);
        margin: 0;
        padding: 5 px 10 px;
        overflow - y: scroll;
        - webkit - overflow - scrolling: touch
    }

    .active - session.navigation2 a {
        font - size: 0
    }

    .overflow {
        overflow - x: auto;
        overflow - y: clip;
        - webkit - overflow - scrolling: touch
    }

    .navigation2 li {
        height: auto
    }

    img[style *="float: left"],
    img[style *="float: right"] {
        display: block !important;
        float: none !important;
        margin: 0 0 20 px
    }

    div[style *=max - width] {
        max - width: none !important
    }

    .boxes.boxes - content.box - title.material - icons {
        font - size: 24 px
    }

    .page - reviews.page - body table tr td: first - child {
        width: calc(100 % -120 px)
    }

    .page - reviews.page - body table tr td: nth - child(2n) {
        text - align: right
    }

    .boxes.boxes - content.box - title img {
        max - width: 50 px !important
    }

    .desktop - only {
        display: none !important;
        position: absolute;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important
    }

    .flex - to - column {
        flex - flow: column;
        align - items: center
    }

    .microhead h1 {
        font - size: 34 px !important;
        padding: 10 px 0
    }

    .pros - cons - 2 {
        display: block;
        margin - bottom: 18 px
    }

    .mobile - menu - active.navigation2 {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: 60 px;
        height: 100 %;
        max - width: none !important;
        width: 100 % !important;
        background: #fff;
        padding: 25 px 0;
        z - index: 100000
    }

    .mobile - menu - active.navigation2 a {
        color: #000 !important
    }

    .mobile-menu-active .navigation2 li {
        display: block;
        padding: 10px 30px
    }

    .mobile-menu-active {
        overflow: hidden
    }

    header .navigation2 ul {
        display: block;
        position: relative;
        border: none;
        width: 100%
    }

    .table-scroller {
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }

    .dispatches {
        width: 95%
    }

    h2.has-section+section {
        height: auto;
        overflow: hidden;
        max-height: 0;
        border-bottom: 4px solid # e4e4eb
    }

    h2.has - section+section.active - section {
        max - height: 8000 px;
        transition: .2 s ease - in -out;
        overflow: visible
    }

    .mobile - max - 6 {
        max - height: 180 px
    }

    .sticky - mode# sticky - offer.btn {
        font - size: 16 px;
        margin - left: 10 px
    }

    .half - size {
        max - width: 130 px;
        display: inline - block
    }

    .starv2 {
        max - width: 95 px !important
    }
}

@media screen and(max - width: 418 px) {
    .select - brokers {
        width: 100 %;
        box - sizing: border - box;
        font - size: 14 px;
        margin - bottom: 30 px
    }

    .compare - top - section h2 {
        line - height: 1.33;
        padding: 0
    }

    .compare - top - section h1 {
        max - width: 280 px;
        font - size: 32 px;
        line - height: 1.25;
        margin - bottom: 8 px
    }

    .compare - top - section p.date {
        font - size: 14 px;
        line - height: 1.29;
        margin - bottom: 24 px
    }

    .compare - top - section h4 {
        font - size: 16 px;
        line - height: 1.5;
        margin - bottom: 23 px
    }

    .compare - brokers - cards.carousel - container {
        text - align: right
    }

    .compare - brokers - cards.carousel - container>div {
        padding: 20 px 10 px 5 px;
        margin: -20 px - 10 px;
        scroll - behavior: auto;
        scroll - snap - type: none;
        overflow: hidden
    }

    .page - compare.compare - brokers - cards.carousel - container>div {
        scroll - behavior: initial !important;
        scroll - snap - type: none !important
    }

    .compare - brokers - cards.carousel - container span.carousel - navigate - arrow,
    .compare - brokers - cards.carousel - container>span.carousel - navigate - arrow: not(.disabled) {
        position: relative;
        right: auto;
        left: auto;
        width: 32 px;
        height: 32 px;
        display: inline - block !important;
        transform: none;
        z - index: 9
    }

    .compare - brokers - cards.carousel - container>span.carousel - navigate - arrow.carousel - arrow - left {
        left: -13 px
    }

    .compare - brokers - cards.carousel - container span.carousel - navigate - arrow span {
        font - size: 38 px;
        margin - left: -2 px;
        margin - top: -3 px
    }

    .compare - brokers - cards.carousel - container>div>.brokers - carousel - container,
    .compare - tables table tbody tr {
        width: 880 px
    }

    .compare - brokers - cards.carousel - container>div.carousel - item {
        width: 164 px;
        min - height: 124 px;
        padding: 15 px;
        margin - right: 15 px
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.logo - broker {
        font - size: 10 px;
        margin - top: 0;
        margin - bottom: 10.4 px
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.suggested - broker {
        transition: none
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.suggested - broker.logo - broker {
        margin - top: 10 px
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.suggested - broker: hover {
        box - shadow: 0 8 px 6 px 0 rgb(0 0 0 / 32 %)
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.logo - broker img {
        width: 15.6 px;
        height: 15.6 px;
        margin - right: 5 px
    }

    .compare - brokers - cards.carousel - container>div.carousel - item p {
        font - size: 12 px;
        line - height: 1.33;
        margin - bottom: 0
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.add - broker.btn - green {
        font - size: 14 px;
        padding: 0
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.add - broker.btn - green span {
        font - size: 24 px;
        margin - bottom: 4 px
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.suggested - broker.suggested - broker - text {
        font - size: 10 px;
        line - height: 1
    }

    .compare - brokers - cards.carousel - container>div.carousel - item.add - broker {
        min - height: auto
    }

    .open - popup - select - brokers.select - brokers - dropdown: not(.select - brokers - dropdown - arrow - add): not(.select - brokers - dropdown - arrow) {
        transform: translateY(25 px)
    }

    .compare - tables table thead {
        top: 152 px
    }

    .compare - tables table thead tr th {
        padding: 0 16 px 8 px;
        margin: 0 - 16 px;
        background - color: #fff;
        font - size: 24 px
    }

    .compare - tables table thead tr th a {
        font - size: 20 px;
        line - height: 1.2
    }

    .compare - tables table thead tr th a span {
        font - size: 24 px
    }

    .compare - tables table tbody {
        width: calc(100 % +32 px);
        margin: 0 - 16 px;
        padding - bottom: 21 px
    }

    .compare - tables table tbody tr th {
        font - size: 14 px;
        padding: 7 px 16 px 8 px
    }

    .compare - tables table tbody tr.overall - number th {
        padding: 16 px 16 px 10 px
    }

    .compare - tables table tbody tr td {
        width: 179 px;
        margin: 27 px 0 8 px;
        padding: 0 0 0 16 px;
        box - sizing: border - box
    }

    .compare - tables table tbody tr td: last - child {
        margin - right: -16 px
    }

    .compare - tables table tbody tr.gallery - container td {
        margin - top: 33 px
    }

    .compare - tables table tbody tr td span.star {
        font - size: 16 px;
        vertical - align: baseline
    }

    .compare - tables table tbody tr td span.verified {
        margin - top: -6 px
    }

    .compare - tables table tbody tr: last - child td {
        margin - bottom: 12 px
    }

    .select - brokers - dropdown {
        left: 16 px !important;
        width: calc(100 % -32 px)
    }

    .select - brokers - dropdown.select - brokers - dropdown - arrow: before {
        left: var (--arrow - add - left)
    }

    # backtop {
        right: 16 px
    }

    .inner {
        width: calc(100 % -30 px)
    }

    .no - flex - mobile,
    .page - about - us.about - who - we - are.about - logos {
        display: block !important
    }

    .no - flex - mobile>label {
        margin: 10 px 0
    }

    .table tbody td {
        font - size: 14 px;
        padding: 10 px;
        white - space: normal
    }

    .carousel - bullets {
        display: none !important
    }

    header {
        padding: 6 px 0
    }

    .dropdown - selector>a,
    .page - body li,
    p {
        font - size: 16 px !important
    }

    .page - body li {
        padding - bottom: 5 px
    }

    footer.middle - footer ul li a img {
        padding: 2 px
    }

    .reviews.review - content.review - score.score - deposit[style="margin-bottom:0"] {
        border - bottom: none !important;
        margin - bottom: -10 px !important
    }

    .reviews.review - content.review - score.score - deposit[style="margin-bottom:0"].score - deposit - right {
        font - weight: bolder
    }

    img {
        margin - left: 0 !important;
        max - width: 100 %
    }

    h2.has - section {
        padding - top: 0 !important
    }

    .fake - input,
    .input,
    input[type=date],
    input[type=number],
    input[type=password],
    input[type=range],
    input[type=text],
    select,
    textarea {
        font - size: 16 px
    }

    input::-webkit - input - placeholder {
        font - size: 16 px
    }

    .mobile - force - block {
        grid - template - columns: 1 fr !important
    }

    # trustscore {
        float: none !important;
        clear: both;
        padding: 20 px;
        margin: -10 px auto 20 px;
        text - align: center;
        display: block;
        width: calc(100 % -40 px)
    }

    .page - about - us.about - who - we - are.about - logos.round - box {
        margin - bottom: 20 px
    }

    .page - about - us.about - who - we - are.about - logos.round - box img {
        max - width: 100 % !important
    }
}

@media print {
    @page {
        size: landscape
    }

    header {
        display: none
    }
}