/*NEW TOPS*/
.topnew .tops.tops-new-dsgn {
    background: transparent !important
}

.home-top-new > div.socialproof:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -11px;
    top: 15px;
    background: transparent;
    border-top: 5px solid #284515;
    border-right: 5px solid #284515;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent
}

.home-top-new > div.socialproof:after {
    width: 128px;
    height: 20px;
    position: absolute;
    left: -11px;
    top: -5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #fff;
    line-height: 20px;
    font-size: 12px;
    padding-left: 10px;
    text-align: left
}

.home-top-item {
    display: grid;
    grid-template-columns: 5% repeat(4, 1fr)
}

.number-top {
    grid-area: number-top
}

.thumb-box {
    grid-area: thumb-box
}

.casino-name {
    grid-area: casino-name
}

.bons-box {
    grid-area: bons-box
}

.top-item-btn {
    grid-area: top-item-btn
}

.home-top-item {
    grid-template-areas: "number-top thumb-box casino-name bons-box top-item-btn"
}

.container-top {
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(19, 69, 99, 1), rgba(19, 69, 99, 1), rgba(39, 140, 201, 1));
    padding: 80px 30px 0 30px;
    position: relative;
    z-index: 1
}

.container-top-inner {
    display: flex;
    max-width: 1300px;
    margin: 0 auto
}

.left-side {
    width: 33%;
    height: fit-content;
    padding-right: 50px;
    border-radius: 10px;
    color: white;
    margin: auto 0
}

.right-side {
    width: 67%;
    height: fit-content;
    padding-left: 20px;
    border-radius: 10px
}

.top-inner-section {
    display: flex;
    height: fit-content;
    max-width: 1300px;
    margin-bottom: 130px
}

.top-inner-section.reduce-margin-bottom {
    margin-bottom: 35px
}

.author-info {
    display: flex;
    align-items: flex-start;
    gap: 2px
}

.author-info img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 10px
}

.author-name {
    font-weight: bold;
    font-size: 18px
}

.author-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.reviews-box {
    padding: 20px;
    border-radius: 10px
}

.bottom-text-box {
    margin: -90px auto 0 auto;
    width: auto;
    max-width: 1260px;
    padding: 20px;
    background-color: white;
    color: black;
    border-radius: 10px;
    position: relative;
    z-index: 1
}

.bottom-text-box > h1 {
    color: #000;
    font-size: 20px;
    font-weight: 700
}

.left-side > h1 {
    color: white;
    margin-bottom: 0
}

.top-author-name > span {
    font-weight: 700;
    margin-right: 5px
}

p.top-author-name {
    margin-bottom: 5px !important
}

.top-author-name {
    color: white
}

.number-top {
    background: var(--color-box-header);
    color: #343a40;
    width: 31px;
    height: 60px;
    gap: 0px;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    justify-content: center;
    align-items: center
}

.tops-bn-right-content .number-top {
    color: #4A4A4A
}

.home-top-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 3px;
    position: relative;
    border: solid 1px rgba(0, 0, 0, 0.075);
    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.075);
    padding: 20px 0
}

.number-top-span {
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-align: center
}

.home-top-item .thumb-box {
    width: 20%;
    position: relative;
    text-align: center;
    min-width: 140px;
    max-width: 200px
}

.home-top-item .thumb-box img {
    width: 100%;
    max-width: 150px;
    height: 60px;
    display: inline-block
}

.home-top-item > .top-item-btn > a {
    max-width: 170px;
    display: block;
    margin: 0 20px 0 auto;
    height: 50px;
    line-height: 50px
}

.home-top-item > div {
    box-sizing: border-box;
    flex-grow: 1
}

.home-top-item .top-item-btn {
    padding: 0 1%;
    min-width: 200px
}

.home-top-item > .number-top {
    flex-grow: 0
}

.home-top-item .casino-name {
    display: flex;
    flex-direction: column;
    align-items: center
}

.home-top-item .casino-name span, .home-top-item .casino-name a {
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    color: #343A40;
    /*margin: 0 0 15px;*/
}

.casino-name-rating {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    text-align: center
}

.bons-box {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    display: grid;
    justify-items: center;
    min-height: 80px;
    align-items: center;
    gap: 10px;
    width: 20%
}

.bons-box-top {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: center
}

.bons-box-top > span {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    display: block
}

.home-top-new {
    display: flex;
    margin: 0 0 25px 0;
    grid-gap: 25px;
    flex-direction: column
}

.tops-new-dsgn .casino-name .stars {
    margin-top: 6px;
    margin-bottom: 10px;
    width: 90px;
    min-width: unset;
    height: 17px;
    display: flex;
    background: #fff url(../images/home_stars_new.png) left bottom repeat-x
}

.tops-new-dsgn .casino-name .stars_in {
    height: 100%;
    width: 100%;
    background: #fff url(../images/home_stars_new.png) left top repeat-x
}

.tops__wrapper .topnew_title {
    font-size: var(--h2-size);
    line-height: var(--h2-line);
    color: var(--color-accent);
    font-weight: 700;
    display: block;
    text-align: center;
    border-bottom: none;
    margin: 0 0 20px;
    padding: 0;
}

.button, .ctabox > a {
    display: grid;
    align-items: center;
    cursor: pointer;
    appearance: none;
    margin: 0;
    font-size: 16px;
    background: var(--color-cta-button);
    color: var(--color-text-on-cta-button);
    text-align: center;
    padding: 3px;
    line-height: 1;
    min-width: 90px;
    border-radius: 3px;
    text-transform: uppercase;
    border: none;
    font-weight: bold;
}

.ctabox {
    text-align: center;
    padding: 5px 0 25px;
    contain: content;
}

a.nvisit1, .ctabox a {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    padding: 8px 20px;
    color: #fff;
    margin-top: 10px;
    vertical-align: top;
    background: var(--color-cta-button);
    border-radius: 5px;
    line-height: 30px;
}

.button:hover, a.nvisit1:hover, .ctabox a:hover,
.button:focus, a.nvisit1:focus, .ctabox a:focus {
    text-decoration: none;
    outline: none;
    background: var(--color-hover-on-cta-button);
}

@media only screen and (max-width: 932px) {
    .tops-new-dsgn .home-top-item > .top-item-btn > a {
        grid-template-columns: initial !important;
        padding-inline: 16px !important;
    }

    .tops-new-dsgn .home-top-item > .top-item-btn > a svg {
        display: none
    }

    div.full_new div.topnew_wrapper {
        grid-area: unset
    }

    .bottom-text-box > h1 {
        line-height: normal
    }

    .home-top-item > .top-item-btn > a {
        margin: 0 auto;
        max-width: calc(100% - 40px)
    }

    .bons-box {
        min-height: fit-content
    }

    .home-top-item {
        padding: 16px 0;
        height: 185px
    }

    .home-top-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "thumb-box bons-box" "casino-name top-item-btn"
    }

    .number-top {
        display: none
    }

    .thumb-box {
        border-right: #F0F1F5 solid 2px;
        height: 100%;
        grid-area: thumb-box
    }

    .thumb-box > a {
        margin-left: auto;
        margin-right: auto
    }

    .home-top-item .thumb-box {
        max-width: 100%;
        width: 100%;
        display: flex;
        align-items: center
    }

    .home-top-item .casino-name {
        width: 100%
    }

    .casino-name {
        border-right: #F0F1F5 solid 2px;
        grid-area: casino-name;
        height: 100%
    }

    .bons-box {
        grid-area: bons-box;
        width: 100%
    }

    .top-item-btn {
        grid-area: top-item-btn
    }

    .home-top-item .top-item-btn {
        padding: 0 10px;
        min-width: 100%;
        width: 100%
    }

    .home-top-item {
        grid-gap: 0
    }

    .errorMessage::after {
        margin: 0 0 0 -90%
    }
}

.topnew{position: relative;margin-bottom: 0;}
.filters-wrapper::-webkit-scrollbar{display: none}
.tops-new-dsgn{width: 100%; clear: left}
.top-item-btn span.cta__text__span{padding-inline-start: 12px}
.tops-new-dsgn .home-top-item-container{border: solid 1px rgba(0, 0, 0, 0.075); box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.075); border-radius: 3px; margin-top: 25px}
.tops-new-dsgn .home-top-item-container:first-child{margin-top: 0}
.tops-new-dsgn .home-top-item-container.with-ribbon{margin-top: 26px}
.tops-new-dsgn .home-top-new{gap: unset}
.tops-new-dsgn .home-top-item > span.brand-ribbon:before{content: ""; width: 0; height: 0; position: absolute; left: -11px; top: 15px; background: transparent; border-top: 5px solid #000; border-right: 5px solid #000; border-left: 5px solid transparent; border-bottom: 5px solid transparent}
.tops-new-dsgn .home-top-item > span.brand-ribbon{content: attr(data-rib-text); width: fit-content; position: absolute; left: -11px; top: -5px; border-radius: 3px 3px 3px 0; color: #801819; line-height: 20px; font-size: 12px; font-weight: 700; padding-inline: 10px}
.tops-new-dsgn .home-top-item-container span.brand-ribbon{line-height: 28px; font-size: 14px; border-radius: unset; top: -15px}
.tops-new-dsgn .home-top-item-container span.brand-ribbon::before{left: 0; top: 28px}
.exclusive-brand{font-size: 14px; color: #801819; background: #FFDF59; border-radius: 8px 0 8px 0; padding: 8px 10px; font-weight: 600; line-height: 16px}
.exclusive-brand > img{margin-top: 0}
.exclusive-brand > svg path{fill: var(--review-header-exclusive-bonus-tag-text-color); stroke:  var(--review-header-exclusive-bonus-tag-text-color)}
.tops-new-dsgn .home-top-item-container .home-top-item .number-top{height: 48px; width: 4%}
.tops-new-dsgn .home-top-item-container .home-top-item .number-top .number-top-span{font-size: 12px}
.tops-new-dsgn .home-top-item-container .home-top-item .casino-name{width: 18%; max-width: unset}
.tops-new-dsgn .home-top-item-container .home-top-item .casino-name .stars, .tops-new-dsgn .home-top-item-container .home-top-item .casino-name .stars_in{background-image: url(../img/commons/clf/home_stars_new.svg); margin-bottom: 6px; transform: scale(1)}
.tops-new-dsgn .home-top-item-container .casino-name > a{font-size: 18px; line-height: 27px}
.tops-new-dsgn .home-top-item-container .casino-name > a:hover{text-decoration: underline}
.tops-new-dsgn .home-top-item-container{border: solid 1px rgba(0, 0, 0, 0.075); box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.075); border-radius: 3px}
.tops-new-dsgn .home-top-item-container .home-top-item{border: unset; box-shadow: unset; padding-block: 26px; height: auto}
.brand-terms{background: #f4f4f4; font-size: 12px; line-height: 16px; padding: 10px 16px; border-radius: 0 0 3px 3px; z-index: 1; color: #4E525D; font-weight: 500}
.brand-terms a{color: #4E525D; font-weight: 700}
.tops-new-dsgn .home-top-item-container .top-rating-wrap{display: flex; flex-direction: column}
.tops-new-dsgn .home-top-item-container.x2973 .casino-name{gap: 6px; padding-inline: 10px}
.tops-new-dsgn .home-top-item-container.x2973 .casino-name .stars{transform: unset !important}
.tops-new-dsgn .home-top-item-container.x2973 .top-rating-wrap{flex-direction: row; gap: 6px}
.tops-new-dsgn .home-top-item-container.x2973 .top-rating-wrap .stars{margin-top: 8px}
.tops-new-dsgn .home-top-item-container .casino-name-rating{font-size: 24px; font-weight: 800}
.tops-new-dsgn .home-top-item-container .bons-box{width: 24%; font-size: 1.565rem; padding-inline: 20px; line-height: 35px}
.tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 25px; line-height: 35px; font-weight: 800}
.tops-new-dsgn .home-top-item-container .bons-box .bons-box-top.no-biggest-bonus{background: rgba(244, 244, 244, 1); width: 100%;}
.tops-new-dsgn .home-top-item-container .bons-box .bons-box-top span{font-size: 18px; line-height: 27px; font-weight: 700}
.tops-new-dsgn .home-top-item > .top-item-btn{min-width: inherit; width: 24%; padding: 0 30px 0 10px}
.tops-new-dsgn .home-top-item > .top-item-btn > a{font-size: 18px; line-height: 24px !important; min-width: 100%; height: auto; padding: 16px 10px 16px 20px; position: relative; margin: 0; display: grid; justify-content: center; align-items: center; gap: 10px; grid-template-columns: 2fr 0fr; border-radius: 8px; max-width: 300px}
.tops-new-dsgn .home-top-item-container.x2973 .home-top-item > .top-item-btn > a{background: rgba(2, 139, 9, 1)}
.tops-new-dsgn .home-top-item > .top-item-btn > a svg{visibility: hidden; float: right; height: 14px; width: 14px;}
.tops-new-dsgn .home-top-item > .top-item-btn > a:hover{background-color: var(--color-hover-on-cta-button) !important; box-shadow: none}
.tops-new-dsgn .home-top-item > .top-item-btn > a:hover svg{visibility: visible}
.tops-new-dsgn .home-top-item .thumb-box > a{display: block; width: 268px; height: 107px}
.tops-new-dsgn .home-top-item .thumb-box img{float: left; max-width: 268px}
.tops-new-dsgn .home-top-item .thumb-box{max-width: 268px; margin-left: 1.9%; width: 22.1%}
.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{width: 100%; height: auto}
.tops-new-dsgn .home-top-item-container.x2973 .home-top-item > .thumb-box, .tops-new-dsgn .home-top-item-container.x2973 .home-top-item > .casino-name, .tops-new-dsgn .home-top-item-container.x2973 .home-top-item > .top-item-btn{width: 32%}
.tops-new-dsgn .home-top-item-container.x2973 .home-top-item > .top-item-btn{width: calc(32% - 50px)}
.tops-new-dsgn .home-top-item-container.x2973 .home-top-item > .top-item-btn a{min-width: unset; max-width: 300px; margin: 0 auto}
@media (max-width: 1208px){.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{/*width: 208px;*/ /*height: 74px;*/}
    .tops-new-dsgn .home-top-item-container .casino-name > a{font-size: 18px; line-height: 27px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 25px; line-height: 35px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top span{font-size: 18px; line-height: 25px}
    .tops-new-dsgn .home-top-item-container .home-top-item .number-top .number-top-span{font-size: 12px}}
@media (max-width: 918px){.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{/*width: 200px;*/ /*height: 80px;*/}
    .tops-new-dsgn .home-top-item .thumb-box{margin-left: 1.2%; width: 22.8%}
    .tops-new-dsgn .home-top-item-container .casino-name > a:hover{text-decoration: unset}
    .tops-new-dsgn .home-top-item-container .bons-box{ width: 20%;  padding-inline: 10px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 22px; line-height: 28px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top span{font-size: 16px; line-height: 24px}
    .tops-new-dsgn .home-top-item-container .home-top-item .number-top .number-top-span{ font-size: 12px}
    .tops-new-dsgn .home-top-item > .top-item-btn{ padding: 0 40px 0 10px}
    .top-item-btn span.cta__text__span{padding-inline-start: unset}
    .exclusive-brand{font-size: 12px; padding-block: 4px}
    .exclusive-brand > img{margin-top: 3px; height: 10px; width: 10px}
    .tops-new-dsgn .home-top-item-container .home-top-item .number-top{height: 36px; width: 4%}}
@media (max-width: 818px){.tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 25px; line-height: 35px}
    .tops-new-dsgn .home-top-item-container .home-top-item .number-top .number-top-span{font-size: 11px}}
@media (max-width: 932px){.tops-new-dsgn{display: block !important; padding: 0 !important}
    .tops-new-dsgn .home-top-item .thumb-box, .tops-new-dsgn .home-top-item-container .home-top-item .casino-name, .tops-new-dsgn .home-top-item-container .bons-box, .tops-new-dsgn .home-top-item > .top-item-btn{margin: 0; width: 100% !important; max-width: inherit}
    .tops-new-dsgn .home-top-item .thumb-box, .tops-new-dsgn .home-top-item-container .home-top-item .casino-name{padding-inline: 8%}
    .tops-new-dsgn .home-top-item-container.x2973 .casino-name{gap: unset}
    .tops-new-dsgn .home-top-item-container.x2973 .top-rating-wrap{flex-direction: column; gap: unset}
    .tops-new-dsgn .home-top-item-container.x2973 .top-rating-wrap .stars{margin-top: 6px}
    .tops-new-dsgn .home-top-item-container .home-top-item .casino-name .stars{margin-bottom: 10px}
    .tops-new-dsgn .home-top-item .thumb-box{margin-block: 30px}
    .tops-new-dsgn .home-top-item-container.x2973 .home-top-item .thumb-box{margin: 0}
    .tops-new-dsgn .home-top-item-container.x2973 .home-top-item .thumb-box a, .tops-new-dsgn .home-top-item-container.x2973 .home-top-item .thumb-box img{margin-top: 0}
    .tops-new-dsgn .home-top-item-container .casino-name > a{font-size: 16px; line-height: 24px}
    .tops-new-dsgn .home-top-item-container .casino-name-rating{font-size: 30px; line-height: 45px}
    .tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{width: 180px; height: 72.6px}
    .tops-new-dsgn .home-top-item-container.x2973 .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item-container.x2973 .home-top-item .thumb-box img{width: 100%; height: auto}
    .tops-new-dsgn .home-top-item-container .bons-box{padding-inline: 8%}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 30px; line-height: 40px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top span{font-size: 20px; line-height: 30px}
    .tops-new-dsgn .home-top-item > .top-item-btn{padding: 0 5.5%; display: flex; height: 100%}
    .tops-new-dsgn .home-top-item-container .home-top-item{grid-template-rows: 1fr 0fr}
    .home-top-item-container.x2973 .home-top-item{gap: 10px 0; padding-block: 16px; grid-template-rows: 2.5fr 0fr; grid-template-areas: "thumb-box casino-name" "top-item-btn top-item-btn"}
    .tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box > picture > img, .tops-new-dsgn .home-top-item-container .home-top-item .casino-name{margin-top: -35px}
    .tops-new-dsgn .home-top-item-container .home-top-item .casino-name{height: fit-content}
    .tops-new-dsgn .home-top-item-container.x2973 .home-top-item .casino-name{margin-top: 0}
    .tops-new-dsgn .home-top-item-container .home-top-item .casino-name > div.stars{flex-shrink: 0}
    .tops-new-dsgn .home-top-item > .top-item-btn > a{margin-top: auto !important;font-size: 16px;}}
@media (max-width: 738px){.tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 30px; line-height: 40px}}
@media (max-width: 548px){.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{width: 180px; height: 72px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 25px; line-height: 35px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top span{font-size: 18px; line-height: 26px}
    .tops-new-dsgn .home-top-item > .top-item-btn > a{font-size: 15px; padding-block: 10px}}
@media (max-width: 428px){.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{width: 160px; height: 64px}}
@media (max-width: 375px){.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{width: auto; height: 45px}
    .home-top-item .thumb-box{min-width: unset}}
@media (max-width: 280px){.tops-new-dsgn .home-top-item .thumb-box > a, .tops-new-dsgn .home-top-item .thumb-box img{width: 114px; height: 46px}
    .casino-reviews-grid .tops-new-dsgn .home-top-item .thumb-box > a, .casino-reviews-grid .tops-new-dsgn .home-top-item .thumb-box img{width: auto; height: 35px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top{font-size: 20px; line-height: 30px}
    .tops-new-dsgn .home-top-item-container .bons-box .bons-box-top span{font-size: 16px; line-height: 24px}
    .tops-new-dsgn .home-top-item-container .casino-name > a{font-size: 14px; line-height: 20px}
    .home-top-item .thumb-box{min-width: unset}}