@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
.register-done-wrapper {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
}
.register-done-wrapper h1,
.register-done-wrapper h2,
.register-done-wrapper h3,
.register-done-wrapper h4,
.register-done-wrapper h5,
.register-done-wrapper h6 {
    font-weight: 800;
}
.register-done-wrapper h1,
.register-done-wrapper h2,
.register-done-wrapper h3,
.register-done-wrapper h4,
.register-done-wrapper h5,
.register-done-wrapper h6,
.register-done-wrapper p {
    color: white;
}
.register-done-wrapper img {
    width: 100%;
}
.register-done-wrapper > *:not(:first-child) {
    margin-top: 40px;
}
.register-done-wrapper > *:last-child {
    margin-bottom: 40px;
}
.register-done-wrapper .banner-wrapper {
    text-align: center;
}
.register-done-wrapper .btn-red {
    display: inline-block;
    background: linear-gradient(182.99deg, #FE3940 19.3%, #631A1C 114.34%);
    color: white;
    border: 1px solid #C42B2F;
    border-radius: 100px;
    text-align: center;
    padding: 12px 10px;
    width: 300px;
    margin-top: 15px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    font-size: 18px;
}
.register-done-wrapper .btn-red::before {
    background-color: rgba(255, 255, 255, .2);
    bottom: 0;
    content: "";
    position: absolute;
    top: 0;
    transform: skew(30deg);
    width: 30px;
    will-change: left;
    z-index: 1;
    animation: flare 5s infinite ease;
}
@keyframes flare {
    0% {
        left: -45px
    }

    20% {
        left: calc(100% + 15px)
    }

    to {
        left: calc(100% + 15px)
    }
}
.register-done-wrapper .info-wrapper {
    background: rgba(82, 96, 112, 0.2);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
}
.register-done-wrapper .info-wrapper .title {
    flex: 0 0 200px;
    max-width: 200px;
    padding-right: 50px;
    margin-bottom: 15px;
}
.register-done-wrapper .info-wrapper .title::after,
.register-done-wrapper .info-wrapper .title::before {
    content: '';
    background-image: url('https://js.analyticpro.online/regis-done/fire.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    display: block;
}
.register-done-wrapper .info-wrapper .title::after {
    display: none;
}
.register-done-wrapper .info-wrapper .title h2 {
    margin: 5px 0;
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item {
    flex: 1 1 0;
    text-align: center;
    margin: 10px;
    border: 1px solid;
    border-radius: 12px;
    padding: 20px;
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item img {
    height: 60px;
    width: 60px;
    object-fit: contain;
    margin: 0 auto 10px;
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item h5 {
    margin: 0;
    line-height: 1.25;
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item h5 span {
    color: rgba(255, 213, 94, 1)
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item.purple {
    background: linear-gradient(291.45deg, #6B24D6 1.37%, #111111 87.05%);
    border-color: rgba(80, 27, 159, 1)
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item.pink {
    background: linear-gradient(111.45deg, #111111 12.95%, #862491 98.63%);
    border-color: rgba(80, 21, 87, 1)
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item.blue {
    background: linear-gradient(111.45deg, #111111 12.95%, #0F4C7D 98.63%);
    border-color: rgba(14, 61, 98, 1)
}
.register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item.green {
    background: linear-gradient(111.45deg, #111111 12.95%, #08796F 98.63%);
    border-color: rgba(7, 69, 66, 1)
}
.register-done-wrapper .games-wrapper .title {
    margin-bottom: 15px;
    text-align: center;
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item {
    flex: 1 1 0;
    margin: 0 10px;
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner {
    display: block;
    position: relative;
    opacity: 0.9;
    transition: all 0.5s;
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner:hover,
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner:active,
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner:focus {
    opacity: 1;
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 55px;
    width: 65px;
    background-size: contain;
    background-repeat: no-repeat;
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner.top-1::before {
    background-image: url('https://js.analyticpro.online/regis-done/top-1.png');
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner.top-2::before {
    background-image: url('https://js.analyticpro.online/regis-done/top-2.png');
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner.top-3::before {
    background-image: url('https://js.analyticpro.online/regis-done/top-3.png');
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner.top-4::before {
    background-image: url('https://js.analyticpro.online/regis-done/top-4.png');
}
.register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item .top-banner.top-5::before {
    background-image: url('https://js.analyticpro.online/regis-done/top-5.png');
}

@media screen and (max-width: 767px) {
    .register-done-wrapper .banner-wrapper .text h1 {
        font-size: 24px;
    }
    .register-done-wrapper .info-wrapper {
        padding: 12px;
    }
    .register-done-wrapper .info-wrapper .title {
        padding-right: 0;
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 0;
    }
    .register-done-wrapper .info-wrapper .title h2 {
        font-size: 20px;
        /* flex: 1 1 0; */
        margin: 5px;
    }
    .register-done-wrapper .info-wrapper .title::before,
    .register-done-wrapper .info-wrapper .title::after {
        display: block;
        width: 18px;
        height: 18px;
    }
    .register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
        padding: 10px;
        text-align: left;
    }
    .register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item a {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;

    }
    .register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item h5 {
        font-size: 12px;
    }
    .register-done-wrapper .info-wrapper .thumbnail-wrapper .thumbnail-item img {
        margin: 0;
        width: 44px;
    }
    .register-done-wrapper .games-wrapper .title h2 {
        font-size: 20px;
    }
    .register-done-wrapper .games-wrapper .thumbnail-wrapper {
        flex-wrap: unset;
        overflow: auto;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .register-done-wrapper .games-wrapper .thumbnail-wrapper::-webkit-scrollbar {
        display: none;
    }
    .register-done-wrapper .games-wrapper .thumbnail-wrapper .thumbnail-item {
        min-width: 150px;
    }
}
.toast-winner {
    max-width: 380px;
    position: fixed;
    top: 75px;
    left: 15px;
    right: 15px;
    margin: 0 auto;
    background: linear-gradient(180deg, #323C46 0%, #1D2023 100%);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 1);
    border-radius: 12px;
    padding: 6px 16px;
    text-align: center;
    z-index: 99;
    display: none;
}
.toast-winner p {
    color: white;
    margin-bottom: 0;
}
.toast-winner .name {
    font-weight: 700;
}
.toast-winner .nominal {
    font-weight: 700;
    color: rgba(53, 247, 255, 1);
}