jp_bacc _ user

.progress-outer {
                    background: #fff;
                    border-radius: 50px;
                    padding: 15px;
                    margin: 10px 0;
                    box-shadow: 0 0 10px rgba(209, 219, 231, 0.7);
                }

                .progress {
                    height: 27px;
                    margin: 0;
                    overflow: visible;
                    border-radius: 50px;
                    background: #eaedf3;
                    box-shadow: inset 0 10px 10px rgba(244, 245, 250, 0.9);
                }

                .progress .progress-bar {
                    border-radius: 50px;
                }

                .progress .progress-value {
                    top: 4px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #fff;
                    letter-spacing: 2px;
                    text-shadow: 0px 2px 7px rgba(58, 58, 58, 0.9);
                    background: rgba(56, 56, 56, 0.2);
                    padding: 0px 15px;
                    border-radius: 25px;
                    left: 50px;
                    position: absolute;
                    top: auto;
                }

                .progress-bar.active {
                    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
                }

                @-webkit-keyframes animate-positive {
                    0% {
                        width: 0%;
                    }
                }

                @keyframes animate-positive {
                    0% {
                        width: 0%;
                    }
                }

                .gg_lasvegas {
                    border: none;
                    color: rgba(255, 255, 255, 0.6);
                    text-shadow:
                        1px 5px 4px rgba(0, 0, 0, .3),
                        0 0 2px rgba(255, 255, 255, 1),
                        0 0 10px rgba(255, 255, 255, 1),
                        0 0 20px rgba(255, 255, 255, 1),
                        0 0 30px rgba(255, 255, 255, 1),
                        0 0 40px #F9DB01,
                        0 0 70px #F9DB01,
                        0 0 80px #F9DB01,
                        0 0 100px #F9DB01;

                }


                .gg_lasvegas h1,
                .gg_lasvegas h2,
                .gg_lasvegas h3,
                .gg_lasvegas h4,
                .gg_lasvegas h5,
                .gg_lasvegas h6,
                .gg_lasvegas h1,
                .gg_lasvegas p {
                    animation: blink 1s infinite alternate;
                }


                @keyframes blink {
                    0% {}

                    50% {}

                    60% {
                        text-shadow:
                            0 0 2px rgba(255, 255, 255, .1),
                            0 0 10px rgba(255, 255, 255, .4);

                        text-stroke: 2px rgba(255, 255, 255, 0.05);
                    }

                    70% {
                        text-shadow:
                            0 0 2px rgba(255, 255, 255, 1),
                            0 0 10px rgba(255, 255, 255, 1),
                            0 0 20px rgba(255, 255, 255, 1),
                            0 0 30px rgba(255, 255, 255, 1),
                            0 0 40px #F9DB01,
                            0 0 70px #F9DB01,
                            0 0 80px #F9DB01,
                            0 0 100px #F9DB01;
                    }

                    80% {
                        text-shadow:
                            0 0 2px rgba(255, 255, 255, .1),
                            0 0 10px rgba(255, 255, 255, .4);

                        text-stroke: 2px rgba(255, 255, 255, 0.05);
                    }

                    100% {
                        text-shadow:
                            0 0 2px rgba(255, 255, 255, 1),
                            0 0 10px rgba(255, 255, 255, 1),
                            0 0 20px rgba(255, 255, 255, 1),
                            0 0 30px rgba(255, 255, 255, 1),
                            0 0 40px #F9DB01,
                            0 0 70px #F9DB01,
                            0 0 80px #F9DB01,
                            0 0 100px #F9DB01;
                    }
                }

                @media(min-width: 992px) {
                    .gg_w-d {
                        width: 70%;
                    }
                }

                @media(max-width: 992px) {
                    .gg_w-d {
                        width: 100%;
                    }
                }

                /* ------------ */

                #gg_confetti {
                    position: fixed;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    pointer-events: none;
                }

                #gg_confetti img {
                    width: 100%;
                    margin: 20px 0;
                }



                .gg_message {
                    background: pink;
                    z-index: 1000;
                    background: #fff;
                    box-shadow: 0px 0px 15px #ddd;
                    border-radius: 5px;
                    padding: 20px;
                    margin: 0 auto;
                    position: relative;
                    margin-top: 50px;
                    animation: fade_in 0.6s;
                    animation-fill-mode: forwards;
                }

                .gg_gotcha {
                    font-size: 64px;
                    color: #3b79ac;
                    opacity: 0;
                    animation: gg_gotcha_anim 1s;
                    animation-fill-mode: forwards;
                    animation-delay: 0.5s;
                }

                .gg_explanation ul>li {
                    font-size: 16px;
                    margin: 5px;
                    opacity: 0;
                    border-top: 1px solid #ccc;
                    animation: fade_in 1.5s;
                    animation-fill-mode: forwards;
                    animation-delay: 1s;
                    list-style: none;
                }

                .gg_explanation ul {
                    margin-top: 25px;
                }

                .gg_return_link {
                    font-size: 24px;
                    color: skyblue;
                    animation: fade_in 1s;
                    animation-fill-mode: forwards;
                    animation-delay: 1.2s;
                    opacity: 0;
                }

                @keyframes gg_gotcha_anim {
                    0% {
                        opacity: 0;
                        font-size: 32px;
                    }

                    50% {
                        opacity: 1;
                        font-size: 72px;
                        transform: rotate(10deg);
                    }

                    100% {
                        font-size: 64px;
                        opacity: 1;
                    }
                }

                @keyframes fade_in {
                    from {
                        opacity: 0;
                    }

                    to {
                        opacity: 1;
                    }
                }


                @media(min-width: 992px) {
                    .pp_number {
                        top: 17%;
                        position: absolute;
                        left: 37%;
                    }

                    .pp_number h4 {
                        color: #1f1e1d;
                        font-weight: bold;
                        font-size: 35px;
                    }

                    .pp_date {
                        position: absolute;
                        top: 36%;
                        right: 17px;
                    }

                    .pp_nameJp {
                        position: absolute;
                        top: 63%;
                        left: 27%;
                    }

                    .pp_nameJp h4 {
                        color: #1f1e1d;
                        font-weight: bold;
                        font-size: 46px;
                        top: 13px;
                        position: relative;
                    }
                }

                @media(max-width: 992px) {
                    .pp_number {
                        top: 15%;
                        position: absolute;
                        left: 35%;
                    }

                    .pp_number h4 {
                        color: #1f1e1d;
                        font-weight: bold;
                        font-size: 25px;
                    }

                    .pp_date {
                        position: absolute;
                        top: 35%;
                        right: 2%;
                    }

                    .pp_nameJp {
                        position: absolute;
                        top: 64%;
                        left: 27%;
                    }

                    .pp_nameJp h4 {
                        color: #1f1e1d;
                        top: 0px;
                        position: relative;
                        font-size: 35px;
                    }
                }

                div.pp_d_t {
                    display: inline-block;
                    border: crimson 3px solid;
                    border-radius: 10px;
                    color: crimson;
                    font-size: 12px;
                    font-weight: bold;
                    padding: 5px;
                    padding: 1px 15px;
                    background-color: #fff;
                }

                .pp_d_t_right {
                    display: inline;
                    font-size: 14px;
                    font-weight: bold;
                    top: -8px;
                    position: relative;
                    left: -8px;
                    background: crimson;
                    border-radius: 50px;
                    /* padding: 4px; */
                    color: #ffffff;
                }

                .pp_d_t_right span {
                    left: 2px;
                    position: relative;
                }

                @media (max-width: 992px) {
                    .pp_showUser {
                        position: relative;
                        top: -93px;
                        right: -50px;
                    }
                }

                @media (min-width: 992px) {
                    .pp_showUser {
                        position: relative;
                        top: -142px;
                        right: -50px;
                    }
                }