@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap');

.ff5dda4-d5694b {
    margin-bottom: 24px;
}

.af5dda4-d39940 {
    display: flex;
    flex-direction: column;
    counter-reset: toplist-escapist-counter 0;
    gap: 8px;
}

.mf5dda4-7637c2 {
    box-sizing: border-box;
}

.df5dda4-e532ad {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0;
    gap: 8px;
}

.cf5dda4-e758ce {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 48px;
    padding: 16px;
    cursor: pointer;
    user-select: none;
    color: #0c1434;
    border: 1px solid #0c1434;
    border-radius: 4px;
    background: #fff;
}

body.theme-dark .cf5dda4-e758ce {
    color: #fff;
    border-color: #94a0ff;
    background: #040629;
}

.cf5dda4-e758ce.vf5dda4-fb23cb {
    color: #fff;
    border: 2px solid #0c1434;
    background: #0c1434;
}

body.theme-dark .cf5dda4-e758ce.vf5dda4-fb23cb {
    color: #0c1434;
    border-color: #f3f2ff;
    background: #f3f2ff;
}

.vf5dda4-a8452f.yf5dda4-89357e {
    display: none;
}

.qf5dda4-ed038d {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 238px;
    padding-right: 24px;
    counter-increment: toplist-escapist-counter 1;
    border: 1px solid #e0dfed;
    border-radius: 16px 4px 4px 16px;
    background: #fff;
    gap: 24px;
    grid-template-areas: 'logo main actions';
    grid-template-columns: 236px auto 214px;
    grid-template-rows: 1fr;
}

body.theme-dark .qf5dda4-ed038d {
    border: 1px solid #292b4b;
    background: #0c1434;
}

.qf5dda4-ed038d:before {
    font-family: Rubik, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    content: counter(toplist-escapist-counter);
    text-align: center;
    color: #fff;
    border-radius: 15px 0 4px;
    background: #4856a9;
}

body.theme-dark .qf5dda4-ed038d:before {
    color: #101019;
    background: #94a0ff;
}

.bf5dda4-f0a79a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    grid-area: logo;
}

.bf5dda4-f0a79a img {
    width: 236px;
    height: 113px;
    object-fit: contain;
}

.qf5dda4-ca52c5 {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 8px;
    grid-area: main;
}

.hf5dda4-50ded6 {
    display: flex;
    align-items: center;
    margin-top: 2px;
    gap: 12px;
}

.gf5dda4-52087d {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #1f843f;
}

body.theme-dark .gf5dda4-52087d {
    color: #b2edc5;
}

.gf5dda4-52087d span {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    top: 1px;
}

.gf5dda4-52087d:after {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.0002 14.0001H4.66683V5.33341L9.3335 0.666748L10.1668 1.50008C10.2446 1.57786 10.3085 1.68341 10.3585 1.81675C10.4085 1.95008 10.4335 2.07786 10.4335 2.20008V2.43341L9.70016 5.33341H14.0002C14.3557 5.33341 14.6668 5.46675 14.9335 5.73341C15.2002 6.00008 15.3335 6.31119 15.3335 6.66675V8.00008C15.3335 8.07786 15.3224 8.16119 15.3002 8.25008C15.2779 8.33897 15.2557 8.4223 15.2335 8.50008L13.2335 13.2001C13.1335 13.4223 12.9668 13.6112 12.7335 13.7667C12.5002 13.9223 12.2557 14.0001 12.0002 14.0001ZM6.00016 12.6667H12.0002L14.0002 8.00008V6.66675H8.00016L8.90016 3.00008L6.00016 5.90008V12.6667ZM4.66683 5.33341V6.66675H2.66683V12.6667H4.66683V14.0001H1.3335V5.33341H4.66683Z' fill='%231F843F'/%3E%3C/svg%3E");
}

body.theme-dark .gf5dda4-52087d:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.0002 14.0001H4.66683V5.33341L9.3335 0.666748L10.1668 1.50008C10.2446 1.57786 10.3085 1.68341 10.3585 1.81675C10.4085 1.95008 10.4335 2.07786 10.4335 2.20008V2.43341L9.70016 5.33341H14.0002C14.3557 5.33341 14.6668 5.46675 14.9335 5.73341C15.2002 6.00008 15.3335 6.31119 15.3335 6.66675V8.00008C15.3335 8.07786 15.3224 8.16119 15.3002 8.25008C15.2779 8.33897 15.2557 8.4223 15.2335 8.50008L13.2335 13.2001C13.1335 13.4223 12.9668 13.6112 12.7335 13.7667C12.5002 13.9223 12.2557 14.0001 12.0002 14.0001ZM6.00016 12.6667H12.0002L14.0002 8.00008V6.66675H8.00016L8.90016 3.00008L6.00016 5.90008V12.6667ZM4.66683 5.33341V6.66675H2.66683V12.6667H4.66683V14.0001H1.3335V5.33341H4.66683Z' fill='%23B2EDC5'/%3E%3C/svg%3E");
}

.vf5dda4-8299fb {
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 22px;
    color: #1f843f;
}

body.theme-dark .vf5dda4-8299fb {
    color: #9ce8b4;
}

.df5dda4-07ccfc {
    font-family: Rubik, sans-serif;
    font-size: 23px;
    font-weight: 700;
    font-style: normal;
    line-height: 33px;
    color: #0c1434;
}

body.theme-dark .df5dda4-07ccfc {
    color: #fff;
}

.df5dda4-449119 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0 24px 8px;
    gap: 16px;
    grid-area: actions;
}

.cf5dda4-8e406f {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    cursor: pointer;
    border: 1px solid #f3f2ff;
    border-radius: 4px;
    background: #f3f2ff;
    gap: 12px;
}

.cf5dda4-8e406f:hover {
    border-color: #4856a9;
}

body.theme-dark .cf5dda4-8e406f {
    border-color: #292b4b;
    background: #292b4b;
}

.lf5dda4-9d7e4f {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    width: 100%;
    text-align: center;
    color: #4856a9;
}

body.theme-dark .lf5dda4-9d7e4f {
    color: #e0dfed;
}

.gf5dda4-555bc2 {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 22px;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 12px;
    text-align: center;
    text-transform: uppercase;
    color: #3a4483;
    border-left: 0.5px solid #94a0ff;
}

body.theme-dark .gf5dda4-555bc2 {
    color: #94a0ff;
    border-left-color: #3a4483;
}

.cf5dda4-8e406f:hover .gf5dda4-555bc2 {
    color: #0c1434;
}

body.theme-dark .cf5dda4-8e406f:hover .gf5dda4-555bc2 {
    color: #f3f2ff;
}

.if5dda4-bd9b95 {
    font-family: Rubik, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    color: #fff !important;
    border-radius: 4px;
    background: #f17300;
}

.if5dda4-bd9b95:hover {
    text-decoration: none;
    color: #fff !important;
    background: #b85900;
}

.jf5dda4-de973f,
.jf5dda4-de973f p {
    font-family: Rubik, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    margin: 4px 0 0;
    color: #5a5b76;
}

body.theme-dark .jf5dda4-de973f,
body.theme-dark .jf5dda4-de973f p {
    color: #8f8ea3;
}

.qf5dda4-51755c {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 200px;
    height: 48px;
    margin: 16px auto 0;
    padding: 16px;
    text-align: center;
    color: #0c1434;
    border: 2px solid #94a0ff;
    border-radius: 4px;
    background: #fff;
}

.qf5dda4-51755c:hover {
    cursor: pointer;
    border-color: #e0dfed;
    background: #e0dfed;
}

body.theme-dark .qf5dda4-51755c {
    color: #e0dfed;
    border-color: #94a0ff;
    background: #040629;
}

body.theme-dark .qf5dda4-51755c:hover {
    border-color: #292b4b;
    background: #292b4b;
}

body.theme-dark .qf5dda4-d600d4,
body.theme-dark .yf5dda4-e084c8 {
    color: #8f8ea3;
}

@media (max-width: 991px) {
    .df5dda4-e532ad {
        overflow-x: scroll;
        flex-wrap: nowrap;
        width: 100vw;
        margin: 0 -16px 16px;
        padding: 0 16px;
    }

    .df5dda4-e532ad::-webkit-scrollbar {
        display: none;
    }

    .qf5dda4-ed038d {
        align-items: unset;
        min-height: unset;
        padding: 16px;
        border-radius: 4px;
        gap: 16px 12px;
        grid-template-areas:
            'logo main'
            'actions actions';
        grid-template-columns: 72px auto;
    }

    .qf5dda4-ed038d:before {
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
        width: 32px;
        height: 32px;
        border-radius: 3px 0 4px;
    }

    .bf5dda4-f0a79a {
        height: 72px;
        border-radius: 10.667px;
    }

    .bf5dda4-f0a79a img {
        width: 72px;
        height: 34.56px;
        object-fit: contain;
    }

    .qf5dda4-ca52c5 {
        padding: 0;
    }

    .df5dda4-07ccfc {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    .df5dda4-449119 {
        padding: 0;
    }

    .jf5dda4-de973f,
    .jf5dda4-de973f p {
        font-size: 10px;
        line-height: 12px;
    }
}