@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
* { margin: 0px; padding: 0px; box-sizing: border-box; }
:root { --main-color: #02AA74; }
body {width: 100%;height: 100vh;font-family: "Plus Jakarta Sans",sans-serif !important;font-feature-settings: "tnum" on, "lnum" on;background: url(../images/Body-bg.svg);background-size: cover;}
h1{font-size: 76.22px;font-weight: 700;}
h2{font-size: 48px;font-weight: 700;}
h6{font-size: 22px;font-weight: 400;}
a{cursor: pointer;} 
/* Login Page Styling */
.main{position: relative;height:  calc(100vh - 66px);}
.LoginWrap {width: 100%;height: calc(100vh - 63px);display: flex;}
.LoginForm img {width: 250px;height: 46.77px;}
.LeftLogin {width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;gap: 25.44px;padding: 0;justify-content: center;}
.LoginImgCont { background-image: url(../images/LoginLeftImg.svg); width: 100%; background-repeat: no-repeat; background-position: center; height: 449.15px; }
.LoginImgCont img { width: 100%; height: 100%; object-fit: cover; }
.RightLogin { width: 50%; height: calc(100% + 63px); background-color: #fff; z-index: 99; position: relative; display: flex; align-items: center; justify-content: center; }
.LoginPara { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.LoginPara h6 { text-align: center; }
footer { position: fixed; bottom: 0; z-index: 99; width: 100%; display: flex; padding: 21px 30px; justify-content: space-between; }
.SocialMediaWrap { display: flex; gap: 22.67px; align-items: center; }
.SocialMediaWrap a { width: 19px; height: 19px; cursor: pointer; }
.SocialMediaWrap a img { width: 100%; height: 100%; object-fit: cover; }
.LoginForm { padding: 60px 30px; box-shadow: 0px 5px 20px 0px #0000001A; background-color: #fff; display: flex; align-items: center; justify-content: center; gap: 40px; flex-direction: column; border-radius: 10px; }
.LogBtnWrap { display: flex; flex-direction: column; gap: 15px; }
a.continuephonrbtn { background-color: var(--main-color); color: #fff; }
.LogBtnWrap a { padding: 24px 88px; text-align: center; border-radius: 135px; text-decoration: none; cursor: pointer; font-size: 18px; font-weight: 400; }
a.continuegoogle-btn { box-shadow: 0px 18px 30px 0px #8377C61C; color: #141415; border: 1px solid #E0E0E9; display: flex; align-items: center; gap: 10.46px; }
.contactus { padding: 0px !important; font-size: 16px; font-weight: 400; color: #141415; }
.HomeLeft, .HomeRight { width: 50%; }
.winner { background-color: #02AA74 !important; }
/* Header Styling */
header { display: flex; align-items: center; justify-content: space-between; padding: 33.29px 30px; position: fixed; top: 0; width: 100%; z-index: 2; height: 104px; }
.Btn { background-color: var(--main-color); border-radius: 74px; color: #fff; font-size: 15px; font-weight: 400; padding: 12px 25px; text-decoration: none; width: fit-content; }
/* Home Page Styling */
.HomeWrap { padding-top: 104px; }
.HomeWrap .HomeRight { padding: 88.14px 102.82px 126.87px; }
.HomeWrap .HomeRight img { width: 100%; height: 100%; }
.HomeLeft { display: flex; align-items: center; justify-content: center; }
.HomeWrap .HomeLeft .HomeLeftCont { DISPLAY: flex; flex-direction: column; gap: 30px; }
.HomeLeft ul li { font-size: 27.22px; font-weight: 400; line-height: 40.83px; }
.HomeLeft ul { padding-left: 35px; }
.StartNowBtn { display: flex; gap: 25px; }
.StartNowBtn img { width: 24.5px; height: 20.42px; } 
/* HomeQuizpage Styling */
.HomQuizLeft { padding: 78.14px 140px 116px 74px; width: 75%; display: flex; align-items: center; }
.HomeQuizLeftCont { display: flex; flex-direction: column; gap: 50px; width: 100%; }
input.AnswerInput { border: 1px solid #E0E0E9; background: #fff; padding: 30px; border-radius: 135px; width: 80%; font-size: 20px; font-weight: 400; color: #141415; box-shadow: 0px 18px 30px 0px #8377C61C;font-family: "Plus Jakarta Sans",sans-serif !important;}
.span-wrap { display: flex; padding: 0px 30px; gap: 20px; margin-top: 10px; font-size: 16px; font-weight: 500; color: #FF1400; }
.wronginputWrap { width: 80%;}
.wronginputWrap input { width: 100%;}
input.AnswerInput::placeholder { font-size: 20px; font-weight: 400; color: #141415; }
.AnswerBtnWrap { display: flex; justify-content: space-between; gap: 25px; }
a.SubmitBtn { width: 25%; height: 100%; background-color: var(--main-color); display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: #fff !important; border-radius: 135px; padding: 30px 40px; font-size: 20px; font-weight: 400; }
.KeybordDisplayWrap { border: 1px solid #02AA74; padding: 10px; max-width: 60%; margin: auto; }
.keyboard-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.keyBtn {border: 1px solid #ccc;font-size: 23.52px;height: 79px;font-weight: 400;background-color: #f3f3f3;cursor: pointer;display: flex;align-items: center;justify-content: center;}
.rotate-device-message{display: none;}
.keyBtn:hover {background-color: #e0e0e0;}
.letter-btn {font-size: 23.52px;height: 79px;text-align: center;cursor: pointer;border-radius: 8.71px;border: 0.42px solid #000;background: transparent;transition: 0.3s;font-weight: 500;display: flex;align-items: center;justify-content: center;font-family: "Plus Jakarta Sans",sans-serif !important;color: #000 !important;}
.char-row {display: grid;gap: 10px;z-index: 9;position: relative;}
.char-row-1, .char-row-2{grid-template-columns: repeat(10, 1fr);}
.char-row-3 {grid-template-columns: repeat(9, 1fr);}
.char-row-4 {grid-template-columns: repeat(7, 1fr);}
.char-row-5 {grid-template-columns: repeat(6, 1fr);}
.EnterBtn ,.EraseBtn{background-color: var(--main-color);border: none;color: #fff !important;}
.HomQuizRight {width: 25%;padding: 0px 60px 0px 98px;background: #fff;height: 100vh;position: absolute;right: 0;top: 0;display: flex;align-items: center;}
.QuizRIghtBox {width: 100%;background: url(../images/Body-bg.svg);background-size: cover;border-radius: 20px;display: flex;}
.BoxTitle { height: 64px; width: 100%; justify-content: center; display: flex; align-items: center; background: #02AA7433; border-top-left-radius: 20px; border-top-right-radius: 20px; gap: 10px; line-height: 10px; font-size: 20px; font-weight: 400; }
.QuizRIghtBox {width: 100%;background: url(../images/Body-bg.svg);background-size: cover;border-radius: 20px;display: flex;flex-direction: column;gap: 62px;align-items: center;}
.QuizRIghtBox h3{font-size: 40px;text-align: center;color: #141415;font-weight: 500;padding: 0px 10px;}
.QuizBoxBottom {padding:0px 15px 15px 15px;display: flex;width: 100%;}
.UnblockHint {width: 100%;background-color: var(--main-color);padding: 17px 0px 15px 0px;text-decoration: none;color: #fff;display: flex;align-items: center;text-align: center;justify-content: center;border-radius: 135px;gap: 12.38px;font-size: 20px;font-weight: 400;line-height: 10px;}
a.SubmitBtn img {width: 24px;height: 20px;object-fit: contain;}
.HomeQuizProcessWeb {width: 200px;height: 100vh;position: fixed;top: 0;left: 75%;transform: translate(-50%, 0%);display: flex;align-items: center;justify-content: space-between;flex-direction: column;z-index: 9;}
span.HintBtn { font-weight: 500; font-size: 25px; border-radius: 100px; background-color: var(--main-color); color: #fff; height: 60px; display: flex; align-items: center; justify-content: center; padding: 0px 20px; }
.HoriLine { width: 5px; height: 86px; background: #AFAFAF; margin: 0; }
a.NumBtn { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;position: relative; border-radius: 50%; text-decoration: none; color: #AFAFAF; font-size: 28px; font-weight: 500; border: 5px solid #AFAFAF; margin: 0; cursor: default !important; }
a.NumBtn::before { content: ' '; position: absolute; background: #ebf0ea; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1; }
a.NumBtn.active { width: 90px; height: 90px; font-size: 38px; color: #02AA74; border: 5px solid #02AA74; cursor: pointer !important;position: relative; }
a.NumBtn.active::before { content: ' '; position: absolute; background: #ccefe4; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1; }
#desktop-keyboard-mob, .mobprogress { display: none; }
.CrossWrap { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0%); z-index: 99; height: 104px; display: flex; align-items: center; justify-content: center; }
input.AnswerInput.wrong-input { border: 1px solid #FF1400; }
.CrossWrap svg { width: 25px; height: 25px; }
/* Resultpage Styling */
.resultMain { width: 80%; height: 100%; margin: auto; padding: 24.14px 0px 62px 0px; display: flex; flex-direction: column; gap: 30px; justify-content: center; }
.hintsUsed { background-color: var(--main-color); color: #fff; padding: 15px 20px; border-radius: 135.44px; font-size: 20px; font-weight: 700; }
.resulttitleWrap { display: flex; align-items: center; justify-content: space-between; }
.AcrossDaysTrendTable { border: 5px solid #FFFFFF80; box-shadow: 0px 4px 30px 0px #00000026; border-radius: 20px; }
.TableTitle { background: #02AA7433; padding: 15px; border-top-left-radius: 20px; border-top-right-radius: 15px; font-size: 20px; font-weight: 500; }
.TableCont {padding: 20px;}
.tbcontfirst { display: flex; width: 100%; gap: 10px; }
.tbcontfirst.tbcontsecond .play-first {border-top: 2px solid #02AA7433;}
.play-first { padding: 19.5px 20px; background: #fff; width: 25%; text-align: center; font-size: 18px; font-weight: 500;border-top-left-radius: 5px;border-top-right-radius: 5px; }
.tbcontsecond .play-first {border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.resultprocess { padding: 10px 5px; background-color: #fff; display: flex; flex-direction: column; gap: 10px;border-radius: 5px; }
.score { padding: 14.2px 20px; }
.num, .resultNum { width: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; }
.progressspan { display: flex; align-items: center; gap: 14.2px; }
.score { padding: 14.2px 20px; background: #AFAFAF; display: flex; align-items: center; justify-content: end; width: 4%; color: #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.score-three { width: 97%; background-color: #02AA74; }
.score.score-four {width: 45%;}
.score.score-five {width: 90%;}
.SocialBtnWrap{display: flex;gap: 10px;}
.SocialBtnWrap a {padding: 20px;font-size: 16px;font-weight: 500;text-decoration: none;color: #fff;display: flex;gap: 10px;align-items: center;width: 25%;border-radius: 33.6px;justify-content: center;}
a.FBBtn {background: #4267B2;}
a.WPBtn {background: #25D366;}
a.LIBtn {background: #0A66C2;}
a.TWBtn {background: #000000;}
.table-btn-wrap {display: flex;flex-direction: column;gap: 30px;}
/* Calander PAGE DESIGN */
.CalnderCont {width: 100%;background-image: url(../images/Calander-bg.png);background-position: bottom;background-size: cover;background-repeat: no-repeat;display: flex;justify-content: flex-start;flex-direction: column;padding: 0px 40px;}
span.TitleSpan { padding: 9.08px 24px; background: #86BB6D33; border: 1.3px solid #86BB6D66; border-radius: 1296.83px; font-size: 18px; font-weight: 500; }
.CalnderTitle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-bottom: 74px; }
span.TitlePara { font-size: 17.37px; font-weight: 400; }
.wrapper { background: #fff; width: 100%; border-radius: 10px; margin: auto; padding: 30px; }
.calheader { padding: 30px 0px; display: flex; justify-content: space-between;border-bottom: 1px solid #D5D4DF; }
.calheader span, .calheader .current-date { font-size: 26px; font-weight: 900; }
.date-wrappeer { display: flex; gap: 30px; align-items: center; justify-content: center; }
.calheader .icons span { padding: 0px 10px; color: #878787; margin: 0 1px; border-radius: 50px; font-weight: 800; }
.icons span { transition: opacity 0.3s ease; cursor: pointer; }
.calheader .icons span:last-child { margin-right: -10px; }
.calendar ul { display: flex; list-style: none; flex-wrap: wrap; text-align: center;}
.calendar .weeks li {font-weight: 600;font-size: 16px;}
.calendar .days li {z-index: 1;cursor: pointer;height: 126px;display: flex;align-items: center;justify-content: center;border: 1px solid #D5D4DF;font-size: 22px;font-weight: 400;}
.days li.inactive {color: #A8A8A8;background: #FCFCFC;}
.days li.active {color: #fff;font-weight: 600;}
.calendar ul li {position: relative;width:calc(100%  / 7) }
.calendar .days li::before {position: absolute;content: "";height: 100%;width: 100%;top: 50%;left: 50%;z-index: -1;border-radius: 0;transform: translate(-50%, -50%);}
.days li:hover::before {background: #f2f2f2;color:#000;}
.days li.active::before {background-color: var(--main-color);color:#fff;}
ul.weeks li {padding: 20px;}
a.Btn.past-trend {border-radius: 0;color: #000;background: transparent;font-size: 15px;}
.empty-quiz-wrapper {height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;margin: auto;
font-size: 16px;}
a.NumBtn.active.active-highlight ,.mobileprogressbtn.active.active-highlight {
    width: 38px;
    height: 50px;
    font-size: 16px;
    border: 3px solid;
}


/* Responsive Styling */
@media (max-width: 1500px) {    
.LoginImgCont {background-image: url(../images/LoginLeftImg.svg);width: 100%;background-repeat: no-repeat;background-position: center;height: 277.15px;background-size: contain;}
.empty-quiz-wrapper {font-size: 14px !important;}
.CrossWrap {height: 75.41px;}
.CrossWrap svg {width: 22px;height: 22px;}
.LeftLogin {padding: 0px;gap: 20px;}
h2 {font-size: 36px;}
.LoginWrap {height: calc(100vh - 51px);}
h6 {font-size: 16px;}
.LogBtnWrap a,a.continuegoogle-btn {padding: 13px 52px;font-size: 16px;}
a.continuegoogle-btn svg {height: 18px;}
.LoginForm {gap: 30px;padding: 50px 25px;}
.LoginForm img {width: 230px;height: 40.77px;}
a.contactus {font-size: 15px;}
footer {padding: 16px 25px;}
footer p{font-size: 14px;}
.RightLogin{height: calc(100% + 51px);}
header {padding: 16px 25px;height: 75.41px;}
.LogoWrap img {width: 200px;height: 37.42px;}
.Btn {font-size: 13px;padding: 9px 18px;}
.HomeWrap {padding-top: 75.41px;}
.HomeWrap .HomeRight {padding: 40px 50px 80px;}
.HomeLeft ul li {font-size: 16.22px;line-height: 24.83px;}
.HomeLeft ul {padding-left: 25px;}
.HomeWrap .HomeLeft {gap: 18px;}
.StartNowBtn img {width: 17.5px;height: 17.5px;}
h1 {font-size: 40.22px;}
.HomQuizLeft {padding: 20px 90px 20px 45px;}
.letter-btn {padding: 0px 27.15px;height: 50px;font-size: 18px;border-radius: 6.71px;}
input.AnswerInput {padding: 20px 25px;font-size: 13px;}
input.AnswerInput::placeholder{font-size: 14px;}
.HomeQuizLeftCont {gap: 25px;}
a.SubmitBtn {padding: 20px 20px;font-size: 14px;}
.HomQuizRight{padding: 0px 30px 0px 60px;}
.BoxTitle {font-size: 18px;height: 48px;border-top-left-radius: 15px;border-top-right-radius: 15px;}
.QuizRIghtBox h3 {font-size: 24px;}
.UnblockHint{padding: 11px 0px 10px 0px;font-size: 16px;line-height: normal;}
.QuizRIghtBox {gap: 45px;border-radius: 12px;}
a.SubmitBtn img {width: 20px;}
.char-row{gap: 7px;}
a.NumBtn {width: 38px;height: 50px;font-size: 16px;border: 3px solid;}
a.NumBtn.active {width: 45px;height: 60px;font-size: 20px;border: 3px solid;}
span.HintBtn{font-size: 15px;height: 50px;}
.HoriLine {width: 3px;}
.span-wrap{margin-top: 5px;font-size: 10px;}
.resultMain {padding: 0px 0px 0px 0px;gap: 10px;}
.hintsUsed {padding: 8px 20px;border-radius: 135.44px;font-size: 14px;font-weight: 600;}
.TableTitle {padding: 8px 15px;font-size: 15px;}
.TableCont {padding: 10px;}
.play-first {padding: 8.5px 16px;font-size: 14px;border-top-left-radius: 3px;border-top-right-radius: 3px;}
.score {padding: 7.2px 15px;}
.num, .resultNum{font-size: 14px;}
.resulttitleWrap h2 {font-size: 26px;}
.resultprocess{gap: 7px;border-radius: 3px;}
.SocialBtnWrap a {padding: 10px 15px;font-size: 14px;}
.resultMain {width: 65%;}
.wrapper{padding:15px;}
.tbcontsecond .play-first {border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}
.calheader {padding: 10px 0px;}
.calheader span, .calheader .current-date {font-size: 20px;}
ul.weeks li{padding:15px;}
.calendar .days li{height: 75px;font-size: 18px;}
}

@media (max-width: 1200px) {
h1 {font-size: 40.22px;}
.HomeLeft ul li {font-size: 14.22px;line-height: 23.83px;}
.HomeWrap .HomeLeft .HomeLeftCont {gap: 15px;}
.QuizRIghtBox h3 {font-size: 24px;}
a.NumBtn.active {width: 45px;height: 50px;font-size: 18px;}
a.NumBtn {width: 38px;height: 40px;font-size: 14px;}
span.HintBtn {height: 45px;}
.CrossWrap {height: 45px;}
}
/* Ipad Landscape styling */
@media (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
h1 {font-size: 38.22px;}
h2 {font-size: 32px;}
h6 {font-size: 15px;}
.LoginForm img {width: 200px;height: 36.77px;}
.LogBtnWrap {gap:12px;}
.LoginForm {gap: 25px;padding: 40px 25px;}
.LogBtnWrap a, a.continuegoogle-btn {padding: 10px 40px;font-size: 14px;}
.resultMain {width: 80%;gap: 20px;}
.SocialBtnWrap a {padding: 13px 15px;font-size: 14px;}
.table-btn-wrap {gap: 20px;}
.LoginWrap.HomeWrap.CalnderContWrap {justify-content: center;}
.calheader span, .calheader .current-date {font-size: 18px;}
.empty-quiz-wrapper {font-size: 13px;}
}
@media screen and (min-width: 1180px) and (max-height: 820px) and (orientation: landscape) {
.resultMain{width: 65%;gap: 10px;}
.table-btn-wrap {gap: 15px;}
.SocialBtnWrap a {padding: 10px 15px;font-size: 14px;}
.empty-quiz-wrapper {font-size: 13px;}
}
/* Mobile Landscape Styling */
@media (min-width: 568px) and (max-width: 1100px) and (orientation: landscape) {
h2{font-size: 20.3px;}
h6{font-size: 9.3px;}
.LeftLogin{gap: 10.29px;}
.LoginPara {gap: 4.23px;}
.span-wrap{font-size: 7px;padding: 0PX 15PX;gap: 10px;}
footer {padding: 0px 20px;height: 27.91px;align-items: center;background: #ebf0eaf5;}
footer p{font-size: 8px;}
.SocialMediaWrap a {width: 8.4px;height: auto;}
.LoginWrap {height: calc(100vh - 27.91px);padding-top: 45px;}
.LogBtnWrap{gap: 6.34px;}
.RightLogin {height: calc(100% + 27.91px);}
.LoginForm {padding: 25.37px 12.69px;gap: 16.92px;border-radius: 4.23px;}
.LoginForm img {width: 105.72px;height: 19.78px;}
.LoginImgCont {width: 254.93px;height: 189.93px;}
.LogBtnWrap a, a.continuegoogle-btn {padding: 9.9px 34.6px;font-size: 8px;gap: 6.96px;}
a.continuegoogle-btn svg {width: 9.73px;height: 9.73px;}
h1 {font-size: 30.24px;}
.HomeLeft ul li {font-size: 11.51px;line-height: 17.27px;}
.HomeWrap .HomeLeft .HomeLeftCont {gap: 12.69px;}
.Btn {font-size: 8px;align-items: center;padding: 6.34px 15px;}
.StartNowBtn img {width: 10.36px;height: 8.46px;}
.LogoWrap img {width: 92.31px;height: 17.27px;}
header {padding: 13.86px 10px;height: 45px;background: #ebf0eaf5;}
.HomeWrap .HomeRight {padding: 10px 10px 20px;}
.HomeLeft {padding-left: 40px;}
.SocialMediaWrap {gap:9.59px;}
.letter-btn {padding:11.97px 12.98px;font-size: 14px;border-radius: 3.68px;height: 35px;}
.HomQuizRight {background: transparent;position: absolute;top: 0;padding: 0;right: 10px;width: 20%;padding-top: 45px;align-items: flex-start;}
.HomeQuizProcessWeb{display: none;}
.QuizRIghtBox {gap: 13.32px;border-radius: 12px;border-radius: 8.46px;background-color: #fff;background-image: none;width: 100%;}
.BoxTitle {font-size: 8.46px;font-weight: 400;padding: 8.53px;height: 27.7px;border-top-left-radius: 8.46px;border-top-right-radius: 8.46px;}
.BoxTitle img{width: 10.15px;height: 10.15px;}
.QuizRIghtBox h3{font-size: 12.92px;font-weight: 500;}
a.UnblockHint {font-size: 8.46px;padding: 7.46px;}
.AnswerBtnWrap {width: calc(100% - 250px);padding-left: 15px;}
input.AnswerInput {padding: 5px 10.46px;}
input.AnswerInput::placeholder{font-size: 8.46px;}
a.SubmitBtn {padding: 4px 9.46px;font-size: 8.46px;gap: 5px;}
.HomeQuizLeftCont {gap: 7px;}
.HomQuizLeft {padding: 0px 18px;height:100%;align-items: end;}
#desktop-keyboard-web{display: none;}
#desktop-keyboard-mob {display: block;padding-top:3%;}
.char-row-1 {grid-template-columns: repeat(13, 1fr);}
.char-row-2 {grid-template-columns: repeat(13, 1fr);}
.char-row-3 {grid-template-columns: repeat(16, 1fr);}
.char-row {gap: 3.77px;}
/* .QuizBoxBottom {padding: 0px 8.46px 8.46px;} */
.QuizBoxBottom {padding: 0px;}
a.UnblockHint img {width: 9px;}
.HomeQuizLeftCont h1 {padding-left: 15px;font-size: 18px;}
button.letter-btn.EraseBtn svg {width: 17px;height: 14px;}
.empty-quiz-wrapper {font-size: 12px;}
.mobprogress {position: relative;display: flex;align-items: center;width: calc(100% - 21%);position: absolute;}
.mobline {height: 3px;background-color: #AFAFAF;flex-shrink: 0;}
.firstline {background-color: #02AA74;}
.firsthoriline {background-color: #02AA74;}
.mobhint {font-size: 10px;padding: 6px 12px;border-radius: 50px;background-color: #02AA74;color: #fff;font-weight: 500;white-space: nowrap;flex-shrink: 0;}
.mobileprogressbtn {width: 30px;height: 30px;background: #AFAFAF33;border-radius: 50%;border: 2px solid #AFAFAF;font-size: 12px;font-weight: 500;display: flex;align-items: center;justify-content: center;color: #AFAFAF;flex-shrink: 0;}
.mobileprogressbtn.active {background: #02AA7433;color: #02AA74;width: 40px;height: 40px;border: 2.11px solid #02AA74;}
.CrossWrap svg {width: 16px;height: 16px;}
a.SubmitBtn img {width: 10px;}
.HomQuizLeft{width: 100%;}
.resultMain {width: 97%;padding: 0px;gap: 8px;}
.table-btn-wrap {flex-direction: row;}
.AcrossDaysTrendTable {width: 70%;}
.SocialBtnWrap {flex-direction: column;width: 30%;gap: 0;justify-content: space-between;}
.SocialBtnWrap a {width: 100%;}
.AcrossDaysTrendTable {width: 100%;border-radius: 10px;}
.TableTitle {padding: 4px 12px;font-size: 8.46px;border-top-left-radius: 8px;border-top-right-radius: 8px;}
.TableCont {padding: 5px;}
.score {padding: 4px 10px;}
.num, .resultNum {font-size: 6.77px;}
.play-first {padding: 5.5px 16px;font-size: 8.46px;}
.resultprocess {padding: 5px;gap: 4px;}
.SocialBtnWrap a {width: 100%;font-size: 8px;}
.SocialBtnWrap a img {width: 8.64px;}
.resulttitleWrap h2 {font-size: 16px;}
span.hintsUsed {font-size: 8.46px;padding: 6px 10px;}
.calendar .days li {height: 40px;font-size: 12px;}
.calheader span, .calheader .current-date {font-size: 11px;}
.wrapper {padding: 10px;}
.CalnderCont{padding: 0px 10px;}
ul.weeks li {padding: 10px;}
.calendar .weeks li{font-size: 8px;}
.calheader {padding: 5px 0px;}
span.leftIcon svg , span.rightIcon svg{width: 5.92px;}
.date-wrappeer{gap: 20px;}
.main {display: block !important;}
.HomeWrap .HomeRight img { width: 100%; height: 95%; }
.mobileprogressbtn.NumBtn.active.mobile-active-highlight {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px;
}
.active.mobile-active-highlight.mobileprogressbtn {
    width: 30px !important;
    height: 30px !important;
}
.mobileprogressbtn.NumBtn {
    border: 2.11px solid #02AA74;
    background: #02AA7433;
    color: #02AA74;
}
}
@media (max-width: 767px) {
.main {display: none;}
.rotate-device-message {display: block !important;}
.rotate-device-message {background: #02AA74;color: #fff;padding: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;text-align: center;border-radius: 5px;
    }

}

@media only screen and (max-width: 812px) and (orientation: landscape) {
    .rotate-device-message{
        display: none !important;
    }
    

}