/*Gamification Starts*/

.gamifyLaunchPopupModal .modal-body {
    text-align: center;
    margin: 0;
}

.gamifyLaunchPopupModal .nGame_img {
    max-width: 300px;
    margin: 20px auto 0;
}

.gamifyLaunchPopupModal .modal-body p {
    font-size: 16px;
    margin: 20px auto 0;
}

.gamifyLaunchPopupModal .item_title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
}

.gamification_info {
    padding: 50px 0 20px;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}

@media(min-width: 1367px) {
    .gamification_info {
        max-width: 80%;
        margin: 0 auto;
    }
}

.gamification h2.category_title {
    margin-top: 35px;
    font-size: 26px;
}

.gamification .owl-stage-outer {
    padding: 25px 0;
}

.gamification {
    display: flex;
    flex-wrap: wrap;
}

.gamification .item {
    text-align: center;
    padding: 45px 25px 25px;
    background-color: #f8f8f8;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    -ms-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    border-radius: 10px;
    position: relative;
}

.gamification .item .event_date,
.rewardClaimed .event_date {
    font-size: 13px;
    margin-top: 5px;
}

.gamification .item .item_img {
    position: relative;
}

.gamification .item img {
    max-width: 180px;
    margin: 20px auto;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    -webkit-box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    -moz-box-shadow: rgba(0,0,0,0.15) 0px 2px 8px;
    -ms-box-shadow: rgba(0,0,0,0.15) 0px 2px 8px;
}

.gamification .item.unlock {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
}

.gamification .item.lock {
    pointer-events: none;
}

.gamification .item.lock .item_img,
.gamification .item.lock .btn_gamify {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    position: relative;
}

.gamification .item.lock img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

.gamification .item .item_title {
    font-weight: 600;
    margin-top: 0;
}

.gamification .item .item_des {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
}

.gamification .item .item_des span {
    position: relative;
}

.gamification .item .item_des span,
.rewardClaimed .item_des span {
    padding: 8px 10px;
    background-color: #ffffff;
    border-radius: 5px;
    vertical-align: middle;
    min-width: 80px;
    display: inline-block;
    box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    -webkit-box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    -moz-box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    -ms-box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
}

.gamification .item .btn_gamify {
    font-size: 14px;
    display: inline-block;
    border-radius: 5px;
    background-color: #ce9a2b;
    text-align: center;
    font-weight: 400;
    padding: 6px 12px;
    color: #fff;
    margin-top: 5px;
    text-decoration: none;
    text-shadow: 1px 1px rgb(0 0 0 / 40%);
    -moz-box-shadow: 0px 2px #7a5b19, 0px 3px #6d5117, 0px 4px #604814, 0px 5px #543f11, 0px 6px #47350f, 0px 7px #36280b, 0px 12px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 0 3px rgba(252, 252, 252, 0.6);
    -webkit-box-shadow: 0px 2px #7a5b19, 0px 3px #6d5117, 0px 4px #604814, 0px 5px #543f11, 0px 6px #47350f, 0px 7px #36280b, 0px 12px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 0 3px rgba(252, 252, 252, 0.6);
    box-shadow: 0px 2px #7a5b19, 0px 3px #6d5117, 0px 4px #604814, 0px 5px #543f11, 0px 6px #47350f, 0px 7px #36280b, 0px 12px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 0 3px rgba(252, 252, 252, 0.6);
    border: solid 1px #7a5b19;
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(0, 0, 0, 0.14)), color-stop(100%, rgba(255, 255, 255, 0.14)));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.14));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.14));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.14));
}

.gamification .item .btn_gamify:hover {
    background-color: #7a5b19;
}

.gamification .item .btn_gamify.btn_claimed {
    background-color: #bfbaa9;
    color: #fff;
    -moz-box-shadow: 0px 2px #938b6f, 0px 3px #8b8368, 0px 4px #827b61, 0px 5px #7a735a, 0px 6px #716a54, 0px 6px #655f4b, 0px 12px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 0 3px rgba(252, 252, 252, 0.6);
    -webkit-box-shadow: 0px 2px #938b6f, 0px 3px #8b8368, 0px 4px #827b61, 0px 5px #7a735a, 0px 6px #716a54, 0px 6px #655f4b, 0px 12px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 0 3px rgba(252, 252, 252, 0.6);
    box-shadow: 0px 2px #938b6f, 0px 3px #8b8368, 0px 4px #827b61, 0px 5px #7a735a, 0px 6px #716a54, 0px 6px #655f4b, 0px 12px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 0 3px rgba(252, 252, 252, 0.6);
    border: solid 1px #938b6f;
    cursor: default;
    pointer-events: none;
}

.gamification .btn_claim {}

.gamification .btn_claim button {
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 0;
}

.gamification .btn_claim .button {
    background-color: #404663;
    color: #fff;
    border: 0;
    font-size: 2rem;
    font-weight: 400;
    padding: 0.5em 1.25em;
    border-radius: 0.5em;
    z-index: 999;
    position: relative;
    display: flex;
    gap: 0.5em;
    box-shadow: 0px 1.7px 2.2px rgba(0, 0, 0, 0.02), 0px 4px 5.3px rgba(0, 0, 0, 0.028), 0px 7.5px 10px rgba(0, 0, 0, 0.035), 0px 13.4px 17.9px rgba(0, 0, 0, 0.042), 0px 25.1px 33.4px rgba(0, 0, 0, 0.05), 0px 60px 80px rgba(0, 0, 0, 0.07);
}

.gamification .btn_claim .button:active {
    transform: scale(1.01);
}

.gamification .nav-tabs {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    padding: 0;
}

.gamification .nav-tabs>li {
    margin: 0;
}

.gamification .nav-tabs li+li {
    margin-left: 15px;
}

.gamification .nav-tabs>li>a {
    border: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 0.8;
    padding: 20px 25px;
    border-radius: 0;
}

.gamification .nav-tabs>li.active>a,
.gamification .nav-tabs>li.active>a:focus,
.gamification .nav-tabs>li.active>a:hover {
    border: 0;
    opacity: 1;
    text-decoration: none;
    background-color: #eee;
    background-color: #6f8d97;
    border-radius: 0;
    color: #fff;
}

.gamification .category {
    padding: 15px;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    -webkit-box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    -ms-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    border-radius: 10px;
}

.owl-nav.disabled {
    display: none;
}

.owl-carousel .owl-controls .owl-dots {
    display: flex;
    justify-content: center;
}

.owl-carousel .owl-controls .owl-dots .owl-dot {
    height: 10px;
    width: 10px;
    background-color: #c9c9c9;
    margin: 0 5px;
    border-radius: 10px;
    transform: 0.5s ease-in-out all;
    -webkit-transform: 0.5s ease-in-out all;
    -moz-transform: 0.5s ease-in-out all;
    -ms-transform: 0.5s ease-in-out all;
}

.owl-carousel .owl-controls .owl-dots .owl-dot.active {
    width: 35px;
    height: 10px;
    background-color: #616161;
}

.ribbon {
    position: absolute;
    left: -5px;
    top: 5px;
    z-index: 1;
    min-width: 150px;
    font-size: 13px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: linear-gradient(#F70505 0%, #8F0808 100%);
    border-radius: 0 5px 5px 0;
}

.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
}

.ribbon:before {
    height: 0;
    width: 0;
    top: -6.5px;
    left: 0.1px;
    border-bottom: 7px solid black;
    border-left: 7px solid transparent;
}

.ribbon:after {
    height: 0;
    width: 0;
    right: 0px;
    border-top: 15px solid #f8f8f8;
    border-bottom: 15px solid #f8f8f8;
    border-left: 10px solid transparent;
}

#claimReward,
#gamifyLaunchPopupModal {
    position: fixed;
    top: 0;
}

#claimReward.modal:before,
#gamifyLaunchPopupModal.modal:before {
    position: absolute;
    content: "";
    background-image: url(../images/gamify/badge_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    transition-delay: 0.5s;
    opacity: 0;
    transform: scale(0);
    transition: 1s ease-in-out all;
}

#claimReward.modal.fade.in:before,
#gamifyLaunchPopupModal.modal.fade.in:before {
    opacity: 1;
    transform: scale(1);
}

.rewardClaimed .reward_btn_sec {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.rewardClaimed .reward_btn_sec .fancy-button+.fancy-button {
    margin-left: 15px;
}

.rewardClaimed.fade .modal-dialog, .gamifyLaunchPopupModal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0 auto;
    top: 50%;
    max-width: 550px;
}

.rewardClaimed.fade.in .modal-dialog,
.gamifyLaunchPopupModal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 1;
    top: 50%;
}

.rewardClaimed .modal-body,
.gamifyLaunchPopupModal .modal-body {
    text-align: center;
}

.rewardClaimed img,
.gamifyLaunchPopupModal img {
    max-width: 250px;
    margin: 0 auto;
    width: 100%;
}

.rewardClaimed .modal-header .close,
.gamifyLaunchPopupModal .modal-header .close,
.gamify_reward .close{
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 1;
    font-size: 38px;
    font-weight: 400;
    width: 38px;
    line-height: 37px;
    height: 38px;
    border-radius: 50%;
    background-color: #f8f8f8;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    -webkit-box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    -ms-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    transition: 0.5s ease-in-out all;
    -webkit-transition: 0.5s ease-in-out all;
    -moz-transition: 0.5s ease-in-out all;
    -ms-transition: 0.5s ease-in-out all;
}

.rewardClaimed .modal-header .close:hover,
.gamifyLaunchPopupModal .modal-header .close:hover {
    background-color: #e2e2e2;
}

canvas {
    z-index: 9999999 !important;
}

button {
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 0;
}

.gamify_table .table td a {
    font-size: 15px;
    text-decoration: underline;
    color: #000;
}

.gamify_table .table_badge {
    width: 40px;
    display: inline-block;
}

.gamify_table .table_badge img {
    width: 100%;
}


/*Gamification ends*/


/* fancy Button */

.bg-gradient1 span,
.bg-gradient1:before {
    background: #fa7e29;
    background: linear-gradient(180deg, #fa7e29 0%, #F6682F 80%, #F6682F 100%);
}

.fancy-button {
    display: inline-block;
    margin: 20px 0 5px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
    color: #ffffff;
    position: relative;
}

.fancy-button.bg-gradient1 {
    text-shadow: 0px 0px 1px #BF4C28;
}

.fancy-button:before {
    content: "";
    display: inline-block;
    height: 40px;
    position: absolute;
    bottom: -1px;
    left: 10px;
    right: 10px;
    z-index: -1;
    border-radius: 2em;
    filter: blur(14px) brightness(0.9);
    transform-style: preserve-3d;
    transition: all 0.3s ease-out;
}

.fancy-button span {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    will-change: transform, filter;
    transform-style: preserve-3d;
    transition: all 0.3s ease-out;
}

.fancy-button:focus {
    color: #ffffff;
}

.fancy-button:hover {
    color: #ffffff;
}

.fancy-button:hover span {
    filter: brightness(0.9) contrast(1.2);
    transform: scale(0.96);
}

.fancy-button:hover:before {
    bottom: 3px;
    filter: blur(6px) brightness(0.8);
}

.fancy-button:active span {
    filter: brightness(0.75) contrast(1.7);
}

@media(max-width: 1440px) {
    .rewardClaimed.fade .modal-dialog {
        max-width: 450px;
    }
    .rewardClaimed img {
        max-width: 200px;
    }
}

.back-flip i {
    font-size: 28px;
    color: #2f2f2f;
    vertical-align: 5px;
}

.flip-card-3D-wrapper {
    width: 100%;
    min-height: 522px;
    position: relative;
    margin: 0 auto;
}

#flip-card {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.do-flip {
    -o-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

#flip-card-btn-turn-to-back,
#flip-card-btn-turn-to-front {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background: white;
    cursor: pointer;
    visibility: hidden;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .7em;
    padding: 0;
    color: grey;
    border: 1px solid grey;
}

#flip-card .flip-card-front,
#flip-card .flip-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    -o-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}

#flip-card .flip-card-back {
    background: #fff;
    padding: 20px 40px;
    border-radius: 20px;
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#flip-card .flip-card-back .flip_back_title {
    font-size: 30px;
    font-weight: 600;
}

#flip-card .flip-card-back p {
    font-size: 20px;
    min-height: 50px;
}

#flip-card .flip-card-back .trophy_img {
    display: inline-block;
    position: relative;
}

#flip-card .flip-card-back .fancy-button {
    margin-top: 10px;
}

#flip-card .flip-card-back .trophy_img {
    max-width: 270px;
}

#flip-card .flip-card-back .trophy_img:before {
    position: absolute;
    content: "";
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: rgba(182, 210, 219, 0.25);
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.5s ease-in-out all;
}

#flip-card .flip-card-back .custom_checkbox a {
    text-decoration: underline;
    color: #2f2f2f;
}


/*Custome CheckBox*/

.custom_checkbox input[type=checkbox]+label {
    display: inline-block;
    cursor: pointer;
}

.custom_checkbox input[type=checkbox] {
    display: none;
}

.custom_checkbox input[type=checkbox]+label:before {
    content: "\2714";
    border: 0.1em solid #ccc;
    border-radius: 0.2em;
    display: inline-block;
    width: 18px;
    height: 18px;
    font-weight: 600;
    margin-right: 10px;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
    line-height: 100%;
    position: relative;
    top: -2px;
}

.custom_checkbox input[type=checkbox]+label:active:before {
    transform: scale(0);
}

.custom_checkbox input[type=checkbox]:checked+label:before {
    background-color: #b6d2db;
    border-color: #b6d2db;
    color: #2f2f2f;
}

.custom_checkbox input[type=checkbox]:disabled+label:before {
    transform: scale(1);
    border-color: #aaa;
}

.custom_checkbox input[type=checkbox]:checked:disabled+label:before {
    transform: scale(1);
    background-color: #bfb;
    border-color: #bfb;
}

.gamify_reward .modal-dialog {
    width: 1000px;
}

.gamify_reward .gamify_reward_list {
    margin: 0;
    padding: 0 0 0 10px;
}

.gamify_reward .gamify_reward_list li {
    width: 49%;
    display: inline-block;
    margin-bottom: 10px;
}
.allRewards {
    margin-top: 30px;
}