.games-container{position:relative;background:url(../Images/GamesIcons/gamesLogo.webp) no-repeat bottom 32px right 20px, linear-gradient(0deg, #1A247D 0%, #1A247D 100%)}
.games-container:before{content:'';width:100%;height:7px;position:absolute;top:0;right:0;background:url(../Images/GamesIcons/mask-desktop.webp) no-repeat center center;background-size:cover}
.games-container:after{content:'';width:100%;height:7px;position:absolute;bottom:0;right:0;background:url(../Images/GamesIcons/mask-desktop.webp) no-repeat center center;background-size:cover}

.content-wrap{width:100%!important}
.content{padding:0!important}

.User-setting{    display: inline-block; width: 100%; }
.points-div{position:absolute;top:40px;right:20px;width: auto;height: 40px;padding: 0 12px;display:flex;justify-content:center;align-items:center;gap:8px;border-radius: 10px;background: #14378B;}
.points-div .point-icons{width:18px;height: 19px;background:url(../Images/wc26/Y.svg) no-repeat center center;background-size:100%}
.points-div p{color: #FFF;font-family: droidLight,Arial;font-size: 20px;}
.points-div span{color: #FFC559;text-align: center;font-family: ykLight,Arial;font-size: 20px;font-weight:700}
.points-div:after{content:'';width:22px;height: 22px;background:url(../Images/wc26/YPoint.svg) no-repeat center center;background-size:100%}

.icons-side{position:absolute;top:40px;left:34px;width: 176px;height: 50px;display:flex;justify-content:center;align-items:center;gap:13px;border-radius: 10px;}
.icons-side .rules-container {position: relative; display: inline-block;}
.icons-side .icon-games {width:50px;height:50px;border-radius: 5px;cursor: pointer;    overflow: hidden;}
.icons-side .rules-icon{background:url(../Images/GamesIcons/RuleIcon.svg) no-repeat center center #111435;}
.icons-side .share-icon{background:url(../Images/GamesIcons/ShareIcon.svg) no-repeat center center #111435;}
.icons-side .login-icon{background:url(../Images/GamesIcons/userLogin.svg) no-repeat center center #111435;}

.icons-side .popup { position: absolute; border-radius: 10px;background: #111435;top: 70px; left: 0; width: 522px; padding: 25px;  opacity: 0; visibility: hidden; transform: translateY(-10px);transition: 0.3s;z-index: 1;}
.icons-side .share-popup{width: 50px!important;display: flex; flex-direction: column; gap: 10px; align-items: center;justify-content: center;left:62px}
.icons-side .rules-popup h3{color: #FFF;text-align: right;font-family: droidBold,Arial;font-size: 26px;margin-bottom:30px;}
.icons-side .rules-popup ul{list-style: disc;padding-right:10px}
.icons-side .rules-popup li{color: #FFF;text-align: right;font-family:  droidLight,Arial;font-size: 14px;margin-bottom:20px;list-style: disc;}
.icons-side .rules-popup li span{color: #FFF;text-align: right;font-family:  droidLight,Arial;font-size: 14px}
.icons-side .rules-popup li:last-child{margin-bottom:0}
.icons-side .rules-popup li .commonSpan{width:30px;height:30px;background: rgba(0, 0, 0, 0.38);border-radius:50%;display:flex;justify-content:center;align-items:center;}
.icons-side .rules-popup li  .desc{width:calc(100% - 30px);}
.icons-side .rules-popup li .correct:before{content:'';width:100%;height:100%;background:#67B774;mask:url(../Images/GamesIcons/CorrectIcon.svg) no-repeat center center ;-webkit-mask:url(../Images/GamesIcons/CorrectIcon.svg) no-repeat center center;mask-size: 50%;}
.icons-side .rules-popup li .heart:before{content:'';width:100%;height:100%;background:#D6443E;mask:url(../Images/GamesIcons/FillHeart.svg) no-repeat center center ;-webkit-mask:url(../Images/GamesIcons/FillHeart.svg) no-repeat center center;mask-size: 50%;}
.icons-side .rules-popup li .wrong:before{content:'';width:100%;height:100%;background:#D6443E;mask:url(../Images/GamesIcons/closeIcon.svg) no-repeat center center ;-webkit-mask:url(../Images/GamesIcons/closeIcon.svg) no-repeat center center;mask-size: 50%;}
.icons-side .popup.active { opacity: 1;  visibility: visible; transform: translateY(0);}
.icons-side .rules-popup .close-btn {position: absolute;top: 13px;left: 13px;font-size: 18px;cursor: pointer;color: #fff;width: 14px;height: 14px;border-radius: 50%;background:rgba(71, 71, 71, 0.38);display: flex;justify-content: center;align-items: center;}
.icons-side .rules-popup .close-btn:before{content:'';width:100%;height:100%;background:#fff;mask:url(../Images/GamesIcons/closeIcon.svg) no-repeat center center ;-webkit-mask:url(../Images/GamesIcons/closeIcon.svg) no-repeat center center;mask-size: 62%;}

.icons-side .regBtn {    width: 50px;
    display: inline-block;
    height: 50px;}

.popup a { float: right; display: inline-block; width: 28px; height: 28px; text-align: center; line-height: 2; font-size: 18px;}
.popup a:last-child { margin-left: 0; position: relative; }
.popup a.icon-tw { margin-left: 0 }
.popup a.icon-fb:before { content: "b"; color: #fff }
.popup a.icon-tw:before { content: "!"; color: #fff }
.popup a.icon-wapp:before { content: "Y"; color: #fff }
.popup a.icon-fb { background: #4267b2 }
.popup a.icon-tw { background: #000 }
.popup a.icon-wapp { background: #25d366 }
.popup a.icon-shorten:before { content: "&"; font-size: 18px; line-height: 28px;color:#fff}
.customQuiz.icons-side  .regBtn p.signup{opacity:0;visibility:hidden}

.customQuiz .registerPopup {display:none;position:fixed;width: 100%;height: 100%;top:0;right:0;left:0;bottom:0;z-index:15}
.customQuiz .registerPopup:before{content:'';display:inline-block;position:fixed;width:100%;height:100%;background: rgba(0, 0, 0, 0.8);top:0;right:0}

.customQuiz .regBtn p.signup{width: 150px;height: 70px;border-radius: 50px;text-align:center;background: rgba(255, 255, 255, 0.10);color: #FFF;font-size: 16px;font-weight: 700;line-height: 70px;}
.customQuiz .userContainerBefore  .regBtn:before{display:none}

.openRegister .registerPopup{display:inline-block;}
.openRegister .rightside,
.openpop .rightside,
.openpop.preventClass.openRegister  .rightside{filter:blur(10px)}

.preventClass.openRegister .registerPopup{display:none}
.preventClass.openRegister .rightside{filter:none}

.customQuiz #signup-box-link{display:none}
.customQuiz .quizSignup{display:inline-block;color: #FFF;text-align: right;font-family:droidLight, Arial;font-size: 18px;font-weight: 400;padding:10px}
.customQuiz .social-login {position: relative;width: 100%; height: auto;padding: 10px 0 16px 0;display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;}
.customQuiz .social-login a {position: relative;float: left;width: 170px;height:50px;border-radius:8px;text-decoration: none;color: #fff;line-height:50px;font-size: 16px;text-transform: uppercase;text-align: center;}
.customQuiz .social-login a:last-of-type {margin-bottom: 0;margin-right:0}
.customQuiz .social-login a.loginFbBtn {background-color: #49639F;}
.customQuiz .social-login a.loginGglBtn {background-color: #E05449}
.customQuiz .signupdiv .u-form-group{display:none}

.customQuiz .login-box{display:inline-block;position:absolute;width: 415px;height: auto;max-height:400px;top:50%;left:50%;transform:translate(-50% , -50%);border-radius: 16px;border: 2px solid rgba(255, 255, 255, 0.50);background: rgba(255, 255, 255, 0.10);overflow:hidden}
.customQuiz .login-box .closePopup {position: absolute;top: 15px;left: 16px;width: 30px;height: 30px;z-index: 2}
.customQuiz .login-box .closePopup:after, .login-box .closePopup:before {content: '';position: absolute;top: 0;width: 2px;height: 100%;background-color: #fff;opacity: 1;
                                                             transition: all .2s ease-in-out 0s;-webkit-transition: all .2s ease-in-out 0s;-moz-transition: all .2s ease-in-out 0s;-ms-transition: all .2s ease-in-out 0s;-o-transition: all .2s ease-in-out 0s;}
.customQuiz .login-box .closePopup:before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.customQuiz .login-box .closePopup:after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}

.customQuiz .lb-header{display:inline-block;width:100%;height:80px;background:#111;border-radius:16px 16px 0 0;float:right;padding: 0 15px}
.customQuiz .lb-header h3,
.customQuiz .lb-header a{display:inline-block;float:right;color:#fff;color: #FFF;font-family: droidLight, Arial;font-size: 24px;font-weight: 700;line-height: 80px;}

.customQuiz .profile{display:inline-block;float:right;width:100%;padding:20px 15px 5px}
.customQuiz .profile span{display:inline-block;float:right;width:100%;font-family:droidLight, Arial;font-size:16px;color:#D6162D;text-align:right;margin-bottom:8px;}
.customQuiz .profile .UserData{display:inline-block;float:right;width:100%;}
.customQuiz .profile .data{display:inline-block;float:right;width:100%;margin-bottom:8px}
.customQuiz .profile .data:last-child{margin-bottom:0}
.customQuiz .profile .data label{display:inline-block;float:right;color:  rgba(255, 255, 255, 0.50);font-family:droidLight, Arial;font-size: 18px;font-weight: 400;}
.customQuiz .profile .data span{display:inline-block;float:right;width:auto;margin-right:8px;color: #FFF;font-family:droidLight, Arial;font-size: 18px;font-weight: 400;}
.customQuiz .profile .data .points:after{content:'نقطه';display:inline-block;float:left;width:auto;margin-right:8px;color: #FFF;font-family:droidLight, Arial;font-size: 18px;font-weight: 400;}
.openRegister .login-box.phonenumber .email-login.complete { display: none }
.email-login.complete { padding: 10px 20px 0 ;display: inline-block;
    position: relative;
    float: right;width:100%}
.email-login.complete a{    display: inline-block;
    float: right;
    color: #fff;font-family:droidLight, arial;font-size:15px;margin-bottom:6px}
.email-login.complete .u-form-group .labelHint{display:none}
.email-login.complete input::placeholder{text-align:right}
.email-login.complete input{display:inline-block;width:100%;height:30px;text-align:right;float:right}
.customQuiz .email-login.complete .SigninBtn{width: 200px;
    height: 40px;
    float: none;
    border-radius: 8px;
    background: #D6162D!important;
    color: #FFF;
    text-align: center;
    font-family: droidLight, Arial;
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;}
.customQuiz .email-login.complete .itemError{text-align: right;
    position: relative;
    float: right;
    display: inline-block;
    width: 100%;
    color: red;font-family:droidLight, Arial;font-size:14px}

.regBtn p{display:none}
.u-form-group{    display: block;
    width: 100%;
    float: right;}
.u-form-group .Compelete{width: 100px;
    height: 30px;
    display: block;
    line-height: 30px;
    background: #fff;
    border-radius: 51px;
    margin: 0 auto;font-family:droidLight, Arial;font-size:14px}



.games-login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    width: 100%;
    height: 100%;
}

.games-login-overlay .games-login {
    display: none;
    justify-content: center;
    position: relative;
    max-width: 522px;
    width: 100%;
    height: 237px;
    background: #1A247D;
    border-radius: 10px;
    border: 1px #FFFFFF63 solid;
}


.games-login-overlay .games-login .games-login-popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 238px;
    width: 100%;
}

.games-login-overlay .games-login .games-login-popup .alert-message {
    color: #FFF;
    text-align: center;
    font-family: DroidBold, Arial;  
    font-size: 14px;
}

.games-login-overlay .games-login .games-login-popup .games-login-btn {
   max-width: 213px;
   width: 100%;
   border-radius: 12px;
   background: #F2F2F2;
   color: #000;
   text-align: center;
   font-family: DroidBold, Arial;
   font-size: 18px;
   cursor: pointer;
}

@media screen and (min-width:1360px) and (max-width:1919px) {
  


        .input-row input::placeholder {
            font-size:14px
        }

        .icons-side .popup{
            padding:10px 20px
        }

        .icons-side .rules-popup h3{
            font-size: 22px;
    margin-bottom: 10px;
        }
        .icons-side .popup{
            width: 476px;
        }

        .icons-side .rules-popup li{
            font-size:13px;gap:5px;margin-bottom:10px
        }
}


@media screen and (min-width:768px) and (max-width:1439px) {
    
    .customQuiz .regBtn.icon-font{    width: 130px;height: 65px;}
    .customQuiz .regBtn.icon-font p{line-height:65px;font-size:15px}
}


@media screen and (min-width: 320px) and (max-width: 767px) {
    .points-div .point-icons{width: 14px;height: 15px;}
    .points-div:after { width: 18px;height: 18px;}
       .customQuiz .regBtn p,
   .customQuiz .regBtn:before{display:none}
   .customQuiz .regBtn img{margin-left:0}
    .customQuiz .regBtn.icon-font{    width: 102px;height: 50px;}
    .customQuiz .regBtn.icon-font p{line-height:50px;font-size:12px;display:inline-block}
       .customQuiz .login-box{height: auto !important;
        width: 300px !important;
        max-height: 415px;}
   .customQuiz .login-box .closePopup{width:16px;height:16px}
   .customQuiz .lb-header{height:60px}
   .customQuiz .lb-header h3, .customQuiz .lb-header a{font-size:18px;line-height:60px}
   .customQuiz .profile .data label,
   .customQuiz .profile .data span{font-size:16px}

   .customQuiz .login-box.signupdiv{height:285px!important;max-height: 285px;}

   .customQuiz .quizSignup{font-size:14px}
   .customQuiz .social-login{width:100%;flex-direction: column;    padding: 10px 20px 16px}
   .customQuiz .social-login a{width:100%;height:40px;line-height:40px;margin-bottom:10px}
   .customQuiz .social-login a:last-child{margin-bottom:0}


   .points-div{top:15px;right:15px}
   .icons-side{      height: 40px;
        width: 100%;
        top: 15px;
        left: 15px;justify-content: flex-end;
   }
   .games-container{padding-bottom:185px!important;background:linear-gradient(0deg, #1A247D 0%, #1A247D 100%)}
   .games-container:before,
   .games-container:after{background: url(../Images/GamesIcons/mask-mobile.webp) no-repeat center center;
    background-size: auto 100%;}
   .icons-side .rules-popup{width:calc(100% - 40px);left:5px;  
        overflow: hidden;    padding: 12px;}
   .icons-side .rules-popup h3{font-size:18px;    margin-bottom: 10px;}
   .icons-side .rules-popup li{font-size:12px;margin-bottom: 10px;}
   .icons-side .share-popup{left:48px}

   .points-div{height:30px;        min-width: 120px;
        width: auto;
        padding: 0 10px;}
   .points-div p,
   .points-div span{font-size:14px}
   .icons-side .icon-games{width:40px;height:40px;background-size: 40%;}
   .icons-side .regBtn {width:40px;height:40px}
   .icons-side .popup{top: 50px;}

    .games-login-overlay .games-login {
        width: 268px;
        height: 240px;
    }

    .games-login-overlay .games-login .games-login-popup .games-login-btn {
        font-size:10px;
        padding: 4px;
    }

}

.energy-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow: visible;
    padding: 1.125rem;
    box-sizing: border-box;
}

.energy-loader .loader {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    box-sizing: border-box;
    overflow: visible;
}

.energy-loader .outer-circle {
    position: absolute;
    z-index: 1;
    inset: -1rem;
    border-radius: 50%;
    box-sizing: border-box;
    background: conic-gradient(
        from 0deg,
        #fff 0deg,
        #fff 88deg,
        transparent 88deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent 0,
        transparent 68%,
        #000 69%,
        #000 87%,
        transparent 88%
    );
    mask: radial-gradient(
        farthest-side,
        transparent 0,
        transparent 68%,
        #000 69%,
        #000 87%,
        transparent 88%
    );
    animation: energy-loader-spin 1.15s linear infinite;
}

.energy-loader .inner-circle {
    position: absolute;
    z-index: 2;
    inset: -1rem;
    border-radius: 50%;
    box-sizing: border-box;
    background: conic-gradient(
        from 205deg,
        #fff 0deg,
        #fff 88deg,
        transparent 88deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent 0,
        transparent 40%,
        #000 41%,
        #000 58%,
        transparent 59%
    );
    mask: radial-gradient(
        farthest-side,
        transparent 0,
        transparent 40%,
        #000 41%,
        #000 58%,
        transparent 59%
    );
    animation: energy-loader-spin-reverse 0.95s linear infinite;
}

.energy-loader .loading-text {
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: droidLight, Arial, sans-serif;
    font-size: 0.875rem;
}

@keyframes energy-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes energy-loader-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}