.icon-copy-code:before,.card__promo_icon:before{content:"\efba"!important;color:grey}.icon-star-solid:before{content:"\ece5";color:var(--yellow)}.icon-badge-trending:before{content:"\ebe8";font-size:10px}.icon-badge-user:before{content:"\efb6";color:var(--white);font-size:10px}.icon-info:before{content:"\ef72";color:var(--blue)}.icon-menu:before{content:"\ec71"}.icon-search:before{content:"\eb36"}.icon-times-regular:before,.icon-close:before{content:"\ed6d"}.icon-bonus:before{content:"\efcc"}.icon-down:before{content:"\edc9"}.icon-arrow-up:before{content:"\edb9"}.icon-message:before{content:"\ea32"}.icon-arrow-up-right:before{content:"\eddd"}.icon-circle:before{content:"\ee78"}.icon-twitter:before{content:"\eef5"}.icon-linkedin:before{content:"\ef28"}.icon-instagram:before{content:"\eef1"}.icon-facebook:before{content:"\eef0"}.icon.pencil::before{padding:0 4px;font-size:32px;content:"\e913"}.icon.dice::before{padding:0 4px;font-size:32px;content:"\e96a"}.icon.gamepad::before{padding:0 4px;font-size:32px;content:"\e96b"}.icon.gamepad2::before{padding:0 4px;font-size:32px;content:"\e96c"}.icon.gamepad3::before{padding:0 4px;font-size:32px;content:"\e96d"}.icon.spades::before{padding:0 4px;font-size:32px;content:"\e96f"}.icon.clubs::before{padding:0 4px;font-size:32px;content:"\e970"}.icon.diamonds::before{padding:0 4px;font-size:32px;content:"\e971"}.icon.bullhorn::before{padding:0 4px;font-size:32px;content:"\e979"}.icon.new::before{padding:0 4px;font-size:32px;content:"\e97b"}.icon.percent::before{padding:0 4px;font-size:32px;content:"\ea09"}.icon.coins::before{padding:0 4px;font-size:32px;content:"\ea0a"}.icon.coin-dollar::before{padding:0 4px;font-size:32px;content:"\ea0b"}.icon.coin-euro::before{padding:0 4px;font-size:32px;content:"\ea0c"}.icon.coin-pound::before{padding:0 4px;font-size:32px;content:"\ea0d"}.icon.coin-yen::before{padding:0 4px;font-size:32px;content:"\ea0e"}.icon.cash::before{padding:0 4px;font-size:32px;content:"\ea11"}.icon.cash2::before{padding:0 4px;font-size:32px;content:"\ea12"}.icon.cash3::before{padding:0 4px;font-size:32px;content:"\ea13"}.icon.cash4::before{padding:0 4px;font-size:32px;content:"\ea14"}.icon.credit-card::before{padding:0 4px;font-size:32px;content:"\ea15"}.icon.credit-card2::before{padding:0 4px;font-size:32px;content:"\ea16"}.icon.pushpin::before{padding:0 4px;font-size:32px;content:"\ea36"}.icon.watch::before{padding:0 4px;font-size:32px;content:"\ea51"}.icon.watch2::before{padding:0 4px;font-size:32px;content:"\ea52"}.icon.bubbles4::before{padding:0 4px;font-size:32px;content:"\eac9"}.icon.podium::before{padding:0 4px;font-size:32px;content:"\eb9d"}.icon.stars::before{padding:0 4px;font-size:32px;content:"\eb9e"}.icon.medal-star::before{padding:0 4px;font-size:32px;content:"\eb9f"}.icon.medal::before{padding:0 4px;font-size:32px;content:"\eba0"}.icon.medal2::before{padding:0 4px;font-size:32px;content:"\eba1"}.icon.medal-first::before{padding:0 4px;font-size:32px;content:"\eba2"}.icon.medal-second::before{padding:0 4px;font-size:32px;content:"\eba3"}.icon.medal-third::before{padding:0 4px;font-size:32px;content:"\eba4"}.icon.crown::before{padding:0 4px;font-size:32px;content:"\eba5"}.icon.trophy::before{padding:0 4px;font-size:32px;content:"\eba6"}.icon.trophy2::before{padding:0 4px;font-size:32px;content:"\eba7"}.icon.trophy3::before{padding:0 4px;font-size:32px;content:"\eba8"}.icon.diamond::before{padding:0 4px;font-size:32px;content:"\eba9"}.icon.diamond2::before{padding:0 4px;font-size:32px;content:"\ebaa"}.icon.trophy4::before{padding:0 4px;font-size:32px;content:"\ebab"}.icon.gift::before{padding:0 4px;font-size:32px;content:"\ebac"}.icon.gift2::before{padding:0 4px;font-size:32px;content:"\ebad"}.icon.leaf::before{padding:0 4px;font-size:32px;content:"\ebcd"}.icon.leaf2::before{padding:0 4px;font-size:32px;content:"\ebce"}.icon.cherry::before{padding:0 4px;font-size:32px;content:"\ebd1"}.icon.fire::before{padding:0 4px;font-size:32px;content:"\ebe8"}.icon.soccer::before{padding:0 4px;font-size:32px;content:"\ec37"}.icon.football::before{padding:0 4px;font-size:32px;content:"\ec38"}.icon.tennis::before{padding:0 4px;font-size:32px;content:"\ec3c"}.icon.pingpong::before{padding:0 4px;font-size:32px;content:"\ec3d"}.icon.baseball::before{padding:0 4px;font-size:32px;content:"\ec3e"}.icon.basketball::before{padding:0 4px;font-size:32px;content:"\ec3f"}.icon.golf::before{padding:0 4px;font-size:32px;content:"\ec40"}.icon.golf2::before{padding:0 4px;font-size:32px;content:"\ec41"}.icon.hockey::before{padding:0 4px;font-size:32px;content:"\ec42"}.icon.racing::before{padding:0 4px;font-size:32px;content:"\ec43"}.icon.bookmark2::before{padding:0 4px;font-size:32px;content:"\ecb7"}.icon.bookmark3::before{padding:0 4px;font-size:32px;content:"\ecb8"}.icon.star-empty3::before{padding:0 4px;font-size:32px;content:"\ece3"}.icon.star-half::before{padding:0 4px;font-size:32px;content:"\ece4"}.icon.star-full2::before{padding:0 4px;font-size:32px;content:"\ece5"}.icon.star::before{padding:0 4px;font-size:32px;content:"\ece6"}.icon.heart3::before{padding:0 4px;font-size:32px;content:"\ece9"}.icon.heart4::before{padding:0 4px;font-size:32px;content:"\ecea"}.icon.thumbs-up::before{padding:0 4px;font-size:32px;content:"\ecf4"}.icon.thumbs-down::before{padding:0 4px;font-size:32px;content:"\ecf6"}.icon.happy::before{padding:0 4px;font-size:32px;content:"\ed02"}.icon.smile::before{padding:0 4px;font-size:32px;content:"\ed04"}.icon.sad::before{padding:0 4px;font-size:32px;content:"\ed08"}.icon.wink::before{padding:0 4px;font-size:32px;content:"\ed0a"}.icon.cool::before{padding:0 4px;font-size:32px;content:"\ed0e"}.icon.stack-clubs::before{padding:0 4px;font-size:32px;content:"\ed45"}.icon.stack-spades::before{padding:0 4px;font-size:32px;content:"\ed46"}.icon.stack-hearts::before{padding:0 4px;font-size:32px;content:"\ed47"}.icon.stack-diamonds::before{padding:0 4px;font-size:32px;content:"\ed48"}.icon.warning::before{padding:0 4px;font-size:32px;content:"\ed4f"}.icon.notification::before{padding:0 4px;font-size:32px;content:"\ed51"}.icon.question3::before{padding:0 4px;font-size:32px;content:"\ed55"}.icon.plus3::before{padding:0 4px;font-size:32px;content:"\ed5d"}.icon.minus3::before{padding:0 4px;font-size:32px;content:"\ed5e"}.icon.cross3::before{padding:0 4px;font-size:32px;content:"\ed6e"}.icon.checkmark4::before{padding:0 4px;font-size:32px;content:"\ed72"}.icon.appleinc::before{padding:0 4px;font-size:32px;content:"\ef1d"}.icon.android::before{padding:0 4px;font-size:32px;content:"\ef1f"}.icon.size-16::before{font-size:16px}.icon.size-24::before{font-size:24px}.icon.size-32::before{font-size:32px}.icon.size-48::before{font-size:48px}.icon.size-64::before{font-size:64px}.icon.no-padding::before{padding:0}.icon.blue{color:#004EC3}.icon.blue-light{color:#93C2FF}.icon.green{color:#006618}.icon.green-light{color:#7AD5C0}.icon.dark-red{color:#A92323}.icon.raspberry-red{color:#A80953}.icon.purple{color:#530079}.icon.yellow{color:#F1C40F}.icon.orange{color:#FF9333}.icon.orange{color:#FF9333}.icon.pink{color:#DA92F2}.icon-chevron-down-regular:before{content:"\ef53"}.icon-chevron-circle:before{content:"\efc1"}.icon-toc-list:before{content:"\efc3"}.icon-solid-star::before{content:"\ece2"}.icon-half-star::before{content:"\ece4"}.icon-empty-star::before{content:"\ece3"}.icon-toc-list:before{content:"\ec5a"}.icon-chevron-circle:before{content:"\ede7"}.icon-chevron-right-regular:before{content:"\edbc"}.icon-chevron-left-regular:before{content:"\edc4"}img {
    width: 100%;
    display: block;
    height: auto;
    border-style: none;
}

[class*="brands-list-v"] {
    width: 100%;
}

[class*="brands-list-v"] .card {
    margin-right: auto;
    margin-left: auto;

    @media (min-width: 576px) and (max-width: 767px) {
        max-width: 540px;
    }
}

[class*="brands-list-v"] .card:not(:last-child) {
    margin-bottom: 32px;
    @media screen and (min-width: 768px) {
        margin-bottom: 40px;
    }
}

/*-------links-------*/

a.thin {
    font-weight: 300;
}

a.bold {
    font-weight: 700;
}

a.underline-blue:not(:hover):not(:focus) {
    text-decoration-color: #002CEE;
}

a.underline-green:not(:hover):not(:focus) {
    text-decoration-color: #006600;
}

a.underline-red:not(:hover):not(:focus) {
    text-decoration-color: #AB1C2D;
}

a.underline-purple:not(:hover):not(:focus) {
    text-decoration-color: #6200B2;
}

a.underline-black:not(:hover):not(:focus) {
    text-decoration-color: var(--dark);
}

a.underline-gray:not(:hover):not(:focus) {
    text-decoration-color: var(--medium-grey);
}

a.underline-light-gray:not(:hover):not(:focus) {
    text-decoration-color: var(--light-grey);
}

a.underline-white:not(:hover):not(:focus) {
    text-decoration-color: #FFFFFF;
}

a.underline-brown:not(:hover):not(:focus) {
    text-decoration-color: brown;
}

a.underline-pink:not(:hover):not(:focus) {
    text-decoration-color: #F278A9;
}

a.underline-yellow:not(:hover):not(:focus) {
    text-decoration-color: #DAA807;
}

a.underline-orange:not(:hover):not(:focus) {
    text-decoration-color: #F75B23;
}

a.color-blue:not(:hover):not(:focus) {
    color: #002CEE;
}

a.color-green:not(:hover):not(:focus) {
    color: #006600;
}

a.color-red:not(:hover):not(:focus) {
    color: #AB1C2D;
}

a.color-purple:not(:hover):not(:focus) {
    color: #6200B2;
}

a.color-black:not(:hover):not(:focus) {
    color: var(--dark);
}

a.color-gray:not(:hover):not(:focus) {
    color: var(--medium-grey);
}

a.color-light-gray:not(:hover):not(:focus) {
    color: var(--light-grey);
}

a.color-white:not(:hover):not(:focus) {
    color: #FFFFFF;
}

a.color-brown:not(:hover):not(:focus) {
    color: brown;
}

a.color-pink:not(:hover):not(:focus) {
    color: #F278A9;
}

a.color-yellow:not(:hover):not(:focus) {
    color: #DAA807;
}

a.color-orange:not(:hover):not(:focus) {
    color: #F75B23;
}

/*------------------*/
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}


.progress__bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--accent);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.scroll-up {
    position: fixed;
    bottom: 40px;
    right: 16px;
    width: 40px;
    height: 40px;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 20;
}

.scroll-up:hover {
    background-color: var(--secondary);
}

.visible {
    opacity: 1;
}

.scroll-up.visible {
    pointer-events: initial;
}

@media screen and (max-width: 767px) {
    .backdrop div {
        margin-top: 56px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .backdrop div {
        margin-top: 60px;
    }
}

@media screen and (max-width: 991px) {
    .backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 3;
        height: 100dvh;
    }

    .backdrop div {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@media screen and (min-width: 992px) {
    .backdrop {
        display: none;
    }
}

/*countries colors*/
#intro h1 {
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

body.style-it #intro h1::after,
body.style-fr #intro h1::after,
body.style-es #intro h1::after,
body.style-pl #intro h1::after,
body.style-pt #intro h1::after,
body.style-uk #intro h1::after,
body.style-ch #intro h1::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 100%;
    height: 4px;
}

body.style-it #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--light-grey);
    background: linear-gradient(90deg, #009246 0%, #FFFFFF 50%, #CE2B37 100%);
}

body.style-it #intro h1::after {
    background: linear-gradient(90deg, #009246 0%, #FFFFFF 50%, #CE2B37 100%);
}

body.style-fr #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--light-grey);
    background: linear-gradient(90deg, #002654 0%, #FFFFFF 50%, #CE1126 100%);
}

body.style-fr #intro h1::after {
    background: linear-gradient(90deg, #002654 0%, #FFFFFF 50%, #CE1126 100%);
}


body.style-ch #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    background-color: #FF0000;
}

body.style-ch #intro > div:last-child > div {
    height: 100%;
    background-image: url('/images/theme/intro/global/flag.webp');
    background-repeat: repeat-x;
    margin: 0 12px;
}

body.style-ch #intro h1::after {
    background: linear-gradient(90deg, #FF0000 0%, #FFFFFF 50%, #FF0000 100%);
}

body.style-pl #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--light-grey);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 33%, #DC143C 80%, #DC143C 100%);
}

body.style-pl #intro h1::after {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 33%, #DC143C 80%, #DC143C 100%);
}

body.style-es #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--light-grey);
    position: relative;
    background: linear-gradient(0deg, #AD1519 0%, #AD1519 10%, #FABD00 40%, #FABD00 60%, #AD1519 90%, #AD1519 100%);
}

body.style-es #intro > div:last-child div {
    position: absolute;
    left: 0;
    top: 0;
    height: 10px;
    width: 100%;
    backdrop-filter: blur(1px);
}

body.style-es #intro h1::after {
    background: linear-gradient(0deg, #AD1519 0%, #AD1519 10%, #FABD00 40%, #FABD00 60%, #AD1519 90%, #AD1519 100%);
}


body.style-pt #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--light-grey);
    background: linear-gradient(90deg, #006600 0%, #006600 10%, #FF0000 63.5%);
}

body.style-pt #intro h1::after {
    background: linear-gradient(90deg, #006600 0%, #006600 10%, #FF0000 63.5%);
}

body.style-uk #intro > div:last-child {
    height: 12px;
    min-width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--light-grey);
    margin-top: 12px;
    background: linear-gradient(0deg, #012169 0%, #012169 13%, #f2d6d6 32%, #C8102E 37%, #C8102E 43%, #C8102E 57%, #f77d91 63%, #f2d6d6 68%, #012169 87%, #012169 100%);
}

body.style-uk #intro h1::after {
    background: linear-gradient(0deg, #012169 0%, #012169 13%, #f2d6d6 32%, #C8102E 37%, #C8102E 43%, #C8102E 57%, #f77d91 63%, #f2d6d6 68%, #012169 87%, #012169 100%);
}

/*404 page*/

.container.not-found {
    min-height: calc(100vh - 56px);
    padding-bottom: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container.not-found h1 {
    margin-bottom: 24px;
    font-size: 4rem;
    color: var(--dark-grey);
    line-height: 1.2;
}

@media screen and (min-width: 768px) {
    .container.not-found {
        min-height: calc(100vh - 60px);
        padding-bottom: 60px;
    }
}

@media screen and (min-width: 992px) {
    .container.not-found {
        min-height: calc(100vh - 74px);
        padding-bottom: 74px;
    }
}


.not-found a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    min-width: 107px;
    border: 1px solid;
    border-color: var(--dark-grey);
    border-radius: 4px;
    height: 40px;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    color: var(--dark-grey);
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    text-decoration: none;
}

.not-found a:hover {
    color: var(--dark);
    border-color: var(--dark);
}


/* search */
#search-page ul {
    padding-left: 0;
}

#search-page {
    padding: 0 16px;
    flex: 1;
}

#search-page > div:first-child > p {
    font-weight: 500;
    color: var(--dark-grey);
    font-size: 1.125rem;
    margin-bottom: 24px;
    border: 3px solid;
    border-color: var(--accent);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

#search-page > div:not(:first-child) > p {
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--medium-grey);
    text-align: center;
}

#search-page > div > ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#search-page > div > ul > li > a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    transition: color 0.3s ease-in-out;
    text-decoration: none;
}

#search-page > div > ul > li > a:hover {
    color: var(--accent);
}


/*contact us page */

.snippet-form {
    max-width: 380px;
    width: 100%;
    margin: 20px auto 30px;
    position: relative;
}

.snippet-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.snippet-form form > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.snippet-form label {
    font-size: 0.875rem;
}

.snippet-form input {
    border-color: var(--medium-grey);
}

.snippet-form > form > div:not(:last-child) input,
.snippet-form textarea {
    border: 1px solid;
    border-color: var(--grey);
    border-radius: 8px;
    padding: 14px 10px;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.14;
    transition: border-color 0.3s ease-in-out, outline-color 0.3s ease-in-out;
    resize: none;
    outline: 2px solid transparent;
}

.snippet-form > form > div:not(:last-child) input::placeholder,
.snippet-form textarea::placeholder {
    color: var(--dark-grey);
}

.snippet-form > form > div:not(:last-child) input:focus,
.snippet-form textarea:focus {
    outline: 2px solid var(--accent);
}

.snippet-form > form > div:last-child input {
    width: 100%;
    font-weight: 700;
    background: transparent;
    border-radius: 4px;
    border: 2px solid;
    border-color: var(--grey);
    color: var(--medium-grey);
    padding: 14px 16px;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.snippet-form > form > div:last-child input:hover,
.snippet-form > form > div:last-child input:focus {
    color: var(--secondary);
    border-color: var(--accent);
}

.snippet-form > form > div:last-child input:active {
    color: var(--accent);
}


#contact-form-answer {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

    .snippet-form {
        margin: 40px auto;
        max-width: 420px;
    }

    #contact-form-answer {
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* heading in blocks depens on style-N*/

.heading > * {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    @media screen and  (min-width: 768px) {
        font-size: 1.75rem;
    }
}

body:not([class*="style"]) .heading,
body.style-0 .heading,
body.style-1 .heading,
body.style-2 .heading,
body.style-3 .heading,
body.style-4 .heading,
body.style-5 .heading,
body.style-9 .heading {
    margin-bottom: 16px;
    @media screen and  (min-width: 768px) {
        margin-bottom: 20px;
    }
}

body:not([class*="style"]) .heading > *,
body.style-0 .heading > *,
body.style-1 .heading > *,
body.style-2 .heading > *,
body.style-9 .heading > * {
    position: relative;
    width: fit-content;
}

body:not([class*="style"]) .heading > *:after,
body.style-0 .heading > *:after,
body.style-1 .heading > *:after,
body.style-2 .heading > *:after,
body.style-9 .heading > *:after {
    position: absolute;
    left: 0;
    bottom: 1px;
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    background-color: var(--accent);
    z-index: -1;
    @media screen and (min-width: 768px) {
        height: 7px;
    }
}

body.style-3 .heading > *,
body.style-4 .heading > *,
body.style-5 .heading > * {
    text-align: center;
}

body.style-6 .heading,
body.style-7 .heading,
body.style-8 .heading {
    background-color: var(--dark);
    margin: 0 -3000px 16px -3000px;
    @media screen and  (min-width: 768px) {
        margin-bottom: 20px;
    }
}


body.style-6 .heading > *,
body.style-7 .heading > *,
body.style-8 .heading > * {
    padding: 10px 16px;
    color: white;
    min-width: 288px;
    margin: 0 auto;
    width: 100%;
    @media screen and (min-width: 576px) {
        max-width: 544px;
    }
    @media screen and (min-width: 768px) {
        max-width: 736px;
    }
    @media screen and (min-width: 992px) {
        max-width: 960px;
    }
}


/* blockquotes */

.blockquotes {
    padding: 20px 24px;
    background-color: #F9F9F9;
    border-left: 12px solid;
    border-radius: 8px;
    border-color: blue;
}

.blockquotes > .title {
    font-weight: 600;
    margin-bottom: 10px;
}

.blockquotes > p:not(.title) {
    font-weight: 400;
}

.blockquotes.bg-blue {
    border-color: blue;
}

.blockquotes.bg-red {
    border-color: red;
}

.blockquotes.bg-orange {
    border-color: orange;
}

.blockquotes.bg-yellow {
    border-color: yellow;
}

.blockquotes.bg-green {
    border-color: green;
}

.blockquotes.bg-purple {
    border-color: purple;
}

.blockquotes.bg-pink {
    border-color: pink;
}

.blockquotes.bg-brown {
    border-color: brown;
}

.blockquotes.bg-black {
    border-color: black;
    /*color: white;*/
}

.blockquotes.bg-gray {
    border-color: gray;
    /*color: white;*/
}


/* pros-cons */
.pros-cons:not(table) {
    display: flex;
    flex-direction: column;
}

.pros-cons:not(table) .pros-header,
.pros-cons:not(table) .cons-header {
    font-weight: 600;
    font-size: 1.25rem;
    padding: 16px 16px 0 16px;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--light-grey);
    border-radius: 8px 8px 0 0;
}

.pros-cons:not(table) .pros-list,
.pros-cons:not(table) .cons-list {
    padding: 12px 16px 16px 16px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--light-grey);
    border-radius: 0 0 8px 8px;
    margin-bottom: 16px;
}

.pros-cons:not(table) .pros-list {
    margin-bottom: 16px;
    @media screen and (min-width: 768px) {
        margin-bottom: 20px;
    }
}

.pros-cons:not(table) .pros-list > li:not(:last-child),
.pros-cons:not(table) .cons-list > li:not(:last-child) {
    margin-bottom: 12px;
}

.pros-cons:not(table).design-2,
.pros-cons:not(table).design-3 {
    gap: 16px;
    @media screen and (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    @media screen and (min-width: 992px) {
        gap: 24px;
    }
}

.pros-cons:not(table).design-2 > div,
.pros-cons:not(table).design-3 > div {
    border: 1px solid;
    border-color: var(--light-grey);
    border-radius: 8px;
    @media screen and (min-width: 768px) {
        padding: 20px;
    }
}

.pros-cons:not(table).design-2 > div {
    padding: 12px;
    @media screen and (min-width: 768px) {
        padding: 16px;
    }
    @media screen and (min-width: 768px) {
        padding: 20px;
    }
}

.pros-cons:not(table).design-3 > div {
    padding: 16px;
    @media screen and (min-width: 768px) {
        padding: 20px;
    }
}

.pros-cons:not(table).design-3 .pros {
    box-shadow: 0 0 8px 2px rgba(0, 102, 0, 0.2);
}

.pros-cons:not(table).design-3 .cons {
    box-shadow: 0 0 8px 2px rgba(171, 28, 45, 0.15);
}


.pros-cons:not(table).design-2 .pros > .header,
.pros-cons:not(table).design-2 .cons > .header,
.pros-cons:not(table).design-3 .pros > .header,
.pros-cons:not(table).design-3 .cons > .header {
    display: block;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.pros-cons:not(table).design-2 .pros > .header,
.pros-cons:not(table).design-2 .cons > .header {
    text-align: center;
}

.pros-cons:not(table).design-2 .pros > .header {
    color: #006600;
}

.pros-cons:not(table).design-2 .cons > .header {
    color: #AB1C2D;
}

.pros-cons:not(table) ul {
    list-style: none;
    padding-left: 0;
}

.pros-cons:not(table).design-2 .pros > ul,
.pros-cons:not(table).design-2 .cons > ul,
.pros-cons:not(table).design-3 .pros > ul,
.pros-cons:not(table).design-3 .cons > ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pros-cons:not(table) li {
    padding-left: 28px;
    position: relative;
}

.pros-cons:not(table) li:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pros-cons:not(table) .pros-list > li:before,
.pros-cons:not(table).design-2 .pros > ul > li:before,
.pros-cons:not(table).design-3 .pros > ul > li:before {
    /*content: "\ed6d";*/
    content: "\ed71";
    color: #006600;
}

.pros-cons:not(table) .cons-list > li:before,
.pros-cons:not(table).design-2 .cons > ul > li:before,
.pros-cons:not(table).design-3 .cons > ul > li:before {
    /*content: "\ed71";*/
    content: "\ed6d";
    color: #AB1C2D;
}


/* default person */

.person {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: fit-content;
    flex: 1;
    padding: 20px;
    border: 1px solid;
    border-color: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 40px auto 20px;
    background-color: var(--light-grey);
    @media screen and (min-width: 768px) {
        gap: 32px;
    }
}

.person > p {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: var(--secondary);
}


.person > img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}


@media screen and (min-width: 768px) {
    .person {
        margin-top: 60px;
        margin-bottom: 40px;
        padding: 24px;
    }

    .person > p {
        font-size: 32px;
        margin-bottom: 24px;
    }
}

/*---------- lists -------------*/
ul.bonuses-list,
ul[class*="brands-list-v"] {
    list-style: none !important;
}

ul[class*="design-"],
ol[class*="design-"] {
    list-style: none;
}

ol[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) {
    counter-reset: list-counter;
}

ul[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) > li:not(:last-child),
ol[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) > li:not(:last-child) {
    margin-bottom: 12px;
}

ul[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) > li {
    position: relative;
    font-weight: 400;
}

ul.design-1:not(.bonus-component):not(.brands-item):not(.card) > li {
    padding-left: 30px;
    @media screen and (min-width: 768px) {
        padding-left: 34px;
    }
}

ul.design-2:not(.bonus-component):not(.brands-item):not(.card) > li {
    padding-left: 40px;
    @media screen and (min-width: 768px) {
        padding-left: 24px;
    }
}

ul.design-3:not(.bonus-component):not(.brands-item):not(.card) > li {
    padding-left: 40px;
    @media screen and (min-width: 768px) {
        padding-left: 26px;
    }
}

ol[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) > li {
    position: relative;
    counter-increment: list-counter;
    padding-left: 40px;
    @media screen and (min-width: 768px) {
        padding-left: 44px;
    }
}

ul[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) > li:before {
    content: "●";
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 1px;
}

ul.design-1:not(.bonus-component):not(.brands-item):not(.card) > li:before,
ul.design-3:not(.bonus-component):not(.brands-item):not(.card) > li:before {
    font-size: 1.25rem;
    padding-top: 1px;
}

ul.design-2:not(.bonus-component):not(.brands-item):not(.card) > li:before {
    font-size: 1.1rem;
    padding-top: 2px;
}

ul.design-3:not(.bonus-component):not(.brands-item):not(.card) > li:before {
    color: var(--dark-grey);
}

ol[class*="design-"]:not(.bonus-component):not(.brands-item):not(.card) > li::before {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 100px;
}

ol.design-1:not(.bonus-component):not(.brands-item):not(.card) > li::before {
    content: counter(list-counter) ".";
    font-weight: 600;
}

ol.design-2:not(.bonus-component):not(.brands-item):not(.card) > li::before {
    content: counter(list-counter);
    color: white;
    background-color: var(--dark-grey);
    font-weight: 400;
    font-size: 0.875rem;
}

ol.design-3:not(.bonus-component):not(.brands-item):not(.card) > li::before {
    content: counter(list-counter);
    color: var(--dark-grey);
    border: 1px solid;
    border-color: var(--dark-grey);
    font-weight: 600;
    @media screen and (min-width: 768px) {
        width: 28px;
        height: 28px;
        font-size: 1.25rem;
    }
}

/* FAQ */
.faq .item {
    padding: 16px;
    cursor: pointer;
    position: relative;
    @media screen and (min-width: 768px) {
        padding: 20px;
    }
}

.faq .header {
    position: relative;
    font-weight: 600;
    padding-right: 36px;
    @media screen and (min-width: 768px) {
        font-size: 1.125rem;
        font-weight: 700;
    }
}

.faq .header::before {
    content: "\edb8";
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.3s ease-in-out;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: var(--dark-grey);
    font-size: 20px;
    width: 20px;
    height: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @media screen and (min-width: 768px) {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
}

.faq .content {
    display: flex;
    align-items: flex-end;
    font-size: 0.875rem;
    font-weight: 400;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.3s ease-in-out, opacity .3s ease-in-out 0.1s;
}

.faq .item.show .header::before {
    color: var(--dark);
    transform: rotate(180deg);
}

.faq .item.show .content {
    opacity: 1;
}

.faq:not([class*="design-"]) .item,
.faq.design-1 .item {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.faq.design-1 .item + .item::before {
    content: "";
    position: absolute;
    width: 100%;
    top: -4px;
    left: 0;
    height: 2px;
    background-color: var(--light-grey);
    transition: background-color 0.3s ease-in-out;
}

.faq:not([class*="design-"]) .item.show::before,
.faq.design-1 .item.show::before,
.faq:not([class*="design-"]) .item.show + .item::before,
.faq.design-1 .item.show + .item::before {
    background-color: transparent;
}

.faq:not([class*="design-"]) .item.show,
.faq.design-1 .item.show {
    border: 2px solid;
    border-color: var(--light-grey);
    box-shadow: 0 0 8px 2px rgba(20, 21, 22, 0.1);
    background-color: white;
    z-index: 0;
}

.faq:not([class*="design-"]) .header,
.faq.design-1 .header {
    color: var(--dark-grey);
    transition: color 0.3s ease-in-out;
}

.faq:not([class*="design-"]) .item.show .header,
.faq.design-1 .item.show .header {
    color: var(--dark);
}

.faq.design-2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq.design-2 .item {
    border: 1px solid;
    border-color: var(--dark-grey);
    border-radius: 8px;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.faq.design-2 .item.show {
    border-color: var(--dark);
}


.faq.design-3 .item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color 0.3s ease-in-out;
}

.faq.design-3 .item + .item::before {
    content: "";
    position: absolute;
    width: calc(100% - 32px);
    top: -1px;
    left: 16px;
    height: 1px;
    background-color: var(--dark-grey);
    transition: background-color 0.3s ease-in-out;
    @media screen and (min-width: 768px) {
        width: calc(100% - 40px);
        left: 20px;
    }
}

.faq.design-3 .item.show::before,
.faq.design-3 .item.show + .item::before {
    background-color: transparent;
}


.faq.design-3 .item.show {
    border: 1px solid;
    border-color: var(--dark-grey)
}


/* quick-navigation */

.quick-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0
}

.quick-navigation a {
    position: relative;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
    width: fit-content;
}

.quick-navigation a:hover {
    color: var(--accent);
}

.quick-navigation .header {
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    @media screen and (min-width: 768px) {
        font-size: 1.75rem;
    }
}

.quick-navigation:not([class*="design-"]) .header,
.quick-navigation.design-1 .header {
    position: relative;
    padding: 6px 16px;
    border: 1px solid;
    border-color: var(--grey);
    border-radius: 8px;
}

.quick-navigation.design-2 .header {
    padding: 4px 16px;
    border-bottom: 1px solid;
    border-bottom-color: var(--grey);
    gap: 16px;
}

.quick-navigation.design-3 .header {
    padding: 8px 16px;
    gap: 20px;
    background-color: #F9F9F9;
    border-radius: 8px;
}

.quick-navigation .header > .show-more::before,
.quick-navigation .content > .collapse > .show-less::before {
    display: block;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.quick-navigation .content > .collapse > .show-less::before {
    content: "\edb8";
    /*transform: rotate(180deg);*/
}

.quick-navigation .header > .show-more::before {
    content: "\edc0";
    transition: transform 0.3s ease-in-out;
}


.quick-navigation:not([class*="design-"]) .header .show-more,
.quick-navigation.design-1 .header .show-more,
.quick-navigation:not([class*="design-"]) .content > .collapse > .show-less,
.quick-navigation.design-1 .content > .collapse > .show-less {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.quick-navigation:not([class*="design-"]) .header .show-more::before,
.quick-navigation.design-1 .header .show-more::before,
.quick-navigation:not([class*="design-"]) .content > .collapse > .show-less::before,
.quick-navigation.design-1 .content > .collapse > .show-less::before {
    font-size: 20px;
    width: 20px;
    height: 20px;
    @media screen and (min-width: 768px) {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
}

.quick-navigation.design-2 .header .show-more::before,
.quick-navigation.design-2 .content > .collapse > .show-less::before {
    font-size: 16px;
    width: 16px;
    height: 16px;
    @media screen and (min-width: 768px) {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
}

.quick-navigation.design-3 .header .show-more::before,
.quick-navigation.design-3 .content > .collapse > .show-less::before {
    font-size: 20px;
    width: 20px;
    height: 20px;
    @media screen and (min-width: 768px) {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
}

.quick-navigation .header .show-more::before {
    transform: rotate(0deg);
}

.quick-navigation.active .header .show-more::before {
    transform: rotate(180deg);
}

.quick-navigation .content {
    opacity: 0;
    overflow: hidden;
    min-height: 0;
    height: 0;
    transition: height 0.4s ease-in-out, opacity 0.5s ease-in-out;
}

.quick-navigation.active .content {
    opacity: 1;
}

.quick-navigation:not([class*="design-"]) .content,
.quick-navigation.design-1 .content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
}

.quick-navigation .content > ul {
    display: flex;
    flex-direction: column;
}

.quick-navigation:not([class*="design-"]) .content > ul,
.quick-navigation.design-1 .content > ul {
    padding: 16px;
    border: 1px solid;
    border-color: var(--grey);
    border-radius: 8px;
    gap: 16px;
}

.quick-navigation.design-2 .content > ul {
    padding: 16px 20px;
    gap: 16px;
}

.quick-navigation.design-3 .content > ul {
    padding: 16px;
    gap: 16px;
}

.quick-navigation .content > ul > li,
.quick-navigation .content > ul > li > ul,
.quick-navigation .content > ul > li > ul > li,
.quick-navigation .content > ul > li > ul > li > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-navigation .content > ul > li > a {
    font-weight: 600;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > a,
.quick-navigation.design-1 .content > ul > li > a {
    padding-left: 24px;
}

.quick-navigation.design-2 .content > ul > li > a,
.quick-navigation.design-3 .content > ul > li > a {
    padding-left: 16px;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > ul > li > a,
.quick-navigation.design-1 .content > ul > li > ul > li > a {
    padding-left: 40px;
}

.quick-navigation.design-2 .content > ul > li > ul > li a {
    padding-left: 56px;
}

.quick-navigation.design-3 .content > ul > li > ul > li a {
    padding-left: 24px;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > ul > li > ul > li > a,
.quick-navigation.design-1 .content > ul > li > ul > li > ul > li > a {
    padding-left: 60px;
}

.quick-navigation.design-2 .content > ul > li > ul > li > ul > li > a {
    padding-left: 80px;
}

.quick-navigation.design-3 .content > ul > li > ul > li > ul > li > a {
    padding-left: 32px;
}


.quick-navigation .content > ul > li a::before,
.quick-navigation .content > ul > li > ul > li a::before,
.quick-navigation .content > ul > li > ul > li > ul > li a::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > a::before,
.quick-navigation.design-1 .content > ul > li > a::before {
    content: "\ede0";
    font-size: 16px;
    color: var(--dark-grey);
    transition: color 0.3s ease-in-out;
}

.quick-navigation.design-2 .content > ul > li > a::before {
    content: "\ee78";
    font-size: 8px;
}

.quick-navigation.design-3 .content > ul > li > a::before {
    content: "\ee78";
    font-size: 8px;
    color: var(--dark-grey);
    transition: color 0.3s ease-in-out;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > a:hover::before,
.quick-navigation.design-1 .content > ul > li > a:hover::before,
.quick-navigation.design-3 .content > ul > li > a:hover::before {
    color: var(--accent);
}

.quick-navigation .content > ul > li > ul > li > a::before {
    color: var(--dark-grey);
    transition: color 0.3s ease-in-out;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > ul > li > a::before,
.quick-navigation.design-1 .content > ul > li > ul > li > a::before {
    content: "\ed5e";
    font-size: 16px;
}

.quick-navigation.design-2 .content > ul > li > ul > li > a::before {
    content: "\ed5e";
    font-size: 16px;
    left: 32px;
}

.quick-navigation.design-3 .content > ul > li > ul > li > a::before {
    content: "\ee78";
    font-size: 6px;
}

.quick-navigation .content > ul > li > ul > li > a:hover::before {
    color: var(--accent);
}

.quick-navigation .content > ul > li > ul > li > ul > li > a::before {
    color: var(--dark-grey);
    transition: color 0.3s ease-in-out;
}

.quick-navigation:not([class*="design-"]) .content > ul > li > ul > li > ul > li > a::before,
.quick-navigation.design-1 .content > ul > li > ul > li > ul > li > a::before {
    content: "\ed5e\ed5e";
    font-size: 16px;
    letter-spacing: 2px;
}

.quick-navigation.design-2 .content > ul > li > ul > li > ul > li > a::before {
    content: "\ed5e";
    font-size: 16px;
    left: 56px;
}

.quick-navigation.design-3 .content > ul > li > ul > li > ul > li > a::before {
    content: "\ee78";
    font-size: 4px;
}

.quick-navigation .content > ul > li > ul > li > ul > li > a:hover::before {
    color: var(--accent);
}

.quick-navigation .content > .collapse {
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.quick-navigation:not([class*="design-"]) .content > .collapse,
.quick-navigation.design-1 .content > .collapse {
    position: relative;
    padding: 6px 36px;
    border: 1px solid;
    border-color: var(--grey);
    border-radius: 8px;
}

.quick-navigation.design-2 .content > .collapse {
    font-size: 1.25rem;
    padding: 4px 16px;
    border-bottom: 1px solid;
    border-bottom-color: var(--grey);
    gap: 16px;
}

.quick-navigation.design-3 .content > .collapse {
    font-size: 1.25rem;
    padding: 8px 16px;
    background-color: #F9F9F9;
    gap: 20px;
    border-radius: 8px;
}

@media screen and (min-width: 768px) {
    .quick-navigation .content > .collapse {
        font-weight: 700;
        line-height: 1.2;
        font-size: 1.75rem
    }
}

.quick-navigation .header:hover,
.quick-navigation .content > .collapse:hover {
    color: var(--secondary);
    border-color: var(--accent);
}

.quick-navigation.design-3 .header:hover,
.quick-navigation.design-3 .content > .collapse:hover {
    background-color: #f5f5f5;
}

/* to make group on page (review from old versions comes) */
#content .review {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#content .group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    box-shadow: 0 0px 20px 4px var(--wrapper-shadow-color);
    border-radius: 8px;
}

#content .group-1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, 0 0 3px 0 var(--wrapper-shadow-color);
    border-radius: 12px;
}

#content .group-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border-radius: 12px;
}

#content .group-3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 15px 30px;
    border-radius: 8px;
}


/* tables */
[class^="table"] {
    width: auto;
    overflow-x: auto;
    position: relative;
    padding-top: 1px;
    padding-bottom: 1px;
}

[class^="table"] a {
    text-decoration: none;
}

[class^="table"] ul.list-style-none,
[class^="table"] ol.list-style-none {
    list-style: none;
}

[class^="table"] a:hover,
[class^="table"] a:focus {
    text-decoration: underline;
}

[class^="table"] > table:not([class*="pros-cons"]) {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: auto;
}

[class^="table"].no-fluid,
[class^="table"].equal-cols {
    overflow-x: hidden;
}

[class^="table"].equal-cols table:not([class*="pros-cons"]) {
    table-layout: fixed;
    max-width: none;
    width: auto;
}

[class^="table"] > table:not([class*="pros-cons"]) > thead {
    background-color: transparent;
}

[class^="table"] > table:not([class*="pros-cons"]) > thead th {
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 700;
    background-color: var(--light-grey);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #ABABAB;
    border-right: 1px solid #ABABAB;
    border-top: 1px solid;
    border-top-color: var(--light-grey);
    min-width: 40px;
    vertical-align: top;
}

[class^="table"] > table:not([class*="pros-cons"]) > tbody td,
[class^="table"] > table:not([class*="pros-cons"]) > tbody th {
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 400;
    background-color: transparent;
    padding: 10px 12px;
    border-bottom: 1px solid;
    border-right: 1px solid;
    border-color: var(--light-grey);
    min-width: 40px;
    vertical-align: top;
}

[class^="table"] > table:not([class*="pros-cons"]) > :first-child > tr:first-child > th,
[class^="table"] > table:not([class*="pros-cons"]) > :first-child > tr:first-child > td {
    border-top: 1px solid;
    border-top-color: var(--light-grey);
}

[class^="table"] > table:not([class*="pros-cons"]) > thead th:first-child,
[class^="table"] > table:not([class*="pros-cons"]) > tbody td:first-child,
[class^="table"] > table:not([class*="pros-cons"]) > tbody th:first-child {
    border-left: 1px solid;
    border-left-color: var(--light-grey);
}

[class^="table"] > table:not([class*="pros-cons"]) > tbody td:last-child,
[class^="table"] > table:not([class*="pros-cons"]) > tbody th:last-child,
[class^="table"] > table:not([class*="pros-cons"]) > thead th:last-child {
    border-right-color: var(--light-grey);
}

[class^="table"] > table:not([class*="pros-cons"]) > :first-child > tr:first-child > th:first-child,
[class^="table"] > table:not([class*="pros-cons"]) > :first-child > tr:first-child > td:first-child {
    border-top-left-radius: 4px;
}

[class^="table"] > table:not([class*="pros-cons"]) > :first-child > tr:first-child > th:last-child,
[class^="table"] > table:not([class*="pros-cons"]) > :first-child > tr:first-child > td:last-child {
    border-top-right-radius: 4px;
}

[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:last-child th:first-child,
[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:last-child th:last-child,
[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

[class^="table"].thead-bg-white table:not([class*="pros-cons"]) thead th {
    background-color: white;
}

[class^="table"].thead-bg-dark-blue table:not([class*="pros-cons"]) thead th {
    background-color: #00185F;
    color: white;
}

.cell-bg-dark-blue {
    background-color: #00185F !important;
    color: white !important;
}

[class^="table"].thead-bg-black table:not([class*="pros-cons"]) thead th {
    background-color: var(--dark);
    color: white;
}

.cell-bg-black {
    background-color: var(--dark) !important;
    color: white !important;
}

[class^="table"].thead-bg-grey table:not([class*="pros-cons"]) thead th {
    background-color: #ABABAB;
}

.cell-bg-grey {
    background-color: #ABABAB !important;
}

[class^="table"].thead-bg-dark-grey table:not([class*="pros-cons"]) thead th {
    background-color: var(--dark-grey);
    color: white;
}

.cell-bg-dark-grey {
    background-color: var(--dark-grey) !important;
    color: white !important;
}

[class^="table"].thead-bg-blue table:not([class*="pros-cons"]) thead th {
    background-color: #002CEE;
    color: white;
}

.cell-bg-blue {
    background-color: #002CEE !important;
    color: white !important;
}

[class^="table"].thead-bg-green table:not([class*="pros-cons"]) thead th {
    background-color: #006600;
    color: white;
}

.cell-bg-green {
    background-color: #006600 !important;
    color: white !important;
}


[class^="table"].thead-bg-dark-green table:not([class*="pros-cons"]) thead th {
    background-color: #173117;
    color: white;
}

.cell-bg-dark-green {
    background-color: #173117 !important;
    color: white !important;
}

[class^="table"].thead-bg-yellow table:not([class*="pros-cons"]) thead th {
    background-color: #DAA807;
}

.cell-bg-yellow {
    background-color: #DAA807 !important;
}


[class^="table"].thead-bg-orange table:not([class*="pros-cons"]) thead th {
    background-color: #F75B23;
    color: white;
}

.cell-bg-orange {
    background-color: #F75B23 !important;
    color: white !important;
}

[class^="table"].thead-bg-blue-grey table:not([class*="pros-cons"]) thead th {
    background-color: #6a7387;
    color: white;
}

.cell-bg-blue-grey {
    background-color: #6a7387 !important;
    color: white !important;
}

[class^="table"].striped-rows table:not([class*="pros-cons"]) tbody tr:nth-child(even) {
    background-color: var(--light);
}

[class^="table"].align-center table:not([class*="pros-cons"]) th,
[class^="table"].align-center table:not([class*="pros-cons"]) td {
    text-align: center;
}

[class^="table"].align-right table:not([class*="pros-cons"]) th,
[class^="table"].align-right table:not([class*="pros-cons"]) td {
    text-align: right;
}

[class^="table"].spacing-compact table:not([class*="pros-cons"]) th,
[class^="table"].spacing-compact table:not([class*="pros-cons"]) td {
    padding: 1px;
}

[class^="table"].content-compact table:not([class*="pros-cons"]) th,
[class^="table"].content-compact table:not([class*="pros-cons"]) td {
    line-height: 1;
    letter-spacing: 0;
}

[class^="table"].compact table:not([class*="pros-cons"]) th,
[class^="table"].compact table:not([class*="pros-cons"]) td {
    padding: 1px;
    line-height: 1;
    letter-spacing: 0;
}


/* TABLE BORDER COLOR */
[class^="table"].borders-black table:not([class*="pros-cons"]) th,
[class^="table"].borders-black table:not([class*="pros-cons"]) td,
[class^="table"].borders-0 table:not([class*="pros-cons"]) th,
[class^="table"].borders-0 table:not([class*="pros-cons"]) td {
    border-color: black !important;
}

[class^="table"].borders-orange table:not([class*="pros-cons"]) th,
[class^="table"].borders-orange table:not([class*="pros-cons"]) td,
[class^="table"].borders-1 table:not([class*="pros-cons"]) th,
[class^="table"].borders-1 table:not([class*="pros-cons"]) td {
    border-color: orange !important;
}

[class^="table"].borders-blue table:not([class*="pros-cons"]) th,
[class^="table"].borders-blue table:not([class*="pros-cons"]) td,
[class^="table"].borders-2 table:not([class*="pros-cons"]) th,
[class^="table"].borders-2 table:not([class*="pros-cons"]) td {
    border-color: blue !important;
}

[class^="table"].borders-green table:not([class*="pros-cons"]) th,
[class^="table"].borders-green table:not([class*="pros-cons"]) td,
[class^="table"].borders-3 table:not([class*="pros-cons"]) th,
[class^="table"].borders-3 table:not([class*="pros-cons"]) td {
    border-color: #4B7F4B !important;
}

[class^="table"].borders-light-green table:not([class*="pros-cons"]) th,
[class^="table"].borders-light-green table:not([class*="pros-cons"]) td,
[class^="table"].borders-light-4 table:not([class*="pros-cons"]) th,
[class^="table"].borders-light-4 table:not([class*="pros-cons"]) td {
    border-color: #51B6AA !important;
}

[class^="table"].borders-purple table:not([class*="pros-cons"]) th,
[class^="table"].borders-purple table:not([class*="pros-cons"]) td,
[class^="table"].borders-5 table:not([class*="pros-cons"]) th,
[class^="table"].borders-5 table:not([class*="pros-cons"]) td {
    border-color: #8E58BB !important;
}

[class^="table"].borders-yellow table:not([class*="pros-cons"]) th,
[class^="table"].borders-yellow table:not([class*="pros-cons"]) td,
[class^="table"].borders-6 table:not([class*="pros-cons"]) th,
[class^="table"].borders-6 table:not([class*="pros-cons"]) td {
    border-color: #D6C693 !important;
}

[class^="table"].borders-blue-grey table:not([class*="pros-cons"]) th,
[class^="table"].borders-blue-grey table:not([class*="pros-cons"]) td,
[class^="table"].borders-7 table:not([class*="pros-cons"]) th,
[class^="table"].borders-7 table:not([class*="pros-cons"]) td {
    border-color: #6a7387 !important;
}

[class^="table"].borders-dark-blue table:not([class*="pros-cons"]) th,
[class^="table"].borders-dark-blue table:not([class*="pros-cons"]) td,
[class^="table"].borders-8 table:not([class*="pros-cons"]) th,
[class^="table"].borders-8 table:not([class*="pros-cons"]) td {
    border-color: #1d408e !important;
}

[class^="table"].borders-dark-orange table:not([class*="pros-cons"]) th,
[class^="table"].borders-dark-orange table:not([class*="pros-cons"]) td,
[class^="table"].borders-9 table:not([class*="pros-cons"]) th,
[class^="table"].borders-9 table:not([class*="pros-cons"]) td {
    border-color: #995903 !important;
}


/* TABLE NO EXTERNAL BORDER */
[class^="table"].no-external-borders table:not([class*="pros-cons"]) thead th,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) > :first-child > tr:first-child > th,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) > :first-child > tr:first-child > td {
    border-top: none !important;
}

[class^="table"].no-external-borders table:not([class*="pros-cons"]) thead th:first-child,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) tbody th:first-child,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) tbody td:first-child {
    border-left: none !important;
}

[class^="table"].no-external-borders table:not([class*="pros-cons"]) thead th:last-child,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) tbody th:last-child,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) tbody td:last-child {
    border-right: none !important;
}

[class^="table"].no-external-borders table:not([class*="pros-cons"]) tbody tr:last-child th,
[class^="table"].no-external-borders table:not([class*="pros-cons"]) tbody tr:last-child td {
    border-bottom: none !important;
}

/* TABLE NO INTERNAL BORDER */
[class^="table"].no-internal-borders table:not([class*="pros-cons"]) thead th:not(:last-child),
[class^="table"].no-internal-borders table:not([class*="pros-cons"]) tbody th:not(:last-child),
[class^="table"].no-internal-borders table:not([class*="pros-cons"]) tbody td:not(:last-child) {
    border-right: none !important;
}

[class^="table"].no-internal-borders table:not([class*="pros-cons"]) thead th,
[class^="table"].no-internal-borders table:not([class*="pros-cons"]) tbody tr:not(:last-child) th,
[class^="table"].no-internal-borders table:not([class*="pros-cons"]) tbody tr:not(:last-child) td {
    border-bottom: none !important;
}

/* TABLE NO HORIZONTAL BORDER */
[class^="table"].no-horizontal-borders table:not([class*="pros-cons"]) th,
[class^="table"].no-horizontal-borders table:not([class*="pros-cons"]) tbody tr:not(:last-child) th,
[class^="table"].no-horizontal-borders table:not([class*="pros-cons"]) tbody tr:not(:last-child) td {
    border-bottom: none !important;
}


/* TABLE NO VERTICAL BORDER */
[class^="table"].no-vertical-borders table:not([class*="pros-cons"]) th:not(:last-child),
[class^="table"].no-vertical-borders table:not([class*="pros-cons"]) td:not(:last-child) {
    border-right: none !important;
}

/* TABLE THEAD NO BORDER (Only Bottom-Border HAS)*/
[class^="table"].no-thead-borders table:not([class*="pros-cons"]) thead th:not(:last-child) {
    border-right-color: transparent !important;
}

/* TABLE EXTERNAL BORDER BOLD */
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) thead th:first-child,
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) tbody th:first-child,
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) tbody td:first-child {
    border-left-width: 2px;
}

[class^="table"].borders-external-fat table:not([class*="pros-cons"]) thead th:last-child,
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) tbody th:last-child,
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) tbody td:last-child {
    border-right-width: 2px;
}

[class^="table"].borders-external-fat table:not([class*="pros-cons"]) table > :first-child > tr:first-child > th,
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) table > :first-child > tr:first-child > td {
    border-top-width: 2px;
}

[class^="table"].borders-external-fat table:not([class*="pros-cons"]) tbody tr:last-child th,
[class^="table"].borders-external-fat table:not([class*="pros-cons"]) tbody tr:last-child td {
    border-bottom-width: 2px;
}

/* TABLE BORDER BOLD */
[class^="table"].borders-fat table:not([class*="pros-cons"]) th,
[class^="table"].borders-fat table:not([class*="pros-cons"]) td {
    border-width: 2px !important;
}

/* TABLE HOVER */
[class^="table"] > table:not([class*="pros-cons"]) > tbody th,
[class^="table"] > table:not([class*="pros-cons"]) > tbody td,
[class^="table"] > table:not([class*="pros-cons"]) > tbody tr {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:hover,
[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:hover td,
[class^="table"] > table:not([class*="pros-cons"]) > tbody tr:hover th {
    background-color: #DEDEDE !important;
    color: var(--dark) !important;
}

[class^="table"].max-height-200 {
    max-height: 200px;
    overflow-y: auto;
}

[class^="table"].max-height-400 {
    max-height: 400px;
    overflow-y: auto;
}

[class^="table"].max-height-600 {
    max-height: 600px;
    overflow-y: auto;
}

[class^="table"].max-height-800 {
    max-height: 800px;
    overflow-y: auto;
}

[class^="table"].max-height-1000 {
    max-height: 1000px;
    overflow-y: auto;
}

[class^="table"].max-height-1200 {
    max-height: 1200px;
    overflow-y: auto;
}

[class^="table"].max-height-1800 {
    max-height: 1800px;
    overflow-y: auto;
}

[class^="table"].max-height-2000 {
    max-height: 2000px;
    overflow-y: auto;
}

[class^="table"].max-height-2400 {
    max-height: 2400px;
    overflow-y: auto;
}

[class^="table"].max-height-2800 {
    max-height: 2800px;
    overflow-y: auto;
}


/*-----------Table PROS-CONS----------*/

table.pros-cons {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

table.pros-cons tbody {
    display: table-row-group !important;
}

table.pros-cons tr {
    display: table-row !important;
}

table.pros-cons th,
table.pros-cons td {
    padding: 0.75rem 1rem;
    vertical-align: top;
    border: 1px solid;
    border-color: var(--light-grey);
    word-break: break-word;
}

table.pros-cons thead th {
    text-align: left;
    font-weight: bold;
    background-color: var(--light-grey);
}

table.pros-cons thead th:first-child {
    border-top-left-radius: 4px;
}

table.pros-cons tbody tr:last-child th:first-child,
table.pros-cons tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

table.pros-cons thead th:last-child {
    border-top-right-radius: 4px;
}

table.pros-cons tbody tr:last-child th:last-child,
table.pros-cons tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

table.pros-cons th:not(:last-child),
table.pros-cons td:not(:last-child) {
    border-right: none;
}

table.pros-cons tbody th,
table.pros-cons tbody td {
    border-top: none;
}

table.pros-cons:not([class*="design-"]) thead th:first-child,
table.pros-cons.design-1 thead th:first-child {
    background-color: #4b9440;
    color: white;
}

table.pros-cons:not([class*="design-"]) thead th:last-child,
table.pros-cons.design-1 thead th:last-child {
    background-color: #a41e2b;
    color: white;
    border-left: none;
}

table.pros-cons.design-2 thead th:first-child {
    color: #2e7d32;
    border-bottom-color: #a6aeb7;
}

table.pros-cons.design-2 thead th:last-child {
    color: #c62828;
    border-left-color: #a6aeb7;
    border-bottom-color: #a6aeb7;
}

table.pros-cons.design-2 tbody td:first-child::before {
    color: #2e7d32;
    content: '✔';
    font-weight: 700;
    margin-right: 8px;
}

table.pros-cons.design-2 tbody td:last-child::before {
    content: '✘';
    color: #c62828;
    margin-right: 8px;
}


table.pros-cons.design-3 thead th:first-child {
    border-bottom-color: #a6aeb7;
}

table.pros-cons.design-3 thead th:last-child {
    border-left-color: #a6aeb7;
    border-bottom-color: #a6aeb7;
}

table.pros-cons.design-3 tbody th:first-child,
table.pros-cons.design-3 tbody td:first-child {
    border-bottom-color: rgba(46, 125, 50, 0.5);
}

table.pros-cons.design-3 tbody th:last-child,
table.pros-cons.design-3 tbody td:last-child {
    border-bottom-color: rgba(198, 40, 40, 0.5);
}

table.pros-cons.design-3 tbody th:last-child,
table.pros-cons.design-3 tbody td:last-child {
    border-left-color: #a6aeb7;
}


table.pros-cons.design-3 tbody td:first-child::before {
    content: '✓';
    font-weight: 700;
    color: #2e7d32;
    margin-right: 8px;
}

table.pros-cons.design-3 tbody td:last-child::before {
    content: '✖';
    color: #c62828;
    margin-right: 8px;
}

/*------- content images------ */

#content .content-img {
    object-fit: contain;
    border-radius: 12px;
    overflow: hidden;
}

/*-------------badge-----------*/
.badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #FFFFFF;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #232323;
    background-color: #004EC3;
    width: fit-content;
    line-height: 1.4;
}

.badge.design-2 {
    padding: 3px 10px;
    border-radius: 16px;
    border-color: #FFFFFF;
}

.badge .icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 1;
}

.badge .icon.size-16 {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.badge .icon.size-24 {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.badge .icon.size-32 {
    width: 32px;
    height: 32px;
    font-size: 32px;
}

.badge .icon.size-48 {
    width: 48px;
    height: 48px;
    font-size: 48px;
}

.badge .icon.size-64 {
    width: 64px;
    height: 64px;
    font-size: 64px;
}


.badge .icon:before {
    font-size: 12px;
    padding: 0;
}

.badge .icon.size-16:before {
    font-size: 16px;
}


.badge .icon.size-24:before {
    font-size: 24px;
}


.badge .icon.size-32:before {
    font-size: 32px;
}

.badge .icon.size-48:before {
    font-size: 48px;
}

.badge .icon.size-64:before {
    font-size: 64px;
}

.badge .text {
    font-weight: 400;
    font-size: 0.625rem;
    line-height: 1.4;
    text-transform: uppercase;
}

.badge.green-grass {
    background: #006618;
}

.badge.green-dark {
    background: #0D4E1D;
}

.badge.green-emerald {
    background: #006D54;
}

.badge.sea-wave {
    background: #005D66;
}

.badge.red-raspberry {
    background: #A80953;
}

.badge.red-rasp-dark {
    background: #750338;
}

.badge.red-rasp-rotten {
    background: #5C1738;
}

.badge.purple-bright {
    background: #530079;
}

.badge.purple-dark {
    background: #35004D;
}

.badge.purple-eggplant {
    background: #570059;
}

.badge.yellow-sun {
    background: #F1C40F;
    color: #232323;
}

.badge.yellow-corn {
    background: #FFC300;
    color: #232323;
}

.badge.yellow-lemon {
    background: #FFE500;
    color: #232323;
}

.badge.yellow-light {
    background: #FFE26F;
    color: #232323;
}

.badge.yellow-neon {
    background: #FFFC41;
    color: #232323;
}


.badge.lightblue-sky {
    background: #93C2FF;
    color: #232323;
}

.badge.lightblue-electric {
    background: #93E0FF;
    color: #232323;
}

.badge.lightgreen-mint {
    background: #7AD5C0;
    color: #232323;
}

.badge.lightgreen-bright {
    background: #91F9E1;
    color: #232323;
}

.badge.lightgreen-pale {
    background: #D2FFF5;
    color: #232323;
}

.badge.lightgreen-pistachio {
    background: #9ADFC2;
    color: #232323;
}

.badge.red {
    background: #A92323;
}

.badge.orange-tangerine {
    background: #FF9333;
    color: #232323;
}

.badge.orange-light {
    background: #FFAC62;
    color: #232323;
}

.badge.orange-carrot {
    background: #FF7D21;
    color: #232323;
}

.badge.orange-calm {
    background: #F29646;
    color: #232323;
}

.badge.blue-royal {
    background: #004EC3;
}

.badge.blue-indigo {
    background: #003585;
}

.badge.blue-electric {
    background: #0018B2;
}

/*--------badges FOR TEST--------*/

.badges-block {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 250px 250px;
    gap: 40px;
    padding: 40px;
    background-color: gray;
}

.badges-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/*-------------more brands--------------*/

.more-brands {
    display: flex !important;
    justify-content: center;
}
tr.more-brands > td {
    width: 100%;
}

.more-brands:after,
.more-brands:before {
    display: none!important;
}

.more-brands .button {
    margin: 20px auto 40px;
    width: 100%;
    max-width: 500px;
    display: flex;
}.buttons--test {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.buttons--test > div > p {
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: gray;
}

.buttons--test > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    @media screen and (min-width: 992px) {
        display: grid;
        gap: 12px;
        grid-template-columns: 400px 1fr 1fr;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.25;
    cursor: pointer;
    border: none;
    min-height: 48px;
    height: 48px;
    width: fit-content;
    min-width: 188px;
    text-align: center;
}

a.button {
    text-decoration: none;
    vertical-align: middle;
    transition: none;
}

.button:not([class*="design-"]),
.button.design-1 {
    font-weight: 400;
    border-radius: 4px;
    padding: 0 24px;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: border-color .3s ease-in-out, background .3s ease-in-out, box-shadow .15s ease-in-out;
}

.button.design-2,
.button.design-0 {
    position: relative;
    /*white-space: nowrap;*/
    min-width: 204px;
    font-weight: 700;
    border-radius: 30px;
    padding: 0 42px 0 18px;
    text-transform: uppercase;
}

.button.design-2::after,
.button.design-6::after,
.button.design-0::after {
    font-family: 'icomoon';
    color: #FFFFFF;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 20px;
    width: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.button.design-2::after,
.button.design-0::after {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    content: "\edee";
}

.button.design-2.blue-light::after,
.button.design-2.color-5::after,
.button.design-2.green-light::after,
.button.design-2.color-6::after,
.button.design-2.yellow::after,
.button.design-2.color-7::after,
.button.design-2.orange::after,
.button.design-2.color-8::after,
.button.design-2.pink::after,
.button.design-2.color-9::after {
    color: #232323;
}

.button.design-3 {
    font-weight: 700;
    border-radius: 4px;
    padding: 0 24px;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: border-color .3s ease-in-out, background .3s ease-in-out;
}

.button.design-4 {
    font-weight: 700;
    border-radius: 4px;
    padding: 0 24px;
    text-transform: uppercase;
    transition: background .3s ease-in-out;
    position: relative;
    z-index: 1;
}

.button.design-5 {
    font-weight: 600;
    border-radius: 8px;
    padding: 0 24px;
    text-transform: uppercase;
}

.button.design-6 {
    /*white-space: nowrap;*/
    min-width: 204px;
    font-weight: 500;
    border-radius: 30px;
    padding: 0 16px;
    text-transform: uppercase;
    transition: background .3s ease-in-out, box-shadow .3s ease-in-out;
}

.button.design-6::after {
    content: "\edde";
}

.button.design-6.blue-light::after,
.button.design-6.color-5::after,
.button.design-6.green-light::after,
.button.design-6.color-6::after,
.button.design-6.yellow::after,
.button.design-6.color-7::after,
.button.design-6.orange::after,
.button.design-6.color-8::after,
.button.design-6.pink::after,
.button.design-6.color-9::after {
    color: #232323;
}

.button.design-7 {
    border-radius: 30px;
    padding: 0 24px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid #004EC3;
    transition: border-color .3s ease-in-out, background .3s ease-in-out, color .3s ease-in-out;
    background: white;
}

.button.design-8 {
    border-radius: 4px;
    padding: 0 24px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid #004EC3;
    background: white;
    transition: border-color .3s ease-in-out, background .3s ease-in-out, color .3s ease-in-out;
}

.button.design-9 {
    position: relative;
    border-radius: 5px;
    padding: 0 24px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1;
}

.button.design-9:not(:disabled)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    z-index: -1;
    transition: background 0.3s ease-in-out;
    background: var(--card-btn-border-gradient-first-color);
}

.button.design-9:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 4px;
    z-index: -1;
    transition: background 0.3s ease-in-out;
}

.button.design-0.blue-light::after,
.button.design-0.color-5::after,
.button.design-0.green-light::after,
.button.design-0.color-6::after,
.button.design-0.yellow::after,
.button.design-0.color-7::after,
.button.design-0.orange::after,
.button.design-0.color-8::after,
.button.design-0.pink::after,
.button.design-0.color-9::after {
    color: #232323;
}

.button {
    color: #FFFFFF;
    background: #004EC3;
}

.button.color-0,
.button.blue {
    color: #FFFFFF;
    background: #004EC3;
}

.button.color-1,
.button.green {
    color: #FFFFFF;
    background: #006618;
}

.button.color-2,
.button.dark-red {
    color: #FFFFFF;
    background: #A92323;
}

.button.color-3,
.button.dark-purple {
    color: #FFFFFF;
    background: #530079;
}

.button.color-4,
.button.raspberry-red {
    color: #FFFFFF;
    background: #A80953;
}

.button.color-5,
.button.blue-light {
    color: #232323;
    background: #93C2FF;
}

.button.color-6,
.button.green-light {
    color: #232323;
    background: #7AD5C0;
}

.button.color-7,
.button.yellow {
    color: #232323;
    background: #F1C40F;
}

.button.color-8,
.button.orange {
    color: #232323;
    background: #FF9333;
}

.button.color-9,
.button.pink {
    color: #232323;
    background: #DA92F2;
}

.button.design-3,
.button.design-1,
.button:not([class*="design-"]) {
    border-color: #143971;
}

.button.design-3.blue,
.button.design-1.blue,
.button:not([class*="design-"]).blue,
.button.design-3.color-0,
.button.design-1.color-0,
.button:not([class*="design-"]).color-0 {
    border-color: #143971;
}

.button.design-3.green,
.button.design-1.green,
.button:not([class*="design-"]).green,
.button.design-3.color-1,
.button.design-1.color-1,
.button:not([class*="design-"]).color-1 {
    border-color: #006618;
}

.button.design-3.dark-red,
.button.design-1.dark-red,
.button.design-3.color-2,
.button.design-1.color-2,
.button:not([class*="design-"]).green,
.button:not([class*="design-"]).color-1 {
    border-color: #650000;
}

.button.design-3.dark-purple,
.button.design-1.dark-purple,
.button:not([class*="design-"]).dark-purple,
.button.design-3.color-3,
.button.design-1.color-3,
.button:not([class*="design-"]).color-3 {
    border-color: #12001A;
}

.button.design-3.raspberry-red,
.button.design-1.raspberry-red,
.button:not([class*="design-"]).raspberry-red,
.button.design-3.color-4,
.button.design-1.color-4,
.button:not([class*="design-"]).color-4 {
    border-color: #650000;
}

.button.design-3.blue-light,
.button.design-1.blue-light,
.button:not([class*="design-"]).blue-light,
.button.design-3.color-5,
.button.design-1.color-5,
.button:not([class*="design-"]).color-5 {
    border-color: #37537E;
}

.button.design-3.green-light,
.button.design-1.green-light,
.button:not([class*="design-"]).green-light,
.button.design-3.color-6,
.button.design-1.color-6,
.button:not([class*="design-"]).color-6 {
    border-color: #60998C;
}

.button.design-3.yellow,
.button.design-1.yellow,
.button:not([class*="design-"]).yellow,
.button.design-3.color-7,
.button.design-1.color-7,
.button:not([class*="design-"]).color-7 {
    border-color: #A88600;
}

.button.design-3.orange,
.button.design-1.orange,
.button:not([class*="design-"]).orange,
.button.design-3.color-8,
.button.design-1.color-8,
.button:not([class*="design-"]).color-8 {
    border-color: #A44D00;
}

.button.design-3.pink,
.button.design-1.pink,
.button:not([class*="design-"]).pink,
.button.design-3.color-9,
.button.design-1.color-9,
.button:not([class*="design-"]).color-9 {
    border-color: #9A45B6;
}

.button.design-5 {
    background: linear-gradient(90deg, #004EC3 0%, #082B5E 100%);
}

.button.design-5.blue,
.button.design-5.color-0 {
    background: linear-gradient(90deg, #004EC3 0%, #082B5E 100%);
}

.button.design-5.green,
.button.design-5.color-1 {
    background: linear-gradient(90deg, #006618 0%, #001E07 100%);
}

.button.design-5.dark-red,
.button.design-5.color-2 {
    background: linear-gradient(90deg, #A92323 0%, #350000 100%);
}

.button.design-5.dark-purple,
.button.design-5.color-3 {
    background: linear-gradient(90deg, #530079 0%, #12001A 100%);
}

.button.design-5.raspberry-red,
.button.design-5.color-4 {
    background: linear-gradient(90deg, #A80953 0%, #350000 100%);
}

.button.design-5.blue-light,
.button.design-5.color-5 {
    background: linear-gradient(90deg, #BCD9FF 0%, #659DF1 100%);
}

.button.design-5.green-light,
.button.design-5.color-6 {
    background: linear-gradient(90deg, #CAF7EC 0%, #00B087 100%);
}

.button.design-5.yellow,
.button.design-5.color-7 {
    background: linear-gradient(90deg, #FFF3C3 0%, #F1C40F 100%);
}

.button.design-5.orange,
.button.design-5.color-8 {
    background: linear-gradient(90deg, #FFD7B3 0%, #FF9333 100%);
}

.button.design-5.pink,
.button.design-5.color-9 {
    background: linear-gradient(90deg, #F5D7FF 0%, #DA92F2 100%);
}

.button.design-7,
.button.design-8 {
    color: #004EC3;
    background: #FFFFFF;
    border-color: #004EC3;
}

.button.color-0.design-7,
.button.blue.design-7,
.button.color-0.design-8,
.button.blue.design-8 {
    color: #004EC3;
    background: #FFFFFF;
    border-color: #004EC3;
}

.button.color-1.design-7,
.button.green.design-7,
.button.color-1.design-8,
.button.green.design-8 {
    color: #006618;
    background: #FFFFFF;
    border-color: #006618;
}

.button.color-2.design-7,
.button.dark-red.design-7,
.button.color-2.design-8,
.button.dark-red.design-8 {
    color: #A92323;
    background: #FFFFFF;
    border-color: #A92323;
}

.button.color-3.design-7,
.button.dark-purple.design-7,
.button.color-3.design-8,
.button.dark-purple.design-8 {
    color: #530079;
    background: #FFFFFF;
    border-color: #530079;
}

.button.color-4.design-7,
.button.raspberry-red.design-7,
.button.color-4.design-8,
.button.raspberry-red.design-8 {
    color: #A80953;
    background: #FFFFFF;
    border-color: #A80953;
}

.button.color-5.design-7,
.button.blue-light.design-7,
.button.color-5.design-8,
.button.blue-light.design-8 {
    color: #232323;
    background: #FFFFFF;
    border-color: #93C2FF;
}

.button.color-6.design-7,
.button.green-light.design-7,
.button.color-6.design-8,
.button.green-light.design-8 {
    color: #232323;
    background: #FFFFFF;
    border-color: #7AD5C0;
}

.button.color-7.design-7,
.button.yellow.design-7,
.button.color-7.design-8,
.button.yellow.design-8 {
    color: #232323;
    background: #FFFFFF;
    border-color: #F1C40F;
}

.button.color-8.design-7,
.button.orange.design-7,
.button.color-8.design-8,
.button.orange.design-8 {
    color: #232323;
    background: #FFFFFF;
    border-color: #FF9333;
}

.button.color-9.design-7,
.button.pink.design-7,
.button.color-9.design-8,
.button.pink.design-8 {
    color: #232323;
    background: #FFFFFF;
    border-color: #DA92F2;
}

.button.design-9:not(:active):not(:disabled)::after {
    background: #004EC3;
}

.button.green.design-9:not(:active):not(:disabled)::after,
.button.color-1.design-9:not(:active):not(:disabled)::after {
    background: #006618;
}

.button.dark-red.design-9:not(:active):not(:disabled)::after,
.button.color-2.design-9:not(:active):not(:disabled)::after {
    background: #A92323;
}

.button.dark-purple.design-9:not(:active):not(:disabled)::after,
.button.color-3.design-9:not(:active):not(:disabled)::after {
    background: #530079;
}

.button.raspberry-red.design-9:not(:active):not(:disabled)::after,
.button.color-4.design-9:not(:active):not(:disabled)::after {
    background: #A80953;
}

.button.blue-light.design-9:not(:active):not(:disabled)::after,
.button.color-5.design-9:not(:active):not(:disabled)::after {
    background: #93C2FF;
}

.button.green-light.design-9:not(:active):not(:disabled)::after,
.button.color-6.design-9:not(:active):not(:disabled)::after {
    background: #7AD5C0;
}

.button.yellow.design-9:not(:active):not(:disabled)::after,
.button.color-7.design-9:not(:active):not(:disabled)::after {
    background: #F1C40F;
}

.button.orange.design-9:not(:active):not(:disabled)::after,
.button.color-8.design-9:not(:active):not(:disabled)::after {
    background: #FF9333;
}

.button.pink.design-9:not(:active):not(:disabled)::after,
.button.color-9.design-9:not(:active):not(:disabled)::after {
    background: #DA92F2;
}

.button.design-0:not(:disabled) {
    background: linear-gradient(90deg, #004EC3 0%, #8254D8 100%);
}

.button.design-0.green:not(:disabled),
.button.design-0.color-1:not(:disabled) {
    background: linear-gradient(90deg, #006618 0%, #759500 100%);
}

.button.design-0.dark-red:not(:disabled),
.button.design-0.color-2:not(:disabled) {
    background: linear-gradient(90deg, #A92323 0%, #6223A9 100%);
}

.button.design-0.dark-purple:not(:disabled),
.button.design-0.color-3:not(:disabled) {
    background: linear-gradient(90deg, #530079 0%, #790000 100%);
}

.button.design-0.raspberry-red:not(:disabled),
.button.design-0.color-4:not(:disabled) {
    background: linear-gradient(90deg, #A80953 0%, #6223A9 100%);
}

.button.design-0.blue-light:not(:disabled),
.button.design-0.color-5:not(:disabled) {
    background: linear-gradient(90deg, #93B7FF 0%, #C3A3FF 100%);
}

.button.design-0.green-light:not(:disabled),
.button.design-0.color-6:not(:disabled) {
    background: linear-gradient(90deg, #7AD5C0 0%, #A3C1FF 100%);
}

.button.design-0.yellow:not(:disabled),
.button.design-0.color-7:not(:disabled) {
    background: linear-gradient(90deg, #F1C40F 0%, #F37F26 100%);
}

.button.design-0.orange:not(:disabled),
.button.design-0.color-8:not(:disabled) {
    background: linear-gradient(90deg, #FF9333 0%, #FFF133 100%);
}

.button.design-0.pink:not(:disabled),
.button.design-0.color-9:not(:disabled) {
    background: linear-gradient(90deg, #DA92F2 0%, #92C5F2 100%);
}

/*  ---   HOVER  ---  */
.button:not([class*="design-"]):hover:not(:disabled),
.button.design-1:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(0, 63, 158, 0.8);
}

.button:not([class*="design-"]).green:hover:not(:active):not(:disabled),
.button.design-1.green:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-1:hover:not(:active):not(:disabled),
.button.design-1.color-1:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(0, 102, 24, 0.8);
}

.button:not([class*="design-"]).dark-red:hover:not(:active):not(:disabled),
.button.design-1.dark-red:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-2:hover:not(:active):not(:disabled),
.button.design-1.color-2:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(101, 0, 0, 0.8);
}

.button:not([class*="design-"]).dark-purple:hover:not(:active):not(:disabled),
.button.design-1.dark-purple:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-3:hover:not(:active):not(:disabled),
.button.design-1.color-3:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(20, 0, 29, 0.8);
}

.button:not([class*="design-"]).raspberry-red:hover:not(:active):not(:disabled),
.button.design-1.raspberry-red:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-4:hover:not(:active):not(:disabled),
.button.design-1.color-4:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(101, 0, 0, 0.8);
}

.button:not([class*="design-"]).blue-light:hover:not(:active):not(:disabled),
.button.design-1.blue-light:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-5:hover:not(:active):not(:disabled),
.button.design-1.color-5:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(0, 63, 158, 0.8);
}

.button:not([class*="design-"]).green-light:hover:not(:active):not(:disabled),
.button.design-1.green-light:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-6:hover:not(:active):not(:disabled),
.button.design-1.color-6:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(96, 153, 140, 0.8);
}

.button:not([class*="design-"]).yellow:hover:not(:active):not(:disabled),
.button.design-1.yellow:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-7:hover:not(:active):not(:disabled),
.button.design-1.color-7:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(168, 134, 0, 0.8);
}

.button:not([class*="design-"]).orange:hover:not(:active):not(:disabled),
.button.design-1.orange:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-8:hover:not(:active):not(:disabled),
.button.design-1.color-8:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(164, 77, 0, 0.8);
}

.button:not([class*="design-"]).pink:hover:not(:active):not(:disabled),
.button.design-1.pink:hover:not(:active):not(:disabled),
.button:not([class*="design-"]).color-9:hover:not(:active):not(:disabled),
.button.design-1.color-9:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 6px 0 rgba(154, 69, 182, 0.8);
}

.button.design-2:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #004EC3 0%, #8254D8 100%);
    border: none;
}

.button.design-2.green:hover:not(:active):not(:disabled),
.button.design-2.color-1:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #006618 0%, #759500 100%);
}

.button.design-2.dark-red:hover:not(:active):not(:disabled),
.button.design-2.color-2:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #A92323 0%, #6223A9 100%);
}

.button.design-2.dark-purple:hover:not(:active):not(:disabled),
.button.design-2.color-3:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #530079 0%, #790000 100%);
}

.button.design-2.raspberry-red:hover:not(:active):not(:disabled),
.button.design-2.color-4:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #A80953 0%, #6223A9 100%);
}

.button.design-2.blue-light:hover:not(:active):not(:disabled),
.button.design-2.color-5:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #93B7FF 0%, #C3A3FF 100%);
}

.button.design-2.green-light:hover:not(:active):not(:disabled),
.button.design-2.color-6:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #7AD5C0 0%, #A3C1FF 100%);
}

.button.design-2.yellow:hover:not(:active):not(:disabled),
.button.design-2.color-7:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #F1C40F 0%, #F37F26 100%);
}

.button.design-2.orange:hover:not(:active):not(:disabled),
.button.design-2.color-8:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #FF9333 0%, #FFF133 100%);
}

.button.design-2.pink:hover:not(:active):not(:disabled),
.button.design-2.color-9:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #DA92F2 0%, #92C5F2 100%);
}

.button.design-3:hover:not(:active):not(:disabled) {
    border-width: 3px;
    border-style: solid;
    padding: 0 23px;
}

.button.design-3:hover:not(:active):not(:disabled):not([class*="green"]):not([class*="color-1"]):not([class*="dark-red"]):not([class*="color-2"]):not([class*="dark-purple"]):not([class*="color-3"]):not([class*="raspberry-red"]):not([class*="color-4"]):not([class*="blue-light"]):not([class*="color-5"]):not([class*="green-light"]):not([class*="color-6"]):not([class*="yellow"]):not([class*="color-7"]):not([class*="orange"]):not([class*="color-8"]):not([class*="pink"]):not([class*="color-9"]),
.button.design-3.blue:hover:not(:active):not(:disabled),
.button.design-3.color-0:hover:not(:active):not(:disabled) {
    border-color: #143971;
}

.button.design-3.green:hover:not(:active):not(:disabled),
.button.design-3.color-1:hover:not(:active):not(:disabled) {
    border-color: #012308;
}

.button.design-3.dark-red:hover:not(:active):not(:disabled),
.button.design-3.color-2:hover:not(:active):not(:disabled) {
    border-color: #650000;
}

.button.design-3.dark-purple:hover:not(:active):not(:disabled),
.button.design-3.color-3:hover:not(:active):not(:disabled) {
    border-color: #12001A
}

.button.design-3.raspberry-red:hover:not(:active):not(:disabled),
.button.design-3.color-4:hover:not(:active):not(:disabled) {
    border-color: #390003;
}

.button.design-3.blue-light:hover:not(:active):not(:disabled),
.button.design-3.color-5:hover:not(:active):not(:disabled) {
    border-color: #37537E;
}

.button.design-3.green-light:hover:not(:active):not(:disabled),
.button.design-3.color-6:hover:not(:active):not(:disabled) {
    border-color: #60998C;
}

.button.design-3.yellow:hover:not(:active):not(:disabled),
.button.design-3.color-7:hover:not(:active):not(:disabled) {
    border-color: #A88600;
}

.button.design-3.orange:hover:not(:active):not(:disabled),
.button.design-3.color-8:hover:not(:active):not(:disabled) {
    border-color: #A44D00;
}

.button.design-3.pink:hover:not(:active):not(:disabled),
.button.design-3.color-9:hover:not(:active):not(:disabled) {
    border-color: #9A45B6;
}

.button.design-4:hover:not(:disabled)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    z-index: -1;
    background: var(--card-btn-border-gradient-first-color);
}

.button.design-4.blue-light:hover:not(:disabled)::before,
.button.design-4.color-5:hover:not(:disabled)::before,
.button.design-4.green-light:hover:not(:disabled)::before,
.button.design-4.color-6:hover:not(:disabled)::before,
.button.design-4.yellow:hover:not(:disabled)::before,
.button.design-4.color-7:hover:not(:disabled)::before,
.button.design-4.orange:hover:not(:disabled)::before,
.button.design-4.color-8:hover:not(:disabled)::before,
.button.design-4.pink:hover:not(:disabled)::before,
.button.design-4.color-9:hover:not(:disabled)::before {
    background: var(--card-btn-border-gradient-secondary-color);
}

.button.design-4:hover:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 4px;
    z-index: -1;
}

.button.design-4:hover:not(:active):not(:disabled)::after {
    background: #004EC3;
}

.button.green.design-4:hover:not(:active):not(:disabled)::after,
.button.color-1.design-4:hover:not(:active):not(:disabled)::after {
    background: #006618;
}

.button.dark-red.design-4:hover:not(:active):not(:disabled)::after,
.button.color-2.design-4:hover:not(:active):not(:disabled)::after {
    background: #A92323;
}

.button.dark-purple.design-4:hover:not(:active):not(:disabled)::after,
.button.color-3.design-4:hover:not(:active):not(:disabled)::after {
    background: #530079;
}

.button.raspberry-red.design-4:hover:not(:active):not(:disabled)::after,
.button.color-4.design-4:hover:not(:active):not(:disabled)::after {
    background: #A80953;
}

.button.blue-light.design-4:hover:not(:active):not(:disabled)::after,
.button.color-5.design-4:hover:not(:active):not(:disabled)::after {
    background: #93C2FF;
}

.button.green-light.design-4:hover:not(:active):not(:disabled)::after,
.button.color-6.design-4:hover:not(:active):not(:disabled)::after {
    background: #7AD5C0;
}

.button.yellow.design-4:hover:not(:active):not(:disabled)::after,
.button.color-7.design-4:hover:not(:active):not(:disabled)::after {
    background: #F1C40F;
}

.button.orange.design-4:hover:not(:active):not(:disabled)::after,
.button.color-8.design-4:hover:not(:active):not(:disabled)::after {
    background: #FF9333;
}

.button.pink.design-4:hover:not(:active):not(:disabled)::after,
.button.color-9.design-4:hover:not(:active):not(:disabled)::after {
    background: #DA92F2;
}

.button.design-5:hover:not(:active):not(:disabled) {
    border: none;
}

.button.design-5:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #082B5E 0%, #004EC3 100%);
}

.button.design-5.green:hover:not(:active):not(:disabled),
.button.design-5.color-1:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #001E07 0%, #006618 100%);
}

.button.design-5.dark-red:hover:not(:active):not(:disabled),
.button.design-5.color-2:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #350000 0%, #A92323 100%);
}

.button.design-5.dark-purple:hover:not(:active):not(:disabled),
.button.design-5.color-3:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #12001A 0%, #530079 100%);
}

.button.design-5.raspberry-red:hover:not(:active):not(:disabled),
.button.design-5.color-4:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #350000 0%, #A80953 100%);
}

.button.design-5.blue-light:hover:not(:active):not(:disabled),
.button.design-5.color-5:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #659DF1 0%, #BCD9FF 100%);
}

.button.design-5.green-light:hover:not(:active):not(:disabled),
.button.design-5.color-6:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #00B087 0%, #CAF7EC 100%);
}

.button.design-5.yellow:hover:not(:active):not(:disabled),
.button.design-5.color-7:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #F1C40F 0%, #FFF3C3 100%);
}

.button.design-5.orange:hover:not(:active):not(:disabled),
.button.design-5.color-8:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #FF9333 0%, #FFD7B3 100%);
}

.button.design-5.pink:hover:not(:active):not(:disabled),
.button.design-5.color-9:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #DA92F2 0%, #F5D7FF 100%);
}

.button.design-6:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(7, 47, 106, 0.9);
}

.button.design-6.green:hover:not(:active):not(:disabled),
.button.design-6.color-1:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(0, 102, 24, 0.9);
}

.button.design-6.dark-red:hover:not(:active):not(:disabled),
.button.design-6.color-2:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(101, 0, 0, 0.9);
}

.button.design-6.dark-purple:hover:not(:active):not(:disabled),
.button.design-6.color-3:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(19, 0, 28, 0.9);
}

.button.design-6.raspberry-red:hover:not(:active):not(:disabled),
.button.design-6.color-4:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(101, 0, 0, 0.9);
}

.button.design-6.blue-light:hover:not(:active):not(:disabled),
.button.design-6.color-5:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(7, 47, 106, 0.9);
}

.button.design-6.green-light:hover:not(:active):not(:disabled),
.button.design-6.color-6:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(96, 153, 140, 0.9);
}

.button.design-6.yellow:hover:not(:active):not(:disabled),
.button.design-6.color-7:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(168, 134, 0, 0.9);
}

.button.design-6.orange:hover:not(:active):not(:disabled),
.button.design-6.color-8:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(164, 77, 0, 0.9);
}

.button.design-6.pink:hover:not(:active):not(:disabled),
.button.design-6.color-9:hover:not(:active):not(:disabled) {
    box-shadow: 0 0 4px 0 rgba(154, 69, 182, 0.9);
}

.button.design-7:hover:not(:active):not(:disabled),
.button.design-8:hover:not(:active):not(:disabled) {
    color: #FFFFFF;
    background: #004EC3;
    border-color: #004EC3;
}

.button.color-0.design-7:hover:not(:active):not(:disabled),
.button.blue.design-7:hover:not(:active):not(:disabled),
.button.color-0.design-8:hover:not(:active):not(:disabled),
.button.blue.design-8:hover:not(:active):not(:disabled) {
    color: #FFFFFF;
    background: #004EC3;
    border-color: #004EC3;
}

.button.color-1.design-7:hover:not(:active):not(:disabled),
.button.green.design-7:hover:not(:active):not(:disabled),
.button.color-1.design-8:hover:not(:active):not(:disabled),
.button.green.design-8:hover:not(:active):not(:disabled) {
    color: #FFFFFF;
    background: #006618;
    border-color: #006618;
}

.button.color-2.design-7:hover:not(:active):not(:disabled),
.button.dark-red.design-7:hover:not(:active):not(:disabled),
.button.color-2.design-8:hover:not(:active):not(:disabled),
.button.dark-red.design-8:hover:not(:active):not(:disabled) {
    color: #FFFFFF;
    background: #A92323;
    border-color: #A92323;
}

.button.color-3.design-7:hover:not(:active):not(:disabled),
.button.dark-purple.design-7:hover:not(:active):not(:disabled),
.button.color-3.design-8:hover:not(:active):not(:disabled),
.button.dark-purple.design-8:hover:not(:active):not(:disabled) {
    color: #FFFFFF;
    background: #530079;
    border-color: #530079;
}

.button.color-4.design-7:hover:not(:active):not(:disabled),
.button.raspberry-red.design-7:hover:not(:active):not(:disabled),
.button.color-4.design-8:hover:not(:active):not(:disabled),
.button.raspberry-red.design-8:hover:not(:active):not(:disabled) {
    color: #FFFFFF;
    background: #A80953;
    border-color: #A80953;
}

.button.color-5.design-7:hover:not(:active):not(:disabled),
.button.blue-light.design-7:hover:not(:active):not(:disabled),
.button.color-5.design-8:hover:not(:active):not(:disabled),
.button.blue-light.design-8:hover:not(:active):not(:disabled) {
    color: #232323;
    background: #93C2FF;
    border-color: #93C2FF;
}

.button.color-6.design-7:hover:not(:active):not(:disabled),
.button.green-light.design-7:hover:not(:active):not(:disabled),
.button.color-6.design-8:hover:not(:active):not(:disabled),
.button.green-light.design-8:hover:not(:active):not(:disabled) {
    color: #232323;
    background: #7AD5C0;
    border-color: #7AD5C0;
}

.button.color-7.design-7:hover:not(:active):not(:disabled),
.button.yellow.design-7:hover:not(:active):not(:disabled),
.button.color-7.design-8:hover:not(:active):not(:disabled),
.button.yellow.design-8:hover:not(:active):not(:disabled) {
    color: #232323;
    background: #F1C40F;
    border-color: #F1C40F;
}

.button.color-8.design-7:hover:not(:active):not(:disabled),
.button.orange.design-7:hover:not(:active):not(:disabled),
.button.color-8.design-8:hover:not(:active):not(:disabled),
.button.orange.design-8:hover:not(:active):not(:disabled) {
    color: #232323;
    background: #FF9333;
    border-color: #FF9333;
}

.button.color-9.design-7:hover:not(:active):not(:disabled),
.button.pink.design-7:hover:not(:active):not(:disabled),
.button.color-9.design-8:hover:not(:active):not(:disabled),
.button.pink.design-8:hover:not(:active):not(:disabled) {
    color: #232323;
    background: #DA92F2;
    border-color: #DA92F2;
}


.button.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #C6DFF5 0%, #7DA0FF 100%);
}

.button.green.design-9:hover:not(:active):not(:disabled)::before,
.button.color-1.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #E8FFE0 0%, #8CC451 100%);
}

.button.dark-red.design-9:hover:not(:active):not(:disabled)::before,
.button.color-2.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #FFFCFC 0%, #EC939C 100%);
}

.button.dark-purple.design-9:hover:not(:active):not(:disabled)::before,
.button.color-3.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #FDF2FF 0%, #E09DF1 100%);
}

.button.raspberry-red.design-9:hover:not(:active):not(:disabled)::before,
.button.color-4.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #F2DEE4 0%, #FF85A8 100%);
}

.button.blue-light.design-9:hover:not(:active):not(:disabled)::before,
.button.color-5.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #FFFFFF 0%, #85CCFF 100%);
}

.button.green-light.design-9:hover:not(:active):not(:disabled)::before,
.button.color-6.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #F3FFFE 0%, #9AD8D1 100%);
}

.button.yellow.design-9:hover:not(:active):not(:disabled)::before,
.button.color-7.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #C6DFF5 0%, #7DA0FF 100%);
}

.button.orange.design-9:hover:not(:active):not(:disabled)::before,
.button.color-8.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #C6DFF5 0%, #7DA0FF 100%);
}

.button.pink.design-9:hover:not(:active):not(:disabled)::before,
.button.color-9.design-9:hover:not(:active):not(:disabled)::before {
    background: linear-gradient(90deg, #C6DFF5 0%, #7DA0FF 100%);
}

.button.design-0:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #8254D8 0%, #004EC3 100%);
}

.button.design-0.green:hover:not(:active):not(:disabled),
.button.design-0.color-1:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #759500 0%, #006618 100%);
}

.button.design-0.dark-red:hover:not(:active):not(:disabled),
.button.design-0.color-2:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #6223A9 0%, #A92323 100%);
}

.button.design-0.dark-purple:hover:not(:active):not(:disabled),
.button.design-0.color-3:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #790000 0%, #530079 100%);
}

.button.design-0.raspberry-red:hover:not(:active):not(:disabled),
.button.design-0.color-4:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #6223A9 0%, #A80953 100%);
}

.button.design-0.blue-light:hover:not(:active):not(:disabled),
.button.design-0.color-5:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #C3A3FF 0%, #93B7FF 100%);
}

.button.design-0.green-light:hover:not(:active):not(:disabled),
.button.design-0.color-6:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #A3C1FF 0%, #7AD5C0 100%);
}

.button.design-0.yellow:hover:not(:active):not(:disabled),
.button.design-0.color-7:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #F37F26 0%, #F1C40F 100%);
}

.button.design-0.orange:hover:not(:active):not(:disabled),
.button.design-0.color-8:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #FFF133 0%, #FF9333 100%);
}

.button.design-0.pink:hover:not(:active):not(:disabled),
.button.design-0.color-9:hover:not(:active):not(:disabled) {
    background: linear-gradient(90deg, #92C5F2 0%, #DA92F2 100%);
}

/*  ---   FOCUS  ---  */
.button:focus {
    outline: none;
}

.button:focus:not(:hover):not([class*="design-3"]):not([class*="design-9"]) {
    border-width: 2px;
    border-style: solid;
}

.button:focus:not(:hover):not([class*="design-"]),
.button.design-1:focus:not(:hover) {
    padding: 0 23px;
}

.button.design-2:focus:not(:hover),
.button.design-0:focus:not(:hover) {
    padding: 0 40px 0 16px;
}

.button.design-2:focus:not(:hover)::after,
.button.design-0:focus:not(:hover)::after {
    right: 12px;
}

.button.design-3:focus:not(:hover) {
    border-width: 3px;
    border-style: solid;
    padding: 0 23px;
}

.button.design-4:focus:not(:hover) {
    padding: 0 22px;
}

.button.design-5:focus:not(:hover) {
    padding: 0 22px;
}

.button.design-6:focus:not(:hover) {
    padding: 0 14px;
}


.button:focus:not(:hover):not([class*="design-"]),
.button.design-1:focus:not(:hover) {
    border-color: #002F74;
}


.button.design-2:focus:not(:hover),
.button.design-3:focus:not(:hover),
.button.design-4:focus:not(:hover) {
    border-color: #143971;
}

.button.design-5:focus:not(:hover) {
    border-color: #000F26;
}

.button.design-6:focus:not(:hover) {
    border-color: #082C61;
}

.button.green:focus:not(:hover):not([class*="design-"]),
.button.design-1.green:focus:not(:hover),
.button.color-1:focus:not(:hover):not([class*="design-"]),
.button.design-1.color-1:focus:not(:hover) {
    border-color: #012509;
}

.button.design-2.green:focus:not(:hover),
.button.design-4.green:focus:not(:hover),
.button.design-2.color-1:focus:not(:hover),
.button.design-4.color-1:focus:not(:hover) {
    border-color: #012A0A;
}

.button.design-3.green:focus:not(:hover),
.button.design-3.color-1:focus:not(:hover),
.button.design-0.green:focus:not(:hover),
.button.design-0.color-1:focus:not(:hover) {
    border-color: #012308;
}

.button.design-5.green:focus:not(:hover),
.button.design-6.green:focus:not(:hover),
.button.design-5.color-1:focus:not(:hover),
.button.design-6.color-1:focus:not(:hover) {
    border-color: #012A0A;
}

.button.dark-red:focus:not(:hover):not([class*="design-3"]),
.button.color-2:focus:not(:hover):not([class*="design-3"]) {
    border-color: #450505;
}

.button.design-3.dark-red:focus:not(:hover),
.button.design-3.color-2:focus:not(:hover) {
    border-color: #650000;
}

.button.dark-purple:focus:not(:hover),
.button.color-3:focus:not(:hover) {
    border-color: #1E012C;
}

.button.raspberry-red:focus:not(:hover),
.button.color-4:focus:not(:hover) {
    border-color: #390003;
}

.button.blue-light:focus:not(:hover),
.button.color-5:focus:not(:hover) {
    border-color: #37537E;
}

.button.green-light:focus:not(:hover),
.button.color-6:focus:not(:hover) {
    border-color: #60998C;
}

.button.yellow:focus:not(:hover),
.button.color-7:focus:not(:hover) {
    border-color: #A88600;
}

.button.orange:focus:not(:hover),
.button.color-8:focus:not(:hover) {
    border-color: #A44D00;
}

.button.pink:focus:not(:hover),
.button.color-9:focus:not(:hover) {
    border-color: #9A45B6;
}

.button.design-7:focus:not(:hover),
.button.design-8:focus:not(:hover),
.button.design-9:focus:not(:hover),
.button.design-0:focus:not(:hover) {
    color: #FFFFFF;
    background: #004EC3;
    border-color: #143971;
}

.button.color-0.design-7:focus:not(:hover),
.button.blue.design-7:focus:not(:hover),
.button.color-0.design-8:focus:not(:hover),
.button.blue.design-8:focus:not(:hover),
.button.color-0.design-9:focus:not(:hover),
.button.blue.design-9:focus:not(:hover) {
    color: #FFFFFF;
    background: #004EC3;
    border-color: #143971;
}

.button.color-1.design-7:focus:not(:hover),
.button.green.design-7:focus:not(:hover),
.button.color-1.design-8:focus:not(:hover),
.button.green.design-8:focus:not(:hover),
.button.color-1.design-9:focus:not(:hover),
.button.green.design-9:focus:not(:hover) {
    color: #FFFFFF;
    background: #006618;
    border-color: #012308;
}

.button.color-2.design-7:focus:not(:hover),
.button.dark-red.design-7:focus:not(:hover),
.button.color-2.design-8:focus:not(:hover),
.button.dark-red.design-8:focus:not(:hover),
.button.color-2.design-9:focus:not(:hover),
.button.dark-red.design-9:focus:not(:hover) {
    color: #FFFFFF;
    background: #A92323;
    border-color: #450505;
}

.button.color-3.design-7:focus:not(:hover),
.button.dark-purple.design-7:focus:not(:hover),
.button.color-3.design-8:focus:not(:hover),
.button.dark-purple.design-8:focus:not(:hover),
.button.color-3.design-9:focus:not(:hover),
.button.dark-purple.design-9:focus:not(:hover) {
    color: #FFFFFF;
    background: #530079;
    border-color: #1E012C;
}

.button.color-4.design-7:focus:not(:hover),
.button.raspberry-red.design-7:focus:not(:hover),
.button.color-4.design-8:focus:not(:hover),
.button.raspberry-red.design-8:focus:not(:hover),
.button.color-4.design-9:focus:not(:hover),
.button.raspberry-red.design-9:focus:not(:hover) {
    color: #FFFFFF;
    background: #A80953;
    border-color: #390003;
}

.button.color-5.design-7:focus:not(:hover),
.button.blue-light.design-7:focus:not(:hover),
.button.color-5.design-8:focus:not(:hover),
.button.blue-light.design-8:focus:not(:hover),
.button.color-5.design-9:focus:not(:hover),
.button.blue-light.design-9:focus:not(:hover) {
    color: #232323;
    background: #93C2FF;
    border-color: #37537E;
}

.button.color-6.design-7:focus:not(:hover),
.button.green-light.design-7:focus:not(:hover),
.button.color-6.design-8:focus:not(:hover),
.button.green-light.design-8:focus:not(:hover),
.button.color-6.design-9:focus:not(:hover),
.button.green-light.design-9:focus:not(:hover) {
    color: #232323;
    background: #7AD5C0;
    border-color: #60998C;
}

.button.color-7.design-7:focus:not(:hover),
.button.yellow.design-7:focus:not(:hover),
.button.color-7.design-8:focus:not(:hover),
.button.yellow.design-8:focus:not(:hover),
.button.color-7.design-9:focus:not(:hover),
.button.yellow.design-9:focus:not(:hover) {
    color: #232323;
    background: #F1C40F;
    border-color: #A88600;
}

.button.color-8.design-7:focus:not(:hover),
.button.orange.design-7:focus:not(:hover),
.button.color-8.design-8:focus:not(:hover),
.button.orange.design-8:focus:not(:hover),
.button.color-8.design-9:focus:not(:hover),
.button.orange.design-9:focus:not(:hover) {
    color: #232323;
    background: #FF9333;
    border-color: #A44D00;
}

.button.color-9.design-7:focus:not(:hover),
.button.pink.design-7:focus:not(:hover),
.button.color-9.design-8:focus:not(:hover),
.button.pink.design-8:focus:not(:hover),
.button.color-9.design-9:focus:not(:hover),
.button.pink.design-9:focus:not(:hover) {
    color: #232323;
    background: #DA92F2;
    border-color: #9A45B6;
}

.button.design-9:focus:not(:hover)::before {
    background: #143971;
}

.button.green.design-9:focus:not(:hover)::before,
.button.color-1.design-9:focus:not(:hover)::before {
    background: #012308;
}

.button.dark-red.design-9:focus:not(:hover)::before,
.button.color-2.design-9:focus:not(:hover)::before {
    background: #450505;
}

.button.dark-purple.design-9:focus:not(:hover)::before,
.button.color-3.design-9:focus:not(:hover)::before {
    background: #1E012C;
}

.button.raspberry-red.design-9:focus:not(:hover)::before,
.button.color-4.design-9:focus:not(:hover)::before {
    background: #390003;
}

.button.blue-light.design-9:focus:not(:hover)::before,
.button.color-5.design-9:focus:not(:hover)::before {
    background: #37537E;
}

.button.green-light.design-9:focus:not(:hover)::before,
.button.color-6.design-9:focus:not(:hover)::before {
    background: #60998C;
}

.button.yellow.design-9:focus:not(:hover)::before,
.button.color-7.design-9:focus:not(:hover)::before {
    background: #A88600;
}

.button.orange.design-9:focus:not(:hover)::before,
.button.color-8.design-9:focus:not(:hover)::before {
    background: #A44D00;
}

.button.pink.design-9:focus:not(:hover)::before,
.button.color-9.design-9:focus:not(:hover)::before {
    background: #9A45B6;
}


.button.design-0:focus:not(:hover) {
    background: #004EC3;
    border-color: #143971;
}


.button.color-0.design-0:focus:not(:hover),
.button.blue.design-0:focus:not(:hover) {
    background: #004EC3;
    border-color: #143971;
}

.button.color-1.design-0:focus:not(:hover),
.button.green.design-0:focus:not(:hover) {
    background: #006618;
    border-color: #012308;
}

.button.color-2.design-0:focus:not(:hover),
.button.dark-red.design-0:focus:not(:hover) {
    background: #A92323;
    border-color: #450505;
}

.button.color-3.design-0:focus:not(:hover),
.button.dark-purple.design-0:focus:not(:hover) {
    background: #530079;
    border-color: #1E012C;
}

.button.color-4.design-0:focus:not(:hover),
.button.raspberry-red.design-0:focus:not(:hover) {
    background: #A80953;
    border-color: #390003;
}

.button.color-5.design-0:focus:not(:hover),
.button.blue-light.design-0:focus:not(:hover) {
    color: #232323;
    background: #93C2FF;
    border-color: #37537E;
}

.button.color-6.design-0:focus:not(:hover),
.button.green-light.design-0:focus:not(:hover) {
    color: #232323;
    background: #7AD5C0;
    border-color: #60998C;
}

.button.color-7.design-0:focus:not(:hover),
.button.yellow.design-0:focus:not(:hover) {
    color: #232323;
    background: #F1C40F;
    border-color: #A88600;
}

.button.color-8.design-0:focus:not(:hover),
.button.orange.design-0:focus:not(:hover) {
    color: #232323;
    background: #FF9333;
    border-color: #A44D00;
}

.button.color-9.design-0:focus:not(:hover),
.button.pink.design-0:focus:not(:hover) {
    color: #232323;
    background: #DA92F2;
    border-color: #9A45B6;
}

/*  ---   ACTIVE  ---  */

.button.design-7:active,
.button.design-8:active {
    color: #FFFFFF;
    border-color: transparent;
}

.button.design-7.blue-light:active,
.button.design-7.color-5:active,
.button.design-7.green-light:active,
.button.design-7.color-6:active,
.button.design-7.yellow:active,
.button.design-7.color-7:active,
.button.design-7.orange:active,
.button.design-7.color-8:active,
.button.design-7.pink:active,
.button.design-7.color-9:active,
.button.design-8.blue-light:active,
.button.design-8.color-5:active,
.button.design-8.green-light:active,
.button.design-8.color-6:active,
.button.design-8.yellow:active,
.button.design-8.color-7:active,
.button.design-8.orange:active,
.button.design-8.color-8:active,
.button.design-8.pink:active,
.button.design-8.color-9:active {
    color: #232323;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]),
.button.design-4:active:not(:disabled)::after {
    background: #082C61;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).green,
.button.green.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-1,
.button.color-1.design-4:active:not(:disabled)::after {
    background: #012A0A;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).dark-red,
.button.dark-red.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-2,
.button.color-2.design-4:active:not(:disabled)::after {
    background: #450505;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).dark-purple,
.button.dark-purple.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-3,
.button.color-3.design-4:active:not(:disabled)::after {
    background: #1E012C;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).raspberry-red,
.button.raspberry-red.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-4,
.button.color-4.design-4:active:not(:disabled)::after {
    background: #4E0211;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).blue-light,
.button.blue-light.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-5,
.button.color-5.design-4:active:not(:disabled)::after {
    background: #648FD1;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).green-light,
.button.green-light.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-6,
.button.color-6.design-4:active:not(:disabled)::after {
    background: #C0F3E7;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).yellow,
.button.yellow.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-7,
.button.color-7.design-4:active:not(:disabled)::after {
    background: #FDECAA;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).orange,
.button.orange.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-8,
.button.color-8.design-4:active:not(:disabled)::after {
    background: #FFD0A7;
}

.button:active:not([class*="design-2"]):not([class*="design-0"]).pink,
.button.pink.design-4:active:not(:disabled)::after,
.button:active:not([class*="design-2"]):not([class*="design-0"]).color-9,
.button.color-9.design-4:active:not(:disabled)::after {
    background: #F5D7FF;
}

.button.design-2:active {
    background: #7054D6;
}

.button.green.design-2:active,
.button.color-1.design-2:active {
    background: #6E9301;
}

.button.dark-red.design-2:active,
.button.color-2.design-2:active {
    background: #6F2390;
}

.button.dark-purple.design-2:active,
.button.color-3.design-2:active {
    background: #75000C;
}

.button.raspberry-red.design-2:active,
.button.color-4.design-2:active {
    background: #6C1F9D;
}

.button.blue-light.design-2:active,
.button.color-5.design-2:active {
    background: #BCA5FF;
}

.button.green-light.design-2:active,
.button.color-6.design-2:active {
    background: #A2C2FE;
}

.button.yellow.design-2:active,
.button.color-7.design-2:active {
    background: #F38A22;
}

.button.orange.design-2:active,
.button.color-8.design-2:active {
    background: #FFD033;
}

.button.pink.design-2:active,
.button.color-9.design-2:active {
    background: #9CBEF2;
}

.button.design-4:not([class*="green"]):not([class*="color-1"]):not([class*="dark-red"]):not([class*="color-2"]):not([class*="dark-purple"]):not([class*="color-3"]):not([class*="raspberry-red"]):not([class*="color-4"]):not([class*="blue-light"]):not([class*="color-5"]):not([class*="green-light"]):not([class*="color-6"]):not([class*="yellow"]):not([class*="color-7"]):not([class*="orange"]):not([class*="color-8"]):not([class*="pink"]):not([class*="color-9"]):active,
.button.design-4.blue:active,
.button.design-4.color-0:active,
.button:not([class*="design-"]).pink:active,
.button.design-1.pink:active,
.button:not([class*="design-"]).color-9:active,
.button.design-1.color-9:active {
    border-width: 1px;
}

.button.design-3.pink:active,
.button.design-3.color-9:active {
    border-width: 2px;
}

.button.design-2:not([class*="green"]):not([class*="color-1"]):not([class*="dark-red"]):not([class*="color-2"]):not([class*="dark-purple"]):not([class*="color-3"]):not([class*="raspberry-red"]):not([class*="color-4"]):not([class*="blue-light"]):not([class*="color-5"]):not([class*="green-light"]):not([class*="color-6"]):not([class*="yellow"]):not([class*="color-7"]):not([class*="orange"]):not([class*="color-8"]):not([class*="pink"]):not([class*="color-9"]):active,
.button.design-2.blue:active,
.button.design-2.color-0:active,
.button.design-5.pink:active,
.button.design-6.pink:active,
.button.design-5.color-9:active,
.button.design-6.color-9:active {
    border: none;
}

.button.design-3.dark-red:active,
.button.design-3.color-2:active,
.button.design-3.dark-purple:active,
.button.design-3.color-3:active,
.button.design-3.raspberry-red:active,
.button.design-3.color-4:active,
.button.design-3.green-light:active,
.button.design-3.color-6:active,
.button.design-3.yellow:active,
.button.design-3.color-7:active {
    border-width: 3px;
    padding: 0 23px;
}

.button.design-4.blue-light:active,
.button.design-4.color-5:active,
.button.design-4.green-light:active,
.button.design-4.color-6:active,
.button.design-4.yellow:active,
.button.design-4.color-7:active,
.button.design-4.orange:active,
.button.design-4.color-8:active,
.button.design-4.pink:active,
.button.design-4.color-9:active {
    border-color: var(--card-btn-border-gradient-secondary-color);
}

.button.design-2:active {
    border-color: transparent;
}

.button.design-3:not([class*="dark-red"]):not([class*="color-2"]):not([class*="dark-purple"]):not([class*="color-3"]):not([class*="raspberry-red"]):not([class*="color-4"]):not([class*="blue-light"]):not([class*="color-5"]):not([class*="green-light"]):not([class*="color-6"]):not([class*="yellow"]):not([class*="color-7"]):not([class*="orange"]):not([class*="color-8"]):not([class*="pink"]):not([class*="color-9"]):active,
.button:not([class*="design-"]):not([class*="dark-red"]):not([class*="color-2"]):not([class*="dark-purple"]):not([class*="color-3"]):not([class*="raspberry-red"]):not([class*="color-4"]):not([class*="blue-light"]):not([class*="color-5"]):not([class*="green-light"]):not([class*="color-6"]):not([class*="yellow"]):not([class*="color-7"]):not([class*="orange"]):not([class*="color-8"]):not([class*="pink"]):not([class*="color-9"]):active,
.button.design-1:not([class*="dark-red"]):not([class*="color-2"]):not([class*="dark-purple"]):not([class*="color-3"]):not([class*="raspberry-red"]):not([class*="color-4"]):not([class*="blue-light"]):not([class*="color-5"]):not([class*="green-light"]):not([class*="color-6"]):not([class*="yellow"]):not([class*="color-7"]):not([class*="orange"]):not([class*="color-8"]):not([class*="pink"]):not([class*="color-9"]):active,
.button.design-3.blue:active,
.button.design-3.color-0:active,
.button.design-3.green:active,
.button.design-3.color-1:active,
.button:not([class*="design-"]).blue:active,
.button.design-1.blue:active,
.button:not([class*="design-"]).color-0:active,
.button.design-1.color-0:active,
.button:not([class*="design-"]).green:active,
.button:not([class*="design-"]).color-1:active,
.button.design-1.green:active,
.button.design-1.color-1:active {
    border-color: transparent;
}

.button.design-3.dark-red:active,
.button:not([class*="design-"]).dark-red:active,
.button.design-1.dark-red:active,
.button.design-3.color-2:active,
.button:not([class*="design-"]).color-2:active,
.button.design-1.color-2:active {
    border-color: #650000;
}

.button.design-3.dark-purple:active,
.button:not([class*="design-"]).dark-purple:active,
.button.design-1.dark-purple:active,
.button.design-3.color-3:active,
.button:not([class*="design-"]).color-3:active,
.button.design-1.color-3:active {
    border-color: #12001A;
}

.button.design-3.raspberry-red:active,
.button:not([class*="design-"]).raspberry-red:active,
.button.design-1.raspberry-red:active,
.button.design-3.color-4:active,
.button:not([class*="design-"]).color-4:active,
.button.design-1.color-4:active {
    border-color: #650000;
}

.button.design-3.blue-light:active,
.button:not([class*="design-"]).blue-light:active,
.button.design-1.blue-light:active,
.button.design-3.color-5:active,
.button:not([class*="design-"]).color-5:active,
.button.design-1.color-5:active,
.button.design-7.blue-light:active,
.button.design-8.blue-light:active,
.button.design-7.color-5:active,
.button.design-8.color-5:active {
    border-color: #37537E;
}

.button.design-3.green-light:active,
.button:not([class*="design-"]).green-light:active,
.button.design-1.green-light:active,
.button.design-3.color-6:active,
.button:not([class*="design-"]).color-6:active,
.button.design-1.color-6:active,
.button.design-7.green-light:active,
.button.design-8.green-light:active,
.button.design-7.color-6:active,
.button.design-8.color-6:active {
    border-color: #60998C;
}

.button.design-3.yellow:active,
.button:not([class*="design-"]).yellow:active,
.button.design-1.yellow:active,
.button.design-3.color-7:active,
.button:not([class*="design-"]).color-7:active,
.button.design-1.color-7:active,
.button.design-7.yellow:active,
.button.design-8.yellow:active,
.button.design-7.color-7:active,
.button.design-8.color-7:active {
    border-color: #A88600;
}

.button.design-3.orange:active,
.button:not([class*="design-"]).orange:active,
.button.design-1.orange:active,
.button.design-3.color-8:active,
.button:not([class*="design-"]).color-8:active,
.button.design-1.color-8:active,
.button.design-7.orange:active,
.button.design-8.orange:active,
.button.design-7.color-8:active,
.button.design-8.color-8:active {
    border-color: #A44D00;
}

.button.design-3.pink:active,
.button:not([class*="design-"]).pink:active,
.button.design-1.pink:active,
.button.design-3.color-9:active,
.button:not([class*="design-"]).color-9:active,
.button.design-1.color-9:active,
.button.design-7.pink:active,
.button.design-8.pink:active,
.button.design-7.color-9:active,
.button.design-8.color-9:active {
    border-color: #9A45B6;
}

.button.design-9:active::before,
.button.design-9:active::after {
    background: #143971;
}

.button.green.design-9:active::before,
.button.color-1.design-9:active::before {
    background: #012308;
}

.button.green.design-9:active::after,
.button.color-1.design-9:active::after {
    background: #012A0A;
}

.button.dark-red.design-9:active::before,
.button.color-2.design-9:active::before,
.button.dark-red.design-9:active::after,
.button.color-2.design-9:active::after {
    background: #450505;
}

.button.dark-purple.design-9:active::before,
.button.color-3.design-9:active::before,
.button.dark-purple.design-9:active::after,
.button.color-3.design-9:active::after {
    background: #1E012C;
}

.button.raspberry-red.design-9:active::before,
.button.color-4.design-9:active::before {
    background: #390003;
}

.button.raspberry-red.design-9:active::after,
.button.color-4.design-9:active::after {
    background: #4E0211;
}

.button.blue-light.design-9:active::before,
.button.color-5.design-9:active::before {
    background: #37537E;
}

.button.blue-light.design-9:active::after,
.button.color-5.design-9:active::after {
    background: #648FD1;
}

.button.green-light.design-9:active::before,
.button.color-6.design-9:active::before {
    background: #60998C;
}

.button.green-light.design-9:active::after,
.button.color-6.design-9:active::after {
    background: #C0F3E7;
}

.button.yellow.design-9:active::before,
.button.color-7.design-9:active::before {
    background: #A88600;
}

.button.yellow.design-9:active::after,
.button.color-7.design-9:active::after {
    background: #FDECAA;
}

.button.orange.design-9:active::before,
.button.color-8.design-9:active::before {
    background: #A44D00;
}

.button.orange.design-9:active::after,
.button.color-8.design-9:active::after {
    background: #FFD0A7;
}

.button.pink.design-9:active::before,
.button.color-9.design-9:active::before {
    background: #9A45B6;
}

.button.pink.design-9:active::after,
.button.color-9.design-9:active::after {
    background: #F5D7FF;
}

.button.design-0:active {
    background: #7054D6;
}

.button.green.design-0:active,
.button.color-1.design-0:active {
    background: #6E9301;
}

.button.dark-red.design-0:active,
.button.color-2.design-0:active {
    background: #6F2390;
}

.button.dark-purple.design-0:active,
.button.color-3.design-0:active {
    background: #75000C;
}

.button.raspberry-red.design-0:active,
.button.color-4.design-0:active {
    background: #6C1F9D;
}

.button.blue-light.design-0:active,
.button.color-5.design-0:active {
    background: #BCA5FF;
}

.button.green-light.design-0:active,
.button.color-6.design-0:active {
    background: #A2C2FE;
}

.button.yellow.design-0:active,
.button.color-7.design-0:active {
    background: #F38A22;
}

.button.orange.design-0:active,
.button.color-8.design-0:active {
    background: #FFD033;
}

.button.pink.design-0:active,
.button.color-9.design-0:active {
    background: #9CBEF2;
}

/*  ---   DISABLED  ---  */
.button:disabled {
    cursor: not-allowed !important;
    background: #6C757D !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.button:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]) {
    border: 1px solid !important;
}

.button.blue-light:disabled,
.button.color-5:disabled,
.button.green-light:disabled,
.button.color-6:disabled,
.button.yellow:disabled,
.button.color-7:disabled,
.button.orange:disabled,
.button.color-8:disabled,
.button.pink:disabled,
.button.color-9:disabled {
    background: #BCC2C7 !important;
}

.button:not([class*="design-"]):disabled,
.button.design-1:disabled,
.button.design-3:disabled {
    border-color: #4E4E4E !important;
}


.button.dark-red:disabled:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-2:disabled:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.dark-purple:disabled:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-3:disabled:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.raspberry-red:disabled:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-4:disabled:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]) {
    border-color: #393939 !important;
}

.button.blue-light:disabled[class*="design-"]:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-5:disabled[class*="design-"]:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]) {
    border-color: #6C757D !important;
}

.button.green-light:disabled[class*="design-"]:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-6:disabled[class*="design-"]:not([class*="design-4"]):not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.yellow:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-7:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.orange:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-8:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.pink:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]),
.button.color-9:disabled:not([class*="design-7"]):not([class*="design-8"]):not([class*="design-9"]):not([class*="design-0"]) {
    border-color: #878787 !important;
}

.button.design-3:disabled {
    border-width: 2px !important;
}

.button.design-7:disabled,
.button.design-8:disabled {
    color: #FFFFFF !important;
}

.button.design-7.blue-light:disabled,
.button.design-7.color-5:disabled,
.button.design-7.green-light:disabled,
.button.design-7.color-6:disabled,
.button.design-7.yellow:disabled,
.button.design-7.color-7:disabled,
.button.design-7.orange:disabled,
.button.design-7.color-8:disabled,
.button.design-7.pink:disabled,
.button.design-7.color-9:disabled,
.button.design-8.blue-light:disabled,
.button.design-8.color-5:disabled,
.button.design-8.green-light:disabled,
.button.design-8.color-6:disabled,
.button.design-8.yellow:disabled,
.button.design-8.color-8:disabled,
.button.design-8.orange:disabled,
.button.design-8.color-8:disabled,
.button.design-8.pink:disabled,
.button.design-8.color-9:disabled {
    color: #232323 !important;
}

.button.design-7:disabled,
.button.design-8:disabled,
.button.design-9:disabled {
    border-color: transparent !important;
}

.button.mob-full-width {
    @media screen and (max-width: 767px) {
        min-width: 100% !important;
    }
}

.button.full-width {
    min-width: 100% !important;
}

.button.margin-0 {
    margin: 0 !important;
}

.button.margin-10 {
    margin: 10px !important;
}

.button.margin-20 {
    margin: 20px !important;
}

.button.margin-40 {
    margin: 40px !important;
}

.button.margin-top-10 {
    margin-top: 10px !important;
}

.button.margin-top-20 {
    margin-top: 20px !important;
}

.button.margin-top-40 {
    margin-top: 40px !important;
}

.button.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.button.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.button.margin-bottom-40 {
    margin-bottom: 40px !important;
}/* V3 pack*/

/*--------------pros and cons v1-----------*/
.pros-header,
.cons-header {
    margin-bottom: 0.875rem;
}

ul.pros-list, ul.cons-list {
    margin-bottom: 1rem;
}

ul.pros-list li, ul.cons-list li {
    list-style-type: none;
    font-family: "Roboto", sans-serif;
    margin-bottom: 0.875rem;
    position: relative;
    padding-top: 0;
    font-size: 1rem;
}

.pros-header:after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: var(--green);
    margin-top: 0.25rem;
}

.pros-list li:before {
    font-family: icomoon;
    content: "\efca";
    color: var(--green);
    padding-right: 8px;
    font-size: 0.6rem;
}

.cons-header:after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: var(--red);
    margin-top: 0.25rem;
}

.cons-list li:before {
    font-family: icomoon;
    content: "\efd6";
    color: var(--red);
    padding-right: 8px;
    font-size: 0.6rem;
}

/*-------------pros and cons v2------------- */
.pros-and-cons {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.pros-and-cons .pros-and-cons-element {
    background: var(--white);
    box-shadow: 0 0 1px rgba(10, 16, 32, 0.16), 0 6px 8px -6px rgba(24, 39, 75, 0.12), 0 8px 16px -6px rgba(24, 39, 75, 0.08);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 20px;
}

.pros-and-cons .pros-and-cons-element.pros .pros-and-cons-header,
.pros-and-cons .pros-and-cons-element.cons .pros-and-cons-header {
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.pros-and-cons .pros-and-cons-element.pros .icon-available {
    background-color: #e8f2ff;
    z-index: 999;
    height: 4rem;
    width: 4rem;
    font-size: 1.5rem;
    line-height: 5rem;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    margin-top: -2.5rem;
    margin-bottom: .625rem;
}

@media all and (min-width: 767px) {
    .pros-and-cons .pros-and-cons-element.pros .icon-available {
        width: 5rem;
        height: 5rem;
        line-height: 2.5rem;
        margin-top: -2.5rem;
        margin-bottom: 2rem;
    }

    .pros-and-cons .pros-and-cons-element {
        margin-top: 0;
    }
}

@media all and (min-width: 540px) {
    .pros-and-cons .pros-and-cons-element.pros .icon-available {
        margin-top: -2.5rem;
    }
}

.pros-and-cons .pros-and-cons-element.pros .icon-available:before {
    color: var(--blue);
    content: "\efca";
    font-family: icomoon;
    font-size: 35px
}

.pros-and-cons .pros-and-cons-element.pros ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.pros-and-cons .pros-and-cons-element.pros ul li,
.pros-and-cons .pros-and-cons-element.cons ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.875rem;
    padding-top: 0;
    font-size: 1rem;
}

.pros-and-cons .pros-and-cons-element.pros ul li:before {
    color: var(--blue);
    content: "\efca";
    font-family: icomoon;
    background-color: transparent;
    top: 0;
    left: 0;
    width: .625rem;
    height: .625rem;
    position: absolute;
}

.pros-and-cons .pros-and-cons-element.cons .icon-not-available {
    background-color: #fae3e3;
    z-index: 999;
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    margin-top: -2.5rem;
    margin-bottom: .625rem;
}

@media all and (min-width: 540px) {
    .pros-and-cons .pros-and-cons-element.cons .icon-not-available {
        width: 5rem;
        height: 5rem;
    }
}

@media all and (min-width: 768px) {
    .pros-and-cons .pros-and-cons-element.cons .icon-not-available {
        line-height: 5rem;
        margin-top: -2.5rem;
        margin-top: -2.5rem;
        margin-bottom: 2rem;
    }
}

.pros-and-cons .pros-and-cons-element.cons .icon-not-available:before {
    color: var(--red);
    content: "\efd6";
    font-family: icomoon;
    font-size: 35px;
}

.pros-and-cons .pros-and-cons-element.cons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pros-and-cons .pros-and-cons-element.cons ul li {
    position: relative;
    padding-left: 1.5rem;
}

.pros-and-cons .pros-and-cons-element.cons ul li:before {
    color: var(--red);
    content: "\efd6";
    font-family: icomoon;
    background-color: transparent;
    top: 0;
    left: 0;
    width: .625rem;
    height: .625rem;
    position: absolute;
}

@media all and (min-width: 768px) {
    .pros-and-cons {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------brand rating----------- */
.brand-rating {
    background: var(--white);
    box-shadow: rgba(88, 102, 126, .08) 0 4px 24px, rgba(88, 102, 126, .12) 0 1px 2px;
    border-radius: 8px;
    border: 1px solid rgba(151, 151, 151, .2);
}

.brand-rating .brand-rating-header {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-rows: auto;
    padding: .875rem;
    grid-template-areas: "img title" "img stars" "img btn";
    row-gap: .75rem;
    column-gap: 1.5rem;
}

.brand-rating .brand-rating-header .image {
    grid-area: img;
    height: 150px;
    width: 300px;
    border: 1px solid rgba(151, 151, 151, .2);
    border-radius: 8px;
    overflow: hidden;
}

.brand-rating .brand-rating-header .brand-rating-title {
    grid-area: title;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 27px;
    margin-top: 0;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
}

.brand-rating .brand-rating-header .brand-rating-title > * {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    text-decoration: inherit;
}

.brand-rating .brand-rating-header .stars {
    grid-area: stars;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.brand-rating .brand-rating-header .stars .rating-stars {
    margin-right: 1rem;
}

.brand-rating .brand-rating-header .stars .span-rating-stars {
    font-weight: 600;
}

.brand-rating .brand-rating-header .button {
    grid-area: btn;
    max-width: 190px;
}

@media all and (max-width: 992px) {
    .brand-rating .brand-rating-header .image {
        height: 100px;
        width: 200px;
    }

    .brand-rating .brand-rating-header {
        grid-template-columns: 200px auto;
    }
}

@media all and (max-width: 575px) {
    .brand-rating .brand-rating-header {
        display: grid;
        grid-template-columns: 90px auto;
        grid-template-rows: auto;
        padding: .625rem;
    }

    .brand-rating .brand-rating-header .image {
        height: 50px;
        width: 100px;
    }
}

@media all and (max-width: 375px) {
    .brand-rating .brand-rating-header .stars {
        flex-wrap: wrap;
    }
}

@media all and (max-width: 320px) {
    .brand-rating .brand-rating-header {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "img" "title" "stars " "btn";
    }
}

.brand-rating .brand-rating-list {
    margin: 0;
}

.brand-rating .brand-rating-item {
    display: block;
    border-bottom: 1px solid rgba(151, 151, 151, .2);
}

.brand-rating .brand-rating-item .brand-rating-content {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
}

.brand-rating .brand-rating-item .brand-rating-content .rating-value meter {
    min-width: 140px;
    margin-right: 10px;
    min-height: 18px;
}

@media all and (max-width: 768px) {
    .brand-rating .brand-rating-item .brand-rating-content .rating-value meter {
        min-width: unset;
        min-height: unset;
    }
}

@media all and (max-width: 520px) {
    .brand-rating .brand-rating-item .brand-rating-content .rating-value {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }

    .brand-rating .brand-rating-item .brand-rating-content .rating-value meter {
        margin-right: 0;
    }
}

.brand-rating .brand-rating-item .brand-rating-content .rating-value span {
    font-size: .875rem;
}

@media all and (max-width: 575px) {
    .brand-rating .brand-rating-item .brand-rating-content {
        padding: .625rem;
    }
}

@media all and (max-width: 480px) {
    .brand-rating .brand-rating-item .brand-rating-content .rating-title {
        font-size: .875rem;
    }
}

.brand-rating .brand-rating-item:first-child {
    border-top: 1px solid rgba(151, 151, 151, .2);
}

.brand-rating .brand-rating-item:last-child {
    border-bottom: none;
}


/* ------------FAQ-------------- */

.section-faq {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-faq > div {
    box-shadow: 0 6px 8px -6px rgba(24, 39, 75, 0.12), 0 0 1px 0 rgba(10, 16, 32, 0.16);
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;

}

.section-faq > div > h2,
.section-faq > div > h3,
.section-faq > div > h4,
.section-faq > div > h5,
.section-faq > div > h6,
.section-faq > div > p {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    line-height: 1.25;
    padding: 16px 12px;
    cursor: pointer;
}

.section-faq > div > h2 > span,
.section-faq > div > h3 > span,
.section-faq > div > h4 > span,
.section-faq > div > h5 > span,
.section-faq > div > h6 > span,
.section-faq > div > p > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-faq > div > h2 > span:before,
.section-faq > div > h3 > span:before,
.section-faq > div > h4 > span:before,
.section-faq > div > h5 > span:before,
.section-faq > div > h6 > span:before,
.section-faq > div > p > span:before {
    content: "\edb8";
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--accent);
    transform: rotate(0deg);
    transition: transform .3s ease-in-out;
}

.section-faq > div.active > h2 > span:before,
.section-faq > div.active > h3 > span:before,
.section-faq > div.active > h4 > span:before,
.section-faq > div.active > h5 > span:before,
.section-faq > div.active > h6 > span:before,
.section-faq > div.active > p > span:before {
    transform: rotate(180deg);
}

.section-faq > div > div {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.4s ease-in-out, opacity 0.3s ease-in-out 0.1s;
}

.section-faq > div.active > div {
    opacity: 1;
    overflow: initial;
}

.section-faq > div > div > p {
    padding: 0 12px 16px;
}


/*----------quick nav-----------*/
.general-tab-wrapper {
    width: 100%;
}

.general-tab-wrapper ul {
    list-style: none;
    margin: 0;
    padding-left: 0
}

.general-tab-wrapper a {
    display: block;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
    width: fit-content;
    font-weight: 500;
    line-height: 1.5rem;
    text-underline-offset: 5px;
}

.general-tab-wrapper a:hover {
    color: var(--accent);
}

.general-tab-wrapper > div:first-child {
    padding: 0.625rem 0.75rem;
    background-color: white;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--dark);
    grid-column: 2;
    grid-row: 3;
    margin-top: 1rem;
    transition: color 0.3s ease-in-out;
    @media screen and (min-width: 767px) {
        min-height: 2.5rem;
    }
    @media screen and (min-width: 768px) {
        padding: 1.25rem;
        height: 3.75rem;
    }
}

.general-tab-wrapper > div:first-child:hover {
    color: var(--accent);
}

.general-tab-wrapper > div:first-child > p {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.general-tab-wrapper > div:first-child > p:before {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.general-tab-wrapper > div:nth-child(2) {
    display: none;
    background-color: white;
    border-radius: 0.5rem;
}

.general-tab-wrapper.active > div:nth-child(2) {
    display: grid;
    grid-column: 1/-1;
    grid-row: 4;
    margin-top: 1.25rem;
    padding: 1rem 0.75rem 0.5rem;
    @media screen and (min-width: 768px) {
        margin-top: 1rem;
        padding: 1.25rem 1.25rem 0.75rem 1.25rem;

    }
}

.general-tab-wrapper > div:nth-child(2) > div:first-child {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e6e6e6;
    @media screen and (min-width: 768px) {
        max-height: 21.75rem;
        padding-bottom: 1.75rem;
    }
}

.general-tab-wrapper > div:nth-child(2) > div > ul {
    overflow-y: auto;
    max-height: 36.75rem;
    @media screen and (min-width: 768px) {
        max-height: 21.75rem;
    }
}

.general-tab-wrapper > div:nth-child(2) > div > ul,
.general-tab-wrapper > div:nth-child(2) > div > ul > li,
.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul,
.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul > li,
.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul > li > ul {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul,
.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul > li > ul {
    padding-left: 1.25rem;
}

.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul > li > a {
    font-size: 0.9375rem;
}

.general-tab-wrapper > div:nth-child(2) > div > ul > li > ul > li > ul > li > a {
    font-size: 0.875rem;
}

.general-tab-wrapper > div:nth-child(2) > *:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem;
    width: fit-content;
    margin: 0.75rem auto 0;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.3s ease-in-out;

}

.general-tab-wrapper > div:nth-child(2) > *:last-child:hover {
    color: var(--accent);
}