@font-face {
  font-family: stsvg;
  src:  url('../fonts/stsvg.eot?plodre');
  src:  url('../fonts/stsvg.eot?plodre#iefix') format('embedded-opentype'),
    url('../fonts/stsvg.ttf?plodre') format('truetype'),
    url('../fonts/stsvg.woff?plodre') format('woff'),
    url('../fonts/stsvg.svg?plodre#stsvg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body.custom-background {
    background-color: #ffffff;
}

.st-blackboard-row-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

ul.st-tick li::before {
    content: "\f00c\00a0\00a0" !important;
    color: #33cb9c !important;
}

ul.st-cross li::before {
    content: "\f00d\00a0\00a0" !important;
    color: #ff0000 !important;
}

@media only screen and (max-width: 959px) {
    #header-l {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    .st-blackboard-row-wrap {
        grid-template-columns: 1fr;
        gap: 0px;
    }
}

/* toplist-ocr */
.toplist-ocr__wrapper {
    margin: 32px 0 40px
}

.toplist-ocr__offers {
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 4px #0000000a, 0 2px 4px #0000000a
}

.toplist-ocr__offer {
    display: grid;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    grid-template-areas: 'logo title extra';
    grid-template-columns: 170px auto 170px;
    grid-template-rows: 1fr
}

.toplist-ocr__offer:last-of-type {
    border-bottom: unset
}

.toplist-ocr__offer.hidden {
    display: none
}

.toplist-ocr__offer-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: logo
}

.toplist-ocr__offer-logo {
    flex-shrink: 0
}

.toplist-ocr__offer-logo img {
    width: 195px;
    height: 69px;
    object-fit: contain
}

.toplist-ocr__offer-main {
    display: flex;
    align-items: center;
    grid-area: main
}

.toplist-ocr__offer-rating-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    width: 62px;
    height: 62px
}

.toplist-ocr__offer-rating-circle {
    position: absolute;
    transform: rotate(-90deg)
}

.toplist-ocr__offer-rating-circle .bg {
    fill: none;
    stroke: #ace9ff;
    stroke-width: 3.44
}

.toplist-ocr__offer-rating-circle .progress {
    transition: stroke-dashoffset .5s ease-out;
    fill: none;
    stroke: #27bef4;
    stroke-dasharray: 175.93;
    stroke-dashoffset: calc(175.93 - (175.93 * var(--percent)) / 100);
    stroke-width: 3.44
}

.toplist-ocr__offer-rating-score {
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    z-index: 1;
    text-align: center;
    color: #2839a2
}

.toplist-ocr__offer-rating-rated {
    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    line-height: 18px;
    z-index: 1;
    text-align: center;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #2839a199
}

.toplist-ocr__offer-key-feature {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: #2839a1d8
}

.toplist-ocr__offer-title {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: title
}

.toplist-ocr__offer-title,.toplist-ocr__offer-title p {
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 26px;
    text-align: center;
    color: #c3ad5a;
}

.toplist-ocr__offer-title p {
    margin: 0;
    padding: 0
}

.toplist-ocr__offer-title span {
    font-weight: 700
}

.toplist-ocr__offer-extra {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    grid-area: extra
}

.toplist-ocr__offer-cta-btn {
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 80px;
    background: #222;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.24), 0 4px 16px rgba(34, 34, 34, 0.36);
    gap: 8px;
    text-decoration: none;
}

.toplist-ocr__offer-cta-btn:after {
    width: 16px;
    height: 16px;
    content: '';
    background-image: url(data:image/svg+xml,%3Csvg\ width=\'17\'\ height=\'16\'\ viewBox=\'0\ 0\ 17\ 16\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath\ d=\'M14.542\ 14.5425H2.45703C2.32442\ 14.5425\ 2.19725\ 14.4898\ 2.10348\ 14.3961C2.00971\ 14.3023\ 1.95703\ 14.1751\ 1.95703\ 14.0425V1.95752C1.95703\ 1.82491\ 2.00971\ 1.69773\ 2.10348\ 1.60397C2.19725\ 1.5102\ 2.32442\ 1.45752\ 2.45703\ 1.45752H8.49953C8.63214\ 1.45752\ 8.75932\ 1.5102\ 8.85309\ 1.60397C8.94685\ 1.69773\ 8.99953\ 1.82491\ 8.99953\ 1.95752C8.99953\ 2.09013\ 8.94685\ 2.2173\ 8.85309\ 2.31107C8.75932\ 2.40484\ 8.63214\ 2.45752\ 8.49953\ 2.45752H2.95703V13.5425H14.042V8.00002C14.042\ 7.86741\ 14.0947\ 7.74023\ 14.1885\ 7.64647C14.2822\ 7.5527\ 14.4094\ 7.50002\ 14.542\ 7.50002C14.6746\ 7.50002\ 14.8018\ 7.5527\ 14.8956\ 7.64647C14.9894\ 7.74023\ 15.042\ 7.86741\ 15.042\ 8.00002V14.0425C15.042\ 14.1751\ 14.9894\ 14.3023\ 14.8956\ 14.3961C14.8018\ 14.4898\ 14.6746\ 14.5425\ 14.542\ 14.5425Z\'\ fill=\'white\'/%3E%3Cpath\ d=\'M15.0315\ 1.86003C15.0315\ 1.84503\ 15.0315\ 1.83003\ 15.019\ 1.81753C15.0149\ 1.80062\ 15.0099\ 1.78393\ 15.004\ 1.76753C14.9966\ 1.75041\ 14.9883\ 1.73372\ 14.979\ 1.71753C14.979\ 1.71753\ 14.979\ 1.69253\ 14.959\ 1.68003C14.9226\ 1.62564\ 14.8759\ 1.57893\ 14.8215\ 1.54253L14.784\ 1.52253L14.734\ 1.49753L14.684\ 1.48253L14.639\ 1.47003C14.6074\ 1.46702\ 14.5756\ 1.46702\ 14.544\ 1.47003H10.834C10.7014\ 1.47003\ 10.5742\ 1.52271\ 10.4805\ 1.61648C10.3867\ 1.71025\ 10.334\ 1.83743\ 10.334\ 1.97003C10.334\ 2.10264\ 10.3867\ 2.22982\ 10.4805\ 2.32359C10.5742\ 2.41736\ 10.7014\ 2.47003\ 10.834\ 2.47003H13.334L8.14653\ 7.64753C8.05271\ 7.74135\ 8\ 7.8686\ 8\ 8.00129C8\ 8.13397\ 8.05271\ 8.26121\ 8.14653\ 8.35503C8.24035\ 8.44885\ 8.3676\ 8.50156\ 8.50028\ 8.50156C8.63296\ 8.50156\ 8.76021\ 8.44885\ 8.85403\ 8.35503L14.0415\ 3.16503V5.66503C14.0415\ 5.79764\ 14.0942\ 5.92482\ 14.188\ 6.01859C14.2817\ 6.11236\ 14.4089\ 6.16503\ 14.5415\ 6.16503C14.6741\ 6.16503\ 14.8013\ 6.11236\ 14.8951\ 6.01859C14.9888\ 5.92482\ 15.0415\ 5.79764\ 15.0415\ 5.66503V1.95753C15.0414\ 1.92479\ 15.038\ 1.89213\ 15.0315\ 1.86003Z\'\ fill=\'white\'/%3E%3C/svg%3E%0A);
    background-repeat: no-repeat;
    background-position: center
}

.toplist-ocr__offer-cta-btn:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(34, 34, 34, 0.8);
}

.toplist-ocr__offer-accepted-players {
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #2839a1d8;
    gap: 8px
}

@media screen and (min-width: 992px) {
    .toplist-ocr__offers {
        overflow:hidden;
        border-radius: 8px
    }

    .toplist-ocr__offer-logo-wrapper {
        padding-right: 24px;
        border-right: .5px solid #d3d3d3
    }

    .toplist-ocr__offer-title {
        height: 100%;
        margin: -16px 16px -16px 0px;
        padding: 16px;
        background: #fafafa;
    }

    .toplist-ocr__offer-main {
        gap: 24px
    }
}

@media screen and (max-width: 991px) {
    .toplist-ocr__wrapper {
        margin:16px 0 24px
    }

    .toplist-ocr__offers {
        gap: 1px
    }

    .toplist-ocr__offer {
        position: relative;
        overflow: hidden;
        padding: 16px;
        border-radius: 8px;
        background: #f5f8ff;
        gap: 0;
        grid-template-areas: 'logo' 'title' 'extra';
        grid-template-columns: auto
    }

    .toplist-ocr__offer-logo-wrapper {
        margin: -16px -16px 0;
        padding: 18px 0;
        background: #fff
    }

    .toplist-ocr__offer-logo img {
        width: 155.17px;
        height: 64.8px
    }

    .toplist-ocr__offer-rating-wrapper {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 54px;
        height: 54px
    }

    .toplist-ocr__offer-rating-circle {
        width: 54px;
        height: 54px
    }

    .toplist-ocr__offer-rating-score {
        font-size: 16px;
        font-weight: 600;
        line-height: 15px
    }

    .toplist-ocr__offer-rating-rated {
        line-height: 16px
    }

    .toplist-ocr__offer-title {
        margin-top: 12px
    }

    .toplist-ocr__offer-title,.toplist-ocr__offer-title p {
        font-size: 18px;
        line-height: 1.56;
    }

    .toplist-ocr__offer-main {
        justify-content: center
    }

    .toplist-ocr__offer-key-feature {
        font-size: 12px;
        line-height: 18px;
        text-align: center
    }

    .toplist-ocr__offer-extra {
        margin-top: 12px
    }

    .toplist-ocr__offer-cta-btn {
        font-size: 16px;
        line-height: 28px
    }

    .toplist-ocr__offer-accepted-players {
        line-height: 18px
    }
}