.theme-advisor {
    background-image: linear-gradient(to bottom, #4D9BCB, rgba(67, 148, 199, 1));
    background-color: #4E9ACA;
    min-height: 410px !important;
}

.theme-advisor .content h1.title {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    text-shadow: -1px 1px 9px rgba(167, 12, 45, 0.36) !important;
}

.theme-advisor .content h1.title span {
    color: #FE3367;
}

.theme-advisor .content p.description {
    color: #FFFFFF !important;
    font-weight: 400 !important;
    text-shadow: -1px 1px 1px rgba(167, 12, 45, 0.36) !important;
}

.theme-advisor .content:after {
    display: none !important;
}

.theme-advisor:after {
    background-image: url('/images/content/articles.png') !important;
    background-size: 450px !important;
    background-position: bottom center !important;
    color: #95a6c7;
}

h1, h2, h3, h4, h5, h6, #article .content .details h2, #article .content .details h3 {
    color: #0084AE;
}

.articles {
    padding: 10px 0 35px 0;
    background-color: #F1F2F3;
}

.articles .btn-secondary {
    background-color: #FFFFFF;
}

.articles h3.title {
    display: block;
    font-size: 24px;
    padding: 0 10px 0 0;
    min-height: 46px;
    line-height: 1.8;
}

.articles .card {
    overflow: hidden;
    display: block;
    padding: 15px;
    position: relative;
}

.articles .card button {
    position: absolute;
    right: 38%;
    left: auto;
    max-width: 94%;
    background-size: 101%;
    background-color: #fe3367;
    color: #FFFFFF;
    padding: 0 18px;
    line-height: 50px;
    font-weight: 700;
    white-space: nowrap;
    border: transparent;
    text-overflow: ellipsis;
    text-decoration: none;
    -webkit-transition: background-position .2s linear;
    transition: background-position .2s linear;
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
}

.articles .card .details {
    background-color: #fff;
    text-decoration: none;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
    padding: 20px 30px;
    position: relative;
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    margin: 0 30px;
    padding-bottom: 35px;
}

.articles .card .thumbnail img {
    max-width: 100%;
    width: 100%;
}

.articles h3.title:before {
    content: '';
    float: left;
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 8px 0 0;
    background-image: url('/images/icons/menu/articles.svg');
    background-size: 46px 46px;
}

@media (min-width: 0) and (max-width: 767px) {
    .theme-advisor .content {
        padding: 20px !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }

    #article .content .details img {
        max-width: 100% !important;
    }

    .dark-mode #header .content {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    #offers .card .outlinks button {
        height: 30px;
        top: -32px;
        border-radius: 50%;
        -webkit-box-shadow: 0 0 6px rgb(0 0 0 / 15%);
        -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    }

    .dark-mode #offers .card .outlinks button {
        filter: invert(.9) brightness(2.5);
    }

    #offers .card .outlinks button.active img {
        filter: opacity(0);
    }

    #offers .card .outlinks button.active:before {
        content: "_";
        filter: opacity(1);
        display: block;
        width: 30px;
        line-height: 0.4;
        font-size: 25px;
        height: 30px;
        position: relative;
        z-index: 999;
    }

    #offers .card .container .symbol img, .dark-mode #offers .card .container .symbol img {
        transition: none !important;
        -webkit-transition: none;
        -moz-transition: none
    }

    .articles h3.title {
        font-size: 18px;
        min-height: 30px;
    }

    .articles h3.title:before {
        width: 35px;
        height: 35px;
        background-size: 35px 35px;
    }
}

#article .content .details .description ul:nth-of-type(1) li {
    padding: 10px 0;
    border-bottom: solid 1px #e5e5e5;
    line-height: 1.2;
}

#article .content .details p, #article .content .details ul {
    max-width: 90%;
}

#article .content .details .description ul {
    margin: 0 0 25px 0;
    padding: 5px 25px 5px 15px;
    max-width: fit-content
}

#article .content .details .description ul {
    background-color: #f6f6f6
}

#offers .card .container .symbol a {
    height: auto;
    padding: 3px 38px 3px 12px;
    top: 10px;
}

#compare .subjects .card .thumbnail .brand img {
    max-height: 60px;
    max-width: 150px;
    margin-top: -10px;
}

#compare .subjects .card .thumbnail .brand img:nth-of-type(2) {
    display: none
}

#offers .card .container .options .grade .score span.amount {
    letter-spacing: -2px;
    padding: 8px 5px 8px 12px;
}

#offers .card .container .options .grade .score span.amount:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 -5px 40px 5px;
    background-image: url('/images/icons/advertising-policy.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    opacity: .3;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
    -moz-transition: transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#offers .card .container .options .grade:hover .score span.amount:after {
    opacity: 0
}

#website-reputation:after {
    background-image: url('/images/icons/tips/website-reputation.svg');
}

#active-members:after {
    background-image: url('/images/icons/tips/active-members.svg');
}

#search-filters:after {
    background-image: url('/images/icons/tips/search-filters.svg');
}

#demands:after {
    background-image: url('/images/icons/tips/demands.svg');
}

#functionalities:after {
    background-image: url('/images/icons/tips/functionalities.svg');
}

#characteristics:after {
    background-image: url('/images/icons/tips/characteristics.svg');
}

#safety:after {
    background-image: url('/images/icons/tips/safety.svg');
}

#premium:after {
    background-image: url('/images/icons/tips/premium.svg');
}

.dark-mode #faq, .dark-mode #tips, .dark-mode #offers .card .container .options .grade .score .tooltip, .dark-mode #banner, body.dark-mode, .dark-mode #article, .dark-mode #article .content .details .quote-blue, .dark-mode #article .content .options, .dark-mode #offers, .dark-mode #tips .container .navigation ul li button.active, .dark-mode #tips .container .navigation ul li button:hover, .dark-mode #faq .questions ul li input[type=checkbox]:checked ~ p.description, .dark-mode #compare, .dark-mode #compare .subjects .card .position, .dark-mode #articles, .dark-mode #articles .card .content ul li {
    background: #191919 !important;
    background-color: #191919 !important;
    border-color: #191919 !important;
}

.dark-mode #compare .subjects .card .position, .dark-mode #breadcrumbs, .dark-mode #faq .questions ul li input[type=checkbox]:checked ~ p.description {
    border-color: #393939 !important;
}

.dark-mode #compare .subjects .card, .dark-mode #tips .container .navigation ul li button, .dark-mode #faq .questions ul li label.title, .dark-mode #breadcrumbs, .dark-mode #offers .card .container .options .grade .score .tooltip .item:nth-of-type(even), .dark-mode #navigation, .dark-mode #offers .card, .dark-mode #mobile-navigation ul li, .dark-mode #sitemap, .dark-mode #article .content, .dark-mode #offers .card .container .symbol, .dark-mode .badge-success, .dark-mode #guarantees, .dark-mode #tips .container .content .item-block, .dark-mode #articles .information, .dark-mode #articles .card, .dark-mode #offers .details .modal-advertising-policy {
    background: #272727 !important;
    border-color: #393939 !important;
}

.dark-mode #faq .questions ul li input[type=checkbox]:checked ~ p.description, .dark-mode #compare .subjects .card .position {
    border-top: 0 !important;
    border-style: solid;
    border-width: 1px;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode spam,
.dark-mode p,
.dark-mode span,
.dark-mode li,
.dark-mode strong,
.dark-mode #tips .container .navigation ul li button {
    color: #ffffff !important;
}

.dark-mode a {
    color: #FFFFFF !important;
}

.dark-mode #navigation .menu ul li a img, .dark-mode #navigation .menu-show button img, .dark-mode #article .content .details span.date:before, .dark-mode #mobile-navigation ul li img, .dark-mode #navigation .menu-hide button img, .dark-mode #navigation .menu-search button img, .dark-mode #navigation .menu-dark-mode button img, .dark-mode #offers .card .container .options .grade .score .tooltip:before, .dark-mode #offers .details .btn-advertising-policy:before, .dark-mode #tips h2:before, .dark-mode #tips .container .navigation ul li button img, .dark-mode #compare .subjects .card .item ul li span.title img, .dark-mode #articles .card .content span.date:before, .dark-mode #articles .card .content h3:before {
    filter: invert(.9)
}

.dark-mode #articles .card .thumbnail:after {
    filter: invert(.85)
}

.dark-mode .theme-advisor .header:after {
    content: "";
    position: relative;
    display: block;
    width: 100%;
    height: 80px;
    left: 0;
    bottom: 62px;
    background-image: url('/images/content/waves.svg');
    background-size: 112px 140px;
    background-repeat: repeat-x;
    background-position: center left 23px;
    margin-bottom: -35px;
    filter: invert(.9);
}

.dark-mode #article .content .options .item button {
    border-radius: 50% !important
}

.dark-mode #offers .card .container .details button, .dark-mode #articles .card .content:after {
    -webkit-box-shadow: 0 -10px 30px 10px rgb(39 39 39);
    -moz-box-shadow: 0 -10px 30px 10px rgba(255, 255, 255, 0.95);
    box-shadow: 0 -10px 30px 10px rgb(39 39 39);
}

.dark-mode #header .content:after {
    background: linear-gradient(to right bottom, #191919 49%, transparent 50%);
}

.dark-mode #offers .card .container .details:before, .dark-mode #offers .card .container .details:after, .dark-mode #offers .card .container .symbol:before, .dark-mode #offers .card .container .symbol:after, .dark-mode #offers .card .container .position {
    border-color: #191919
}

.dark-mode #articles .information:after {
    border-top-color: #272727
}

.dark-mode #compare .subjects .card .item {
    border-bottom: 1px solid #474747;
}

.dark-mode #offers .card .outlinks {
    border-color: #474747
}

.dark-mode #offers .card .container .options .grade .score span.amount, .dark-mode #offers .card .container .details span.title {
    color: #0084AE !important;
    filter: brightness(1.5);
}

.dark-mode #navigation.active .logo a img,
.dark-mode #navigation.scrolled .logo a img {
    opacity: 0;
}

.dark-mode #compare .subjects .card .thumbnail .brand img {
    opacity: unset !important;
}

.dark-mode.theme-advisor #header {
    background-image: url('/images/content/waves-black.svg');
}

.dark-mode #navigation.active .logo a,
.dark-mode #navigation.scrolled .logo a {
    filter: none !important;
    background-image: url('/images/content/logo-white.svg');
    background-size: contain;
    position: relative;
    z-index: 9999
}

#article .content .details img {
    width: auto;
    height: auto;
    margin: 30px auto;
    max-height: 520px;
    max-width: max-content;
    padding: 25px;
    background-color: #F1F2F3;
}

#header.theme-advisor .content {
    margin-top: 50px;
}

#header.theme-advisor .content p.description, #header.theme-advisor .content h1.title {
    text-shadow: -1px 1px 1px rgba(52, 114, 161, .75) !important;
}

.dark-mode #header:after, .dark-mode #compare .subjects .card .thumbnail img, .dark-mode #articles .card .thumbnail img {
    opacity: .65;
}

.dark-mode #compare .subjects .card .thumbnail .brand {
    background-color: rgba(0, 0, 0, 0.8);
}

.dark-mode #compare .subjects .card .thumbnail .brand:after {
    border-top-color: rgba(0, 0, 0, .8);
}

.dark-mode #offers .card .container .symbol {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.dark-mode #offers .card .container .options .grade .score span.amount:after {
    filter: invert(0.9) brightness(1)
}

.dark-mode .theme-advisor {
    background-image: linear-gradient(45deg, black, rgba(25, 25, 25, .5));
}

@media (min-width: 1200px) {
    .dark-mode .header:after {
        background-size: 12.3% auto;
        background-position: top left 64px;
        bottom: 60px;
    }

    .dark-mode #article .wrapper:nth-child(2):before {
        content: "";
        position: absolute;
        display: block;
        right: 0;
        margin-top: -140px;
        width: 100%;
        height: 130px;
        left: 0;
        background-image: url('/images/content/waves-black.svg');
        background-size: 200px 85px;
        background-repeat: repeat-x;
        background-position: -8px 48px;
        border-bottom: solid 15px #191919;
    }

    #article .wrapper:nth-child(2):before {
        background-image: url(/images/content/waves.svg);
    }

    #offers .card .container .details ul {
        min-width: 615px;
    }

    #offers .card .container .symbol {
        padding: 25px 60px 15px 25px;
    }

    #offers .card .container .options .grade .score .tooltip:before, #offers .card .container .options .grade .score .tooltip {
        zoom: 1.25;
        right: 24px;
    }

    #offers .card .container .options .grade .score .tooltip {
        border-radius: 8px
    }

    #header:after {
        background-position: top center;
    }

    #articles .card .content p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
    }

    #article .header img {
        max-width: 1500px;
        margin: auto;
    }

    #article .header {
        background: linear-gradient(to left, #ff9cae 50%, #c978c4 50%);
        position: relative;
        border-bottom: solid 15px #FFFFFF;
        max-height: 480px;
    }

    #header.advisor,
    #article .header:after {
        content: "";
        display: block;
        width: 100%;
        left: 0;
        bottom: 0;
        background-image: url('/images/content/waves.svg');
        background-size: 120px 120px;
        background-repeat: repeat-x;
        background-position: center bottom -35px;
    }

    .dark-mode #header.advisor,
    .dark-mode #articles .information:before {
        background-image: url('/images/content/waves-black.svg');
    }

    #article .header:after {
        position: absolute;
        height: 77px;
        background-position: center center;
        background-size: auto 100%;
    }

    #articles .card .content ul {
        max-height: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    #header.theme-advisor:after {
        background-position: bottom left 20% !important;
        opacity: .9;
    }

    #navigation .menu ul li a img {
        width: 18px;
        margin: 10px 0 0;
    }

    #navigation .menu ul li a span, #navigation .menu ul li button span {
        font-size: 16px;
    }
}