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

.Of5dda4__5b2-34344 {
    margin-bottom: 24px;
}

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

.Xf5dda4__98c-d6cc9 {
    box-sizing: border-box;
}

.If5dda4__5d3-fb23a {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0;
    gap: 8px;
}

.Pf5dda4__ff8-98331 {
    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 .Pf5dda4__ff8-98331 {
    color: #fff;
    border-color: #94a0ff;
    background: #040629;
}

.Pf5dda4__ff8-98331.Gf5dda4__fd5-588b2 {
    color: #fff;
    border: 2px solid #0c1434;
    background: #0c1434;
}

body.theme-dark .Pf5dda4__ff8-98331.Gf5dda4__fd5-588b2 {
    color: #0c1434;
    border-color: #f3f2ff;
    background: #f3f2ff;
}

.Tf5dda4__01d-bbd49.Pf5dda4__b92-2dfb3 {
    display: none;
}

.Df5dda4__d36-a327d {
    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 .Df5dda4__d36-a327d {
    border: 1px solid #292b4b;
    background: #0c1434;
}

.Df5dda4__d36-a327d: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 .Df5dda4__d36-a327d:before {
    color: #101019;
    background: #94a0ff;
}

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

.Ef5dda4__f77-eff81 img {
    width: 236px;
    height: 113px;
    object-fit: contain;
}

.Bf5dda4__1d3-91b0f {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 8px;
    grid-area: main;
}

.Zf5dda4__2bf-429ce {
    display: flex;
    align-items: center;
    margin-top: 2px;
    gap: 12px;
}

.Tf5dda4__4e3-7eaf4 {
    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 .Tf5dda4__4e3-7eaf4 {
    color: #b2edc5;
}

.Tf5dda4__4e3-7eaf4 span {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    top: 1px;
}

.Tf5dda4__4e3-7eaf4: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 .Tf5dda4__4e3-7eaf4: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");
}

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

body.theme-dark .Rf5dda4__801-5c9c6 {
    color: #9ce8b4;
}

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

body.theme-dark .Gf5dda4__0a3-96cbd {
    color: #fff;
}

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

.Vf5dda4__cb9-9d2f5 {
    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;
}

.Vf5dda4__cb9-9d2f5:hover {
    border-color: #4856a9;
}

body.theme-dark .Vf5dda4__cb9-9d2f5 {
    border-color: #292b4b;
    background: #292b4b;
}

.If5dda4__589-3198d {
    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 .If5dda4__589-3198d {
    color: #e0dfed;
}

.Tf5dda4__5a1-6d982 {
    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 .Tf5dda4__5a1-6d982 {
    color: #94a0ff;
    border-left-color: #3a4483;
}

.Vf5dda4__cb9-9d2f5:hover .Tf5dda4__5a1-6d982 {
    color: #0c1434;
}

body.theme-dark .Vf5dda4__cb9-9d2f5:hover .Tf5dda4__5a1-6d982 {
    color: #f3f2ff;
}

.Yf5dda4__d47-f4b14 {
    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;
}

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

.Af5dda4__ba8-88e42,
.Af5dda4__ba8-88e42 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 .Af5dda4__ba8-88e42,
body.theme-dark .Af5dda4__ba8-88e42 p {
    color: #8f8ea3;
}

.Cf5dda4__5a8-38e59 {
    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;
}

.Cf5dda4__5a8-38e59:hover {
    cursor: pointer;
    border-color: #e0dfed;
    background: #e0dfed;
}

body.theme-dark .Cf5dda4__5a8-38e59 {
    color: #e0dfed;
    border-color: #94a0ff;
    background: #040629;
}

body.theme-dark .Cf5dda4__5a8-38e59:hover {
    border-color: #292b4b;
    background: #292b4b;
}

body.theme-dark .Bf5dda4__b6b-8486c,
body.theme-dark .Qf5dda4__a69-5145d {
    color: #8f8ea3;
}

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

    .If5dda4__5d3-fb23a::-webkit-scrollbar {
        display: none;
    }

    .Df5dda4__d36-a327d {
        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;
    }

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

    .Ef5dda4__f77-eff81 {
        height: 72px;
        border-radius: 10.667px;
    }

    .Ef5dda4__f77-eff81 img {
        width: 72px;
        height: 34.56px;
        object-fit: contain;
    }

    .Bf5dda4__1d3-91b0f {
        padding: 0;
    }

    .Gf5dda4__0a3-96cbd {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    .Pf5dda4__e9a-48b36 {
        padding: 0;
    }

    .Af5dda4__ba8-88e42,
    .Af5dda4__ba8-88e42 p {
        font-size: 10px;
        line-height: 12px;
    }
}