﻿
.leftSide {
    display: inline-block;
    float: left;
    width: 300px;
}
.Quiz2022 .quiz .step { display: inline-block; float: right; width: 100%; position: relative; height: 480px }
.Quiz2022 .quiz #welcome.step, .Quiz2022 .quiz #intro.step {
    height: auto;
}
.Quiz2022 .quiz .quizDekor.quizSteps { padding: 60px 175px 60px 32px; border-radius: 8px;  border-top-right-radius: 0;}
.Quiz2022 .quiz .quizSteps { background: linear-gradient(250deg, #581d6d 20%, #482260 80%);}

.Quiz2022 .quiz .quizDekor.quizHint .dekor {display: inline-block;width: 160px;height: 165px;position: absolute;top: 0;left: 30px;background: url(../Images/Ramadan23/hlal.png) no-repeat, url(../Images/Ramadan23/lentern.png) no-repeat, url(../Images/Ramadan23/star.png) no-repeat;background-position: 0 0, 35px 6px, 91px 0;background-size: 15%, 24%, 18%;}
.Quiz2022 .quiz .quizSteps .beforeContainer { display: inline-block; position: absolute; top: -1px; right: -1px; width: 150px; height: 150px; overflow:hidden}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{content: '';position: absolute;width: 25%;height: 90%;background-color: #703186;transform: rotate(135deg);z-index: 3;left: 21px;}
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya{display:inline-block;position:relative;width:100%;height:100%;background-color:#703186; border-bottom-left-radius: 20px;overflow:hidden }
.Quiz2022 .quiz .quizSteps .beforeContainer span { color: #330D46; font-family: BebasNeueBold, Arial; position: absolute; top: -6px; right: 8px; font-size: 103px;line-height:1 ;z-index:1}
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{content: '';border-right: 106px solid #fff;border-top: 106px solid transparent;border-bottom: 106px solid transparent;width: 0;height: 0;position: absolute;right: -15px;top: -68px;transform: rotate(135deg);z-index:1}

.Quiz2022 .quiz .quizHint .hintMsg { margin-bottom: 32px;}
.Quiz2022 .quiz .quizHint .hintMsg h3 span.win { color: #f8a71b;}
.Quiz2022 .quiz .quizHint .hintMsg h3 span.gift {text-align: right;color: #fff; font-size: 16px;line-height: 2;  margin: 20px 0;}
.Quiz2022 .quiz .quizHint .regBtn {background: #fff;color: #4e2268;position: relative;float: right;display: inline-block;width: 160px;height: 50px;bottom: 0;left: 0;font-size: 22px; line-height: 22px;}
.Quiz2022 .quiz .quizProtID{display:inline-block;float:right;font-size:11px;color:#fff;text-align:right;direction:rtl;position:absolute;right:175px;bottom:30px}


.Quiz2022 .quiz .predHint, .Quiz2022 .quiz .predHint { display: inline-block; float: right; width: 100%; background: #000; padding: 20px 40px 20px 20px; min-height: 210px; position: relative; margin-bottom: 40px; overflow: hidden }
.Quiz2022 .quiz .predHint .hintMsg, .Quiz2022 .quiz .predHint .hintMsg { display: inline-block; float: right; width: 100%; position:relative}
.Quiz2022 .quiz .predHint .hintMsg h3, .Quiz2022 .quiz .predHint .hintMsg h3 { float: right; display: inline-block; width: 100%; text-align: right; color: #fff; font-family: DroidKufiBold,Arial; font-size: 26px; line-height: 2; }
.Quiz2022 .quiz .predHint .hintMsg p, .Quiz2022 .quiz .predHint .hintMsg p { float: right; display: inline-block; width: 100%; text-align: right; color: #fff;  font-size: 14px; line-height: 2; margin: 20px 0 }
.Quiz2022 .quiz .predHint .regBtn, .Quiz2022 .quiz .predHint .regBtn { position: absolute; left: 20px; bottom: 20px; width: 200px; height: 50px; background: #4e2268; color: #fff;  font-size: 14px; line-height: 3.6; text-align: center; }
.Quiz2022 .quiz .title h2 { color: #fff }
.Quiz2022 .quiz .title:after { background-color: #666; }
.Quiz2022 .quiz { display: inline-block; width: calc(100% - 320px); float: right; margin-left: 20px; }
.Quiz2022 .quiz .quizSteps { display: inline-block; float: right; width: 100%; padding: 20px 40px 20px 20px; min-height: 90px; position: relative; margin-bottom: 40px; overflow: hidden; 
  background:linear-gradient(250deg, #581d6d  20%, #482260 80%) ;}
.Quiz2022 .quiz .quizSteps:before{content: '';background: url(../Images/Ramadan23/SeriesPattern.png);position: absolute;top: 0;right: 0;width: 100%;height: 100%;opacity: 0.4;z-index: 0; }
/*.Quiz2022 .quiz .quizSteps::after{    content: '';position: absolute;width: 100%;height: 100%;top: 0;right: 0;background: url(../Images/Ramadan23/SeriesPattern.png) top left repeat;opacity: 1;background-size: 108px 108px;pointer-events: none;z-index: 0;}
*/.Quiz2022 .quiz .quizHint .hintMsg { margin-bottom: 32px }
.Quiz2022 .quiz .quizHint .hintMsg h3, .Quiz2022 .quiz .quizHint .hintMsg p { color: #fff; width: 100% }
.Quiz2022 .quiz .quizHint .hintMsg h3 span.gift { text-align: right; color: #fff;  font-size: 16px; line-height: 2; margin: 20px 0 }
.Quiz2022 .quiz .quizHint .hintMsg h3 span.win { color: #f8a71b }
.Quiz2022 .quiz .quizHint .hintMsg p { margin: 0 }
.Quiz2022 .quiz .quizHint .regBtn { background: #fff; color: #4e2268; position: relative; float: right; display: inline-block; width: 160px; height: 50px; bottom: 0; left: 0; font-size: 22px; line-height: 22px; }
.Quiz2022 .quiz  .quizDekor.quizHint .dekor{display:inline-block;width:160px;height:165px;position:absolute;top:0;left:30px;background:url(../Images/Ramadan23/hlal.png) no-repeat, url(../Images/Ramadan23/lentern.png) no-repeat, url(../Images/Ramadan23/star.png) no-repeat;background-position: 0 0, 35px 6px, 91px 0;
    background-size: 15%, 24% ,18%;}
.Quiz2022 .quiz .step { display: inline-block; float: right; width: 100%; position: relative; height: 480px }
.Quiz2022 .quiz .quizSteps { padding: 32px }
.Quiz2022 .quiz .quizSteps .sponserLogo { display: inline-block; float: left; width: 230px; height: auto; position: absolute;bottom:15px;left:30px }
/*.Quiz2022 .quiz .quizSteps .sponserLogo:after { content: ''; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background: url(../Images/waffargaLogo.png?ref=0.1) no-repeat; background-size: 100% }*/
  .Quiz2022 .quiz .quizSteps .sponserLogo p{display:inline-block;float:right;color:#fff;font-family: DroidKufiLight,Arial;font-size:11px;margin-top:8px;    width: 100%;
    margin-bottom: 0;
    text-align: right;
    line-height: unset;}  
   .Quiz2022 .quiz .quizSteps .sponserLogo img{display:inline-block;float:right;width: 230px; height: auto; line-height: 1;margin-right: 0;}
 .Quiz2022 .quiz .quizSteps .sponserLogo span{display:inline-block;float:right;color:#fff;font-family: DroidKufiLight,Arial;font-size:11px;margin-top:8px;margin-right:12px;font-weight:unset}  
.Quiz2022 .quiz .quizSteps { padding: 115px 32px 60px 32px;border-radius:8px;border-top-right-radius:0 }
.Quiz2022 .quiz .quizDekor.quizSteps { padding: 60px 175px 60px 32px;border-radius:8px;border-top-right-radius:0 }
.Quiz2022 .quiz .quizSteps .dekor{display:inline-block;width:110px;height:165px;position:absolute;top:0;left:30px;background:url(../Images/Ramadan23/hlal.png) no-repeat, url(../Images/Ramadan23/lentern.png) no-repeat, url(../Images/Ramadan23/star.png) no-repeat;background-position: 0 0, 24px 1px, 60px -3px;
    background-size: 15%, 24% ,18%;}
.Quiz2022 .quiz .quizSteps .beforeContainer { display: inline-block; position: absolute; top: -1px; right: -1px; width: 150px; height: 150px; overflow:hidden}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{content: '';position: absolute;width: 25%;height: 90%;background-color: #703186;transform: rotate(135deg);z-index: 3;left: 21px;}
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya{display:inline-block;position:relative;width:100%;height:100%;background-color:#703186; border-bottom-left-radius: 20px;overflow:hidden }
.Quiz2022 .quiz .quizSteps .beforeContainer span { color: #330D46; font-family: BebasNeueBold, Arial; position: absolute; top: -6px; right: 8px; font-size: 103px;line-height:1 ;z-index:1}
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{content: '';border-right: 106px solid #fff;border-top: 106px solid transparent;border-bottom: 106px solid transparent;width: 0;height: 0;position: absolute;right: -15px;top: -68px;transform: rotate(135deg);z-index:1}
.Quiz2022 .quiz #welcome.step,
.Quiz2022 .quiz #intro.step { height: auto }
.Quiz2022 .quiz .tabs .regBtn.noImg .usericon { border: 1px solid #000 }
.Quiz2022 .quiz .tabs .regBtn.noImg .usericon:before { color: #000 }
.regBtn p.logout{display:none}
.quizLoaderGeneral { display: inline-block; position: absolute; width: 100%; height: 100%; right: 0; top: 0; z-index: 10; background-color: rgba(88, 29, 109, .9); }
.quizLoaderGeneral img { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:50px}
/** Date **/
.Quiz2022 .quiz .game-top { display: inline-block; float: right; width: 100%; margin-bottom: 100px; position: relative }
.Quiz2022 .quiz .game-top .date { float: right; display: inline-block; }
.Quiz2022 .quiz .game-top .date p { display: inline-block; float: right; width: 100%;  text-align: right; color: #fff; font-size: 16px; line-height: 1.8 }
/** Question Bar **/
.Quiz2022 .quiz .questionBar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 116px; height: 28px }
.Quiz2022 .quiz .questionBar:before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #b1badd; transform: translateY(-50%) }
.Quiz2022 .quiz .questionBar .icon-answer { display: inline-block; float: right; margin-left: 16px; width: 28px; height: 28px; border-radius: 50%; background: #4e2268; border: 2px solid #b1badd; color: #000; position: relative }
.Quiz2022 .quiz .questionBar .icon-answer:last-of-type { margin-left: 0 }
.Quiz2022 .quiz .questionBar .icon-answer:before { content: "Y"; visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; width: 18px; height: 18px; font-size: 18px; background: #fff; border-radius: 50%; line-height: 1; margin-top: 3px }
.Quiz2022 .quiz .question1 .questionBar .icon-answer:nth-child(1):before { visibility: visible; opacity: 1 }
.Quiz2022 .quiz .question2 .questionBar .icon-answer:nth-child(2):before { visibility: visible; opacity: 1 }
.Quiz2022 .quiz .question3 .questionBar .icon-answer:nth-child(3):before { visibility: visible; opacity: 1 }
/** Timer Bar **/
.Quiz2022 .quiz .inline-time { position: absolute; top: 58px; right: 0; left: 0; width: 100%; height: 18px }
.Quiz2022 .quiz .timerBar { zoom: 1; position: absolute; top: 0; right: 0; width: calc(100% - 30px); height: 100%; border: 2px solid #b1badd; background-color: #E03322; background: linear-gradient(to left,#f8a71b,#51266a); border-radius: 15px; display: inline-block; overflow: hidden }
.Quiz2022 .quiz .icon-timer { position: absolute; top: 0; left: 0; width: 30px; height: 100% }
.Quiz2022 .quiz .icon-timer:before { content: 'C'; color: #b1badd; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 18px; width: 18px; height: 18px; line-height: 1; border-radius: 50%; font-weight: bold }
.Quiz2022 .quiz .timerBar:before { content: ""; position: absolute; width: 100%; height: 100%; right: -100%; top: 0; background: #52276b; }
.Quiz2022 .quiz .question1 .timerBar:before { animation: timerBarQ1 21s linear forwards; animation-delay: 0s }
.Quiz2022 .quiz .question2 .timerBar:before { animation: timerBarQ2 21s linear forwards; animation-delay: 0s }
.Quiz2022 .quiz .question3 .timerBar:before { animation: timerBarQ3 21s linear forwards; animation-delay: 0s }
@keyframes timerBarQ1 {
    from { right: -100%; }
    to { right: 0 }
}
@keyframes timerBarQ2 {
    from { right: -100%; }
    to { right: 0 }
}
@keyframes timerBarQ3 {
    from { right: -100%; }
    to { right: 0 }
}
/** share **/
.Quiz2022 .toDoSocial { float: right; display: inline-block; width: 100%; margin: 20px auto }
.Quiz2022 .toDoSocial p { font-size: 16px;  color: #fff; width: 100%; text-align: center; margin-bottom: 20px }
.Quiz2022 a.icon-fb { display: inline-block; float: right; color: #fff; width: auto; background-color: #4267b2;  font-size: 14px; padding: 0 10px; margin-left: 10px; line-height: 32px }
.Quiz2022 a.icon-fb:before { content: 'u'; color: #fff; float: left; line-height: 32px }
.Quiz2022 a.logOut { display: inline-block; float: right; color: #2c2d5e; width: auto; background-color: #b1badd;  font-size: 14px; padding: 0 10px; line-height: 32px }
/** Get Ready **/
.Quiz2022 .quiz .getReadyTimer p { display: inline-block; float: right; width: 100%;  text-align: center; color: #fff; font-size: 32px; line-height: 3; margin-bottom: 30px }
.Quiz2022 .quiz .getReadyTimer span { display: inline-block; float: right; width: 100%;  font-weight: bold; text-align: center; color: #f8a71b; font-size: 120px; }
/** Questions **/
.Quiz2022 .quiz .questionDiv { display: inline-block; float: right; width: 100%; min-height: 150px; background: #fff; border-radius: 6px; overflow: hidden; margin-bottom: 16px; position: relative }
.Quiz2022 .quiz .questionDiv p { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; padding: 0 32px; font-family: DroidKufiBold, arial; text-align: center; color: #000; font-size: 24px; line-height: 1.6; }
.Quiz2022 .quiz .answerDiv { display: inline-block; float: right; width: 100% }
.Quiz2022 .quiz .answer { display: inline-block; float: right; width: calc((100% - 16px) / 2); height: 80px; background: #fff; border-radius: 6px; overflow: hidden; margin-bottom: 16px; margin-left: 16px; position: relative; cursor: pointer }
.Quiz2022 .quiz .answer:nth-of-type(2n) { margin-left: 0 }
.Quiz2022 .quiz .answer p { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; padding: 0 16px;  text-align: center; color: #000; font-size: 16px; line-height: 1.6; pointer-events: none }
.Quiz2022 .quiz .selected { background: #812e8a }
.Quiz2022 .quiz .selected p { color: #fff }
/** Results **/
.Quiz2022 .quiz .resultDiv { display: inline-block; float: right; width: 100% }
.Quiz2022 .quiz .resultDiv p { display: inline-block; float: right; width: 100%;  text-align: center; color: #fff; font-size: 32px; line-height: 3; margin-bottom: 16px }
.Quiz2022 .quiz .resultDiv p span { display: block; font-size: 20px; line-height: 1; margin-bottom: 20px; }
.Quiz2022 .quiz #result-section { height: auto }
.Quiz2022 .quiz .resultDiv .allStars { display: inline-block; float: right; width: 280px; height: 124px; margin: 0 calc((100% - 280px) / 2) 50px; position: relative }
.Quiz2022 .quiz .resultDiv .allStars .star { position: absolute; width: 76px; height: 76px; }
.Quiz2022 .quiz .resultDiv .allStars .star.icon-star:before { content: ""; width: 76px; height: 76px; background: url(../Images/star.png?ver=2) no-repeat top; background-size: 96% }
.Quiz2022 .quiz .resultDiv .allStars .star.icon-star:nth-child(1) { right: 0; bottom: 0 }
.Quiz2022 .quiz .resultDiv .allStars .star.icon-star:nth-child(2) { left: 50%; top: 0; transform: translateX(-50%) }
.Quiz2022 .quiz .resultDiv .allStars .star.icon-star:nth-child(3) { left: 0; bottom: 0 }
.Quiz2022 .quiz .resultDiv.oneStar .allStars .star.icon-star:nth-child(1):before { background: url(../Images/starFill.png?ver=2)no-repeat top; background-size: 96% }
.Quiz2022 .quiz .resultDiv.twoStar .allStars .star.icon-star:nth-child(1):before,
.Quiz2022 .quiz .resultDiv.twoStar .allStars .star.icon-star:nth-child(2):before { background: url(../Images/starFill.png?ver=2)no-repeat top; background-size: 96% }
.Quiz2022 .quiz .resultDiv.threeStar .allStars .star.icon-star:nth-child(1):before,
.Quiz2022 .quiz .resultDiv.threeStar .allStars .star.icon-star:nth-child(2):before,
.Quiz2022 .quiz .resultDiv.threeStar .allStars .star.icon-star:nth-child(3):before { background: url(../Images/starFill.png?ver=2)no-repeat top; background-size: 96% }
.Quiz2022 .quiz .resultDiv .yourScore { display: inline-block; float: right; width: 100%; height: 190px; position: relative; border: 1px solid #f8a71b; overflow: hidden }
.Quiz2022 .quiz .resultDiv .yourScore p { display: inline-block; float: right; width: 100%;  text-align: center; color: #fff; font-size: 22px; line-height: 2; margin: 20px 0 0px; }
.Quiz2022 .quiz .resultDiv #number-correct p { font-size: 42px; margin-bottom: 0; line-height: 1 }
.Quiz2022 .quiz .resultDiv .yourScore span { font-family: DroidKufiBold, Arial; font-size: 42px; display: inline-block }
.Quiz2022 .quiz .resultDiv .yourScore .slash { margin: 0 6px }
.Quiz2022 .quiz .afterLogin .welcomeHint { background: none; height: 150px; min-height: 100%; }
.Quiz2022 .quiz .afterLogin .welcomeHint .hintMsg h3 { color: #330D46; margin-top: 30px; }
.Quiz2022 .quiz .afterLogin .welcomeHint .hintMsg h3 span { font-weight: bold }
.Quiz2022 .quiz .afterLogin .welcomeHint .hintMsg p.first { color: #330D46; margin: 0 ;width:300px }
 .Quiz2022 .quiz .predHint .regBtn.afterloginDiv{display:inline-block;position: relative;
    float: left;
    left: auto;
    bottom: auto;}
 .Quiz2022 .quiz .predHint .regBtn.afterloginDiv p{margin:0;line-height:50px;text-align:center}
.Quiz2022 .quiz .afterLogin .welcomeHint .yourScore { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 230px; height: 120px; border: 1px solid #3b3d72; overflow: hidden }
.Quiz2022 .quiz .afterLogin .welcomeHint .yourScore p { display: inline-block; float: right; width: 100%;  text-align: center; color: #3b3d72; font-size: 22px; line-height: 1.8; margin: 10px 0 0px; }
.Quiz2022 .quiz .afterLogin .welcomeHint .userScore p { font-size: 42px; margin-bottom: 0; line-height: 1 }
.Quiz2022 .quiz .afterLogin .welcomeHint .yourScore span { font-family: DroidKufiBold, Arial; font-size: 42px;}
.Quiz2022 .quiz .afterLogin .welcomeHint .yourScore .slash { margin: 0 6px }
.Quiz2022 .quiz .quizSteps .getReadyTimer .sponserLogo {left:0}
.Quiz2022 .quiz .quizSteps .gameBlock .sponserLogo  {left:0;bottom:-20px}
.Quiz2022 .quiz .hidden { display: none; }
.Quiz2022 .quiz .inline { display: inline; }
.Quiz2022 .quiz #question-num, .Quiz2022 .quiz .inline-time { display: inline-block; }
/** Countdown **/
.Quiz2022 .quiz .quizCounterDiv { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 215px; }
.Quiz2022 .quiz .quizCounterDiv .counterHint { display: inline-block; float: right; font-family: DroidKufiBold, Arial; font-size: 12px; color: #fff; text-align: right; margin-left: 16px; line-height: 3.4; }
.Quiz2022 .quiz .quizCounter { text-align: left; direction: ltr; display: inline-block; float: right; }
.Quiz2022 .quiz .icon-time:before { content: 'i'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 14px }
.Quiz2022 .quiz .quizTimer { display: inline-block; float: left;  font-size: 20px; margin-right: 4px; line-height: 2; color: #fff }
.Quiz2022 .quiz .quizTimer:last-of-type { margin-right: 0 }
/** Quiz Start Countdown **/
.Quiz2022 .quiz .quizStartCounter { display: inline-block; float: right; text-align: left; direction: ltr; float: right; width: 204px; }
.Quiz2022 .quiz .quizStartTimer { display: inline-block; float: left;  font-size: 32px; margin-right: 20px; line-height: 1; color: #fff; position: relative }
.Quiz2022 .quiz .quizStartTimer:last-of-type { margin-right: 0 }
.Quiz2022 .quiz .quizStartTimer:after { content: "e"; position: absolute; right: -16px; bottom: 0;  font-size: 32px }
.Quiz2022 .quiz .quizStartTimer:last-child:after { display: none }
.Quiz2022 .quiz .quizStartTimer span {  color: #fff; font-size: 12px; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%) }
.Quiz2022 .quiz .quizHint.quizMainCounter { padding: 32px 32px 50px }
.Quiz2022 .quiz .quizHint.quizMainCounter .hintMsg { margin-bottom: 20px }

.Quiz2022 .quiz .quizProtID{display:inline-block;float:right;font-size:11px;color:#fff;text-align:right;direction:rtl;position:absolute;right:175px;bottom:30px}




/********** Akhbar Themak **********/
.akhbarthemak { display: inline-block; float: left;width:100%;height:655px; }
.akhbarThemak { float: right; width: 300px; height:625px; box-shadow: none; overflow: hidden; position: relative; border: 1px solid #e8e8e8; background: #fff }
.akhbarThemak .ttl { display: inline-block; float: right; width: 100%; height: 48px; overflow: hidden; padding: 0 12px; background: #E03322; border-bottom: none !important }
.akhbarThemak .ttl .inTtl { float: right; display: inline-block; padding: 0px; font-family: DroidKufiBold, Arial; font-size: 18px; background: none !important; color: #fff; display: block; line-height: 48px; }
.akhbarThemak .ttl .inTtl:after { display: none }
.akhbarThemak .ttl .inTtl a { color: #fff }
.akhbarThemak .ttl .icons { display: inline-block; float: left; }
.akhbarThemak .ttl .icons .cd-popup-setting, .akhbarThemak .ttl .icons .cd-popup-notify { display: inline-block; float: right; }
.akhbarThemak .ttl .icons .cd-popup-notify { margin-right: 10px }
.akhbarThemak .ttl .icons .icon-setting:before { content: "p"; color: #fff; font-size: 20px; line-height: 48px }
.akhbarThemak .ttl .icons .icon-notify:before { content: "i"; color: #fff; font-size: 22px; line-height: 48px }
.akhbarThemak .popupSetting, .akhbarThemak .popupNotify { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; transition: opacity 0.2s 0s, visibility 0s 0.2s; }
.akhbarThemak .popupSetting.is-visible, .akhbarThemak .popupNotify.is-visible { opacity: 1; visibility: visible; z-index: 10; -webkit-transition: opacity 0.2s 0s, visibility 0s 0s; -moz-transition: opacity 0.2s 0s, visibility 0s 0s; transition: opacity 0.2s 0s, visibility 0s 0s; }
.akhbarThemak .cd-popup-container { position: absolute; padding: 24px; width: 1000px; height: 500px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #FFF; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }
.akhbarThemak .cd-popup-container h2 { display: inline-block; width: 100%; font-family: DroidKufiBold, Arial; font-size: 22px; color: #1d1d1d; margin-bottom: 0; padding: 0; background: none; }
.akhbarThemak .cd-popup-container h2:after { display: none }
.akhbarThemak .cd-popup-container h4 { display: inline-block; float: right; width: 100%;  font-size: 13px; color: #666; margin-bottom: 12px; padding: 0; text-align: right }
.akhbarThemak .cd-popup-container .sectionContainer { display: inline-block; float: right; width: 100%; position: relative }
.akhbarThemak .cd-popup-container .sec { display: inline-block; width: calc((100% - 160px) / 5); float: right; margin-left: 12px }
.akhbarThemak .cd-popup-container .sec:last-child { margin-left: 0; width: 100px }
.akhbarThemak .cd-popup-container h3 { display: inline-block; width: 100%; font-family: DroidKufiBold, Arial; font-size: 14px; color: #1d1d1d; margin-bottom: 12px; padding-right: 0; background: #eee }
.akhbarThemak .cd-popup-container .cd-buttons { position: absolute; left: 50%; bottom: 20px; width: 410px; height: 50px; transform: translateX(-50%) }
.akhbarThemak .cd-popup-container .cd-buttons a { position: relative; top: 0; left: 0; float: right; background: #ddd; margin-left: 10px; width: 200px; height: 50px;  font-size: 14px; color: #1d1d1d; text-align: center; display: inline-block; line-height: 50px; }
.akhbarThemak .cd-popup-container .cd-buttons a:before, .akhbarThemak .cd-popup-container .cd-buttons a:after { display: none }
.akhbarThemak .cd-popup-container .cd-buttons a:first-child { background: #E03322; color: #fff }
.akhbarThemak .cd-popup-container .cd-buttons a:hover { background: #ccc }
.akhbarThemak .cd-popup-container .cd-buttons a:first-child:hover { background: #E03322 }
.akhbarThemak .cd-popup-container .cd-buttons a:last-child { margin-left: 0 }
/** Notify **/
.akhbarThemak .cd-popup-notify { position: relative }
.akhbarThemak .cd-popup-notify .ntfyNum { position: absolute; top: 8px; right: -10px; width: 17px; height: 17px; background: red; border-radius: 50%; color: #fff; text-align: center; font-family: Arial; font-size: 12px; line-height: 1.5 }
.akhbarThemak .cd-popup-container.notify { width: 700px; height: 150px }
.akhbarThemak .cd-popup-container.notify p { display: inline-block; width: 100%;  font-size: 15px; text-align: center; color: #1d1d1d; margin-bottom: 0; padding: 0; line-height: 102px }
.akhbarThemak .cd-popup-container .cd-popup-close { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; }
.akhbarThemak .cd-popup-container .cd-popup-close::before, .akhbarThemak .cd-popup-container .cd-popup-close::after { content: ''; position: absolute; top: 0; width: 2px; height: 100%; background-color: #1d1d1d; opacity: 0.2; transition: opacity 0.2s ease-in-out 0s; -webkit-transition: opacity 0.2s ease-in-out 0s; -moz-transition: opacity 0.2s ease-in-out 0s; -ms-transition: opacity 0.2s ease-in-out 0s; -o-transition: opacity 0.2s ease-in-out 0s; }
.akhbarThemak .cd-popup-container .cd-popup-close:hover::before, .akhbarThemak .cd-popup-container .cd-popup-close:hover::after { opacity: 1 }
.akhbarThemak .cd-popup-container .cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.akhbarThemak .cd-popup-container .cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
body.popupOverlay { position: fixed ;top: 0;left: 0;bottom: 0;right: 0;}
.akhbarThemak ul { display: inline-block; float: right; width: 100%; padding: 0 10px; }
.akhbarThemak li { width: 100%; display: inline-block; float: right; padding: 10px 0; position: relative; border-bottom: 1px solid #e8e8e8 }
.akhbarThemak li:last-child { border-bottom: none }
.akhbarThemak ul li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: calc((100px * 75) / 100); float: right; width: 100px; }
.akhbarThemak li img { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0 auto; float: right; width: auto; max-width: unset; height: 100%;object-fit: cover; }
.akhbarThemak li .cnts { display: inline-block; float: right; width: calc(100% - 100px); padding-right: 10px }
.akhbarThemak li h2 { float: right; width: 100%;  color: #000; font-size: 13px; line-height: 1.6; height: 42px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.akhbarThemak li .secName { display: inline-block; float: right; margin-bottom: 6px; font-family: DroidKufiBold, Arial; color: #fff; font-size: 12px; }
/*.akhbarThemak li .secName:before{content:"";float:right;margin-left:5px;width:4px;height:12px;background:#E03322;margin-top:4px}*/
.akhbarThemak li.native{padding: 0;border-bottom: none;}
.akhbarThemak.fixed { position: fixed }

@media screen and (min-width:1680px) and (max-width:1919px) {
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-child(2n) {  font-size: 20px; }
.Quiz2022 .quiz .quizDekor.quizSteps{ padding: 60px 145px 60px 32px;}
.Quiz2022 .quiz .quizProtID{right:145px}
.Quiz2022 .quiz .quizSteps .beforeContainer {width: 130px; height: 130px;}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{left:18px}
.Quiz2022 .quiz .quizSteps .beforeContainer span { font-size: 88px; }
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-top: 92px solid transparent;border-bottom: 92px solid transparent;border-right: 92px solid #fff;right: -13px;top: -59px;}
.Quiz2022 .quiz .quizDekor.quizHint .dekor{background-position: 0 -15px, 32px 0, 80px -12px;background-size: 15%, 22% ,16%;left:20px}
.Quiz2022 .quiz .quizSteps .dekor{left:20px}
.Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
}


@media screen and (min-width:1600px) and (max-width:1679px) {
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-child(2n) {  font-size: 20px; }
.Quiz2022 .quiz .quizDekor.quizSteps { padding: 60px 145px 60px 32px;}
.Quiz2022 .quiz .quizProtID{right:145px}
.Quiz2022 .quiz .quizSteps .beforeContainer {width: 130px; height: 130px;}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{left:18px}
.Quiz2022 .quiz .quizSteps .beforeContainer span { font-size: 88px; }
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-top: 92px solid transparent;border-bottom: 92px solid transparent;border-right: 92px solid #fff;right: -13px;top: -59px;}
.Quiz2022 .quiz .quizDekor.quizHint .dekor{background-position: 0 -15px, 32px 0, 80px -12px;background-size: 15%, 22% ,16%;left:20px}
.Quiz2022 .quiz .quizSteps .dekor{left:20px}
.Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
}

@media screen and (min-width:1536px) and (max-width:1599px) {
    
.Quiz2022 .quiz .predHint .hintMsg h3:nth-child(2n) {  font-size: 20px; }
.Quiz2022 .quiz .quizDekor.quizSteps { padding: 60px 145px 60px 32px;}
.Quiz2022 .quiz .quizProtID{right:145px}
.Quiz2022 .quiz .quizSteps .beforeContainer {width: 130px; height: 130px;}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{left:18px}
.Quiz2022 .quiz .quizSteps .beforeContainer span { font-size: 88px; }
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-top: 92px solid transparent;border-bottom: 92px solid transparent;border-right: 92px solid #fff;right: -13px;top: -59px;}
.Quiz2022 .quiz .quizDekor.quizHint .dekor{background-position: 0 -15px, 32px 0, 80px -12px;background-size: 15%, 22% ,16%;left:20px}
.Quiz2022 .quiz .quizSteps .dekor{left:20px}
.Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
}

@media screen and (min-width:1440px) and (max-width:1535px) {
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-child(2n) {  font-size: 20px; }
.Quiz2022 .quiz .quizDekor.quizSteps { padding: 60px 145px 60px 32px;}
.Quiz2022 .quiz .quizProtID{right:145px}
.Quiz2022 .quiz .quizSteps .beforeContainer {width: 130px; height: 130px;}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{left:18px}
.Quiz2022 .quiz .quizSteps .beforeContainer span { font-size: 88px; }
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-top: 92px solid transparent;border-bottom: 92px solid transparent;border-right: 92px solid #fff;right: -13px;top: -59px;}
.Quiz2022 .quiz .quizDekor.quizHint .dekor{background-position: 0 -15px, 32px 0, 80px -12px;background-size: 15%, 22% ,16%;left:20px}
.Quiz2022 .quiz .quizSteps .dekor{left:20px}
.Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
}

@media screen and (min-width:1360px) and (max-width:1439px) {
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-child(2n) {  font-size: 20px; }
.Quiz2022 .quiz .quizDekor.quizSteps{ padding: 60px 145px 60px 32px;}
.Quiz2022 .quiz .quizProtID{right:145px}
.Quiz2022 .quiz .quizSteps .beforeContainer {width: 130px; height: 130px;}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{left:18px}
.Quiz2022 .quiz .quizSteps .beforeContainer span { font-size: 88px; }
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-top: 92px solid transparent;border-bottom: 92px solid transparent;border-right: 92px solid #fff;right: -13px;top: -59px;}
.Quiz2022 .quiz .quizDekor.quizHint .dekor{background-position: 0 -15px, 32px 0, 80px -12px;background-size: 15%, 22% ,16%;left:20px}
.Quiz2022 .quiz .quizSteps .dekor{left:20px}
.Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
}

@media screen and (min-width:1280px) and (max-width:1359px) {
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-child(2n) {  font-size: 18px; }
.Quiz2022 .quiz .quizDekor.quizSteps { padding: 68px 128px 60px 32px;}
.Quiz2022 .quiz .quizProtID{right:128px}
.Quiz2022 .quiz .quizSteps .beforeContainer {width: 110px; height: 110px;}
.Quiz2022 .quiz .quizSteps .beforeContainer:before{left:15px}
.Quiz2022 .quiz .quizSteps .beforeContainer span { font-size: 76px; }
.Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-top: 78px solid transparent;border-bottom: 78px solid transparent;border-right: 78px solid #fff;right: -11px;top: -50px;}
.Quiz2022 .quiz .quizDekor.quizHint .dekor{background-position:0px -15px, 25px 0, 66px -12px;background-size: 13%, 19% ,15%;left:20px}
.Quiz2022 .quiz .quizSteps .dekor{left:20px}
.Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}

    .Quiz2022 .quiz .predHint .hintMsg h3 { font-size: 20px; }
      .Quiz2022 .quiz .predHint .hintMsg h3:nth-of-type(2n){width:calc(100% - 100px)!important}
    .Quiz2022 .quiz .predHint .hintMsg p { margin: 20px 0 30px; font-size: 12px; }
    .Quiz2022 .quiz .predHint .regBtn { width: 130px; height: 40px; display: inline-block; line-height: 2.5; font-size: 16px; }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
     .Quiz2022 .quiz .predHint { padding: 20px }
    .Quiz2022 .quiz .predHint .hintMsg h3 { font-size: 18px; line-height: 1.8; text-align: center }
    .Quiz2022 .quiz .predHint .hintMsg p { text-align: center; margin: 20px 0 30px; font-size: 12px; }
    .Quiz2022 .quiz .predHint .regBtn { width: 100%; left: 0; bottom: 20px; height: 40px; display: inline-block; line-height: 3.0; font-size: 14px;position:relative }
    .Quiz2022 .quiz .afterLogin .welcomeHint { height: auto }
    .Quiz2022 .quiz .afterLogin .welcomeHint .yourScore { position: relative; left: auto; top: auto; transform: none; text-align: center; margin: 0 auto; }
    .Quiz2022 .quiz .quizSteps { padding: 50px 32px 85px }
    .Quiz2022 .quiz .quizSteps .beforeContainer { width: 100px; height: 100px; left: 20px }
    .Quiz2022 .quiz .quizSteps .beforeContainer:before{left:13px}
    .Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-right: 72px solid #fff;
 border-top: 72px solid transparent;border-bottom: 72px solid transparent;right: -11px;  top: -46px;}
.Quiz2022 .quiz .predHint .hintMsg h3:nth-of-type(2n){width:100%!important}    
.Quiz2022 .quiz .quizDekor.quizSteps{padding: 90px 32px 60px 32px;}
    .Quiz2022 .quiz .quizProtID{right:32px;bottom:14px}
    .Quiz2022 .quiz .quizDekor.quizHint .dekor{    background-position: 0 0, 22px 2px, 54px 0;width:95px;height:95px;left:20px}
    .Quiz2022 .quiz .quizSteps .dekor{left:20px}
    .Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
    .Quiz2022 .quiz .quizSteps .sponserLogo p, .Quiz2022 .quiz .quizSteps .sponserLogo span{font-size:10px}
    .Quiz2022 .quiz .quizSteps .sponserLogo{bottom:6px}
    .Quiz2022 .quiz .quizSteps .sponserLogo img{width:80px}
    .Quiz2022 .quiz .quizSteps .beforeContainer span {font-size: 68px }
    .Quiz2022 .quiz .getReadyTimer p { font-size: 16px; line-height: 1.8 }
    .Quiz2022 .quiz .resultDiv p { font-size: 16px; line-height: 1.8; margin-bottom: 24px }
    .Quiz2022 .quiz .resultDiv .allStars .star { background-size: 85% }
     .Quiz2022 .quiz .quizSteps .sponserLogo{width:100px}
    .Quiz2022 .quiz .quizSteps .sponserLogo img{width:100px}
}

@media screen and (min-width:1024px) and (max-width:1151px) {
    .Quiz2022 .quiz .predHint { padding: 20px }
    .Quiz2022 .quiz .predHint .hintMsg h3 { font-size: 18px; line-height: 1.8; text-align: center }
    .Quiz2022 .quiz .predHint .hintMsg p { text-align: center; margin: 20px 0 30px; font-size: 12px; }
    .Quiz2022 .quiz .predHint .regBtn { bottom: 20px; left: 0; width: 100%; height: 40px; display: inline-block; line-height: 3.0; font-size: 14px;position:relative }
      .Quiz2022 .quiz .quizSteps { padding: 50px 32px 85px }
    .Quiz2022 .quiz .quizSteps .beforeContainer { width: 100px; height: 100px; left: 20px }
    .Quiz2022 .quiz .quizSteps .beforeContainer:before{left:13px}
    .Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before{border-right: 72px solid #fff;
    border-top: 72px solid transparent;
    border-bottom: 72px solid transparent;right: -11px;
    top: -46px;}
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-of-type(2n){width:100%!important}
    .Quiz2022 .quiz .quizDekor.quizSteps{padding: 90px 32px 60px 32px;}
    .Quiz2022 .quiz .quizProtID{right:32px;bottom:14px}
    .Quiz2022 .quiz .quizDekor.quizHint .dekor{    background-position: 0 0, 22px 2px, 54px 0;width:95px;height:95px;left:20px}
    .Quiz2022 .quiz .quizSteps .dekor{left:20px}
    .Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
    .Quiz2022 .quiz .quizSteps .sponserLogo p, .Quiz2022 .quiz .quizSteps .sponserLogo span{font-size:10px}
    .Quiz2022 .quiz .quizSteps .sponserLogo{bottom:6px}
    .Quiz2022 .quiz .quizSteps .sponserLogo img{width:80px}
    .Quiz2022 .quiz .quizSteps .beforeContainer span {font-size: 68px }
    .Quiz2022 .quiz .getReadyTimer p { font-size: 16px; line-height: 1.8 }
    .Quiz2022 .quiz .resultDiv p { font-size: 16px; line-height: 1.8; margin-bottom: 24px }
    .Quiz2022 .quiz .resultDiv .allStars .star { background-size: 85% }
    .Quiz2022 .quiz .afterLogin .welcomeHint { height: auto }
    .Quiz2022 .quiz .afterLogin .welcomeHint .yourScore { position: relative; left: auto; top: auto; transform: none; text-align: center; margin: 0 auto; }

    .Quiz2022 .quiz .quizSteps .sponserLogo{width:100px}
    .Quiz2022 .quiz .quizSteps .sponserLogo img{width:100px}
}


@media screen and (max-width: 1023px) {
     .akhbarThemak.fixed { position: relative; }
    .akhbarThemak { width: 100%; top: 0 !important; height: auto !important; }
    .akhbarThemak .cd-popup-container { width: 700px; height: 400px; }
    .akhbarThemak .cd-popup-container .sectionContainer { overflow-y: scroll; overflow-x: hidden; height: 200px }
    .akhbarThemak .cd-popup-container h4 { margin-bottom: 20px }
    .akhbarThemak .cd-popup-container h3 { line-height: 36px }
    .akhbarThemak .cd-popup-container .sec { width: 100%; margin-left: 0; margin-bottom: 24px; float: none; }
    .akhbarThemak .cd-popup-container .sec:nth-child(6n+1) { margin-left: 0 }
    .akhbarThemak input[type="checkbox"] + label { margin: 0 0 10px 20px; width: auto }
    .akhbarThemak .cd-popup-container .sec:last-child { width: 100% }
    .Quiz2022 .quiz .predHint .hintMsg h3:nth-of-type(2n){width:100%!important}
    
    .Quiz2022 .quiz{width:100%;margin-left:0}
    .leftSide{width:100%}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
         .akhbarthemak{height:626px}

     .akhbarThemak .cd-popup-container { width: 300px; height: 400px; padding: 24px 10px }
    .akhbarThemak .cd-popup-container h2 { font-size: 18px }
    .akhbarThemak .cd-popup-container h4 { font-size: 12px }
    .akhbarThemak .cd-popup-container .sec { width: 100%; margin-left: 0; margin-bottom: 24px }
    .akhbarThemak .cd-popup-container .sec:nth-child(6n+1) { margin-left: 0; margin-bottom: 0 }
    .akhbarThemak input[type="checkbox"] + label { margin: 0 0 12px; width: 100% }
    .akhbarThemak .cd-popup-container.notify { width: 300px; height: 150px; }
    .akhbarThemak .cd-popup-container .cd-buttons { width: 280px; height: 40px; }
    .akhbarThemak .cd-popup-container .cd-buttons a { width: 135px; height: 40px; line-height: 40px; font-size: 13px; }
        .akhbarThemak li img { width: 100%; height: auto; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) }

          .akhbarThemak { width: calc(100% - 20px); top: 0 !important; margin: 0 10px 40px;height:590px }
    .akhbarThemak li .secName { margin-bottom: 2px; font-size: 13px }
    .akhbarThemak ul li .item .imageCntnr { padding-bottom: calc((130px * 56.25) / 100); width: 130px }
    .akhbarThemak li .cnts { width: calc(100% - 130px); }
    .akhbarThemak li h2 { font-size: 13px; height: auto }

      .Quiz2022 .quiz .predHint { padding: 20px }
    .Quiz2022 .quiz .predHint .hintMsg h3 { font-size: 18px; line-height: 1.8; text-align: center }
    .Quiz2022 .quiz .predHint .hintMsg p { text-align: center; margin: 20px 0 30px; font-size: 12px; }
    .Quiz2022 .quiz .predHint .regBtn { bottom: 10px; left: 0; width: 100%; height: 40px; display: inline-block; line-height: 3.0; font-size: 14px; position:relative}
    .Quiz2022 .quiz .quizSteps { padding: 50px 32px 85px }
    .Quiz2022 .quiz .quizSteps .beforeContainer { width: 80px; height: 80px; left: 10px }
    .Quiz2022 .quiz .quizSteps .beforeContainer .tanya:before {
    content: '';
    border-right: 58px solid #fff;
    border-top: 58px solid transparent;
    border-bottom: 58px solid transparent;right: -9px;
    top: -37px;}
  .Quiz2022 .quiz .quizSteps .sponserLogo{left:20px}
    .Quiz2022 .quiz .quizSteps .sponserLogo p, .Quiz2022 .quiz .quizSteps .sponserLogo span{font-size:10px}
    .Quiz2022 .quiz .quizSteps .sponserLogo{bottom:6px}
    .Quiz2022 .quiz .quizSteps .sponserLogo img{width:130px}
    
    .Quiz2022 .quiz .quizSteps .toDoSocial .sponserLogo{left:-26px;bottom:-55px}
    .Quiz2022 .quiz .predHint .regBtn.afterloginDiv{width:300px;float:none}
    .Quiz2022 .quiz .predHint .regBtn.afterloginDiv p{text-align:center;line-height:40px}
    .Quiz2022 .quiz .afterLogin .welcomeHint .hintMsg p.first{width:100%}
    .Quiz2022 .quiz .quizDekor.quizHint .dekor{    background-position: 0 0, 20px 2px, 50px 0;;left:20px;width: 80px;
    height: 92px;}
    .Quiz2022 .quiz .quizSteps .dekor{    background-position: 0 0, 20px 2px, 50px 0;;left:20px;width: 80px;
    height: 92px;}
    .Quiz2022 .quiz .quizSteps .beforeContainer span {font-size: 55px;top:0 }
    .Quiz2022 .quiz .quizSteps .beforeContainer:before{left:10px}
    .Quiz2022 .quiz .quizDekor.quizSteps, .Quiz2022 .quiz .quizSteps{padding: 105px 32px 90px;}

    .Quiz2022 .quiz .quizProtID{right:32px;bottom:60px}

    .Quiz2022 .quiz .getReadyTimer p { font-size: 16px; line-height: 1.8 }
    .Quiz2022 .quiz .resultDiv p { font-size: 16px; line-height: 1.8; margin-bottom: 24px }
    .Quiz2022 .quiz .resultDiv .allStars .star { background-size: 85% }
    .Quiz2022 .quiz .afterLogin .welcomeHint { height: 70px; min-height: 100%; padding: 0; }
    .Quiz2022 .quiz .afterLogin .welcomeHint .hintMsg h3 { margin-top: 20px; text-align: center }
    .Quiz2022 .quiz .afterLogin .welcomeHint .yourScore { width: 120px; height: 70px; left: 0 }
    .Quiz2022 .quiz .afterLogin .welcomeHint .yourScore p { font-size: 15px; margin: 6px 0 0px; }
    .Quiz2022 .quiz .resultDiv .yourScore p { font-size: 15px }
    .Quiz2022 .quiz .afterLogin .welcomeHint .yourScore span { font-size: 24px }
    .Quiz2022 .quiz .getReadyTimer p,
    .Quiz2022 .quiz .resultDiv p { font-size: 20px; line-height: 2.4 }
    .Quiz2022 .quiz .getReadyTimer span { font-size: 92px }
    .Quiz2022 .quiz .game-top .date p { font-size: 12px; line-height: 2.6 }
    .Quiz2022 .quiz .questionDiv { min-height: 130px }
    .Quiz2022 .quiz .questionDiv p { padding: 0 16px; font-size: 18px }
    .Quiz2022 .quiz .answer { width: 100%; height: 50px; margin-bottom: 16px; margin-left: 0px; }
    .Quiz2022 .quiz .answer p { font-size: 14px; }
    .Quiz2022 .quiz .resultDiv .allStars { width: 200px; height: 100px; margin: 0 calc((100% - 200px) / 2) 30px; }
    .Quiz2022 .quiz .resultDiv .allStars .star { width: 60px; height: 60px }
    .Quiz2022 .quiz .afterLogin .welcomeHint { height: auto }
    .Quiz2022 .quiz .afterLogin .welcomeHint .yourScore { position: relative; left: auto; top: auto; transform: none; text-align: center; margin: 0 auto; }
    .registerPopup .login-box.loginActive, .openRegister .login-box.signUpActive { width: calc(100% - 20px); height: calc(100% - 70px); top: 60px; transform: translateX(-50%); }
    .openRegister .login-box { width: calc(100% - 20px) !important; height: calc(100% - 80px) !important; top: 60px; transform: translateX(-50%); padding: 0 }
    .openRegister .login-box.phonenumber { height: 340px !important }
    .registerPopup .login-box h3 { height: 50px; line-height: 3 }
    .registerPopup .login-box .closePopup { top: 12px }
    .registerPopup .login-box { padding: 0 }
    .registerPopup .lb-header a { margin: 0 0 0 20px; width: calc((100% - 20px) /2); float: right }
    .registerPopup .lb-header a:last-child { margin: 0 }
    .registerPopup .email-login { padding: 10px }
    .registerPopup .email-signup { padding: 20px 10px 10px }
    .registerPopup .u-form-group.error { margin-bottom: 20px }
    .registerPopup .u-form-group.error:nth-child(5) { margin-bottom: 10px }
    .registerPopup .u-form-group .itemError { font-size: 11px }
    .registerPopup .signUpActive .u-form-group.error .pass, .registerPopup .signUpActive .u-form-group.error .ConfirmPassword { margin-top: 20px }
    .registerPopup .login-box h3 { margin-bottom: 10px }
    .registerPopup .login-box.loginActive.error { height: calc(100% - 70px); margin-top: 0 }
    .registerPopup .u-form-group input[type="email"], .registerPopup .u-form-group input[type="password"], .registerPopup .u-form-group input[type="text"], .u-form-group input[type="tel"] { height: 40px }
    .registerPopup .u-form-group button, .registerPopup .u-form-group .Compelete, .registerPopup .u-form-group .SigninBtn, .registerPopup .u-form-group .SignupBtn { margin-top: 0 }
  
}