/*Login Css Start*/ .mecRegister{display: flex; width: var(--fullwidth); position: fixed; top:0; right:0; bottom:0; right:0;} .mecRegister .loginWrapper .loginLeft .static_label{color:var(--whitecolor); margin-bottom: 10px;} .mecRegister .loginWrapper .loginLeft .bannerSlider .right h4{color:var(--whitecolor);} .mecRegister .loginWrapper .loginLeft .bannerSlider .right p{color:var(--whitecolor);} .mecRegister .loginWrapper .loginRight{height: calc(100vh - 150px); height: auto; top:50px; bottom:50px; z-index: 2; padding: 50px; flex-direction: column;} .mecRegister .loginWrapper .loginRight .languageChanger{position: static; gap:15px; margin: 0; width:var(--fullwidth); justify-content: flex-end; margin-bottom: 20px;} .mecRegister .loginWrapper .loginRight .languageChanger label{margin: 0;} .mecRegister .loginWrapper .loginRight .languageChanger select{width: auto;} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots li.slick-active button:before{color: var(--whitecolor);} .mecRegister .loginWrapper .loginLeft .logoBlock img{max-width: 250px; object-fit: contain;} .mecRegister .defaultBtn{ background: linear-gradient(270deg, var(--mecPrimaryColor) 0%, var(--mecPrimaryColor) 100%);} .mecRegister a { color: var(--mecPrimaryColor); text-decoration: none;} .mecRegister .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword a{color:var(--mecPrimaryColor);} .mecRegister .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword a:hover{color:var(--mecPrimaryColor);} .mecRegister .loginWrapper .loginRight .registerWrapper label i{color:var(--mecPrimaryColor);} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock > div{gap:15px; border-radius:5px;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock > div .countrycode{max-width: 60px;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock div label{display: flex; align-items: center; gap:5px; cursor: pointer; margin-bottom: 0;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock div label input[type="radio"]{margin: 0 0px 0 0} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock.middleEastCollegeRadio{display: none;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock.middleEastCollegeRadio.show{display: flex;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock.otherRadio{display: none;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock.otherRadio.show{display: flex;} .mecRegister .loginWrapper .loginRight h4{font-family: var(--defaultfont); font-weight: normal; margin-bottom: 0;} .mecRegister .loginWrapper .loginRight h4 span{font-family: var(--fontfamilybold);} .mecRegister .loginWrapper .loginLeft{position: static; max-width: none; z-index: 0;} .mecRegister .loginWrapper .loginLeft .loginOverlay{ z-index: 1; position:absolute; padding: 40px 40px 50px; top:0; height: 100%; display: flex; flex-direction: column; width: 100%; justify-content: space-between; right:0; bottom:0; left:0;} .mecRegister .loginWrapper .loginLeft .loginOverlay h4{font-size:var(--fontsize48); font-family: var(--defaultfont); font-weight: normal; color:var(--whitecolor); text-align: left; margin-bottom: 0px;} .mecRegister .loginWrapper .loginLeft .loginOverlay h4 span{font-family: var(--fontfamilybold);} .mecRegister .loginWrapper .loginLeft .bannerSlider{position:absolute; margin: 0; padding:0px; top:0; height: 100%; display: flex; flex-direction: column; width: 100%; justify-content: space-between; right:0; bottom:0; left:0;} .mecRegister .loginWrapper .loginLeft .bannerSlider .left{max-width: none; align-items:initial;} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-slide{margin:0;} .mecRegister .loginWrapper .loginRight{justify-content: center; position: absolute; max-width: 450px; background-color: var(--whitecolor); left: auto; right:30px; padding: 15px; border-radius:15px;} .mecRegister .loginWrapper .loginRight .formWrapper .formBlock{margin-top: 15px;} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots{display: none} .mecRegister .slick-slide img{height: 100vh; object-fit: cover} .mecRegister .loginWrapper .loginRight .registerWrapper .block {padding: 0;} .mecRegister .loginWrapper .loginRight input[type="text"]{padding: 10px 10px; border-radius: 5px;} .mecRegister .loginWrapper .loginRight input[type="email"]{padding: 10px 10px; border-radius: 5px; bordeR:0px none;} .mecRegister .loginWrapper .loginRight select{padding: 10px 10px; border-radius: 5px;} .mecRegister .loginWrapper .loginRight .registerWrapper .block input[type="text"]{padding: 10px 10px;} .mecRegister .loginWrapper .loginRight .registerWrapper{max-width: 400px;} .mecRegister .loginWrapper .loginRight form {max-height: calc(100vh - 27%); padding-right: 10px; overflow-y: auto;} /*Full Screen Login Page */ .fullScreen.loginWrapper{justify-content: center;} .fullScreen.loginWrapper .loginLeft{ max-width:none; position: absolute; align-items: flex-start; padding:0px; justify-content: flex-start;} .fullScreen.loginWrapper .loginRight{position: absolute; right:50px; max-height: none; max-width: none; width: auto;} .fullScreen.loginWrapper .loginRight .loginWithUserNameWrapper{min-width: 420px; position: relative; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepOneWrapper{min-width: 420px; position: relative; max-width: 420px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepTwoWrapper{min-width: 420px; position: relative; max-width: 420px;background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepThreeWrapper{min-width: 420px; position: relative; max-width: 420px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFourWrapper{min-width: 420px; position: relative; max-width: 420px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFiveWrapper{min-width: 420px;position: relative; max-width: 420px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .registerWrapper{min-width: 420px; position: relative; max-width: 420px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginLeft .welcomeText{display: none} .fullScreen.loginWrapper .loginLeft .welcomeText + .logoBlock{display: none;} .fullScreen.loginWrapper .loginLeft .bannerSlider .logoBlock{margin-bottom: 0; position: static; ; z-index: 1} .fullScreen.loginWrapper .loginLeft .bannerSlider{margin-top: 0;} .fullScreen.loginWrapper .loginLeft .bannerSlider .left{max-width: none} .fullScreen.loginWrapper .loginLeft .bannerSlider .slick-slide{margin:0;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right{position: absolute; height: 100vh; text-align: left; left:32px; justify-content:flex-end; top:0; align-items: flex-start; padding: 20px; margin-top: 0; max-width: none; bottom:0;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock{margin-top:40px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock img{margin-top: 10px; max-width: 200px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{ font-size:var(--fontsize32); color:var(--whitecolor);} .fullScreen.loginWrapper .loginLeft .bannerSlider .logoBlock + h4{margin-top: 60px; margin-bottom:5px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{color:var(--whitecolor); font-size:var(--fontsize20); } .fullScreen.loginWrapper .loginLeft .bannerSlider .logoBlock{color:var(--whitecolor); } .fullScreen.loginWrapper .loginLeft .fixedBlock{position: absolute; top:50px; gap: 100px; display: flex; flex-direction: column; z-index: 2; left:50px;} .fullScreen.loginWrapper .loginLeft .fixedBlock p{color:var(--whitecolor); font-size:var(--fontsize20); } .fullScreen.loginWrapper .loginLeft .fixedBlock h4{ font-size:var(--fontsize48); color:var(--whitecolor); font-family: var(--fontfamilysemibold);} .fullScreen.loginWrapper .loginRight .languageChanger label{color:var(--whitecolor); } .fullScreen.loginWrapper .loginRight .languageChanger select{color:var(--whitecolor); } .fullScreen.loginWrapper .slick-slide img{width: var(--fullwidth); object-fit: cover;} .fullScreen.loginWrapper .loginLeft .logoBlock img{max-width: 350px;} /*Full Screen Login Page */ .pageWrapper .sidebarLeft nav ul li label.mainLabel + .Groupdd.menuOpenActive{ display: block; } .loginWrapper{display: flex; flex-direction: row-reverse; width: var(--fullwidth); align-items: center; height: var(--fullheight); margin: 0; padding:0; position: fixed; top: 0; right: 0; bottom: 0; left:0;} .loginWrapper .loginLeft{display: flex; flex-direction: column; order:2; width: var(--fullwidth); align-items: center; justify-content: center; height: var(--fullheight); max-width: 50%; max-width: calc(100% - 550px); background-color: var(--primaryBgColor);} .loginWrapper .loginLeft .logoBlock img{max-width: 200px; max-height: 100px;} .loginWrapper .loginLeft .logoBlock{margin-bottom: 20px;} .loginWrapper .loginLeft .loginBanner{text-align: center;} .loginWrapper .loginLeft .loginBanner img{animation: featureImgBounce 1s ease-in-out 0s infinite alternate;} @keyframes featureImgBounce { 0% { transform: translateY(0) } to { transform: translateY(-10px) } } .loginWrapper .loginLeft .welcome{margin-bottom: 20px; font-size:var(--fontsize18); color: var(--tableTh); font-family: var(--defaultfont);} .loginWrapper .loginLeft .siteTitle{margin-bottom: 20px; font-size:var(--fontsize20); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .loginWrapper .loginRight .languageChanger{position: absolute; top:10px; right:10px;} .loginWrapper .loginRight .languageChanger select {width:var(--fullwidth); background-color: transparent; border: 1px solid var(--strokeColor); border-radius:10px; font-size: var(--fontsize14); padding:5px 10px; font-family:var(--defaultfont); background-color: transparent;} .loginWrapper .loginLeft .bannerSlider{display: flex; width: var(--fullwidth); margin-top: 20px;} .loginWrapper .loginLeft .bannerSlider .items{display: flex!important; position: relative; width: var(--fullwidth); flex-direction: column; align-items: center} .loginWrapper .loginLeft .bannerSlider .left{display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--fullwidth); max-width: 50%} .loginWrapper .loginLeft .bannerSlider .right{display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 30px; text-align: center; width: var(--fullwidth); max-width: 50%} .loginWrapper .loginLeft .bannerSlider .right h4{margin-bottom:10px; font-size:var(--fontsize20); color: var(--primaryColor); font-family: var(--fontfamilysemibold);} .loginWrapper .loginLeft .bannerSlider .right p{margin-bottom:0px; font-size:var(--fontsize14); color: var(--tableTh); font-family: var(--defaultfont);} .loginWrapper .loginLeft .bannerSlider .slick-slide { margin: 0 20px;} .loginWrapper .loginLeft .bannerSlider .slick-list {margin: 0 0px; display: flex; width:100%} .loginWrapper .loginLeft .bannerSlider .slick-track{margin-left: 0; display: flex; width:100%} .loginWrapper .loginLeft .bannerSlider .slick-dots li button:before{font-family: var(--fontfamilysemibold);font-size:var(--fontsize35); font-smoothing:antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased;} .loginWrapper .loginLeft .bannerSlider .slick-dots li.slick-active button:before{color:var(--primaryColor);} .loginWrapper .loginRight .innerLoginRight{background-color: var(--whitecolor); border-radius:15px; width: calc(100% - 25px); box-shadow: 0px 0px 4px #ddd; height:calc(100% - 25px); justify-content: center; display: flex; flex-direction: column; align-items: center;} .loginWrapper .loginRight{ position: relative; align-items: center; background-color: var(--primaryBgColor); justify-content: center; display: flex; width: var(--fullwidth); width: calc(100% - 550px); height: var(--fullheight);max-width: 50%; max-width: 550px; border:0px solid #ff0000} .loginWrapper .loginRight h4{font-size:var(--fontsize20); text-align: left; margin-bottom: 5px; font-family: var(--fontfamilybold); font-weight: 700;} .loginWrapper .loginRight p{font-size:var(--fontsize14); text-align: left; margin-bottom: 30px; font-family: var(--defaultfont); font-weight: 400; color: var(--tableTh)} .loginWrapper .loginRight label{font-size:var(--fontsize12); font-family: var(--defaultfont); font-weight: 400; margin-bottom: 8px; display: flex; color: var(--tableTh)} .loginWrapper .loginRight ol{display: flex; flex-direction: column;} .loginWrapper .loginRight ol li{border: 1px solid var(--greyColor); margin-bottom: 20px; text-align: var(--textCenter); font-size:var(--fontsize18); border-radius:var(--radius5); color: var(--blackcolor)} .loginWrapper .loginRight ol li label{display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; width: var(--fullwidth); cursor: pointer; padding: 10px; } .loginWrapper .loginRight ol li input[type="radio"]{margin: 0; padding:0; opacity: 0; visibility: hidden;} .loginWrapper .loginRight ol li:hover{border: 1px solid var(--greenColor);} .loginWrapper .loginRight ol li:hover label{color: var(--greenColor)} .loginWrapper .loginRight ol li.selected{border: 1px solid var(--greenColor);} .loginWrapper .loginRight ol li.selected label{color: var(--greenColor)} .loginWrapper .loginRight .actions{display: flex; width:var(--fullwidth); margin-top: 30px;} .loginWrapper .loginRight .loginStepOneContainer{width:var(--fullwidth);} .loginWrapper .loginRight .loginStepTwoContainer{width:var(--fullwidth);} .loginWrapper .loginRight .loginStepThreeContainer{width:var(--fullwidth);} .loginWrapper .loginRight .loginStepFourContainer{width:var(--fullwidth);} .loginWrapper .loginRight .loginStepFiveContainer{width:var(--fullwidth);} .loginWrapper .loginRight .loginStepOneWrapper{max-width: 385px; width: var(--fullwidth);} .loginWrapper .loginRight .loginStepTwoWrapper{max-width: 385px; width: var(--fullwidth);} .loginWrapper .loginRight .loginStepThreeWrapper{max-width: 385px; width: var(--fullwidth);} .loginWrapper .loginRight .loginStepFourWrapper{max-width: 385px; width: var(--fullwidth);} .loginWrapper .loginRight .loginStepFiveWrapper{max-width: 385px; width: var(--fullwidth)} .loginWrapper .loginRight .havingTroubleSection{ position: absolute; bottom:20px; color: var(--greyColor5)} .loginWrapper .loginRight .loginTermsSection{color: var(--greyColor5); display: flex; font-size:var(--fontsize11); margin-top: 10px;} .loginWrapper .loginRight .loginTermsSection:nth-child(1){color: var(--greyColor5); margin-left: 0; font-size:var(--fontsize11); font-family: var(--defaultfont);} .loginWrapper .loginRight .loginTermsSection span{color: var(--blackcolor); margin-left: 5px; font-family: var(--fontfamilysemibold); font-family: var(--defaultfont);} .loginWrapper .loginRight .loginTermsSection span:nth-child(1){color: var(--blackcolor); margin-left:0px; font-family: var(--fontfamilysemibold); font-family: var(--defaultfont);} .loginWrapper .loginRight .loginTermsSection span a{color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .loginWrapper .loginRight .formWrapper div{ display: flex; align-items: center; width: var(--fullwidth)} .loginWrapper .loginRight .formWrapper div.iti{width: var(--fullwidth)} .loginWrapper .loginRight .formWrapper div.iti .iti__country{display: flex} .error_f_email{text-transform: capitalize;} .loginWrapper .loginRight .formWrapper .informationTooltip{width:auto; margin-right: 10px; position: relative;} .informationTooltip .tooltiptext{visibility: hidden; position: absolute; width: 150px; background-color: #555;color: #fff; text-align: center;padding: 5px 0;border-radius: 6px;z-index: 1;opacity: 0;transition: opacity .6s;} .informationTooltip:hover .tooltiptext{visibility: visible;opacity: 1; font-size:var(--fontsize13); justify-content: center} .informationTooltip .tooltip-top {bottom: 125%;left: 50%; margin-left: -75px;} .informationTooltip .tooltip-top::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;} .loginWrapper .loginRight .loginStepFourContainer .uploadBlock{display: flex; flex-direction: column; margin-top: 20px;} .loginWrapper .loginRight .loginStepFourContainer .uploadBlock i{border:2px solid var(--strokeColor); font-size:var(--fontsize20); color:var(--strokeColor); display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius:100%;} .loginWrapper .loginRight .loginStepFourContainer .uploadBlock img{border:2px solid var(--strokeColor); font-size:var(--fontsize20); color:var(--strokeColor); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding:8px; border-radius:100%;} .loginWrapper .loginRight .loginStepFourContainer .uploadBlock a{ color:var(--tableTh); display: flex; font-size:var(--fontsize14);} .loginWrapper .loginRight .loginStepFourContainer .uploadBlock input[type="file"]{display:none} .loginWrapper .loginRight .loginStepFourContainer .required{margin-left: 5px; color: var(--redColor);} .loginWrapper .loginRight .formWrapper div.iti__flag-container{width: unset;} .loginWrapper .loginRight .formWrapper div.iti__flag-box{width: 20px;} .loginWrapper .loginRight .formWrapper div .iti__flag.iti__us{width:20px;} .iti__country-list ul li{width: auto;} .cc-picker-code-list > li{font-family: var(--defaultfont);} .loginWrapper .loginRight .formWrapper div.cc-picker-flag{width:16px;} .loginWrapper .loginRight .formWrapper div.cc-picker-code-select-enabled{width: auto; pointer-events: none; padding-right: 0px;} .loginWrapper .loginRight .formWrapper div.cc-picker-code-select-enabled::after{top:9px; display: none} .loginWrapper .loginRight .formWrapper .cc-picker-code{font-size:var(--fontsize14); } .loginWrapper .loginRight .formWrapper div span{white-space: nowrap; display: flex; align-items: center; } .loginWrapper .loginRight .formWrapper div .invalid-feedback{color: var(--redColor)} .loginWrapper .loginRight .loginStepThreeContainer .sendMSG{color: var(--greenColor); text-align: center;} .loginWrapper .loginRight .loginOTPForm{display: flex; width: var(--fullwidth); justify-content: center; margin-top:25px;} .loginWrapper .loginRight .loginOTPForm input[type="text"]{transition: all .3s ease-in-out; min-height: 40px; margin-left: 10px; max-width: 40px; text-align: var(--textCenter); border: 2px solid var(--secondaryColor)} .loginWrapper .loginRight .loginOTPForm input[type="number"]{transition: all .3s ease-in-out; min-height: 40px; margin-left: 10px; max-width: 40px; text-align: var(--textCenter); border: 2px solid var(--secondaryColor)} .loginWrapper .loginRight .loginResendActions{margin-top:15px; display: flex; width: var(--fullwidth); justify-content: space-between; align-items: center;} .loginWrapper .loginRight .loginResendActions a{color: var(--primaryLinkColor); text-decoration: underline;} .loginWrapper .loginRight .loginResendActions a:hover{color: var(--primaryLinkColor); text-decoration: none;} .loginWrapper .loginRight .formWrapper .formBlock{display: flex; margin-top: 20px; flex-direction: column; width: var(--fullwidth); align-items:flex-start;} .loginWrapper .loginRight .formWrapper .formBlock > div{width: var(--fullwidth); position: relative;} .loginWrapper .loginRight .goBackLink{display: flex; justify-content: center; margin-top: 20px; align-items: center; width: var(--fullwidth);} .loginWrapper .loginRight .goBackLink i{margin-right: 5px;} .loginWrapper .loginRight .goBackLink a{color: var(--greyColor); text-decoration: underline;} .loginWrapper .loginRight .goBackLink a:hover{color: var(--blackcolor); text-decoration: none;} .loginWrapper .loginRight .loginCategoryWrapper{display: flex; width:var(--fullwidth); flex-wrap: wrap;} .loginWrapper .loginRight .loginCategoryWrapper label{border-radius: var(--radius15); font-size:var(--fontsize13); margin-right: 10px; margin-bottom: 10px; border: 1px solid var(--greyColor); display: flex; width: auto; align-items: center; justify-content: center; cursor: pointer; color: var(--blackcolor); text-align: center; cursor: pointer; padding:5px 10px; } .loginWrapper .loginRight .loginCategoryWrapper label input[type="checkbox"]{opacity: 0; visibility: hidden; display: none;} .loginWrapper .loginRight .loginCategoryWrapper label i {margin-right: 5px; color: var(--greenColor); display: none;} .loginWrapper .loginRight .loginCategoryWrapper label input[type="checkbox"]:checked + i{display: flex;} .loginWrapper .loginRight .loginCategoryWrapper label.selected{color: var(--greenColor); border: 1px solid var(--greenColor);} .loginWrapper .loginRight .errorMsg{color: var(--redColor); font-size:var(--fontsize14);text-align: center} .loginWrapper .loginRight .successMsg{color: var(--greenColor); font-size:var(--fontsize14);text-align: center; display:none} .loginWrapper .loginRight .orSeperator{color: var(--greyColor5); text-transform: uppercase; margin: 10px 0 0; text-align: var(--textCenter);} .loginWrapper .loginRight .ForgotPasswordLink{justify-content: flex-end; display: flex; margin-top: 5px;} .loginWrapper .loginRight .ForgotPasswordLink a{font-size:var(--fontsize12); } .loginWrapper .loginRight .ForgotPasswordLink1{justify-content: flex-end; display: flex; margin-top: 5px;} .loginWrapper .loginRight .ForgotPasswordLink1 a{font-size:var(--fontsize12); } .loginWrapper .loginRight .LoginWithUserName{display: flex; width: var(--fullwidth); justify-content: center;} .loginWrapper .loginRight .LoginWithUserName a{color: var(--primaryColor); font-family: var(--fontfamilysemibold); font-size:var(--fontsize14); text-decoration: underline; margin: 10px 0; text-align: var(--textCenter);} .loginWrapper .loginRight .LoginWithUserName a i{margin-right: 5px;} .loginWrapper .loginRight .LoginWithUserName a:hover{text-decoration: none; } .loginWrapper .loginRight .loginWithUserNameWrapper{display: flex; flex-direction: column; max-width: 385px; width: var(--fullwidth);} .loginWrapper .loginRight .loginWithUserNameWrapper form{display: flex; flex-direction: column; width: var(--fullwidth);} .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword{display: flex; justify-content: space-between; margin-top: 15px; font-size:var(--fontsize12); color:var(--blackcolor);} .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword .goBackLink{width: auto; margin-top: 0; font-size:var(--fontsize12); color:var(--blackcolor); } .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword .goBackLink a{font-size:var(--fontsize12); color:var(--blackcolor); } .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword .goBackLink a:hover{font-size:var(--fontsize12); color:var(--blackcolor); } .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword a{color: var(--primaryLinkColor); font-size:var(--fontsize14); font-family: var(--fontfamilymedium); text-decoration: underline;} .loginWrapper .loginRight .loginWithUserNameWrapper .forGotPassword a:hover{color: var(--primaryLinkColor); text-decoration: none;} .loginWrapper .loginRight .loginWithUserNameWrapper .formWrapper .pwdEnable{position: absolute; right: 10px; width: auto; cursor: pointer;} .loginWrapper .loginRight .loginWithUserNameWrapper .formWrapper .pwdEnable img{max-width: 24px;} .loginWrapper .loginRight .forgotWrapper{display: flex; flex-direction: column; width: var(--fullwidth); max-width: 385px;} .loginWrapper .loginRight .registerWrapper{display: flex; width: var(--fullwidth); max-width: 385px; justify-content: center; flex-direction: column;} .loginWrapper .loginRight .registerWrapper label{font-size:var(--fontsize12); align-items: center; font-family: var(--defaultfont); font-weight: 400; margin-bottom: 8px; display: flex; color: var(--tableTh)} .loginWrapper .loginRight .registerWrapper label i{margin-right:5px; color:var(--primaryColor); font-size:var(--fontsize16);} .loginWrapper .loginRight .registerWrapper .block{border: 1px solid var(--strokeColor); border-radius:10px; padding:10px;} .loginWrapper .loginRight .registerWrapper .block input[type="text"]{border:0px none;; padding: 0; border-radius:0;} .loginWrapper .loginRight .registerWrapper .required{color:var(--redColor); margin-left: 4px;} .loginWrapper .loginRight .registerWrapper .block input:-webkit-autofill, .loginWrapper .loginRight .registerWrapper .block input:-webkit-autofill:hover, .loginWrapper .loginRight .registerWrapper .block input:-webkit-autofill:focus, .loginWrapper .loginRight .registerWrapper .block input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--bodyBgColor) inset !important; } .loginWrapper .loginRight .registerWrapper .verifyMobileOTP .block input[type="number"]::-webkit-outer-spin-button, .loginWrapper .loginRight .registerWrapper .verifyMobileOTP .block input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} .loginWrapper .loginRight .registerWrapper .verifyMobileOTP .block input[type="number"]{-moz-appearance: textfield;} .loginWrapper .loginRight .registerWrapper .verifyMobileOTP .block input[type="number"]{border:0px none; --webkit-apperance:none; text-align: center; border-radius:0; padding: 0; max-width: 30px; margin-left: 10px;} .loginWrapper .loginRight .registerWrapper .verifyMobileOTP .block input[type="number"]:first-child{margin-left: 0;} .loginWrapper .loginRight .registerWrapper .verifyEmailOTP .block input[type="email"]::-webkit-outer-spin-button, .loginWrapper .loginRight .registerWrapper .verifyEmailOTP .block input[type="email"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} .loginWrapper .loginRight .registerWrapper .verifyEmailOTP .block input[type="email"]{-moz-appearance: textfield;} .loginWrapper .loginRight .registerWrapper .verifyEmailOTP .block input[type="email"]{border:0px none; --webkit-apperance:none; border-radius:0; padding: 0; max-width: none; margin-left: 10px;} .loginWrapper .loginRight .registerWrapper .verifyEmailOTP .block input[type="email"]:first-child{margin-left: 0;} .loginWrapper .loginRight .registerWrapper .goBackLink{justify-content: flex-start; font-size:var(--fontsize12); color:var(--blackcolor);} .loginWrapper .loginRight .registerWrapper .goBackLink a{justify-content: flex-start; font-size:var(--fontsize12); color:var(--blackcolor);} .loginWrapper .loginRight .registerWrapper .uploadBlock{display: flex; flex-direction: column; margin-top: 20px;} .loginWrapper .loginRight .registerWrapper .uploadBlock i{border:2px solid var(--strokeColor); font-size:var(--fontsize20); color:var(--strokeColor); display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius:100%;} .loginWrapper .loginRight .registerWrapper .uploadBlock img{border:2px solid var(--strokeColor); font-size:var(--fontsize20); color:var(--strokeColor); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding:8px; border-radius:100%;} .loginWrapper .loginRight .registerWrapper .uploadBlock a{ color:var(--tableTh); display: flex; font-size:var(--fontsize14);} .loginWrapper .loginRight .registerWrapper .uploadBlock input[type="file"]{display:none} .loginWrapper .loginRight .registerWrapper .block a{color:var(--primaryColor); margin-left: 5px; font-size:var(--fontsize12); white-space: nowrap; display: flex} .loginWrapper .loginRight .registerWrapper .block a.is_disabled{color:var(--tableTh);} .loginWrapper .loginRight .registerWrapper .loader{margin-left: 5px; display: flex; align-items: center; max-width: 20px; display: none;} .loginWrapper .loginRight .registerWrapper .addScrollbar{max-height: 300px; overflow-y: auto;} .loginWrapper input[type="tel"]{width:var(--fullwidth); background-color: transparent; border-radius:10px; border: 0px none; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); border: 1px solid var(--strokeColor); } .loginWrapper input[type="text"]{width:var(--fullwidth); background-color: transparent; border-radius:10px; border: 0px none; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); border: 1px solid var(--strokeColor);} .loginWrapper input[type="number"]{width:var(--fullwidth); background-color: transparent; border-radius:10px; border: 0px none; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); border: 1px solid var(--strokeColor);} .loginWrapper input[type="email"]{width:var(--fullwidth); background-color: transparent; border-radius:10px; border: 0px none; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); border: 1px solid var(--strokeColor);} .loginWrapper input[type="password"]{width:var(--fullwidth); background-color: transparent; border-radius:10px; border: 0px none; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); border: 1px solid var(--strokeColor);} .loginWrapper input[type="search"]{width:var(--fullwidth); background-color: transparent; border-radius:10px; border: 0px none; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); background-color: transparent;} .loginWrapper select{width:var(--fullwidth); border: 1px solid var(--strokeColor); background-color: transparent; border-radius:10px; font-size: var(--fontsize14); padding:10px 10px; font-family:var(--defaultfont); background-color: transparent;} /*Login Css Start*/ /*Header Css Start From here*/ header {margin: 0; padding: 0; top: 0; position: fixed; z-index: 2200000; background-color:var(--whitecolor); width: 100%; height: auto; box-shadow: 0 1px 5px -2px rgb(42 42 42 / 40%);} header .headerContainer{padding: 10px 30px; display: flex; align-content: center; width: var(--fullwidth); justify-content: space-between; margin: 0 auto} header .headerContainer .headerLeft{display: flex; align-items: center;} header .headerContainer .headerLeft .logo{display: flex; max-width: 150px; max-height: 40px; overflow: hidden;} header .headerContainer .headerLeft .logo img{max-width: 100%; object-fit: contain;} header .headerContainer .headerLeft .logo + .logo{margin-left: 10px;} header .headerContainer .headerLeft .logo + .logo{border-left:1px solid var(--strokeColor); padding-left: 15px; margin-left: 15px;} header .headerContainer .headerLeft .mobileMenu{display:none; margin-right:10px;} header .headerContainer .headerRight .switchToLearnerLink{background-color: var(--greyColor3); border-radius: var(--radius5); padding: 2px 10px; color:var(--blackcolor); display: flex; align-items: center;} header .headerContainer .headerRight .switchToLearnerLink i{ margin-right: 5px;color:var(--blackcolor); display: flex; font-weight: 700;} header .headerContainer .headerLeft .toggleMenu{display: flex; align-items: center; margin-right: 20px;} header .headerContainer .headerLeft .toggleMenu a{display: flex; align-items: center; font-size:var(--fontsize22); color: var(--blackcolor);} header .headerContainer .headerRight .logoutLink{display: flex; align-items: center; margin-top:0px; justify-content: center;} header .headerContainer .headerRight .logoutLink i{margin-left: 5px; color: var(--blackcolor);} header .headerContainer .headerRight .logoutLink a{color: var(--blackcolor); font-size:var(--fontsize14); padding: 0;} header .headerContainer .headerRight{display: flex; align-items: center; width: var(--fullwidth); flex: 1; justify-content: flex-end;} header .headerContainer .searchBar{max-width: 250px; position: relative; width: var(--fullwidth); border-radius:var(--radius5); background-color: var(--primaryBgColor);} header .headerContainer .searchBar input[type="search"]{ width: var(--fullwidth); background-color: transparent; font-size:var(--fontsize14); border: 0px none; color:var(--blackcolor)} header .headerContainer .searchBar i{position: absolute; right: 10px; transform:translateY(10px);} header .headerContainer .notificationBlock{display: flex; align-items: center; margin-left: 30px;} header .headerContainer .notificationBlock a{ display: flex; align-items: center; position: relative; justify-content: center; background-color: var(--notificationBellBg); width: 29px; height:29px; border-radius:var(--radius100);} header .headerContainer .notificationBlock a i{color: var(--blackcolor); font-size:var(--fontsize14);} header .headerContainer .notificationBlock a span{background-color: var(--lightRedColor); width: 12px; position: absolute; top: -2px; right:-2px; height: 12px; border-radius:var(--radius100);} header .headerContainer .profileBlock{display: flex; align-items: center; margin-left:20px; margin-right: 30px; margin-right: 0; position: relative;} header .headerContainer .profileBlock .accountDD{display: flex; align-items: center;} header .headerContainer .profileBlock .accountDD i{ display: flex; align-items: center; margin-right: 10px; position: relative; justify-content: center; background-color: var(--greyColor); width: 29px; height:29px; border-radius:var(--radius100);} header .headerContainer .profileBlock .accountDD i img{width: 100%; height: 100%; border-radius: var(--radius100)} header .headerContainer .profileBlock .accountDD span{font-size:var(--fontsize12); color: var(--blackcolor);} header .headerContainer .profileBlock .accountDD h6{font-size:var(--fontsize15); color: var(--blackcolor); margin-bottom: 0; font-family: var(--fontfamilysemibold);} header .headerContainer .profileBlock a.open + .dropdown-menu{display: flex;} header .headerContainer .profileBlock .dropdown-menu .dropdown-item{padding: 0.25rem 1.5rem; font-size:var(--fontsize14); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} header .headerContainer .profileBlock .dropdown-menu .dropdown-item:hover{background-color: var(--greyColor3); font-family: var(--fontfamilysemibold);} header .headerContainer .profileBlock .profilePic{display: flex; position: relative; border: 1px solid var(--lightBlue); align-items: center; justify-content: center; margin: 0 auto; width: 80px; height: 80px; border-radius: var(--radius100)} header .headerContainer .profileBlock .profilePic img{border-radius: var(--radius100); width: var(--fullwidth); height: var(--fullwidth);} header .headerContainer .profileBlock .profilePic a{position: absolute; display: flex; align-items: center; justify-content: center; width: 20px; color: var(--blackcolor); background-color: var(--whitecolor); box-shadow: 0 0 5px var(--lightBlue); height: 20px; border-radius: var(--radius100); right: -4px; bottom:5px } header .headerContainer .profileBlock .userName{display: flex; margin: 15px 0; justify-content: center; font-size:var(--fontsize20); color: var(--blackcolor); font-family: var(--fontfamilysemibold); width: var(--fullwidth); text-align: center; align-items: center;} header .headerContainer .profileBlock .userName a{margin-left: 10px; display: flex; align-items: center; justify-content: center; color: var(--blackcolor);} header .headerContainer .profileBlock .userName a .fa-pencil{display: none} header .headerContainer .profileBlock .dropdown-menu {min-width: 365px; padding:20px 10px; left: auto; right:0;} header .headerContainer .profileBlock .botttomContent{border-top: 1px solid var(--greyColor4); border-bottom: 1px solid var(--greyColor4); padding: 10px 20px 0; margin-top:0px; flex-direction: column; display: flex; width: var(--fullwidth);} header .headerContainer .profileBlock .botttomContent .block{display: flex; flex-direction: column; width: var(--fullwidth); margin-bottom: 15px;} header .headerContainer .profileBlock .botttomContent .block label{display: flex; width: var(--fullwidth); font-size:var(--fontsize12); color: var(--greyColor5); font-family: var(--defaultfont);} header .headerContainer .profileBlock .botttomContent .block span{display: flex; width: var(--fullwidth); font-size:var(--fontsize14); color: var(--blackcolor); font-family: var(--defaultfont);} header .headerContainer .profileBlock .logoutLink{display: flex; align-items: center; margin-top: 10px; width: var(--fullwidth); justify-content: center;} header .headerContainer .profileBlock .logoutLink i{margin-left: 5px; color: var(--blackcolor);} header .headerContainer .profileBlock .logoutLink a{color: var(--blackcolor); font-size:var(--fontsize14); padding: 0;} /*Header Css ends here*/ /*Dashboard css Start From here*/ .sidebarToggleShowHide .pageWrapper .sidebarLeft{left: 0; top: 63px; z-index: 22;} .pageWrapper .sidebarLeft.open{left: 0; top:0px; max-width: none; background-color: rgba(0,0,0,0.6); display: flex; z-index: 22; position: fixed; bottom:0; height: 100%; overflow-y: auto;} .pageWrapper .sidebarLeft.open nav{margin:60px 10px 0 0; max-width: 80%} .pageWrapper .sidebarLeft .poweredbyText{ left:0; right:0; bottom:20px; position: absolute; font-size: var(--fontsize12); color:var(--greyColor); text-align: center;} .pageWrapper .sidebarLeft{display: flex; flex-direction:column; transition: all 0.2s ease; border-radius: 10px; border:0px solid #ff0000; height: calc(100vh - 60px); overflow-y: auto; background-color: var(--whitecolor); position: sticky; display: block; top:60px; align-items: flex-start;} .pageWrapper .sidebarLeft nav{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); width: var(--fullwidth); box-shadow: 0px 0px 0px 0px; background-color: var(--whitecolor); padding: 15px; border-radius: 0px; margin-bottom:0px;} .pageWrapper .sidebarLeft nav ul{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .sidebarLeft nav ul li{display: flex; border-top:1px solid var(--greyColor3); flex-direction: column; width: var(--fullwidth); margin-top:0px; padding:10px 0; gap:5px;} .pageWrapper .sidebarLeft nav ul li:first-child{border-top: 0px none; padding-top: 0;} .pageWrapper .sidebarLeft nav ul li label{color:var(--blackColor); font-size:var(--fontsize14); margin:0; padding: 0 0 0px; font-family: var(--fontfamilybold);} .pageWrapper .sidebarLeft nav ul li ul li{flex-direction: row; border-top:0px none} .pageWrapper .sidebarLeft nav ul li label.mainLabel{display: flex; align-items: center; gap:5px; cursor:pointer;} .pageWrapper .sidebarLeft nav ul li label.mainLabel.menuOpenActive i{transform: rotate(90deg);} .pageWrapper .sidebarLeft nav ul li label.mainLabel i{font-size:0px; opacity: 0; visibility: hidden; } .fullyPageLoaded .pageWrapper .sidebarLeft nav ul li label.mainLabel i{font-size: var(--fontsize16); opacity: 1; visibility: visible;} .pageWrapper .sidebarLeft nav ul li label.mainLabel + .Groupdd{display: none;} .pageWrapper .sidebarLeft nav ul li label.mainLabel + .Groupdd.menuOpenActive{display:block} .pageWrapper .sidebarLeft nav ul li .Groupdd ul li{padding: 0;} .pageWrapper .sidebarLeft nav ul li.payOnlineLink{ border-top:1px solid var(--greyColor3); padding: 10px 0; border-bottom:0px solid var(--greyColor3);} .pageWrapper .sidebarLeft nav ul li.payOnlineLink a{padding:0;} .pageWrapper .sidebarLeft nav ul li:first-child{margin-top: 0;} .pageWrapper .sidebarLeft nav ul li a{display: flex; font-size:var(--fontsize15); padding:8px 20px; width: var(--fullwidth);} .pageWrapper .sidebarLeft nav ul li a .menuIcon{opacity:0; visibility: hidden; color: var(--blackcolor);} .fullyPageLoaded .pageWrapper .sidebarLeft nav ul li a .menuIcon{opacity:1; visibility: visible;} .pageWrapper .sidebarLeft nav ul li a .menuIcon{display: flex; margin-right: 10px; width: var(--fullwidth); max-width: 25px;} .pageWrapper .sidebarLeft nav ul li.payOnlineLink button{background-color: transparent; bordeR:0px none; color: var(--blackcolor); font-size: var(--fontsize16); font-family: var(--defaultfont);} .pageWrapper .sidebarLeft nav ul li.payOnlineLink button:hover{background-color: transparent; bordeR:0px none; color: var(--primaryColor); font-size: var(--fontsize16); font-family: var(--defaultfont);} .pageWrapper .sidebarLeft nav ul li.payOnlineLink a.active button{background-color: transparent; bordeR:0px none; color: var(--primaryColor); font-size: var(--fontsize16); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarLeft nav ul li a .menuText{display: flex;font-size:var(--fontsize16);color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .sidebarLeft nav ul li a:hover .menuText{color: var(--primaryColor);} .pageWrapper .sidebarLeft nav ul li a.active .menuText{color: var(--primaryColor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarLeft nav ul li a.active .menuIcon{color: var(--primaryColor);} .pageWrapper .sidebarLeft nav ul li a:hover .menuIcon{color: var(--primaryColor);} .pageWrapper .sidebarLeft nav ul li a.active {border-right:0px solid var(--primaryColor); border-radius: 8px; background-color: var(--lightPrimaryColor);} .pageWrapper .sidebarRight{display: flex; flex-direction:column;} .pageWrapper .sidebarLeft .BannerSection{margin-bottom: 30px; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); display:none; } .pageWrapper .sidebarLeft .learnerProgressSection{background-color: var(--whitecolor); margin-bottom: 30px; width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .pageWrapper .sidebarLeft .learnerProgressSection .learnerThumb{display: flex;margin: 0 auto 10px; width: 76px; justify-content: center; align-items: center; height: 76px; border-radius: var(--radius100); background-color: var(--greyColor);} .pageWrapper .sidebarLeft .learnerProgressSection .learnerThumb img{width: var(--fullwidth); height: var(--fullheight); border-radius: var(--radius100);} .pageWrapper .sidebarLeft .learnerProgressSection h6{font-size:var(--fontsize18); text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarLeft .learnerProgressSection .score{font-size:var(--fontsize12); display: flex; align-items: center; justify-content: center; text-align: var(--textCenter); margin-top: 10px;} .pageWrapper .sidebarLeft .learnerProgressSection .score i{margin: 0 5px;} .pageWrapper .sidebarLeft .learnerProgressSection .score span{font-size:var(--fontsize16); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarLeft .filtersddWrapper{display: flex; padding: 15px; border-radius: var(--radius15);background-color: var(--whitecolor); flex-direction: column;} .pageWrapper .sidebarLeft .filtersddWrapper .filtersBlock{display: flex; padding-top: 10px; margin-top: 10px; flex-direction: column; width: 100%; border-top: 1px solid var(--greyColor4)} .pageWrapper .sidebarLeft .filtersddWrapper .filtersBlock > div{display: flex; width: var(--fullwidth); flex-wrap: wrap;} .pageWrapper .sidebarLeft .filtersddWrapper h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarLeft .filtersddWrapper h4{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 20px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarLeft .filtersddWrapper a{border-radius: var(--radius15); font-size:var(--fontsize12); margin:0 3px 10px 0; padding: 5px 15px; border: 1px solid transparent; background-color: var(--greyColor3); color: var(--blackcolor)} .pageWrapper .sidebarLeft .filtersddWrapper a:hover{border: 1px solid var(--orangeColor); background-color: var(--lightOrangeColor); color: var(--blackcolor)} .pageWrapper .sidebarLeft .filtersddWrapper a.selected{border: 1px solid var(--orangeColor); background-color: var(--lightOrangeColor); color: var(--blackcolor)} .pageWrapper .sidebarLeft .filtersddWrapper a.active{border: 1px solid var(--orangeColor); background-color: var(--lightOrangeColor); color: var(--blackcolor)} .sidebarRight .DefaultLeaderBoardSection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background: white; padding: 15px; border-radius: var(--radius10); margin-bottom:20px;} .sidebarRight .DefaultLeaderBoardSection .learnerThumb{display: flex; margin-right: 15px; width: 60px; height: 60px; border-radius: var(--radius100); background-color: var(--greyColor);} .sidebarRight .DefaultLeaderBoardSection .learnerThumb img{border-radius: var(--radius100); width: var(--fullwidth); height: var(--fullheight);} .sidebarRight .DefaultLeaderBoardSection .progressCls{ height:4px; position: relative; width: var(--fullwidth); margin:40px 0 8px; background-color: rgba(255,255,255,0.7); border-radius: 5px;} .sidebarRight .DefaultLeaderBoardSection .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--orangeColor2); box-shadow: 0px 0px 0px 0px; transition: width 0.6s ease;} .sidebarRight .DefaultLeaderBoardSection h5{font-size:var(--fontsize16); text-align: center; color:black; font-family: var(--fontfamilysemibold);} .sidebarRight .DefaultLeaderBoardSection p{font-size:var(--fontsize14); text-align: center;color:var(--whitecolor); font-family: var(--defaultfont);} .sidebarRight .DefaultLeaderBoardSection .progressCompleted{font-size:var(--fontsize14); color:var(--whitecolor); font-family: var(--defaultfont);} .sidebarRight .DefaultLeaderBoardSection .progressCompleted strong{font-family: var(--fontfamilymedium);} .sidebarRight .MyActivityLeaderBoardSection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background: linear-gradient(270deg, var(--primaryColor) 0%, var(--secondaryColor) 100%); width: var(--fullwidth); padding: 15px; padding-right: 0; border-radius: var(--radius10); margin-bottom: 30px;} .sidebarRight .MyActivityLeaderBoardSection .learnerThumb{display: flex;margin: 0 auto 10px; width: 76px; justify-content: center; align-items: center; height: 76px; border-radius: var(--radius100); background-color: var(--greyColor);} .sidebarRight .MyActivityLeaderBoardSection .learnerThumb img{border-radius: var(--radius100); width: var(--fullwidth); height: var(--fullheight);} .sidebarRight .MyActivityLeaderBoardSection .rankBlock{display: flex; align-items: center; min-width: 200px; max-width: 200px; flex-direction: column; margin-left: auto; margin-right: auto;} .sidebarRight .MyActivityLeaderBoardSection .rankBlock div{background-color: rgba(255,255,255,0.7); margin-top: 10px; width: var(--fullwidth); display: flex; align-items: center; padding: 10px; border-radius:10px;} .sidebarRight .MyActivityLeaderBoardSection .rankBlock div i{width:30px; height: 30px; background-color: var(--whitecolor); margin-right: 10px; border-radius: 100%; display: flex; align-items: center; justify-content: center} .sidebarRight .MyActivityLeaderBoardSection .rankBlock div span{color:var(--blackColor); font-family: var(--defaultfont);} .sidebarRight .MyActivityLeaderBoardSection .rankBlock div span strong{font-weight: bold; font-family: var(--fontfamilysemibold);} .sidebarRight .MyActivityLeaderBoardSection .progressWrapper{display:flex; flex:1} .sidebarRight .MyActivityLeaderBoardSection .progressWrapper{ height: 8px; position: relative; width: var(--fullwidth); margin:8px 0 40px; background-color: rgba(255,255,255,0.7); border-radius: 5px 0 0 5px;} .sidebarRight .MyActivityLeaderBoardSection .progressCls{display:flex; position:relative; width: var(--fullwidth);} .sidebarRight .MyActivityLeaderBoardSection .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--orangeColor2); transition: width 0.6s ease;} .sidebarRight .MyActivityLeaderBoardSection .startPoint{ top:0px; z-index:1; width:95px; text-align: left; display: flex; flex-direction: column; position: absolute; left:0;} .sidebarRight .MyActivityLeaderBoardSection .startPoint i{color:var(--greenColor); font-size:var(--fontsize24); display: flex; align-items: center; justify-content: center; width:26px; height: 26px; flex-shrink: 0; background-color: var(--whitecolor); padding:2px; border-radius:100%} .sidebarRight .MyActivityLeaderBoardSection .startPoint p{color: var(--whitecolor); margin-top: 5px; font-size:var(--fontsize12);} .sidebarRight .MyActivityLeaderBoardSection .progressCls .progress-bar-striped {background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; } .sidebarRight .MyActivityLeaderBoardSection .endPointWrapper{display:flex; height: 8px; margin-top: 8px; background-color: rgba(255,255,255,0.7); border-radius:0 0 0 0 px; position: relative;} .sidebarRight .MyActivityLeaderBoardSection .endPoint{ margin-top:-6px; width:auto; text-align: center; display: flex; flex-direction: column;} .sidebarRight .MyActivityLeaderBoardSection .endPoint i{color:var(--primaryColor); font-size:var(--fontsize12); display: flex; align-items: center; justify-content: center; width:20px; height: 20px; flex-shrink: 0; background-color: rgba(255,255,255,0.7); padding:2px; border-radius:100%} .sidebarRight .MyActivityLeaderBoardSection .endPoint p{color: var(--whitecolor); margin-top: 5px; font-size:var(--fontsize12);} .sidebarRight .MyActivityLeaderBoardSection .endPoint{margin-right:15px;} .sidebarRight .MyActivityLeaderBoardSection .endPoint + .endPoint{margin-right:15px;} .sidebarRight .MyActivityLeaderBoardSection .endPoint + .endPoint + .endPoint{margin-right:0px;} .sidebarRight .MyActivitySection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .sidebarRight .MyActivitySection h6{font-size:var(--fontsize16); display: flex; justify-content:space-between; align-items: center; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont);} .sidebarRight .MyActivitySection h6 a{color:var(--primaryColor);} .sidebarRight .MyActivitySection ol{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .sidebarRight .MyActivitySection ol li .thumb img{border-radius:10px;} .sidebarRight .MyActivitySection ol li a{width:var(--fullwidth); display:flex; } .sidebarRight .MyActivitySection ol li:first-child{margin-top:10px;} .sidebarRight .MyActivitySection ol li{flex-direction: row; border: 1px solid var(--lineColor); display: flex; width:var(--fullwidth); padding:10px; margin-top: 10px; border-radius: 5px;} .sidebarRight .MyActivitySection ol li .left{flex:1; display: flex; align-items: flex-start;} .sidebarRight .MyActivitySection ol li .left a{color:var(--blackColor2);} .sidebarRight .MyActivitySection ol li .left .progressCls{ height: 6px; width: 150px; margin:8px 0; background-color:var(--strokeColor); border-radius: 5px;} .sidebarRight .MyActivitySection ol li .left .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--greenColor2); transition: width 0.6s ease;} .sidebarRight .MyActivitySection ol li .left ul{display: flex; flex-direction: row;} .sidebarRight .MyActivitySection ol li .left ul li{display: flex; border:0px none; margin:0; font-size:var(--fontsize13); box-shadow: 0px 0px 0px 0px; padding:0; flex-direction: row; width:auto; margin-left:5px;} .sidebarRight .MyActivitySection ol li .left ul li:first-child{margin-left: 0;} .sidebarRight .MyActivitySection ol li .left ul li i{margin-right: 5px; font-size:var(--fontsize12);} .sidebarRight .MyActivitySection ol li .left ul li img{margin-right: 5px;} .sidebarRight .MyActivitySection ol li .left ul li span{display: flex; align-items: center; margin-left: 10px;} .sidebarRight .MyActivitySection ol li .left ul li span{color:var(--tableTh);} .sidebarRight .MyActivitySection ol li .left .urgent-msg{font-size:var(--fontsize12); color:var(--primaryColor); display: flex;} .sidebarRight .MyActivitySection ol li .left .shortlisted-msg{font-size:var(--fontsize12); color:var(--greenColor); display: flex;} .sidebarRight .MyActivitySection ol li .left .progress-steps{font-size:var(--fontsize12); color:var(--greyColor8); display: flex; margin-top: 8px;} .sidebarRight .MyActivitySection ol li .left .progress-steps span{color:var(--blackColor);} .sidebarRight .MyActivitySection ol li .thumb{width:var(--fullwidth); max-width: 70px; margin-right:10px;} .sidebarRight .MyActivitySection ol li .thumbContent{width:var(--fullwidth); flex:1} .sidebarRight .MyActivitySection ol li .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .sidebarRight .TodayClassesSection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .sidebarRight .TodayClassesSection h6{font-size:var(--fontsize16); display: flex; justify-content:space-between; align-items: center; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont);} .sidebarRight .TodayClassesSection h6 a{color:var(--primaryColor); font-size:var(--fontsize12);} .sidebarRight .TodayClassesSection ol{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .sidebarRight .TodayClassesSection ol li:first-child{margin-top:10px;} .sidebarRight .TodayClassesSection ol li{flex-direction: column; border: 1px solid var(--lineColor); display: flex; width:var(--fullwidth); padding:10px; margin-top: 10px; border-radius: 5px;} .sidebarRight .TodayClassesSection ol li .left{flex:1; display: flex; align-items: flex-start;} .sidebarRight .TodayClassesSection ol li .classTiming{font-size:var(--fontsize14); align-items: center; justify-content: space-between; color:var(--greyColor8); display: flex; margin: 8px 0;} .sidebarRight .TodayClassesSection ol li p{font-size:var(--fontsize12); align-items: center; color:var(--greyColor8); display: flex; margin-bottom:5px;} .sidebarRight .TodayClassesSection ol li .classTiming span{color:var(--whitecolor); font-size:var(--fontsize12); background-color: var(--orangeColor); border-radius:5px; padding: 5px 10px;} .sidebarRight .TodayClassesSection ol li .thumb{width:var(--fullwidth); max-width: 70px; margin-right:10px;} .sidebarRight .TodayClassesSection ol li .thumbContent{width:var(--fullwidth); flex:1} .sidebarRight .TodayClassesSection ol li h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .sidebarRight .TodayClassesSection ol li .liveNow{width:var(--fullwidth); display: flex; font-size:var(--fontsize14); align-items: center; text-transform: uppercase; color:var(--lightRedColor);} .sidebarRight .TodayClassesSection ol li .liveNow i{margin-right: 5px;} .sidebarRight .TodayClassesSection ol li .actions {display: flex; justify-content: flex-end; align-items: center;} .sidebarRight .TodayClassesSection ol li .actions .joinBtn a{color:var(--whitecolor); font-size:var(--fontsize12); margin-left: 10px; background: linear-gradient(270deg, var(--primaryColor) 0%, var(--secondaryColor) 100%); border-radius:5px; padding: 5px 10px;} .sidebarRight .TodayClassesSection ol li .actions .shareBtn a{color:var(--primaryColor); font-size:var(--fontsize12); padding:0px;} .sidebarRight .MyCoursesSection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .sidebarRight .MyCoursesSection h6{font-size:var(--fontsize16); display: flex; justify-content:space-between; align-items: center; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont);} .sidebarRight .MyCoursesSection h6 a{color:var(--primaryColor); font-size:var(--fontsize12);} .sidebarRight .MyCoursesSection ol{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .sidebarRight .MyCoursesSection ol li .thumb img{border-radius:10px;} .sidebarRight .MyCoursesSection ol li a{width:var(--fullwidth); display:flex; } .sidebarRight .MyCoursesSection ol li:first-child{margin-top:10px;} .sidebarRight .MyCoursesSection ol li{flex-direction: row; border: 1px solid var(--lineColor); display: flex; width:var(--fullwidth); padding:10px; margin-top: 10px; border-radius: 5px;} .sidebarRight .MyCoursesSection ol li .left{flex:1; display: flex; align-items: flex-start;} .sidebarRight .MyCoursesSection ol li .left a{color:var(--blackColor);} .sidebarRight .MyCoursesSection ol li .left .progressCls{ height: 6px; width: 150px; margin:8px 0; background-color:var(--strokeColor); border-radius: 5px;} .sidebarRight .MyCoursesSection ol li .left .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--greenColor2); transition: width 0.6s ease;} .sidebarRight .MyCoursesSection ol li .left .progressCompleted{font-size:var(--fontsize12); color:var(--greyColor8); display: flex; margin-top: 8px;} .sidebarRight .MyCoursesSection ol li .left .progressCompleted span{color:var(--blackColor);} .sidebarRight .MyCoursesSection ol li .thumb{width:var(--fullwidth); max-width: 70px; margin-right:10px;} .sidebarRight .MyCoursesSection ol li .thumbContent{width:var(--fullwidth); flex:1} .sidebarRight .MyCoursesSection ol li .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .jobActivityWrapper{display:flex; width:var(--fullwidth);} .jobActivityWrapper .myActivitySection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom:0px;} .jobActivityWrapper .myActivitySection h6{font-size:var(--fontsize16); display: flex; justify-content:space-between; align-items: center; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont);} .jobActivityWrapper .myActivitySection h6 a{color:var(--primaryColor); font-size:var(--fontsize12);} .jobActivityWrapper .myActivitySection .myActivityInner{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .jobActivityWrapper .myActivitySection .myActivityInner .items .left .urgent-msg{font-size:var(--fontsize12); color:var(--primaryColor); display: flex;} .jobActivityWrapper .myActivitySection .myActivityInner .items .left .shortlisted-msg{font-size:var(--fontsize12); color:var(--greenColor); display: flex;} .jobActivityWrapper .myActivitySection .myActivityInner .items .thumb img{border-radius:10px;} .jobActivityWrapper .myActivitySection .myActivityInner .items a{width:var(--fullwidth); display:flex; } .jobActivityWrapper .myActivitySection .myActivityInner .items:first-child{margin-top:10px;} .jobActivityWrapper .myActivitySection .myActivityInner .items{flex-direction: row; border: 1px solid var(--lineColor); display: flex; width:var(--fullwidth); padding:10px; margin:5px; border-radius: 5px;} .jobActivityWrapper .myActivitySection .myActivityInner .items .left{flex:1; display: flex; align-items: flex-start;} .jobActivityWrapper .myActivitySection .myActivityInner .items .left a{color:var(--blackColor2);} .jobActivityWrapper .myActivitySection .myActivityInner .items .thumb{width:var(--fullwidth); max-width: 70px; margin-right:10px;} .jobActivityWrapper .myActivitySection .myActivityInner .items .thumbContent{width:var(--fullwidth); flex:1} .jobActivityWrapper .myActivitySection .myActivityInner .items .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .jobActivityWrapper .myActivitySection .myActivityInner .items .thumbContent p{font-size:var(--fontsize13); text-align: var(--textLeft); color: var(--greyColor2); font-family: var(--defaultfont);} .jobActivityWrapper .myActivitySection .slick-slide { margin: 0 10px;} .jobActivityWrapper .myActivitySection .slick-list {margin: 0 -10px;} .jobActivityWrapper .myActivitySection .slick-track{margin-left: 0;} .jobActivityWrapper{display:flex; width:var(--fullwidth);} .jobActivityWrapper .alljobs{box-shadow: 0px 4px 25px rgba(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom:0px;} .jobActivityWrapper .alljobs h6{font-size:var(--fontsize16); display: flex; justify-content:space-between; align-items: center; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont);} .jobActivityWrapper .alljobs h6 a{color:var(--primaryColor);} .jobActivityWrapper .alljobs .items:last-child{border-bottom: 0px none;} .jobActivityWrapper .alljobs .items .thumb img{border-radius:10px;} .jobActivityWrapper .alljobs .items a{width:var(--fullwidth); display:flex; } .jobActivityWrapper .alljobs .items:first-child{margin-top:0px;} .jobActivityWrapper .alljobs .items{flex-direction: row; align-items: center; border-bottom: 1px solid var(--lineColor); display: flex; width:var(--fullwidth); padding:10px; margin:10px 0 0; border-radius:0px;} .jobActivityWrapper .alljobs .items .left{flex:1; display: flex; align-items: flex-start;} .jobActivityWrapper .alljobs .items .left a{color:var(--blackColor2);} .jobActivityWrapper .alljobs .items .thumb{width:var(--fullwidth); max-width: 70px; margin-right:10px;} .jobActivityWrapper .alljobs .items .thumbContent{width:var(--fullwidth); flex:1} .jobActivityWrapper .alljobs .items .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .jobActivityWrapper .alljobs .items .thumbContent p{font-size:var(--fontsize12); text-align: var(--textLeft); color: var(--greyColor2); font-family: var(--defaultfont);} .jobActivityWrapper .alljobs .items .thumbContent .info{display: flex; align-items: center; width:var(--fullwidth); margin-top: 5px;} .jobActivityWrapper .alljobs .items .thumbContent .info span i{margin-right: 5px;} .jobActivityWrapper .alljobs .items .thumbContent .info span{color:var(--greyColor8); font-size:var(--fontsize12); margin-left: 15px;} .jobActivityWrapper .alljobs .items .thumbContent .info span:first-child{margin-left:0px;} .jobActivityWrapper .alljobs .items .right a{color:var(--primaryColor); font-size:var(--fontsize12);} .jobActivityWrapper .no-content-message {text-align:center;} .jobgsRecommendedActivityWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .jobgsRecommendedActivityWrapper h3{font-size:var(--fontsize17); font-weight: 400; font-family: var(--defaultfont); text-align: var(--textLeft); margin-bottom:10px; color: var(--greyColor8);} .jobgsRecommendedActivityWrapper h3 i{margin-right: 5px; color:var(--goldenColor);} .jobgsRecommendedActivityWrapper .activityArea {display: flex; padding:0px; width:var(--fullwidth)} .jobgsRecommendedActivityWrapper .activityArea .items{box-shadow: 0px 0px 5px rgba(29 23 71 / 10%); max-width: none; align-items: flex-start; flex-direction: column; border-radius: 10px; margin:10px 0 10px 10px; padding:15px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor);} .jobgsRecommendedActivityWrapper .activityArea .items .thumb{width:var(--fullwidth); max-width: 70px; margin-bottom: 10px; max-height: 70px; min-height: 70px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumb img{border-radius:0; max-width: 100%;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent{width:var(--fullwidth); flex:1; padding:0px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackColor);} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .offeredBy{display:flex; color:var(--greyColor8); font-size:var(--fontsize12); width:var(--fullwidth); margin-bottom: 10px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .info{display: flex; align-items: center; width:var(--fullwidth); margin-top: 5px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .info span i{margin-right: 5px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .info span{color:var(--greyColor8); font-size:var(--fontsize12); margin-left: 15px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .info span:first-child{margin-left:0px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .actions{display: flex; width:var(--fullwidth); margin-top: 15px;} .jobgsRecommendedActivityWrapper .activityArea .items .thumbContent .actions a{background-color: var(--blackcolor); text-align: center; padding:5px 15px; border-radius: 40px; color: var(--whitecolor); width:var(--fullwidth);} .jobgsRecommendedActivityWrapper .activityArea .slick-slide { margin: 0 10px;} .jobgsRecommendedActivityWrapper .activityArea .slick-list {margin: 0 -10px; display: flex; width:100%} .jobgsRecommendedActivityWrapper .activityArea .slick-track{margin-left: 0; display: flex; width:100%} .joblistingBanner .completeProfileSection{display: flex; align-items: center; width:var(--fullwidth); background-color: var(--greenColor2); padding:15px; border-radius:10px;} .joblistingBanner .completeProfileSection h3{font-size:var(--fontsize17); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor);} .joblistingBanner .completeProfileSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor);} .joblistingBanner .completeProfileSection a{display: flex; width:var(--fullwidth); align-items: center;} .joblistingBanner .completeProfileSection div:first-child{flex:1; align-items: flex-start;} .joblistingBanner .completeProfileSection div:last-child{width:auto; align-items: center; color: var(--whitecolor); font-size:var(--fontsize22);} .joblistingBanner .completePortfolioSection{display: flex; align-items: center; margin-bottom:20px; width:var(--fullwidth); background-color: var(--orangeColor); padding:15px; border-radius:10px;} .joblistingBanner .completePortfolioSection h3{font-size:var(--fontsize17); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor);} .joblistingBanner .completePortfolioSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor);} .joblistingBanner .completePortfolioSection a > i{ margin-right:15px; } .joblistingBanner .completePortfolioSection a{display: flex; width:var(--fullwidth); align-items: center;} .joblistingBanner .completePortfolioSection i + div{flex:1; align-items: flex-start;} .joblistingBanner .completePortfolioSection i + div + div{width:auto; align-items: center; color: var(--whitecolor); font-size:var(--fontsize22);} .marginTop15{margin-top: 15px;} .competitionsActivityWrapper .myActivitySection{box-shadow: 0px 4px 25px rgba(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom:0px;} .competitionsActivityWrapper .myActivitySection h6{font-size:var(--fontsize16); display: flex; justify-content:space-between; align-items: center; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont);} .competitionsActivityWrapper .myActivitySection h6 a{color:var(--primaryColor); font-size:var(--fontsize12); font-family: var(--defaultfont);} .competitionsActivityWrapper .myActivitySection .myActivityInner{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .thumb img{border-radius:10px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items a{width:var(--fullwidth); display:flex; } .competitionsActivityWrapper .myActivitySection .myActivityInner .items:first-child{margin-top:10px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items{flex-direction: row; border: 1px solid var(--lineColor); display: flex; width:var(--fullwidth); padding:10px; margin:5px; border-radius: 5px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left{flex:1; display: flex; align-items: flex-start;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left a{color:var(--blackColor2);} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left .progressCls{ height: 6px;width:var(--fullwidth); max-width: 90%; margin:8px 0; background-color:var(--strokeColor); border-radius: 5px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--greenColor2); transition: width 0.6s ease;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul{display: flex; flex-direction: row;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul li{display: flex; border:0px none; margin:0; font-size:var(--fontsize13); box-shadow: 0px 0px 0px 0px; padding:0; flex-direction: row; width:auto; margin-left:5px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul li:first-child{margin-left: 0;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul li i{margin-right: 5px; font-size:var(--fontsize12);} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul li img{margin-right: 5px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul li span{display: flex; align-items: center; margin-left: 10px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left ul li span{color:var(--tableTh);} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left .urgent-msg{font-size:var(--fontsize12); color:var(--primaryColor); display: flex;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left .shortlisted-msg{font-size:var(--fontsize12); color:var(--greenColor); display: flex;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left .progress-steps{font-size:var(--fontsize12); color:var(--greyColor8); display: flex; margin-top: 8px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .left .progress-steps span{color:var(--blackColor);} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .thumb{width:var(--fullwidth); max-width: 70px; margin-right:10px;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .thumbContent{width:var(--fullwidth); flex:1} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .itemInfo{display: flex; flex:1; align-items: center;} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .itemInfo div{display: flex; align-items:center; color: var(--greyColor8); font-size: var(--fontsize12);} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .itemInfo .bullet{width:5px; margin:0 10px; height: 5px; border-radius:100%; background-color: var(--greyColor5); display:flex; align-items: center; justify-content:center} .competitionsActivityWrapper .myActivitySection .myActivityInner .items .itemInfo div span{ margin-left: 5px;} .competitionsActivityWrapper .myActivitySection .slick-slide { margin: 0 0px;} .competitionsActivityWrapper .myActivitySection .slick-track {margin-left: 0;} .competitionsActivityWrapper .myActivitySection .slick-slide { margin: 0 10px;} .competitionsActivityWrapper .myActivitySection .slick-list {margin: 0 -10px; display: flex; width:100%} .competitionsActivityWrapper .myActivitySection .slick-track{margin-left: 0; display: flex; width:100%} .pageWrapper .sidebarRight .learnerProgressSection{box-shadow: 0px 4px 25px rgba(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .pageWrapper .sidebarRight .learnerProgressSection .learnerThumb{display: flex;margin: 0 auto 10px; width: 76px; justify-content: center; align-items: center; height: 76px; border-radius: var(--radius100); background-color: var(--greyColor);} .pageWrapper .sidebarRight .learnerProgressSection .learnerThumb img{border-radius: var(--radius100); width: var(--fullwidth); height: var(--fullheight);} .pageWrapper .sidebarRight .learnerProgressSection h6{font-size:var(--fontsize18); text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerProgressSection .score{font-size:var(--fontsize12); display: flex; align-items: center; justify-content: center; text-align: var(--textCenter); margin-top: 10px;} .pageWrapper .sidebarRight .learnerProgressSection .score i{margin: 0 5px;} .pageWrapper .sidebarRight .learnerProgressSection .score span{font-size:var(--fontsize16); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection{display: flex; flex-direction: column; margin-top: 30px; justify-content: center; align-items: center; width: var(--fullwidth);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection h5{font-size:var(--fontsize16); text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection h5 i{color: var(--greyColor2);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection .progressLine{position: relative; display: flex; margin: 30px 0; justify-content: center; align-items: center; width: var(--fullwidth);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection .progressLine span{width: 27px; position: relative; border: 1px solid var(--pinkColor); font-size:var(--fontsize12); color: var(--whitecolor); display: flex; align-items: center; justify-content: center; height: 27px; background-color: var(--greyColor); border-radius: var(--radius100);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection .progressLine div{display: flex; justify-content: space-between; position: absolute; align-items: center; width: var(--fullwidth);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection .progressLine div span.completed{background-color: var(--greenColor); border: 1px solid var(--greenColor);} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection .progressLine div span i{display: flex; align-items: center; font-size:var(--fontsize17); justify-content: center;} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection a{color:var(--primaryLinkColor); text-decoration: underline;} .pageWrapper .sidebarRight .learnerProgressSection .scoreIncreseSection a:hover{text-decoration: none;} .pageWrapper .sidebarRight .learnerLeaderBoardSection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .pageWrapper .sidebarRight .learnerLeaderBoardSection h3{font-size:var(--fontsize17); display: flex; justify-content: space-between; align-items: center; text-align: var(--textLeft); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerLeaderBoardSection h3 a{color:var(--primaryColor)} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol{display: flex;width: var(--fullwidth); flex-direction: column;} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li{display: flex; opacity: 0.3; margin-top: 25px; width: var(--fullwidth); justify-content: space-between; align-items: center;} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li.active{opacity: 1;} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li span{font-size:var(--fontsize12); margin-right: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li div:first-child{ display: flex; align-items: center; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li div:last-child{ display: flex; align-items: center; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li div:last-child i{ display: flex; align-items: center; margin-right: 5px;} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li div:first-child i{ display: flex; align-items: center; justify-content: center; margin-right: 10px; background-color: var(--greyColor); width: 30px; height: 30px; border-radius: var(--radius100);} .pageWrapper .sidebarRight .learnerLeaderBoardSection ol li div:first-child i img{ width: var(--fullwidth); height: var(--fullheight); width: 30px; height: 30px; border-radius: var(--radius100);} .pageWrapper .sidebarRight .learnerResumeLearningSection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 30px;} .pageWrapper .sidebarRight .learnerResumeLearningSection h3{font-size:var(--fontsize16); text-align: var(--textLeft); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerResumeLearningSection h4{font-size:var(--fontsize15); text-align: var(--textLeft); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerResumeLearningSection ol{display: flex;width: var(--fullwidth); flex-direction: column; margin-top: 20px;} .pageWrapper .sidebarRight .learnerResumeLearningSection ol li{display: flex; padding: 10px; width: var(--fullwidth); background-color: var(--greyColor3); border-radius: var(--radius10);} .pageWrapper .sidebarRight .learnerResumeLearningSection ol li .thumb{margin-right: 15px;} .pageWrapper .sidebarRight .learnerResumeLearningSection ol li .thumbContent{flex: 1} .pageWrapper .sidebarRight .learnerResumeLearningSection ol li .progrssBar{display: flex; margin-top: 10px; width: var(--fullwidth); height: 10px; background-color: var(--greyColor4); border-radius: var(--radius10);} .pageWrapper .sidebarRight .learnerResumeLearningSection ol li .progrssBar span{background-color: var(--secondaryColor); border-radius: var(--radius10);} .pageWrapper .sidebarRight .learnerToDoActivitySection{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10);} .pageWrapper .sidebarRight .learnerToDoActivitySection h3{font-size:var(--fontsize16); text-align: var(--textLeft); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerToDoActivitySection h4{font-size:var(--fontsize14); text-align: var(--textLeft); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .sidebarRight .learnerToDoActivitySection p{font-size:var(--fontsize12); text-align: var(--textLeft); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .sidebarRight .learnerToDoActivitySection ol{display: flex;width: var(--fullwidth); overflow-y: auto; max-height: 300px; flex-direction: column; margin-top: 20px;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li{display: flex; padding: 10px; width: var(--fullwidth); border: 1px solid var(--lineColor);margin-bottom: 10px; border-radius: var(--radius10);} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .thumb{margin-right: 15px;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .thumbContent{flex: 1} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li a{display: flex; width: var(--fullwidth);} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .otherSection{display: flex; width: var(--fullwidth); align-items: flex-start;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection{display: flex; width: var(--fullwidth); align-items: flex-start;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .info{flex: 1;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .liveStatus{background-color: var(--lightRedColor); padding: 2px 0px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius2); font-size:var(--fontsize12); color: var(--whitecolor); width: var(--fullwidth); max-width: 55px;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .liveStatus span{display: flex; align-items: center; justify-content: center;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .liveStatus span i{margin-right: 5px;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .upcomingStatus{background-color: var(--orangeColor); padding: 2px 0px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius2); font-size:var(--fontsize12); color: var(--whitecolor); width: var(--fullwidth); max-width:75px;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .upcomingStatus span{display: flex; align-items: center; justify-content: center;} .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .date{display: flex;font-size:var(--fontsize14); margin-bottom: 10px; width: var(--fullwidth); color: var(--greyColor2); } .pageWrapper .sidebarRight .learnerToDoActivitySection ol li .liveClassSection .topic{display: flex;font-size:var(--fontsize12); width: var(--fullwidth); margin-bottom: 5px; color: var(--greyColor2); } .pageWrapper .sidebarRight .trainingRightWrapper{border-radius: var(--radius10); border: 1px solid var(--greyColor4); background-color: var(--whitecolor); padding: 15px;} .pageWrapper .sidebarRight .trainingRightWrapper .thumbWrapper{display: flex; margin-bottom: 20px; width:var(--fullwidth); align-items: center; justify-content: center; position: relative; max-height: 270px; height:auto;} .pageWrapper .sidebarRight .trainingRightWrapper .thumbWrapper img{border-radius: var(--radius10);} .pageWrapper .sidebarRight .trainingRightWrapper .thumbWrapper iframe{width:100%; height: 100%;} .pageWrapper .sidebarRight .trainingRightWrapper .thumbWrapper .overlay{position: absolute; top: 0; border-radius: var(--radius10); display: flex; align-items: center; justify-content: center; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,0.8);} .pageWrapper .sidebarRight .trainingRightWrapper .thumbWrapper .overlay a{width: 45px; display: flex; align-items: center; color: var(--primaryColor); font-size:var(--fontsize18); justify-content: center; height: 45px; background-color: var(--whitecolor); border-radius: var(--radius100)} .pageWrapper .sidebarRight .trainingRightWrapper h3{font-size:var(--fontsize20); text-align: var(--textLeft); margin: 0 0 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold); white-space:normal;} .pageWrapper .sidebarRight .trainingRightWrapper p{font-size:var(--fontsize14); white-space: normal; text-align: var(--textLeft); margin: 0 0 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .sidebarRight .trainingRightWrapper ol{display: flex; flex-direction: column; width:var(--fullwidth); margin-top: 15px;} .pageWrapper .sidebarRight .trainingRightWrapper ol li{display: flex; width:var(--fullwidth); align-items: center; font-size:var(--fontsize16); text-align: var(--textLeft); margin: 0 0 10px; color: var(--blackcolor);} .pageWrapper .sidebarRight .trainingRightWrapper ol li i{margin-right:10px; color: var(--secondaryColor); font-size:var(--fontsize18);} .pageWrapper .sidebarRight .trainingRightWrapper .actions{display: flex; flex-direction: column; width:var(--fullwidth); margin-top: 15px;} .pageWrapper .sidebarRight .trainingRightWrapper .actions a{display: flex; width:var(--fullwidth); align-items: center; justify-content: center;} .pageWrapper .sidebarRight .trainingRightWrapper .actions span{color: var(--strokeColor); margin-bottom: 5px; text-align: center; font-size:var(--fontsize14);} .pageWrapper .sidebarRight .trainingRightWrapper .actions a span{color: var(--greenColor); font-size:var(--fontsize18); font-weight: 700; margin-bottom: 0; margin-left: 5px;} .pageWrapper .sidebarRight .trainingRightWrapper .actions a del{margin: 0 10px; font-size:var(--fontsize16);} .pageWrapper .sidebarRight .trainingRightWrapper .actions a ins{text-decoration: none; font-size:var(--fontsize22);} .pageWrapper .mainContent{display: flex; flex-direction: column; width: var(--fullwidth); flex:1; margin: 0 30px;} /*Activity Page*/ .sicActivityWrapper {display: flex; width: var(--fullwidth); font-family: var(--defaultfont); padding: 20px; flex-direction: column; border-radius: var(--radius10); background-color: var(--whitecolor);} .sicActivityWrapper .sicActivityTabsWrapper{display: flex; width: var(--fullwidth); margin-bottom: 20px; border-bottom: 1px solid var(--greyColor4); } .sicActivityWrapper .sicActivityTabsWrapper ol{display: flex; margin: 0; width: var(--fullwidth);} .sicActivityWrapper .sicActivityTabsWrapper ol li{display: flex; flex-direction: column; align-items: center; margin-left:50px;} .sicActivityWrapper .sicActivityTabsWrapper ol li:first-child{margin-left: 0;} .sicActivityWrapper .sicActivityTabsWrapper ol li a{color: var(--greyColor5); text-decoration: none; padding-bottom: 5px; font-size:var(--fontsize16); border-bottom: 4px solid transparent;} .sicActivityWrapper .sicActivityTabsWrapper ol li a:hover{text-decoration: none; color: var(--blackcolor); font-size:var(--fontsize16); border-bottom: 4px solid var(--sicPrimaryColor);} .sicActivityWrapper .sicActivityTabsWrapper ol li a.active{color: var(--blackcolor); font-size:var(--fontsize16); border-bottom: 4px solid var(--sicPrimaryColor);} .sicActivityWrapper h3{color: var(--blackcolor); font-size:var(--fontsize20); border-bottom: 1px solid var(--greyColor4); font-weight: 700; font-family: var(--fontfamilysemibold); padding-bottom:5px;} .sicActivityWrapper .tabsContentWrapper{display: flex; width: var(--fullwidth); flex-direction: column;} .sicActivityWrapper .tabsContentWrapper .loopWrapper{display: flex; flex-direction: column; width: var(--fullwidth); margin-top: 15px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper:first-child{margin-top: 0;} .sicActivityWrapper .tabsContentWrapper .loopWrapper .date{color: var(--blackcolor); font-size:var(--fontsize16); margin-bottom:0px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol{display: flex; flex-direction: column; width: var(--fullwidth); margin: 0;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .asOfNow{display: flex; width: var(--fullwidth);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .asOfNow a{display: flex; width: var(--fullwidth); text-decoration: none;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .asOfNow a:hover{display: flex; width: var(--fullwidth); text-decoration: none;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .asOfNow .thumb{max-width: 150px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li{display: flex; width: var(--fullwidth); position: relative; background-color: #F3F4F6; margin-top: 15px; padding: 15px; border-radius:var(--radius10);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumb{margin-right: 15px; max-width: 181px; width: var(--fullwidth);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumb img{border-radius: 10px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent{display: flex; flex-direction: column; flex: 1; justify-content: space-between;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .asOfNow .thumbContent{display: flex; flex-direction: column; flex: 1; justify-content:flex-start;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .organizeBy{display: flex; margin-top: 10px; font-size:var(--fontsize14); color:var(--otherTextColor);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .organizeBy span{font-size:var(--fontsize14); color:var(--secondaryTextColor); margin-left:5px; font-family: var(--fontfamilysemibold); p} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .monthName{display: flex; align-items: center; margin-bottom: 5px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .monthName span{ background-color: var(--lightRedColor); font-size:var(--fontsize14); color:var(--whitecolor); padding:2px 10px; border-radius: var(--radius5)} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .activityMode{display: flex; position: absolute; right: 0; bottom: 0; align-items: center;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .activityMode span{ background-color: var(--orangeColor); font-size:var(--fontsize14); color:var(--whitecolor); padding:2px 10px; border-radius: 5px 5px 0 0} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li ul{margin: 0; padding:0;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li ul li{margin: 0; padding:0; color: var(--blackcolor); font-size:var(--fontsize13); display: list-item; list-style-type: disc; list-style-position: inside;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .top{display: flex; align-items: center; margin-bottom: 15px; justify-content: space-between; width: var(--fullwidth);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .middle{display: flex; flex-direction: column; margin-bottom: 15px; width: var(--fullwidth);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .gotoLink {display: flex; align-items: center;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .gotoLink a{color: #2F80ED; text-decoration: underline; font-size:var(--fontsize14);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .gotoLink a:hover{text-decoration: none;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .gotoLink i{margin-left: 5px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .time{color: var(--blackcolor); font-size:var(--fontsize14); margin-bottom:0px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent h4{color: var(--blackcolor); font-size:var(--fontsize16); font-weight: 700; font-family: var(--fontfamilysemibold); margin-bottom:5px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent p{color: var(--blackcolor); font-size:var(--fontsize13); margin-bottom:0px;} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .addToLink {display: flex; margin-bottom:0px; justify-content: flex-end; width: var(--fullwidth);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .addToLink a{color: #2E5BA6; text-decoration: none; font-size:var(--fontsize16);} .sicActivityWrapper .tabsContentWrapper .loopWrapper ol li .thumbContent .addToLink a:hover{text-decoration: underline;} /*Activity Page*/ .pageWrapper .mainContent .activityFilter{display: flex; margin-bottom: 20px; flex-direction: column; width: var(--fullwidth); padding: 20px; border-radius: var(--radius10); background-color: var(--whitecolor);} .pageWrapper .mainContent .activityFilter .actions{display: flex; justify-content: flex-end;} .pageWrapper .mainContent .activityFilter .actions a{margin-left: 25px; color: var(--greyColor);} .pageWrapper .mainContent .activityFilter .actions a.active{color: var(--primaryColor); font-weight: 700;} .pageWrapper .mainContent .activityFilter .actions a i{margin-right:5px;} .pageWrapper .mainContent .activityFilter .actions a:last-child{border-left: 1px solid var(--greyColor4); padding-left: 20px;} .pageWrapper .mainContent .calenderSection{display: flex; display: none; flex-direction: column; width: var(--fullwidth); padding: 20px; border-radius: var(--radius10); background-color: var(--whitecolor);} .pageWrapper .mainContent .calenderSection.open{display: flex;} .pageWrapper .mainContent .activitySection{display: flex; display: none; margin-bottom: 20px; flex-direction: column; width: var(--fullwidth); padding: 20px; border-radius: var(--radius10);} .pageWrapper .mainContent .activitySection.open{display: flex;} .pageWrapper .mainContent .activitySection .courseThumb{width:150px} .pageWrapper .mainContent .activitySection .coursesRecommendedSection{margin-top: 0;} .pageWrapper .mainContent .topRatedSection{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .topRatedSection h3{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .topRatedSection .topRatedSlider{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .topRatedSection .topRatedSlider .items{display: flex; width: 59px; height: 59px; margin-right: 15px; border-radius: var(--radius100); border: 2px solid var(--pinkColor)} .pageWrapper .mainContent .topRatedSection .topRatedSlider .slick-slide{margin-left: 10px; width: 59px; height: 59px; } .pageWrapper .mainContent .topRatedSection .topRatedSlider .items img{display: flex; border-radius: var(--radius100)} .pageWrapper .mainContent .topRatedSection .topRatedSlider .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .topRatedSection .topRatedSlider .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .redeemCategorySection{display: flex; flex-direction: column; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .redeemCategorySection h3{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .redeemCategorySection .redeemCategorySlider{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .redeemCategorySection .redeemCategorySlider .items{display: flex; margin-left: 30px; flex-direction: column; color: var(--greyColor2); font-size:var(--fontsize10);} .pageWrapper .mainContent .redeemCategorySection .redeemCategorySlider .items:first-child{margin-left: 0;} .pageWrapper .mainContent .redeemCategorySection .redeemCategorySlider .items i{display: flex; flex-direction: column; width: 56px; height: 56px; margin-bottom:5px; border-radius: var(--radius100);} .pageWrapper .mainContent .redeemCategorySection .redeemCategorySlider .items a{ display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--greyColor2); font-size:var(--fontsize10);} .pageWrapper .mainContent .redeemCategorySection .redeemCategorySlider .items img{display: flex; border-radius: var(--radius100);} .pageWrapper .mainContent .colorfullBoxesSection{display: flex; flex-direction: column; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .colorfullBoxesSection ol{display: grid; gap:20px; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; flex-wrap: wrap;} .pageWrapper .mainContent .colorfullBoxesSection ol li{display: flex; align-items: center; width: var(--fullwidth); max-width:none;} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper{display: flex; background: linear-gradient(270deg, var(--primaryColor) 0%, var(--secondaryColor) 100%); border: 2px solid var(--whitecolor); margin-right:0px; align-items: center; padding:0px; width: var(--fullwidth); border-radius: 13.5754px 46.1564px 13.5754px 13.5754px;} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper a{color: var(--whitecolor); display: flex; flex-direction: column; width: var(--fullwidth)} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper .symbol{width: 80px; border-radius:100%; height: 80px; margin: -10px -10px 0 -10px; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.2);} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper .symbol img{max-width: 33px;} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper p{font-size:var(--fontsize12);} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper h4{font-size:var(--fontsize18); line-height: 26px;} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper .content{padding: 15px; display: flex; align-items: center; justify-content: space-between} .pageWrapper .mainContent .colorfullBoxesSection ol li .boxWrapper .content div{width:30px; color:var(--primaryColor); box-shadow: 0px 5.43016px 5.43016px rgba(0, 0, 0, 0.25); font-size:var(--fontsize16); height: 30px; background-color: var(--whitecolor); border-radius:100%; display: flex; align-items: center; justify-content: center} .pageWrapper .mainContent .topCategorySection{display: flex; position: relative; flex-direction: column; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .topCategorySection h3{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .topCategorySection .topCategorySliderWrapper{display: flex; width: var(--fullwidth); position: relative;} .pageWrapper .mainContent .topCategorySection .topCategorySlider{display: flex; width: var(--fullwidth); overflow-x: auto; scroll-behavior: smooth;} .pageWrapper .mainContent .topCategorySection .topCategorySlider::-webkit-scrollbar{display:none} .pageWrapper .mainContent .topCategorySection .topCategorySlider{scrollbar-width: none; -ms-overflow-style: none;} .pageWrapper .mainContent .topCategorySection .topCategorySlider{display: flex; width: var(--fullwidth); overflow-x: auto;} .pageWrapper .mainContent .topCategorySection .topCategorySlider .items{display: flex; margin-right: 15px; white-space: nowrap; color: var(--blackcolor); } .pageWrapper .mainContent .topCategorySection .topCategorySlider .items a{color: var(--blackcolor); background-color: var(--greyColor3); border-radius: var(--radius15); border: 1px solid var(--greyColor3); padding: 5px 15px; font-size:var(--fontsize14); color:var(--blackColor)} .pageWrapper .mainContent .topCategorySection .topCategorySlider .items a:hover{color:var(--primaryColor); background-color: var(--lightSecondaryColor); border: 1px solid var(--primaryColor);} .pageWrapper .mainContent .topCategorySection .topCategorySlider .items a.active{color:var(--primaryColor); background-color: var(--lightSecondaryColor); border: 1px solid var(--primaryColor);} .pageWrapper .mainContent .topCategorySection .leftClickArrow { display:flex; position: absolute; margin-left:5px; color: var(--whitecolor); display: flex; align-items: center; justify-content: center; background-color: var(--primaryColor);} .pageWrapper .mainContent .topCategorySection .rightClickArrow { display:flex; position: absolute; border-radius:100%; margin-right:5px; color: var(--whitecolor); display: flex; align-items: center; justify-content: center; background-color: var(--primaryColor);} .pageWrapper .mainContent .topCategorySection .actions{display: none} .pageWrapper .mainContent .topCategorySection .actions.open{display: flex} .pageWrapper .mainContent .topCategorySection .actions .leftClickArrow{left:0; top:50%; margin-top:-12px; width:24px; height: 24px; border-radius:100%; background-color: rgba(0,0,0,0.5);} .pageWrapper .mainContent .topCategorySection .actions .rightClickArrow{right:0; top:50%; margin-top:-12px; width:24px; height: 24px; border-radius:100%; background-color: rgba(0,0,0,0.5);} .redeemCourseSection{display: flex; flex-direction: column; width: var(--fullwidth); margin-top: 30px;} .redeemCourseSection ol{display: flex; width: var(--fullwidth); flex-wrap: wrap;} .redeemCourseSection ol li{display: flex; width: var(--fullwidth); max-width: 25%; flex-direction: column;} .redeemCourseSection ol li .items{padding: 0 10px; margin-bottom: 40px;} .redeemCourseSection ol li .courseThumb{display: flex; width: var(--fullwidth); margin-bottom: 10px;} .redeemCourseSection ol li .courseContent{display: flex; width: var(--fullwidth); flex-direction: column;} .redeemCourseSection ol li .courseContent span{font-size:var(--fontsize10); text-align: var(--textLeft); margin-bottom:2px; color: var(--greyColor5); font-family: var(--defaultfont);} .redeemCourseSection ol li .courseContent h3{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .redeemCourseSection ol li .courseContent .priceBlock{display: flex; align-items: center; font-size:var(--fontsize18); color: var(--greenColor); font-family: var(--fontfamilysemibold); margin-bottom: 5px;} .redeemCourseSection ol li .courseContent .priceBlock span{display: flex; align-items: center; font-size:var(--fontsize12); font-family: var(--defaultfont); margin-left: 15px; margin-bottom: 0;} .redeemCourseSection ol li .courseContent .mrpPriceBlock{display: flex; align-items: center; font-size:var(--fontsize12); color: var(--greyColor2); font-family: var(--defaultfont);} .redeemCourseSection ol li .courseContent .mrpPriceBlock span{display: flex; align-items: center; color: var(--greenColor); font-size:var(--fontsize12); font-family: var(--defaultfont); margin-left:5px; margin-bottom: 0;} .pageWrapper .mainContent .searchResultTopBar{display: flex; justify-content: space-between; align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); margin-top:0px; background-color: var(--whitecolor);} .pageWrapper .mainContent .searchResultTopBar .toggleBlock{position: relative; display: flex; align-items: center;} .pageWrapper .mainContent .searchResultTopBar .toggleBlock label{display:inline-block; cursor: pointer; height: 25px; position: relative; width:50px; margin: 0;} .pageWrapper .mainContent .searchResultTopBar .toggleBlock span{margin-right: 10px; color: var(--greyColor2); font-size:var(--fontsize13);} .pageWrapper .mainContent .searchResultTopBar .toggleBlock span.active{margin-right: 10px; color: var(--orangeColor); font-size:var(--fontsize13);} .pageWrapper .mainContent .searchResultTopBar .toggleBlock label + span{margin-left: 10px; margin-right: 0;} .pageWrapper .mainContent .searchResultTopBar .toggleBlock label input{opacity: 0; visibility: hidden;} .pageWrapper .mainContent .searchResultTopBar .toggleBlock label input:checked + span{ background-color:var(--secondaryColor);} .pageWrapper .mainContent .searchResultTopBar .toggleBlock .slider:before { position: absolute; content: ""; height: 22px; border-radius: var(--radius100); width: 22px; left: 2px; bottom: 2px; background-color:var(--whitecolor); transition: .4s;} .pageWrapper .mainContent .searchResultTopBar .toggleBlock .slider{position: absolute; margin: 0; top: 0; background-color: var(--greyColor4); border-radius: var(--radius15); left: 0; right: 0; bottom: 0; transition: .4s;} .pageWrapper .mainContent .searchResultTopBar .toggleBlock label input:checked + span:before{transform: translateX(24px);} .pageWrapper .mainContent .searchResultTopBar div:first-child{display: flex; align-items: center;} .pageWrapper .mainContent .searchResultTopBar div:first-child span{padding: 5px 10px 5px 15px; margin-left: 15px; border-radius: var(--radius10); font-size:var(--fontsize14); font-family: var(--defaultfont); background-color: var(--greyColor3); display: flex; align-items: center;} .pageWrapper .mainContent .searchResultTopBar div:first-child span a{display: flex; font-family: var(--defaultfont); justify-content: center; font-size:var(--fontsize12); margin-left: 10px; border-radius: var(--radius100); color: var(--whitecolor); background-color: var(--blackcolor); align-items: center; width: 20px; height: 20px;} .pageWrapper .mainContent .searchResultTopBar div:first-child i{display: flex; align-items: center;} .pageWrapper .mainContent .searchResultTopCategorySection{display: flex; flex-direction: column; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .searchResultTopCategorySection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .searchResultTopCategorySection .searchResultTopCategorySlider{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .searchResultTopCategorySection .searchResultTopCategorySlider .items{display: flex; margin-right: 15px; white-space: nowrap; color: var(--blackcolor); } .pageWrapper .mainContent .searchResultTopCategorySection .searchResultTopCategorySlider .items a{color: var(--blackcolor); background-color: var(--whitecolor); border-radius: var(--radius15); border: 1px solid var(--greyColor5); padding: 5px 15px; font-size:var(--fontsize14); color:var(--blackcolor)} .pageWrapper .mainContent .searchResultTopCategorySection .searchResultTopCategorySlider .items a:hover{color:var(--blackcolor); background-color: var(--notificationBellBg); border: 1px solid var(--notificationBellBg);} .pageWrapper .mainContent .searchResultTopCategorySection .searchResultTopCategorySlider .items a.active{color:var(--blackcolor); background-color: var(--notificationBellBg); border: 1px solid var(--notificationBellBg);} .pageWrapper .mainContent .searchResultSection{display: flex; width: var(--fullwidth); flex-direction: column; margin-top: 30px;} .pageWrapper .mainContent .searchResultSection label{font-size:var(--fontsize18); justify-content: space-between; display: flex; align-items: center; text-align: var(--textLeft); font-weight: normal; margin-bottom: 10px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .searchResultSection label div:last-child{color:var(--greyColor2);} .pageWrapper .mainContent .searchResultSection label span{font-family: var(--fontfamilysemibold); margin-left: 10px;} .pageWrapper .mainContent .searchResultCourseSection{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); margin-top:15px;} .pageWrapper .mainContent .searchResultCourseSection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 25px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .searchResultCourseSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .searchResultCourseSection ol{display: flex; width: var(--fullwidth); flex-wrap: wrap;} .pageWrapper .mainContent .searchResultCourseSection ol li{display: flex; width: var(--fullwidth); max-width: none; padding:0px;} .pageWrapper .mainContent .searchResultCourseSection ol li:nth-child(odd){margin-left: 0;} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesThumb{max-width: 100px; position: relative; width: var(--fullwidth); max-height: 100px; overflow: hidden; border-radius:var(--radius5);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems{display: flex; border-radius:var(--radius15); background-color: var(--whitecolor); padding: 15px; position: relative; margin-bottom: 10px; width: var(--fullwidth);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesContent{display: flex; justify-content: space-between; padding:0 0 0 15px; flex-direction: column; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesContent .coursesTop{display: flex; position: relative; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesContent .coursesTop p{font-size:var(--fontsize14);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesContent .coursesTop p i{margin-right: 5px; color: var(--secondaryColor);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesContent .coursesBottom{align-items: center; display: flex; justify-content: space-between; width: var(--fullwidth);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesContent .coursesBottom p{margin-bottom: 0; font-size:var(--fontsize14);} .pageWrapper .mainContent .searchResultCourseSection ol li h5{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .searchResultCourseSection ol li p{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesPrice{display: flex; align-items: center;} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesPrice del{margin-left: 15px; color: var(--greyColor2);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesPrice ins{margin-left: 15px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize22); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesRating{position: absolute; right: 5px; top: 5px;} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesRating span{ display: flex; align-items: center; justify-content: center; font-size:var(--fontsize12); background-color: rgba(0,0,0,0.7); padding:2px 10px; border-radius:var(--radius5);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesRating span i{color: var(--orangeColor); margin-left: 5px;} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesScore{position: absolute; right: 0px; top: 5px;} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesScore span{ display: flex; align-items: center; font-size:var(--fontsize12);justify-content: center; background-color:var(--lightOrangeColor); color: var(--blackcolor); padding: 5px 10px; border-radius:var(--radius5);} .pageWrapper .mainContent .searchResultCourseSection ol li .coursesItems .coursesScore span i{color: var(--orangeColor); margin-right: 5px;} .pageWrapper .mainContent .searchResultCourseSection ol li a{color: var(--whitecolor); display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .searchResultCourseSection ol li img{border-radius:var(--radius5);} .pageWrapper .mainContent .filtersSection{display: flex; justify-content: space-between; align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); margin-top: 30px; background-color: var(--whitecolor);} .pageWrapper .mainContent .filtersSection .searchBar{max-width: 250px; position: relative; width: var(--fullwidth); border-radius:var(--radius5); background-color: var(--primaryBgColor);} .pageWrapper .mainContent .filtersSection .searchBar input[type="search"]{ width: var(--fullwidth); background-color: transparent; font-size:var(--fontsize14); border: 0px none; color:var(--blackcolor)} .pageWrapper .mainContent .filtersSection .searchBar i{position: absolute; right: 10px; transform:translateY(10px);} .pageWrapper .mainContent .filtersSection .toggleBlock{position: relative; display: flex; align-items: center;} .pageWrapper .mainContent .filtersSection .toggleBlock label{display:inline-block; cursor: pointer; height: 25px; position: relative; width: 50px; margin: 0;} .pageWrapper .mainContent .filtersSection .toggleBlock span{margin-right: 10px; color: var(--greyColor2); font-size:var(--fontsize13);} .pageWrapper .mainContent .filtersSection .toggleBlock span.active{margin-right: 10px; color: var(--orangeColor); font-size:var(--fontsize13);} .pageWrapper .mainContent .filtersSection .toggleBlock label + span{margin-left: 10px; margin-right: 0;} .pageWrapper .mainContent .filtersSection .toggleBlock label input{opacity: 0; visibility: hidden;} .pageWrapper .mainContent .filtersSection .toggleBlock label input:checked + span{ background-color:var(--secondaryColor);} .pageWrapper .mainContent .filtersSection .toggleBlock .slider:before { position: absolute; content: ""; height: 22px; border-radius: var(--radius100); width: 22px; left: 2px; bottom: 2px; background-color:var(--whitecolor); transition: .4s;} .pageWrapper .mainContent .filtersSection .toggleBlock .slider{position: absolute; margin: 0; top: 0; background-color: var(--greyColor4); border-radius: var(--radius15); left: 0; right: 0; bottom: 0; transition: .4s;} .pageWrapper .mainContent .filtersSection .toggleBlock label input:checked + span:before{transform: translateX(24px);} .pageWrapper .mainContent .filtersSection .filtersBlock{position: relative; display: flex; flex-direction: column;} .pageWrapper .mainContent .filtersSection .filtersddWrapper{position: absolute; z-index: 2200000; width: var(--fullwidth); width: 550px; display: flex; display: none; flex-direction: column; top: 100%; right:0;} .pageWrapper .mainContent .filtersSection .filtersddWrapper.open{display: flex;} .pageWrapper .mainContent .filtersSection .filtersddWrapper{display: flex; display: none; box-shadow: 0 0 15px var(--greyColor4); padding: 15px; border-radius: var(--radius15); border-top-right-radius:0px; background-color: var(--whitecolor); flex-direction: column;} .pageWrapper .mainContent .filtersSection .filtersddWrapper .filtersBlock{display: flex; padding-top: 10px; margin-top: 10px; flex-direction: column; width: 100%; border-top: 1px solid var(--greyColor4)} .pageWrapper .mainContent .filtersSection .filtersddWrapper h3 + .filtersBlock{border-top: 0px none; margin-top: 0; padding-top: 0;} .pageWrapper .mainContent .filtersSection .filtersddWrapper h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .filtersSection .filtersddWrapper h4{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 20px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .filtersSection .filtersddWrapper a{border-radius: var(--radius15); font-size:var(--fontsize14); margin:0 15px 15px 0; padding: 5px 15px; border: 1px solid transparent; background-color: var(--greyColor3); color: var(--blackcolor)} .pageWrapper .mainContent .filtersSection .filtersddWrapper a:hover{border: 1px solid var(--orangeColor); background-color: var(--lightOrangeColor); color: var(--blackcolor)} .pageWrapper .mainContent .filtersSection .filtersddWrapper a.selected{border: 1px solid var(--orangeColor); background-color: var(--lightOrangeColor); color: var(--blackcolor)} .pageWrapper .mainContent .filtersSection .filtersddWrapper a.active{border: 1px solid var(--orangeColor); background-color: var(--lightOrangeColor); color: var(--blackcolor)} .pageWrapper .mainContent .filtersSection .filtersddWrapper .filtersBlock div{display: flex; flex-wrap: wrap;} .pageWrapper .mainContent .courseVideoSection{display: flex; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); flex-direction: column; align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); margin-top: 30px; background-color: var(--whitecolor);} .pageWrapper .mainContent .courseVideoSection .videoBlock{width: var(--fullwidth); position: relative; max-height: 400px; overflow: hidden;} .pageWrapper .mainContent .courseVideoSection .videoThumb{display:flex;width: var(--fullwidth); height: var(--fullheight);} .pageWrapper .mainContent .courseVideoSection .videoThumb img{display:flex;width: var(--fullwidth); height: var(--fullheight); } .pageWrapper .mainContent .courseVideoSection .videoStatus{ position: absolute; left: 10px; top: 10px; background-color: var(--lightRedColor); padding: 2px 0px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius2); font-size:var(--fontsize12); color: var(--whitecolor); width: var(--fullwidth); max-width: 55px;} .pageWrapper .mainContent .courseVideoSection .videoStatus span{display: flex; align-items: center; justify-content: center;} .pageWrapper .mainContent .courseVideoSection .videoStatus span i{margin-right: 5px;} .pageWrapper .mainContent .courseVideoSection .videoPlay{position: absolute; display: flex; align-items: center; color: var(--whitecolor); justify-content: center; top: 50%; left: 50%; margin-top: -25px; margin-left: -21px; font-size: var(--fontsize65);} .pageWrapper .mainContent .courseVideoSection .videoInfo{ position: absolute; left: 10px; flex-direction: column; bottom: 10px; display: flex; align-items: center;} .pageWrapper .mainContent .courseVideoSection .videoInfo h5{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .courseVideoSection .videoInfo p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .courseVideoSection .subscribeBlock{margin: 10px 0; font-size:var(--fontsize16); align-items: center; display: flex; color: var(--blackcolor); width: var(--fullwidth); justify-content: center;} .pageWrapper .mainContent .courseVideoSection .subscribeBlock del{margin-left: 15px; color: var(--greyColor2);} .pageWrapper .mainContent .courseVideoSection .subscribeBlock ins{margin-left: 15px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize22); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .featureTrendsWrapper {display: flex; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); flex-direction: column; align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); margin-top:0px; background-color: var(--whitecolor);} .pageWrapper .mainContent .featureTrendsWrapper h3{font-size:var(--fontsize14); width: var(--fullwidth); display: flex; justify-content: space-between; margin-bottom: 25px; color: var(--blackcolor); font-family: var(--fontfamilymedium);} .pageWrapper .mainContent .featureTrendsWrapper h3 div{display: flex; align-items: center;} .pageWrapper .mainContent .featureTrendsWrapper h3 div i{margin-right: 5px; color:var(--primaryColor);} .pageWrapper .mainContent .featureTrendsWrapper h3 a{font-size:var(--fontsize12); font-family: var(--defaultfont);} .pageWrapper .mainContent .featureTrendsWrapper .block{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .featureTrendsWrapper .block .items{ background-color:var(--lightSecondaryColor); padding:10px; border-radius:5px;} .pageWrapper .mainContent .featureTrendsWrapper .block .items h4{font-size:var(--fontsize14); text-align: center; color: var(--blackcolor); margin:0 0 5px; font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .featureTrendsWrapper .block .items div {display: flex; align-items: center; width: var(--fullwidth); } .pageWrapper .mainContent .featureTrendsWrapper .block .items div span{color:var(--tableTh); font-size:var(--fontsize12); margin-left: 10px;} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span:first-child{color:var(--tableTh); line-height: normal; font-size:var(--fontsize12); margin-left: 0;} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span:last-child{color:var(--greenColor2); font-size:var(--fontsize12);} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span:last-child i{font-size:var(--fontsize18); margin-left: 5px;} .pageWrapper .mainContent .featureTrendsWrapper .slick-slide{display: flex; margin-right:5px; margin-left:5px; width: var(--fullwidth);} .pageWrapper .mainContent .featureTrendsWrapper .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .featureTrendsWrapper .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .featureTrendsWrapper .slick-slide > div{width: var(--fullwidth);} .pageWrapper .mainContent .featureTrendsWrapper .slick-slider{ margin:0 -15px;} .pageWrapper .mainContent .featureTrendsWrapper .slick-dots{justify-content: center; position:static} .pageWrapper .mainContent .featureTrendsWrapper .slick-dots li button:hover:before{color:var(--primaryColor);} .pageWrapper .mainContent .featureTrendsWrapper .slick-dots li.slick-active button:before{color:var(--primaryColor);} .pageWrapper .mainContent .featureTrendsWrapper .block a .items h4 + div{display:flex; flex-direction: column; align-items:center; flex-wrap: wrap;} .pageWrapper .mainContent .featureTrendsWrapper .block a .items h4 + div span{margin-left: 0;} .pageWrapper .mainContent .myCoursesWrapper {display: flex; margin-bottom: 30px; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); flex-direction: column; align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); margin-top:0px; background-color: var(--whitecolor);} .pageWrapper .mainContent .myCoursesWrapper h3{font-size:var(--fontsize14); border-bottom: 1px solid var(--lineColor); padding-bottom: 10px; width: var(--fullwidth); display: flex; justify-content: space-between; margin-bottom: 25px; color: var(--blackcolor); font-family: var(--fontfamilymedium);} .pageWrapper .mainContent .myCoursesWrapper h3 div{display: flex; align-items: center;} .pageWrapper .mainContent .myCoursesWrapper h3 div i{margin-right: 5px; color:var(--primaryColor);} .pageWrapper .mainContent .myCoursesWrapper h3 a{font-size:var(--fontsize12); font-family: var(--defaultfont);} .pageWrapper .mainContent .myCoursesWrapper .activityArea {display: flex; padding:0px; width:var(--fullwidth)} .pageWrapper .mainContent .myCoursesWrapper .activityArea .items{ border: 1px solid var(--lineColor); max-width: none; align-items: flex-start; border-radius: 10px; margin:0px; padding:15px; display: flex!important; width:var(--fullwidth);} .pageWrapper .mainContent .myCoursesWrapper .activityArea .slick-slide > div{display: flex} .pageWrapper .mainContent .myCoursesWrapper .activityArea .items .thumb{width:var(--fullwidth); max-width: 70px; margin-right: 10px;} .pageWrapper .mainContent .myCoursesWrapper .activityArea .items .thumb img{border-radius:0; max-width: 100%;} .pageWrapper .mainContent .myCoursesWrapper .activityArea .items .thumbContent{width:var(--fullwidth); flex:1; padding:0px;} .pageWrapper .mainContent .myCoursesWrapper .activityArea .items .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:10px; color: var(--blackColor);} .pageWrapper .mainContent .myCoursesWrapper .activityArea .slick-slide { margin: 0 10px;} .pageWrapper .mainContent .myCoursesWrapper .activityArea .slick-list {margin: 0 -10px; display: flex; width:100%} .pageWrapper .mainContent .myCoursesWrapper .activityArea .slick-track{margin-left: 0; display: flex; width:100%} .pageWrapper .mainContent .myCoursesWrapper .progressCls{ height:8px; position: relative; width: var(--fullwidth); margin:8px 0 8px; background-color:var(--strokeColor); border-radius: 5px;} .pageWrapper .mainContent .myCoursesWrapper .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--greenColor2); transition: width 0.6s ease;} .pageWrapper .mainContent .myCoursesWrapper .progressCompleted{font-size:var(--fontsize12); color:var(--tableTh); font-family: var(--defaultfont);} .pageWrapper .mainContent .viewingSectionWrapper {display: flex; margin-bottom: 30px; justify-content: space-between; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); background-color: var(--whitecolor);} .pageWrapper .mainContent .viewingSectionWrapper h4{font-size:var(--fontsize16); display: flex; align-items: center; gap:10px; display: flex; color: var(--blackColor); font-family: var(--fontfamilymedium);} .pageWrapper .mainContent .viewingSectionWrapper h4 span{font-size:var(--fontsize14); display: flex; color: var(--greyColor5); font-family: var(--defaultfont);} .pageWrapper .mainContent .viewingSectionWrapper label{font-size:var(--fontsize14); display: flex; margin:0px 0 5px; color: var(--greyColor5); font-weight: normal; font-family: var(--defaultfont);} .pageWrapper .mainContent .dashboardCompetitionsWrapper {display: flex; margin-bottom: 30px; flex-direction: column; align-items: center; width: var(--fullwidth); margin-top:0px; } .pageWrapper .mainContent .dashboardCompetitionsWrapper h3{font-size:var(--fontsize14); border-bottom: 1px solid var(--lineColor); padding-bottom: 10px; width: var(--fullwidth); display: flex; justify-content: space-between; margin-bottom: 25px; color: var(--blackcolor); font-family: var(--fontfamilymedium);} .pageWrapper .mainContent .dashboardCompetitionsWrapper h3 div{display: flex; align-items: center;} .pageWrapper .mainContent .dashboardCompetitionsWrapper h3 div i{margin-right: 5px; color:var(--primaryColor);} .pageWrapper .mainContent .dashboardCompetitionsWrapper h3 a{font-size:var(--fontsize12); font-family: var(--defaultfont);} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea {display: flex; padding:0px; width:var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items{ box-shadow: 0px 4px 4px rgba(29, 23, 71, 0.1);display: flex; border-radius: var(--radius10); background-color: var(--whitecolor); border: 0px solid var(--lineColor); max-width: none; align-items: center; border-radius: 10px; margin:0px 0 0; padding:10px; width:var(--fullwidth);} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items:first-child{margin-top: 0;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .left{display: flex; flex:1; align-items: flex-start;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumb{width:var(--fullwidth); max-width: 70px; margin-right: 10px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumb img{border-radius:5px; max-width: 100%;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent{width:var(--fullwidth); flex:1; padding:0px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .offeredBy{display:flex; color:var(--greyColor8); font-size:var(--fontsize10); width:var(--fullwidth); margin-bottom: 10px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .offeredBy span{color:var(--blackColor); text-transform: uppercase; margin-left: 5px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea a{display: flex; flex:1; margin:10px 0 0} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea a:first-child;{ margin:0px 0 0} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info{display: flex; align-items: center; width:var(--fullwidth);} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span{display: flex; align-items: center; font-size:var(--fontsize12); color:var(--tableTh); margin-left: 15px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span i{margin-right: 5px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span.type{color:var(--greenColor2);} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span.points{color:var(--orangeColor);} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span img{margin-right: 5px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span:before{content:''; width: 5px; height: 5px; margin:0 15px 0 0px; border-radius:100%; font-size:var(--fontsize12); background-color:var(--tableTh)} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span:first-child:before{display: none} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span:first-child{margin-left: 0;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span:first-child:before{display: none} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span:empty{display: none} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .chipsTag{display: flex; width: var(--fullwidth); margin-bottom: 5px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .chipsTag span{background-color: var(--greyColor12); font-size: var(--fontsize11); padding:2px 10px; border-radius: 5px; color:var(--greyColor5);} .pageWrapper .mainContent .featureTrendsWrapper {display: flex; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); flex-direction: column; align-items: center; padding: 10px; width: var(--fullwidth); border-radius: var(--radius10); margin-top:0px; background-color: var(--whitecolor);} .pageWrapper .mainContent .featureTrendsWrapper h3{font-size:var(--fontsize14); width: var(--fullwidth); display: flex; justify-content: space-between; margin-bottom: 25px; color: var(--blackcolor); font-family: var(--fontfamilymedium);} .pageWrapper .mainContent .featureTrendsWrapper h3 div{display: flex; align-items: center;} .pageWrapper .mainContent .featureTrendsWrapper h3 div i{margin-right: 5px; color:var(--primaryColor);} .pageWrapper .mainContent .featureTrendsWrapper h3 a{font-size:var(--fontsize12); font-family: var(--defaultfont);} .pageWrapper .mainContent .featureTrendsWrapper .block{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .featureTrendsWrapper .block .items{ background-color:var(--lightSecondaryColor); padding:10px; border-radius:5px;} .pageWrapper .mainContent .featureTrendsWrapper .block .items h4{font-size:var(--fontsize14); color: var(--blackcolor); margin:0 0 5px; font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .featureTrendsWrapper .block .items div {display: flex; justify-content: center; align-items: center; width: var(--fullwidth); } .pageWrapper .mainContent .featureTrendsWrapper .block .items span:first-child span.growth{margin-left: 5px;} .pageWrapper .mainContent .featureTrendsWrapper .block .items .growth.up{color:var(--greenColor)} .pageWrapper .mainContent .featureTrendsWrapper .block .items .growth.down{color:var(--redColor)} .pageWrapper .mainContent .featureTrendsWrapper .block .items .growth.up i{margin-left: 5px; font-size: var(--fontsize12);} .pageWrapper .mainContent .featureTrendsWrapper .block .items .growth.down i{margin-left: 5px; font-size: var(--fontsize12);} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span{color:var(--tableTh); font-size:var(--fontsize12); margin-left: 10px;} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span:first-child{color:var(--tableTh); font-size:var(--fontsize12); margin-left: 0;} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span:last-child{color:var(--greenColor2); font-size:var(--fontsize12);} .pageWrapper .mainContent .featureTrendsWrapper .block .items div span:last-child i{font-size:var(--fontsize18); margin-left: 5px;} .pageWrapper .mainContent .featureTrendsWrapper .slick-slide{display: flex; margin-right:5px; margin-left:5px; width: var(--fullwidth);} .pageWrapper .mainContent .featureTrendsWrapper .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .featureTrendsWrapper .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .featureTrendsWrapper .slick-slide > div{width: var(--fullwidth);} .pageWrapper .mainContent .featureTrendsWrapper .slick-slider{ margin:0 -15px;} .pageWrapper .mainContent .featureTrendsWrapper .slick-dots{justify-content: center; position:static} .pageWrapper .mainContent .featureTrendsWrapper .slick-dots li button:hover:before{color:var(--primaryColor);} .pageWrapper .mainContent .featureTrendsWrapper .slick-dots li.slick-active button:before{color:var(--primaryColor);} .pageWrapper .mainContent .featureTrendsWrapper .block .items .thumb{display: flex; width:100%; margin-bottom: 5px;} .pageWrapper .mainContent .featureTrendsWrapper .block .items .thumb i{font-size: var(--fontsize28); display: flex;} .pageWrapper .mainContent .featureTrendsWrapper .block .items .thumb img{max-width: 53px; object-fit: contain} .pageWrapper .mainContent .featureTrendsWrapper{margin-top: 20px;} .g-dashboardWrapper .userInfoDetails.noborder + .featureTrendsWrapper{margin-top: 0;} .featureJobsWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .featureJobsWrapper h3{font-size:var(--fontsize14); justify-content: space-between; display: flex; align-items: center; font-weight: 400; font-family: var(--fontfamilymedium); text-align: var(--textLeft); margin-bottom:10px; color: var(--blackcolor);} .featureJobsWrapper h3 i{margin-right: 5px; color:var(--goldenColor);} .featureJobsWrapper h3 div{display: flex; align-items: center;} .featureJobsWrapper h3 a{font-size:var(--fontsize12); font-family: var(--defaultfont);} .featureJobsWrapper .activityArea {display: flex; padding:0px; width:var(--fullwidth)} .featureJobsWrapper .activityArea .items{box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); max-width: none; align-items: flex-start; flex-direction: column; border-radius: 10px; margin:10px 0 10px 10px; padding:15px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor);} .featureJobsWrapper .activityArea .items .thumb{width:var(--fullwidth); max-width: 70px; margin-bottom: 10px; max-height: 70px; min-height: 70px;} .featureJobsWrapper .activityArea .items .thumb img{border-radius:0; max-width: 100%;} .featureJobsWrapper .activityArea .items .thumbContent{width:var(--fullwidth); flex:1; padding:0px;} .featureJobsWrapper .activityArea .items .thumbContent h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackColor);} .featureJobsWrapper .activityArea .items .thumbContent .offeredBy{display:flex; color:var(--greyColor8); font-size:var(--fontsize12); width:var(--fullwidth); margin-bottom: 10px;} .featureJobsWrapper .activityArea .items .thumbContent .info{display: flex; align-items: center; width:var(--fullwidth); margin-top: 5px;} .featureJobsWrapper .activityArea .items .thumbContent .info span i{margin-right: 5px;} .featureJobsWrapper .activityArea .items .thumbContent .info span{color:var(--greyColor8); font-size:var(--fontsize12); margin-left: 15px;} .featureJobsWrapper .activityArea .items .thumbContent .info span:first-child{margin-left:0px;} .featureJobsWrapper .activityArea .items .thumbContent .actions{display: flex; width:var(--fullwidth); margin-top: 15px;} .featureJobsWrapper .activityArea .items .thumbContent .actions a{background-color: var(--blackcolor); text-align: center; padding:5px 15px; border-radius: 40px; color: var(--whitecolor); width:var(--fullwidth);} .featureJobsWrapper .activityArea .slick-slide { margin: 0 10px;} .featureJobsWrapper .activityArea .slick-list {margin: 0 -10px; display: flex; width:100%} .featureJobsWrapper .activityArea .slick-track{margin-left: 0; display: flex; width:100%} .pageWrapper .mainContent .courseMixContentSection{display: flex; flex-direction: column; align-items: center; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items{display: flex; flex-direction: column; width: var(--fullwidth); width: 305px; padding: 20px;} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items:first-child{margin-left: 0;} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items .contentItems{display: flex; position: relative; width: var(--fullwidth);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items .contentItems .overlay{position: absolute; bottom: 15px; left: 15px;} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items .contentItems .contentBookmark{position: absolute; top: 15px; right: 15px;} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items h5{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items .contentItems .contentBookmark span{ display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.4); width: 24px; height: 24px; border-radius:var(--radius100);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items a{color: var(--whitecolor);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items img{border-radius:var(--radius15);} .pageWrapper .mainContent .courseMixContentSection .courseMixContentSlider .items .videoPlay{position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; margin-top: -25px; margin-left: -21px; font-size: var(--fontsize50);} .pageWrapper .mainContent .courseMixContentSection .slick-slide{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .courseMixContentSection .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .courseMixContentSection .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesSection{display: flex; flex-direction: column; align-items: center; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .coursesSection ol{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .coursesSection ol li{display: flex; flex-direction: column; margin-top: 30px; width: var(--fullwidth); background-color: var(--whitecolor); padding: 10px; border-radius:var(--radius15);} .pageWrapper .mainContent .coursesSection ol li:first-child{margin-top: 0;} .pageWrapper .mainContent .coursesSection ol li:first-child{margin-left: 0;} .pageWrapper .mainContent .coursesSection ol li .coursesItems{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesSection ol li .coursesItems .coursesThumb{border-radius:var(--radius15); margin-right:25px; overflow: hidden; width: var(--fullwidth); max-width:20%;} .pageWrapper .mainContent .coursesSection ol li .coursesItems .coursesContent{justify-content: space-between; display: flex; flex: 1; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .coursesSection ol li h5{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesSection ol li .courseDuration{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .coursesSection ol li .courseDuration i{margin-right: 10px;} .pageWrapper .mainContent .coursesSection ol li p{font-size:var(--fontsize16); text-align: var(--textLeft); color: var(--secondaryColor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesSection ol li a{color: var(--whitecolor); display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesSection ol li img{border-radius:var(--radius15);} .pageWrapper .mainContent .coursesVideoSection{display: flex; flex-direction: column; align-items: center; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .coursesVideoSection ol{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesVideoSection ol li{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .coursesVideoSection ol li:first-child{margin-left: 0;} .pageWrapper .mainContent .coursesVideoSection ol li .coursesVideoItems{display: flex; position: relative; width: var(--fullwidth);} .pageWrapper .mainContent .coursesVideoSection ol li .coursesVideoItems .overlay{position: absolute; bottom: 15px; left: 15px;} .pageWrapper .mainContent .coursesVideoSection ol li .coursesVideoItems .contentBookmark{position: absolute; top: 15px; right: 15px;} .pageWrapper .mainContent .coursesVideoSection ol li h5{font-size:var(--fontsize22); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesVideoSection ol li p{font-size:var(--fontsize20); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesVideoSection ol li .coursesVideoItems .videoStatus{position: absolute; left: 15px; top: 15px;} .pageWrapper .mainContent .coursesVideoSection ol li .coursesVideoItems .videoStatus span{ display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.4); padding: 5px 15px; border-radius:var(--radius15);} .pageWrapper .mainContent .coursesVideoSection ol li a{color: var(--whitecolor);width: var(--fullwidth); max-height: 426px; overflow: hidden;} .pageWrapper .mainContent .coursesVideoSection ol li img{border-radius:var(--radius15); width: var(--fullwidth);} .pageWrapper .mainContent .coursesVideoSection ol li .videoPlay{position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; margin-top: -25px; margin-left: -21px; font-size: var(--fontsize65);} .pageWrapper .mainContent .coursesGridSection{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .coursesGridSection h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackColor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesGridSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider{ display:grid; gap: 20px; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); width: var(--fullwidth); flex-wrap: wrap;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items{display: flex; flex-direction: column; width: var(--fullwidth); padding:0px;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items:nth-child(odd){margin-left: 0;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesThumb{max-height: 240px; min-height: 240px; align-items: flex-start; overflow: hidden; display:flex} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems{display: flex; border-radius:var(--radius15); position: relative; width: var(--fullwidth);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems a{width:var(--fullwidth)} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent{display: flex; padding: 10px 0 0; flex-direction: column; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent{display: flex; padding: 15px; flex-direction: column; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent div{font-size:var(--fontsize13); margin-bottom: 5px; text-align: left; width: var(--fullwidth); color: var(--greyColor5);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesTop{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesTop p{font-size:var(--fontsize12); color: var(--greyColor5); margin-bottom: 0;font-family: var(--defaultfont);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesTop p.gridDesc{font-size:var(--fontsize12); color: var(--greyColor2); } .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesTop p.gridDesc a{color:var(--primaryLinkColor); text-decoration: underline;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesTop p.gridDesc a:hover{color:var(--primaryLinkColor); text-decoration: none;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesTop p i{margin-right: 10px; color: var(--secondaryColor);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesBottom{align-items: center; display: flex; justify-content: space-between; width: var(--fullwidth);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesContent .coursesBottom p{margin-bottom: 0; font-size:var(--fontsize12); color: var(--greyColor2); } .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:2px; font-family: var(--fontfamilysemibold); color: var(--greyColor6);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items p{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesPrice{display: flex; align-items: center;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesPrice del{margin-left: 10px; color: var(--greyColor2); font-size:var(--fontsize15);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesPrice ins{margin-left:10px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesRating{position: absolute; left: 15px; top: 15px;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesRating span{ display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.7); padding: 5px 15px; border-radius:var(--radius10);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesRating span i{color: var(--orangeColor); margin-left: 5px;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesScore{position: absolute; right: 15px; top: 15px;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesScore span{ display: flex; align-items: center; font-size:var(--fontsize12);justify-content: center; background-color: rgba(0,0,0,0.7); padding: 5px 15px; border-radius:var(--radius10);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items .coursesItems .coursesScore span i{color: var(--orangeColor); margin-right: 5px;} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items a{color: var(--whitecolor);} .pageWrapper .mainContent .coursesGridSection .coursesGridSlider .items img{border-radius:10px; object-fit: contain;} .pageWrapper .mainContent .coursesGridSection .slick-slide{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesGridSection .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .coursesGridSection .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .coursesRecommendedSection h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 25px; color: var(--blackColor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesRecommendedSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .coursesRecommendedSection ol{display: flex; width: var(--fullwidth); flex-wrap: wrap;} .pageWrapper .mainContent .coursesRecommendedSection ol li{display: flex; width: var(--fullwidth); max-width: none; padding:0px;} .pageWrapper .mainContent .coursesRecommendedSection ol li:nth-child(odd){margin-left: 0;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesThumb{max-width: 85px; position: relative; width: var(--fullwidth); max-height: 85px; overflow: hidden; border-radius:var(--radius5);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); display: flex; border-radius:var(--radius15); background-color: var(--whitecolor); padding: 15px; position: relative; margin-bottom: 10px; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent{display: flex; justify-content: space-between; padding:0 0 0 15px; flex-direction: column; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent .coursesTop{display: flex; position: relative; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent .coursesTop p{font-size:var(--fontsize12); margin-bottom: 5px;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent .coursesTop p i{margin-right: 5px; color: var(--secondaryColor);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent .coursesBottom{align-items: center; display: flex; justify-content: space-between; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent .coursesBottom p{margin-bottom: 0; font-size:var(--fontsize14);} .pageWrapper .mainContent .coursesRecommendedSection ol li h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackColor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesRecommendedSection ol li .offeredBy{display:flex; font-size:var(--fontsize12); color:var(--greyColor8); width:var(--fullwidth); margin-bottom:0px; margin-top: 20px;} .pageWrapper .mainContent .coursesRecommendedSection ol li .offeredBy span{color:var(--blackColor); margin-left: 5px; text-transform: uppercase;} .pageWrapper .mainContent .coursesRecommendedSection ol li p{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesPrice{display: flex; align-items: center;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesPrice del{margin-left: 15px; color: var(--greyColor2);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesPrice ins{margin-left: 15px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize22); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesRating{position: absolute; right: 5px; top: 5px;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesRating span{ display: flex; align-items: center; justify-content: center; font-size:var(--fontsize12); background-color: rgba(0,0,0,0.7); padding:2px 10px; border-radius:var(--radius5);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesRating span i{color: var(--orangeColor); margin-left: 5px;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesScore{position: absolute; right: 0px; top: 5px;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesScore span{ display: flex; align-items: center; font-size:var(--fontsize12);justify-content: center; background-color:var(--lightOrangeColor); color: var(--blackcolor); padding: 5px 10px; border-radius:var(--radius5);} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesScore span i{color: var(--orangeColor); margin-right: 5px;} .pageWrapper .mainContent .coursesRecommendedSection ol li .section{color: var(--whitecolor); display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection ol li a{color: var(--primaryColor); justify-content: flex-end; display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .coursesRecommendedSection ol li img{border-radius:var(--radius5);} .pageWrapper .mainContent .coursesRecommendedSection ol li.activityItems .coursesItems .coursesContent .coursesTop{display: flex; flex-direction: row;} .pageWrapper .mainContent .coursesRecommendedSection ol li.activityItems .coursesContent{display: flex; flex-direction: column; flex: 1} .pageWrapper .mainContent .coursesRecommendedSection ol li.activityItems .coursesContent .courseThumb{display: flex; margin-right: 10px; width:100%; max-width: 150px;} .pageWrapper .mainContent .coursesRecommendedSection ol li.activityItems .coursesContent p:last-child{margin-bottom: 0;} .pageWrapper .mainContent .carvannSharePostSection{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .carvaanShareBlock{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); display: flex; flex-direction: column; width: var(--fullwidth); padding: 20px; border-radius:var(--radius10); background-color: var(--whitecolor);} .pageWrapper .mainContent .carvaanShareBlock .formBlock{display: flex; align-items: center;} .pageWrapper .mainContent .carvaanShareBlock .formBlock .shareContent input[type="file"]{display: none;} .pageWrapper .mainContent .carvaanShareBlock .userThumb{width: 32px; height: 32px; display: none; border-radius:var(--radius100); margin-right: 10px;} .pageWrapper .mainContent .carvaanShareBlock .userThumb img{border-radius:var(--radius100);} .pageWrapper .mainContent .carvaanShareBlock .shareContent{display: flex; flex: 1; font-family: var(--defaultfont); align-items: center; padding:5px 10px; background-color: var(--primaryBgColor); border-radius:var(--radius10);} .pageWrapper .mainContent .carvaanShareBlock .shareContent i{color:var(--greyColor8);} .pageWrapper .mainContent .carvaanShareBlock .shareContent input{background-color: var(--primaryBgColor); font-family: var(--defaultfont); max-width: none; border: 0px none; border-radius:var(--radius10);} .pageWrapper .mainContent .carvaanShareBlock .uploadType{display: flex; display: none; align-items: flex-start; width: var(--fullwidth); margin-top: 20px;} .pageWrapper .mainContent .carvaanShareBlock .uploadType a{color: var(--blackcolor); display: flex; align-items: center; margin-left: 20px;} .pageWrapper .mainContent .carvaanShareBlock .uploadType a:first-child{margin-left: 0;} .pageWrapper .mainContent .carvaanShareBlock .uploadType a img{margin-right: 10px;} .pageWrapper .mainContent .carvaanShareBlock .uploadType a i{color: var(--primaryColor); font-size: var(--fontsize20); margin-right: 5px;} .pageWrapper .mainContent .carvannSharePostSection.marginTopZero{margin-top: 0;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo.changes{justify-content: space-between;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo.changes > div{display: flex; align-items: center; gap:10px;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo.changes > div + div{font-size: var(--fontsize12);} .pageWrapper .mainContent .carvaanPostSection .postUserInfo.changes > div + div .postUserInfoThumb{max-width: 20px; margin-right: 0; height: 20px; width: 20px;} .pageWrapper .mainContent .carvaanPostSection{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); margin-top: 15px;} .pageWrapper .mainContent .carvaanPostSection.setMaxWidth{width: var(--fullwidth); max-width: 650px;} .pageWrapper .mainContent .carvaanPostSection .postSectionWrapper{display: flex; flex-direction: column; width: var(--fullwidth); margin-bottom: 15px;} .pageWrapper .mainContent .carvaanPostSection .postSection{display: flex; width: var(--fullwidth); flex-direction: column; padding: 20px; border: 1px solid var(--greyColor); border-radius:var(--radius10); background-color: var(--whitecolor);} .pageWrapper .mainContent .carvaanPostSection .postSection.marginTop15:first-child{margin-top: 0;} .pageWrapper .mainContent .carvaanPostSection .postSectionWrapper:last-child{margin-bottom: 0;} .pageWrapper .mainContent .carvaanPostSection .DashboardPostSlider .postContent{margin-bottom: 0; min-height: 380px; max-height: 380px; justify-content: center; } .pageWrapper .mainContent .carvaanPostSection .DashboardPostSlider .postContent img{height: 380px;} .pageWrapper .mainContent .carvaanPostSection .DashboardPostSlider .postContent video{height:auto!important} .pageWrapper .mainContent .carvaanPostSection .DashboardPostSlider{ display:grid; gap:0px; grid-template-columns: repeat(1,minmax(0,1fr));} .pageWrapper .mainContent .carvaanPostSection .postUserInfo{display: flex; width: var(--fullwidth); position: relative;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo .userMenu{position: absolute; right:0; top:0;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo .userMenu .dropdown-menu{padding-bottom: 0; min-width:100px} .pageWrapper .mainContent .carvaanPostSection .postUserInfo .userMenu .dropdown-menu .dropdown-item{display: flex; font-size:var(--fontsize14); color:var(--greyColor2); justify-content: flex-end; width: var(--fullwidth); } .pageWrapper .mainContent .carvaanPostSection .postUserInfo .userMenu .dropdown-menu .dropdown-item:hover{display: flex; color: var(--blackColor); font-size:var(--fontsize14); justify-content: flex-end; width: var(--fullwidth); } .pageWrapper .mainContent .carvaanPostSection .postUserInfo .userMenu button{border:0px none; font-size:var(--fontsize18); color: var(--blackcolor); background-color: transparent;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo .postUserInfoThumb{width: 32px; height: 32px; border-radius:var(--radius100); margin-right: 10px;} .pageWrapper .mainContent .carvaanPostSection .postUserInfo .postUserInfoThumb img{border-radius:var(--radius100); width: var(--fullwidth); height: var(--fullheight);} .pageWrapper .mainContent .carvaanPostSection .postUserInfo h6{font-size:var(--fontsize15); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .carvaanPostSection .postUserInfo p{font-size:var(--fontsize13); text-align: var(--textLeft); margin-bottom:0px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .carvaanPostSection .postDesc{display: flex; width: var(--fullwidth); flex-direction: column; margin-top: 20px;} .pageWrapper .mainContent .carvaanPostSection .postDesc p{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:10px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .carvaanPostSection .postDesc div{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .carvaanPostSection .postDesc div span{font-size:var(--fontsize15); padding: 5px 10px; border-radius:var(--radius5); text-align: var(--textLeft); background-color: var(--greyColor3); color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .carvaanPostSection .postContent{display: flex; position: relative; width: var(--fullwidth); margin-top:10px; margin-bottom: 10px;} .pageWrapper .mainContent .carvaanPostSection .postContent .ItemsSlider{display: flex; opacity: 0; visibility: hidden; display: none; padding: 0; width: var(--fullwidth);} .pageWrapper .mainContent .carvaanPostSection .postContent .postLoader{display: flex; width: var(--fullwidth); position: static; left:0; top:0; min-height: 100px; max-height: 100px; right:0; bottom:0; justify-content: center; align-items: center;} .pageWrapper .mainContent .carvaanPostSection .postContent .ItemsSlider.slick-initialized{opacity: 1; visibility: visible; display:flex;} .pageWrapper .mainContent .carvaanPostSection .postContent .ItemsSlider.slick-initialized + .postLoader{display: none} .pageWrapper .mainContent .carvaanPostSection .postContent .ItemsSlider video{height: auto!important} .pageWrapper .mainContent .carvaanPostSection .postContent .slick-slide{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .carvaanPostSection .postContent .slick-slide > div{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .carvaanPostSection .postContent .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .carvaanPostSection .postContent .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .carvaanPostSection .no-content-message{margin-top: 20px; border-radius: var(--radius10); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); text-align: center; padding: 20px; background-color: var(--whitecolor);} .pageWrapper .mainContent .recentActivityBlock .tags{display: flex; width: var(--fullwidth); margin-top: 15px;} .pageWrapper .mainContent .recentActivityBlock .tags a.selected{border:1px solid var(--primaryColor); margin-left: 15px; white-space: nowrap; color:var(--primaryColor); padding:5px 12px; border-radius: 32.7651px; font-family: var(--defaultfont); font-size: var(--fontsize14); background-color: var(--lightSecondaryColor);} .pageWrapper .mainContent .recentActivityBlock .tags a:first-child{margin-left: 0;} .pageWrapper .mainContent .recentActivityBlock .tags a{border: 1px solid var(--greyColor3); white-space: nowrap; margin-left: 15px; color:var(--primaryColor); padding:5px 12px; border-radius: 32.7651px; cursor: pointer; font-family: var(--defaultfont); font-size: var(--fontsize14); color: var(--blackColor); background-color: var(--greyColor3);} .pageWrapper .mainContent .carvaanPostSection .postInfo{display: flex; width: var(--fullwidth); margin-top:20px; flex-direction: column;} .pageWrapper .mainContent .carvaanPostSection .postInfo h6{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .carvaanPostSection .postInfo p{font-size:var(--fontsize15); text-align: var(--textLeft); margin-bottom:10px; color: var(--greyColor5); font-family: var(--defaultfont);} .pageWrapper .mainContent .carvaanPostSection .postCommentSection{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 15px; margin-top: 15px; justify-content:space-between; width: var(--fullwidth); } .pageWrapper .mainContent .carvaanPostSection .postCommentSection a{color: var(--blackcolor); display: flex; align-items: center; font-size:var(--fontsize12);} .pageWrapper .mainContent .carvaanPostSection .postCommentSection a i{margin-right: 5px; font-size:var(--fontsize17);} .pageWrapper .mainContent .carvaanPostSection .postCommentSection a .afterLike{display: none;} .pageWrapper .mainContent .carvaanPostSection .postCommentSection a.liked i{color: var(--primaryColor);} .pageWrapper .mainContent .carvaanPostSection .postCommentSection a.liked .beforeLike{display: none;} .pageWrapper .mainContent .carvaanPostSection .postCommentSection a.liked .afterLike{display: flex;} .pageWrapper .mainContent .enterCommentSection.open{display: flex;} .pageWrapper .mainContent .enterCommentSection {display: flex; width: var(--fullwidth); align-items: center; display: none; padding: 15px 0 0; margin-top: 15px; border-top: 1px solid var(--greyColor4);} .pageWrapper .mainContent .enterCommentSection .userThumb{width: 32px; height: 32px; border-radius:var(--radius100); margin-right: 10px;} .pageWrapper .mainContent .enterCommentSection .userThumb img{border-radius:var(--radius100);} .pageWrapper .mainContent .enterCommentSection .commentContent{display: flex; flex: 1} .pageWrapper .mainContent .enterCommentSection .commentContent input{background-color: var(--primaryBgColor); max-width: none; padding: 10px; border: 0px none; border-radius:var(--radius10);} .pageWrapper .mainContent .allCommentSection.open{display: flex;} .pageWrapper .mainContent .allCommentSection.scrolladded .punchCommentWrapper{overflow-y: auto; height:auto; max-height: 670px; } .pageWrapper .mainContent .allCommentSection .viewAllink{background-color: var(--sicTableBGColor); padding:10px; justify-content: center; align-items: center; display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .allCommentSection .viewAllink a{color:var(--primaryColor); text-decoration: none;} .pageWrapper .mainContent .allCommentSection .punchCommentWrapper{ height: auto; max-height:670px; overflow: hidden; display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .allCommentSection {display: flex; display: none; flex-direction: column; width: var(--fullwidth); align-items: center; padding: 15px 0 0; margin-top: 15px; border-top: 1px solid var(--greyColor4);} .pageWrapper .mainContent .allCommentSection .commentedBlock{display: flex; width: var(--fullwidth); margin-bottom: 10px;} .pageWrapper .mainContent .allCommentSection .commentedBlock:last-child{margin-bottom: 0;} .pageWrapper .mainContent .allCommentSection .userThumb{width: 32px; height: 32px; border-radius:var(--radius100); margin-right: 10px;} .pageWrapper .mainContent .allCommentSection .userThumb img{border-radius:var(--radius100); width: var(--fullwidth); height: var(--fullheight);} .pageWrapper .mainContent .allCommentSection .commentContent{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .allCommentSection .commentContent h3{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .allCommentSection .commentContent h3 span{color: var(--greyColor); font-size:var(--fontsize12); margin-left: 10px; font-family: var(--defaultfont);} .pageWrapper .mainContent .allCommentSection .commentContent p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:10px; color: var(--greyColor5); font-family: var(--defaultfont);} .pageWrapper .mainContent .reelsSection{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .reelsSection.setMaxWidth{width: var(--fullwidth); max-width: 650px;} .pageWrapper .mainContent .reelsSection.setMaxWidth ol{align-items: flex-start;} .pageWrapper .mainContent .reelsSection .reelsSlider{display: flex; align-items: center; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .reelsSection .reelsSlider .items{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%);display: flex; position: relative; width: var(--fullwidth); max-width: 525px; min-height: 735px; max-height: 735px; margin-bottom: 20px;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsLink{width: var(--fullwidth); height: var(--fullheight);} .pageWrapper .mainContent .reelsSection .reelsSlider .items iframe{width: var(--fullwidth);} .pageWrapper .mainContent .reelsSection .reelsSlider .items video{width: var(--fullwidth); height: var(--fullheight);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons{display:flex; flex-direction: column;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons a .afterLike{display: none;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons .likeCount{color:var(--whitecolor); padding:5px 0; text-align: center; font-size:var(--fontsize14);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .volumnToggle{width: 40px; bottom:96px; cursor:pointer; left: auto; position: absolute; right:20px; margin-top: 10px; font-size: var(--fontsize18); display: flex; align-items: center; justify-content: center; color: var(--blackcolor); height: 40px; border-radius: var(--radius100); background-color: var(--whitecolor);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons a{width: 40px; margin-top: 10px; font-size: var(--fontsize18); display: flex; align-items: center; justify-content: center; color: var(--blackcolor); height: 40px; border-radius: var(--radius100); background-color: var(--whitecolor);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons a.liked i{color: var(--primaryColor);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons a.liked .beforeLike{display: none;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .socialIcons a.liked .afterLike{display: flex;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsUserInfoWrapper{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsUserInfo{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsUserInfo .reelsUserInfoThumb{width: 32px;background-color: var(--whitecolor); height: 32px; border-radius:var(--radius100); margin-right: 10px;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsUserInfo .reelsUserInfoThumb img{border-radius:var(--radius100);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsUserInfo h6{font-size:var(--fontsize15); text-align: var(--textLeft); margin-bottom: 5px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsUserInfo p{font-size:var(--fontsize13); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc{display: flex; width: var(--fullwidth); flex-direction: column; margin-top: 10px;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:10px; color: var(--whitecolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .defaultDesc{font-size:var(--fontsize12); margin: 10px; text-align: var(--textLeft); margin-bottom:10px; color: var(--whitecolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .fullDesc{font-size:var(--fontsize12); margin: 10px; overflow-y: auto; max-height:200px; text-align: var(--textLeft); margin-bottom:10px; color: var(--whitecolor); display: none; font-family: var(--defaultfont);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsViews{font-size:var(--fontsize15); text-align: var(--textLeft); margin-bottom:10px; color: var(--whitecolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .overlayContent{ display: flex; padding: 20px; align-items: flex-end; justify-content: space-between; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); position:absolute; bottom: 0; left: 0; right: 0;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc.moreClick .defaultDesc {display: none} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc.moreClick .fullDesc{display: flex} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc a{margin-left:5px; color: var(--primaryColor);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .fullDesc.scrollbarvisible.scrollbarvisible{scrollbar-width: thin; scrollbar-color:var(--greyColor4);} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .fullDesc.scrollbarvisible.scrollbarvisible::-webkit-scrollbar {width:5px;} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .fullDesc.scrollbarvisible.scrollbarvisible::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); border-radius:5px} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .fullDesc.scrollbarvisible.scrollbarvisible::-webkit-scrollbar-thumb {background-color:var(--whitecolor); outline: 1px solid slategrey; width: 5px; border-radius:5px} .pageWrapper .mainContent .reelsSection .reelsSlider .items .reelsDesc .fullDesc.scrollbarvisible.scrollbarvisible::-moz-scrollbar-thumb {background-color:var(--whitecolor); outline: 1px solid slategrey; width: 5px; border-radius:5px} .pageWrapper .mainContent .brandAssociationsSection{ background-color: var(--whitecolor); padding: 15px; border-radius: var(--radius10); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:0px;} .pageWrapper .mainContent .brandAssociationsSection .brandAssociationsSlider{display: flex; align-items: center; justify-content: flex-start; width: var(--fullwidth);} .pageWrapper .mainContent .brandAssociationsSection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .brandAssociationsSection .brandAssociationsSlider .items{margin: 0 10px; max-width: 100px; display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .brandAssociationsSection .brandAssociationsSlider .items a{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .awardsSection{ background-color: var(--whitecolor); padding: 15px; border-radius: var(--radius10); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:10px;} .pageWrapper .mainContent .awardsSection .awardsListingWrapper{display: flex; max-height: 250px; overflow: hidden; flex-direction: column; align-items: center; justify-content: flex-start; width: var(--fullwidth);} .pageWrapper .mainContent .awardsSection .awardsListingWrapper.heightAuto{max-height: inherit;} .pageWrapper .mainContent .awardsSection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .awardsSection .awardsListingWrapper .items{display: flex; width: var(--fullwidth); align-items: center; border-bottom:1px solid var(--greyColor4); margin-bottom: 15px; padding-bottom: 15px;} .pageWrapper .mainContent .awardsSection .awardsListingWrapper .items:last-child{margin-bottom: 0; padding-bottom: 0; border: 0px none} .pageWrapper .mainContent .awardsSection .awardsListingWrapper .items .awardsThumb{display: flex;width:60px; height:60px; margin-right: 15px; border: 1px solid var(--greyColor); border-radius: var(--radius100); max-width:60px; width: var(--fullwidth);} .pageWrapper .mainContent .awardsSection .awardsListingWrapper .items h6{font-size:var(--fontsize15); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .awardsSection .awardsListingWrapper .items p{font-size:var(--fontsize13); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .awardsSection .moreAwardsLink{display: flex; width: var(--fullwidth); justify-content: center;} .pageWrapper .mainContent .awardsSection .moreAwardsLink a{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius100); color: var(--whitecolor); font-size:var(--fontsize15); background-color: var(--primaryColor);} .pageWrapper .mainContent .projectsSection{ background-color: var(--whitecolor); padding: 15px; border-radius: var(--radius10); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:10px;} .pageWrapper .mainContent .projectsSection .projectsSlider{display: flex; align-items: center; justify-content: flex-start; width: var(--fullwidth);} .pageWrapper .mainContent .projectsSection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom:15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .projectsSection .items{display: flex; padding: 10px; width: var(--fullwidth); width: 295px;flex-direction: column;} .pageWrapper .mainContent .projectsSection .items .projectsThumb{display: flex; width: var(--fullwidth); max-height: 268px; border: 1px solid var(--greyColor4); margin-bottom: 10px;border-radius: var(--radius10); width: var(--fullwidth);} .pageWrapper .mainContent .projectsSection .items .projectsThumb img{border-radius: var(--radius10);} .pageWrapper .mainContent .projectsSection .items h6{font-size:var(--fontsize15); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .projectsSection .items p{font-size:var(--fontsize13); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .projectsSection .slick-slide{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .projectsSection .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .projectsSection .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .certificatesSection{ background-color: var(--whitecolor); padding: 15px; border-radius: var(--radius10); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:10px;} .pageWrapper .mainContent .certificatesSection .certificatesSlider{display: flex; align-items: center; justify-content: flex-start; width: var(--fullwidth);} .pageWrapper .mainContent .certificatesSection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom:15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .certificatesSection .items{display: flex; padding: 10px; width: var(--fullwidth); width: 295px;flex-direction: column;} .pageWrapper .mainContent .certificatesSection .items .certificatesThumb{display: flex; width: var(--fullwidth); max-height: 268px; border: 1px solid var(--greyColor4); margin-bottom: 10px;border-radius: var(--radius10); width: var(--fullwidth);} .pageWrapper .mainContent .certificatesSection .items .certificatesThumb img{border-radius: var(--radius10);} .pageWrapper .mainContent .certificatesSection .items h6{font-size:var(--fontsize16); text-align: var(--textCenter); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .certificatesSection .items p{font-size:var(--fontsize13); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .certificatesSection .slick-slide{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .certificatesSection .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .certificatesSection .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .certificatesSection .certificatesContent{display: flex; flex-direction: column; justify-content: center; align-items: center; width: var(--fullwidth); } .pageWrapper .mainContent .completeYourCourseSection{background-color: var(--whitecolor); padding: 15px; border-radius: var(--radius10); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:30px;} .pageWrapper .mainContent .completeYourCourseSection h3{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .completeYourCourseSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider{display: flex; margin-top: 15px; width: var(--fullwidth); flex-wrap: wrap;} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items{display: flex; position: relative; margin: 0 0px; background-color: var(--greyColor3); padding:15px; border-radius: var(--radius10); flex-direction: column; width: var(--fullwidth); width: 400px;} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items a{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items .coursesItems{position: relative; width: var(--fullwidth); display: flex; flex-direction:column;} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items h5{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items p{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items .progrssBar{display: flex; margin-top: 10px; width: var(--fullwidth); height: 10px; background-color: var(--greyColor4); border-radius: var(--radius10);} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items .progrssBar span{background-color: var(--secondaryColor); border-radius: var(--radius10);} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .courseArrow{position: absolute; top: 50%; margin-top: -15px; opacity: 0; visibility: hidden; right: 10px; color: var(--greyColor2)} .pageWrapper .mainContent .completeYourCourseSection .completeYourCourseSlider .items:hover .courseArrow{visibility: visible; opacity: 1;} .pageWrapper .mainContent .completeYourCourseSection .slick-slide{width: var(--fullwidth); padding: 0 10px 0 0;} .pageWrapper .mainContent .completeYourCourseSection .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .pageWrapper .mainContent .completeYourCourseSection .slick-list{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .promotionBannerSection{background-color: var(--whitecolor); padding: 15px; border-radius: var(--radius10); display: flex; width: var(--fullwidth); margin-top:30px;} .pageWrapper .mainContent .promotionBannerSection h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .promotionBannerSection .content{font-size:var(--fontsize14); display: flex; align-items: center; text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .promotionBannerSection .promotionBanner{margin-right: 20px; max-width: 115px; display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent{flex: 1; display: flex; align-items: center;} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .promotionBannerContentMain{display: flex; align-items: center; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .content div{display: flex; flex-direction: column; margin-left: 10px;} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .content div div{display: flex; flex-direction: row; align-items: center; margin-left: 0;} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .content i{margin-right: 5px;} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .content div span{font-size:var(--fontsize17); display: flex; flex-direction: column;} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .content div span i{font-size:var(--fontsize10); font-style: normal; font-family: var(--defaultfont);} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .promotionBannerActions{display: flex; align-items: center;} .pageWrapper .mainContent .promotionBannerSection .promotionBannerContent .promotionBannerActions a{display: flex;font-size:var(--fontsize14); color: var(--whitecolor); white-space: nowrap; padding: 6px 35px; border-radius: var(--radius15); background-color: var(--pinkColor); font-family: var(--fontfamilysemibold); align-items: center;} .pageWrapper .mainContent .increaseYourScoreSection{width: var(--fullwidth); padding:0px; margin-bottom: 30px;} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection{display: flex; flex-direction: column; margin-top: 30px; justify-content: center; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection h5{font-size:var(--fontsize16); margin-bottom: 5px; text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock h4{border-top: 1px solid var(--greyColor5); padding-top: 10px; font-size:var(--fontsize20); margin-bottom:0px; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection p{font-size:var(--fontsize12); text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection h5 i{color: var(--greyColor2);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection .progressLine{position: relative; max-width: 500px; display: flex; margin: 30px 0; justify-content: center; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection .progressLine span{width: 36px; cursor: pointer; position: relative; border: 1px solid var(--pinkColor); font-size:var(--fontsize12); color: var(--whitecolor); display: flex; align-items: center; justify-content: center; height: 36px; background-color: var(--greyColor); border-radius: var(--radius100);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection .progressLine div{display: flex; justify-content: space-between; position: absolute; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection .progressLine div span.completed{background-color: var(--greenColor); border: 1px solid var(--greenColor);} .pageWrapper .mainContent .increaseYourScoreSection .scoreIncreseSection .progressLine div span i{display: flex; align-items: center; font-size:var(--fontsize17); justify-content: center;} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock.open{display: flex;} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock{display: flex; display: none; position: relative; max-width: 350px; margin: 0 auto; flex-direction: column; padding: 15px; text-align: center; width: var(--fullwidth); background-color: var(--whitecolor); border: 1px solid var(--greyColor); border-radius: var(--radius10)} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock p{font-size:var(--fontsize12); text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock p + p{font-size:var(--fontsize10); text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock .coinBlock{display: flex; margin:15px auto; padding: 2px 15px; text-align: left; align-items: center; background-color: var(--notificationBellBg); border-radius: var(--radius20)} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock .coinBlock div{display: flex; flex-direction: column; line-height: initial;} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock .coinBlock i{margin-right: 10px;} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock .coinBlock span{font-size:var(--fontsize16); font-weight: 700; margin-bottom:0px; text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--fontfamilysemibold)} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock .coinBlock p{font-size:var(--fontsize10);text-align: var(--textCenter); color: var(--blackcolor); font-family: var(--defaultfont)} .pageWrapper .mainContent .increaseYourScoreSection .tooltipBlock .tooltipArrow{position: absolute; top:-22px; margin-left: -15px; left: 50%; max-width: 30px;} .pageWrapper .mainContent .unlockScoreSection{width: var(--fullwidth); padding:0px; margin-bottom: 30px;} .pageWrapper .mainContent .unlockScoreSection .unlockScoreContainer{display: flex; flex-direction: column; margin-top: 30px; justify-content: center; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .unlockScoreSection .unlockScoreContainer h5{font-size:var(--fontsize16); margin-bottom: 5px; text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .unlockScoreSection .unlockScoreContainer p{font-size:var(--fontsize12); text-align: var(--textCenter); color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .unlockScoreSection .unlockScoreContainer h5 i{color: var(--greyColor2); margin-left: 5px;} .pageWrapper .mainContent .referAFriendPromotionSection{background-color: var(--whitecolor); padding: 25px; border-radius: var(--radius10); display: flex; width: var(--fullwidth); margin-top:0px;} .pageWrapper .mainContent .referAFriendPromotionSection h4{font-size:var(--fontsize22); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .referAFriendPromotionSection h3{font-size:var(--fontsize22); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock{display: flex; align-items: center;} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock .bannerBlock{display: flex; align-items: center;} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock .bannerBlock i{margin-right:10px;} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock .bannerBlock div{display: flex; flex-direction: column;} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock .bannerBlock div span{font-size:var(--fontsize25); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock p{font-size:var(--fontsize22); margin-left: 20px; text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .referAFriendPromotionSection .coinBlock .bannerBlock div p{font-size:var(--fontsize12); margin-left: 0; text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .referAFriendPromotionSection .referAFriendPromotionContainer{display: flex; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .referAFriendPromotionSection .promotionBanner{margin-right: 20px; max-width: 217px; display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .referAFriendPromotionSection .promotionBannerContent{ flex-direction: column; flex: 1; display: flex; align-items: center;} .pageWrapper .mainContent .referAFriendPromotionSection .promotionBannerActions{display: flex; align-items: center; margin-top: 20px;} .pageWrapper .mainContent .referAFriendPromotionSection .promotionBannerActions a{display: flex;font-size:var(--fontsize22); color: var(--whitecolor); white-space: nowrap; padding:12px 45px; border-radius: var(--radius25); background-color: var(--pinkColor); font-family: var(--fontfamilysemibold); align-items: center;} .createPostDialogWrapper.open{display: flex;} .createPostDialogWrapper{position:fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 22000000;} .createPostDialogWrapper .createPostDialogContainer{background-color: var(--whitecolor); position: relative; width: var(--fullwidth); padding: 20px; max-width:600px; display: flex; border-radius:var(--radius15);} .createPostDialogWrapper .createPostDialogContainer .createPostDialogClose{position: absolute; top: -10px; right: -10px} .createPostDialogWrapper .createPostDialogContainer .createPostDialogClose a{width: 30px; height: 30px; color: var(--blackcolor); font-size:var(--fontsize18); border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .createPostDialogWrapper .createPostDialogContainer .createPostContent{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth);} .createPostDialogWrapper .createPostDialogContainer h3{font-size:var(--fontsize18); border-bottom:1px solid var(--greyColor4); text-align: var(--textLeft); padding-bottom: 10px; margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .createPostDialogWrapper .createPostDialogContainer textarea{border: 0px none; font-size:var(--fontsize14); color: var(--blackColor); width: var(--fullwidth);resize: none; height: 100px;} .createPostDialogWrapper .actions{display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 10px; border-top:1px solid var(--greyColor4); } .createPostDialogWrapper .postContentBlock{display: grid; gap:20px; max-height: 200px; overflow-y: auto; grid-template-columns: repeat(2,minmax(0,1fr)); flex-direction: column; width: var(--fullwidth);} .createPostDialogWrapper .thumbBlock{padding: 10px; align-items: center; position: relative; background-color: var(--greyColor3); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:0px;} .createPostDialogWrapper .postContentBlock .loaderThumbBlock{padding: 10px; justify-content: center; min-height: 150px; align-items: center; position: relative; background-color: var(--whitecolor); display: flex; flex-direction: column; width: var(--fullwidth); margin-top:0px;} .createPostDialogWrapper .thumbBlock:first-child{margin-top: 0;} .createPostDialogWrapper .thumbBlock img{max-width: 100%} .createPostDialogWrapper .thumbBlock svg{max-width: 100%; width: 100%; height:100%;} .createPostDialogWrapper .createPostContent .actions div{display: flex; align-items: center;} .createPostDialogWrapper .createPostContent .actions div .loader{margin-left: 5px;} .createPostDialogWrapper .createPostDialogContainer .createPostContent .errormsg{color:var(--redColor); justify-content: center;} .createPostDialogWrapper .createPostBlock{ overflow-y: auto; max-height: 300px;} .createPostDialogWrapper .createPostBlock .thumBlock{ display: flex; width: var(--fullwidth);} .createPostDialogWrapper .actions input[type="file"]{display: none;} .createPostDialogWrapper .actions a{color: var(--blackcolor); font-size:var(--fontsize14);} .createPostDialogWrapper .actions div:last-child a{color: var(--whitecolor); display: flex;} .createPostDialogWrapper .actions a i{margin-right: 5px; color: var(--primaryColor); position: relative; font-size:var(--fontsize22)} .createPostDialogWrapper .removeLink {display: flex; width: var(--fullwidth); justify-content: flex-end; align-items: center;} .createPostDialogWrapper .removeLink a{width: 30px; height: 30px; color: var(--blackcolor); font-size:var(--fontsize18); border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .createPostDialogWrapper .createPostLoader{display: flex; align-items: center; justify-content:center } .fullScreenVideoDialogWrapper.open{display: flex;} .fullScreenVideoDialogWrapper{position: fixed; top: 0; right: 0; left: 0; width: var(--fullwidth); height: var(--fullheight); bottom: 0; z-index: 2200000; background-color: rgba(0,0,0,0.9); display: flex; display: none; align-items: center; justify-content: center;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer{position: relative; background-color: var(--blackColor); max-width: 928px; height: calc(100vh - 40px); width: var(--fullwidth); display: flex;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .closebtn{position: absolute; top: 10px; z-index: 1; right: 10px; height: 100%; display: flex; align-items: center; justify-content: center; font-size:var(--fontsize15); color: var(--whitecolor)} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoMain{ height: auto; display: flex; align-items: center; justify-content: center; position: relative; border:0px solid #fff; width: var(--fullwidth); margin: 0; max-width: 60%;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock{ height:auto; min-height: 650px; display: flex; align-items: center; justify-content: center; width: var(--fullwidth);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock .imgPlaceHolder{display: none; height: 100%; max-height:358px!important;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock video{ width: var(--fullwidth);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe{ width: var(--fullwidth); min-height: 600px; display: flex; align-items: center;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe video{ width: var(--fullwidth)!important; object-fit: cover; height:358px!important;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe body{margin:0; padding:0;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe body video{width: var(--fullwidth)!important;position: static!important; height:358px!important;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .closebtn{width: 30px; height: 30px; color: var(--blackcolor); font-size:var(--fontsize18); border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection.open{display: flex;} .fullScreenVideoDialogWrapper.commentTrue .fullScreenVideoDialogContainer .commentSection{display: flex;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentsBlock{display: flex; width: var(--fullwidth); max-width: 40%} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection{ position: static; right: 20px; bottom: 0; top: 0; bottom: 0; display: flex; display: none; margin-top:0px; flex-direction: column; padding:0px; width: var(--fullwidth); max-width: 325px; max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentTop{display: flex;width: var(--fullwidth); flex-direction: column; background-color: var(--blackColor); padding: 10px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentTop h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 5px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentTop p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--defaultfont);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; margin-top: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor); font-family: var(--defaultfont);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle ol{display: flex; flex-direction: column; width: var(--fullwidth);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle ol li{display: flex; flex-direction: column; width: var(--fullwidth); padding: 15px 0; border-top: 1px solid var(--greyColor5)} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle ol li:last-child{padding-bottom: 0;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle ol li .commentInfo{display: flex; font-size:var(--fontsize12); width: var(--fullwidth); margin-bottom: 10px; color: var(--greyColor); align-items: center;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle ol li .commentInfo img{max-width: 20px; margin-right: 10px; border-radius: var(--radius100);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle ol li .commentInfo span{font-size:var(--fontsize12); color: var(--greyColor); margin-left: 10px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentMiddle{ height: 100%; display: flex; width: var(--fullwidth); flex-direction: column; overflow-y: auto; background-color: var(--lightBlackColor); padding: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom{display: flex; width: var(--fullwidth); background-color: var(--blackColor); padding: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom .commentSectionBlock{display: flex; align-items: center; width: var(--fullwidth); } .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom .commentInputBlock{display: flex; align-items: center; width: var(--fullwidth); } .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom .commentSendBtn{display: flex; align-items: center; margin-left: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom .commentSendBtn a{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius100); background-color: var(--whitecolor);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom .commentSendBtn a img{max-width: 20px; display: flex!important;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentSection .commentConentBottom .commentInputBlock input[type="text"]{font-size:var(--fontsize14); color: var(--whitecolor); border-radius: var(--radius15); padding:8px 15px; border: 0px none; background-color: var(--lightBlackColor);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons{display:flex; flex-direction: column; right:20px; position: absolute; bottom:5%;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons a{width: 40px; margin-top: 10px; font-size: var(--fontsize18); display: flex; align-items: center; justify-content: center; color: var(--blackcolor); height: 40px; border-radius: var(--radius100); background-color: var(--whitecolor);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .nextBtn{position: absolute; right: -20px; cursor: pointer; top: 50%; width: 40px; margin-top: -20px; font-size: var(--fontsize22); display: flex; align-items: center; justify-content: center; color: var(--blackcolor); height: 40px; border-radius: var(--radius100); background-color: var(--whitecolor);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .prevBtn{position: absolute; left:-20px; cursor: pointer; top: 50%; width: 40px; margin-top: -20px; font-size: var(--fontsize22); display: flex; align-items: center; justify-content: center; color: var(--blackcolor); height: 40px; border-radius: var(--radius100); background-color: var(--whitecolor);} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .nextBtn.isDisabled{pointer-events: none; opacity:.7} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .prevBtn.isDisabled{pointer-events: none; opacity:.7} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons a i{margin-right: 5px; font-size:var(--fontsize17);margin-right: 0;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons a .afterLike{display: none;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons a.liked i{color: var(--primaryColor); margin-right: 0;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons a.liked .beforeLike{display: none;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .socialIcons a.liked .afterLike{display: flex;} /*Dashboard css Start From here*/ /*Classes css Start From here*/ .pageWrapper .mainContent .myClassesSectionWrapper{display: flex; width: var(--fullWidth); flex-direction: column;} .pageWrapper .mainContent .myClassesSectionWrapper .learnerBreadcrumbWrapper{display: flex; width: var(--fullWidth); color: var(--blackcolor); margin-bottom:20px; font-size: var(--fontsize14);} .pageWrapper .mainContent .myClassesSectionWrapper .learnerBreadcrumbWrapper a{color: var(--greyColor); font-size: var(--fontsize14); margin-right:0px;} .pageWrapper .mainContent .myClassesSectionWrapper .learnerBreadcrumbWrapper a:after {padding:0 8px; color: var(--blackcolor); content: "/\00a0";} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper{display: flex; width: var(--fullWidth); flex-direction: column;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol{display: flex; flex-direction: column; } .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li:first-child{margin-top: 0;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li{display: flex; flex-direction: column; margin-top: 10px; border: 1px solid transparent; width: var(--fullWidth); background-color: var(--whitecolor); border-radius: var(--radius5); padding:15px;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li:hover{border: 1px solid var(--greenColor)} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus{display: flex; width: var(--fullWidth); margin-bottom: 10px; justify-content: space-between; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper .no-content-result{text-align: center; background-color: var(--greyColor3); color:var(--greyColor5); padding:20px;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .notLiveNow {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .notLiveNow span{display: flex; align-items: center; color: var(--blackcolor); font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .notLiveNow span i{margin-right: 5px; font-size: var(--fontsize16);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .missedClass {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .missedClass span{display: flex; align-items: center; color: var(--blackcolor); font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .missedClass span i{margin-right: 5px; color: var(--lightRedColor); font-size: var(--fontsize16);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .completedClass {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .completedClass span{display: flex; align-items: center; color: var(--blackcolor); font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .completedClass span i{margin-right: 5px; color: var(--greenColor); font-size: var(--fontsize16);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .liveNow {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .liveNow span{display: flex; align-items: center; color: var(--lightRedColor); text-transform: uppercase; font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .liveNow span i{margin-right: 5px;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus div:last-child{display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus div:last-child span{display: flex; align-items: center; padding: 5px 10px; border-radius: var(--radius5); color: var(--blackcolor); background-color: var(--greyColor3); text-transform: uppercase; font-size: var(--fontsize10);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus div:last-child span i{margin-right: 5px;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li p{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .actions{display: flex; margin-top: 15px; width: var(--fullWidth); justify-content: space-between; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .actions span{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .actions div{display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .actions div span{height: 35px; width: 35px; display: flex; align-items: center; justify-content: center; color: var(--lightRedColor); border-radius:var(--radius100); background-color: var(--greyColor3);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .actions div span i{transform: rotate(24deg);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .actions a{padding: 5px 20px; font-size:var(--fontsize12);} /*Classes css ends From here*/ /*Courses css Start From here*/ .pageWrapper .mainContent .myCoursesSectionWrapper{display: flex; width: var(--fullWidth); flex-direction: column;} .pageWrapper .mainContent .myCoursesSectionWrapper .learnerBreadcrumbWrapper{display: flex; width: var(--fullWidth); color: var(--blackcolor); margin-bottom:20px; font-size: var(--fontsize14);} .pageWrapper .mainContent .myCoursesSectionWrapper .learnerBreadcrumbWrapper a{color: var(--greyColor); font-size: var(--fontsize14); margin-right:0px;} .pageWrapper .mainContent .myCoursesSectionWrapper .learnerBreadcrumbWrapper a:after {padding:0 8px; color: var(--blackcolor); content: "/\00a0";} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper{display: flex; width: var(--fullWidth); flex-direction: column;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol{display: flex; flex-direction: column; } .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li:first-child{margin-top: 0;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); display: flex; flex-direction: column; margin-top: 10px; width: var(--fullWidth); background-color: var(--whitecolor); border-radius: var(--radius5); padding:15px;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom:10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li p{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .actions{display: flex; margin-top: 15px; width: var(--fullWidth); justify-content: space-between; align-items: center;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .actions span{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .actions div{display: flex; align-items: center;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .actions div span{height: 35px; width: 35px; display: flex; align-items: center; justify-content: center; color: var(--lightRedColor); border-radius:var(--radius100); background-color: var(--greyColor3);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .actions div span i{transform: rotate(24deg);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .actions a{padding: 5px 20px; font-size:var(--fontsize12);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .progrssBar{display: flex; margin-top: 10px; width: var(--fullwidth); height: 10px; background-color: var(--greyColor4); border-radius: var(--radius10);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .progrssBar span{background-color: var(--secondaryColor); border-radius: var(--radius10);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .progrssBarBlock{display: flex; max-width: 300px; width: var(--fullwidth); flex-direction: column; margin-top:10px;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li .completed_percentage{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li a{display: flex; justify-content:space-between; align-items: center;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li a .left{flex: 1; display: flex;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li a .right i{color: var(--greyColor2)} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li a .right{opacity: 0;visibility: hidden;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper ol li a:hover .right{opacity: 1;visibility: visible;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesThumb{max-width: 150px; max-height: 150px;border-radius: var(--radius5); overflow: hidden; margin-right: 10px; position: relative; width: var(--fullwidth);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent{display: flex; padding:0px; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent .coursesTop{display: flex; position: relative; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent .coursesTop p{font-size:var(--fontsize15);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent .coursesTop p i{margin-right: 10px; color: var(--secondaryColor);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent .coursesBottom{align-items: center; display: flex; justify-content: space-between; width: var(--fullwidth);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent .coursesBottom p{margin-bottom: 0; font-size:var(--fontsize15);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent h5{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesContent p{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesPrice{display: flex; align-items: center;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesPrice del{margin-left: 10px; color: var(--greyColor2); font-size:var(--fontsize15);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesPrice ins{margin-left:10px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesRating{position: absolute; left: 15px; top: 15px;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesRating span{ display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.7); padding: 5px 15px; border-radius:var(--radius10);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesRating span i{color: var(--orangeColor); margin-left: 5px;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesScore{position: absolute; right: 0px; top: 5px;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesScore span{ display: flex; align-items: center; font-size:var(--fontsize12);justify-content: center; background-color:var(--lightOrangeColor); color: var(--blackcolor); padding: 5px 10px; border-radius:var(--radius5);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper .coursesScore span i{color: var(--orangeColor); margin-right: 5px;} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper a{color: var(--whitecolor);} .pageWrapper .mainContent .myCoursesSectionWrapper .listingWrapper img{border-radius:var(--radius15);} /*Courses css ends From here*/ /*my Assignments css Start From here*/ .pageWrapper .mainContent .myAssignmentsSectionWrapper{display: flex; width: var(--fullWidth); flex-direction: column;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .learnerBreadcrumbWrapper{display: flex; width: var(--fullWidth); color: var(--blackcolor); margin-bottom:20px; font-size: var(--fontsize14);} .pageWrapper .mainContent .myAssignmentsSectionWrapper .learnerBreadcrumbWrapper a{color: var(--greyColor); font-size: var(--fontsize14); margin-right:0px;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .learnerBreadcrumbWrapper a:after {padding:0 8px; color: var(--blackcolor); content: "/\00a0";} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper{display: flex; width: var(--fullWidth); flex-direction: column;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol{display: flex; flex-direction: column; } .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li:first-child{margin-top: 0;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li a{display: flex; flex:1; align-items: center;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li{box-shadow: 0px 4px 4px rgb(112 98 227 / 10%); display: flex; margin-top: 10px; border: 1px solid transparent; width: var(--fullWidth); background-color: var(--whitecolor); border-radius: var(--radius5); padding:15px;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li:hover{border: 1px solid var(--greenColor)} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li .defaultSymbol{margin-right: 20px; display: flex; align-items: center; color: var(--greyColor2); font-size: var(--fontsize16);} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li .completedSymbol{margin-right: 20px; display: flex; align-items: center; color: var(--greenColor); font-size: var(--fontsize16);} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li .orangeSymbol{margin-right: 20px; display: flex; align-items: center; color: var(--orangeColor); font-size: var(--fontsize16);} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper .no-content-result{text-align: center; background-color: var(--greyColor3); color:var(--greyColor5); padding:20px;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .notLiveNow {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .notLiveNow span{display: flex; align-items: center; color: var(--blackcolor); font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .notLiveNow span i{margin-right: 5px; font-size: var(--fontsize16);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .missedClass {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .missedClass span{display: flex; align-items: center; color: var(--blackcolor); font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .missedClass span i{margin-right: 5px; color: var(--lightRedColor); font-size: var(--fontsize16);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .completedClass {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .completedClass span{display: flex; align-items: center; color: var(--blackcolor); font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .completedClass span i{margin-right: 5px; color: var(--greenColor); font-size: var(--fontsize16);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .liveNow {display: flex; align-items: center;} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .liveNow span{display: flex; align-items: center; color: var(--lightRedColor); text-transform: uppercase; font-size: var(--fontsize12);} .pageWrapper .mainContent .myClassesSectionWrapper .listingWrapper ol li .classStatus .liveNow span i{margin-right: 5px;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li h3{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li p{ display: flex; align-items: center; font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:5px; color: var(--greyColor7); font-family: var(--defaultfont);} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li p span {margin-left:5px; display: flex; align-items: center;} .pageWrapper .mainContent .myAssignmentsSectionWrapper .listingWrapper ol li p span i{font-size:var(--fontsize6); margin-right: 5px;} /*my Assignments css ends From here*/ /*Course Detail css start From here*/ .pageWrapper .mainContent .modulePageWrapper{display: flex; flex-direction: column; width:var(--fullwidth); font-family: var(--defaultfont);} .pageWrapper .mainContent .modulePageWrapper .learnerBreadcrumbWrapper{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); font-family: var(--fontfamilybold); background-color: var(--whitecolor); border-radius: var(--radius5); bordeR:0px none; padding: 8px; display: flex; width: var(--fullwidth); color: var(--blackColor); margin-bottom:20px; font-size: var(--fontsize16);} .pageWrapper .mainContent .modulePageWrapper .learnerBreadcrumbWrapper a{color: var(--blackColor); font-family: var(--fontfamilybold); font-size: var(--fontsize16); margin-right:0px;} .pageWrapper .mainContent .modulePageWrapper .learnerBreadcrumbWrapper a:after {padding:0 8px; color: var(--blackcolor); content: "/\00a0";} .pageWrapper .mainContent .modulePageWrapper{flex-direction: column; width: 100%;} .pageWrapper .mainContent .modulePageWrapper .breadcrumb{display: flex; background-color: transparent; width: var(--fullWidth); font-size: var(--fontsize14); margin-bottom: 10px;} .pageWrapper .mainContent .modulePageWrapper .breadcrumb ol{display: flex;} .pageWrapper .mainContent .modulePageWrapper .breadcrumb ol li{display: flex; color:var(--whitecolor);} .pageWrapper .mainContent .modulePageWrapper .breadcrumb ol li a{display: flex; font-size: var(--fontsize14); color:var(--whitecolor); text-decoration: underline;} .pageWrapper .mainContent .modulePageWrapper .breadcrumb ol li a:hover{text-decoration: none;} .pageWrapper .mainContent .modulePageWrapper .breadcrumb ol li + li:before {padding: 0 2px 0 5px; color:var(--whitecolor); content: "/\00a0";} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper {display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .moduleCourseCardLeft{display: flex; flex-direction: column; width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); background-color: var(--whitecolor);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoThumb{width:120px; display: flex; align-items: flex-start; justify-content: center; height:120px; border-radius:5px; margin-right: 20px; background-color: var(--whitecolor);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoThumb img{border-radius:var(--radius5);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft{display: flex; flex-direction: column; flex: 1} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft h1{font-size: var(--fontsize22); font-weight: normal; display: flex; align-items: center; font-family: var(--defaultfont); margin: 0 0 4px; color: var(--whitecolor)} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft h1 strong{background-color: var(--whitecolor); padding: 2px 10px; border-radius: 5px; color: var(--color1); margin-left: 10px;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft h2{font-size: var(--fontsize16); font-weight: normal; font-family: var(--fontfamilybold); margin: 0 0 4px; color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft h2 a{color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft p{font-size: var(--fontsize14); font-style: normal; font-weight: normal; margin-bottom:10px; font-family: var(--defaultfont); color: var(--tableTh)} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .card-text{font-size: var(--fontsize14); margin-top: 30px; font-family: var(--defaultfont);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .card-text strong{font-size: var(--fontsize14); font-family: var(--fontfamilybold);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .trainerSection{display: flex; font-size: var(--fontsize13); color: var(--secondaryColor); font-weight: normal; font-family: var(--fontfamilysemibold); margin-top:5px; width: 100%;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .trainerSection b{color: var(--secondaryColor); margin-right:5px; font-size: var(--fontsize13); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .running{display: flex; width: var(--fullwidth); font-family: var(--fontfamilysemibold); margin-bottom: 10px;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .running span{background-color: var(--whitecolor); padding:2px 10px; border-radius: var(--radius5); color: var(--secondaryColor)} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .moduleCompleted{display: flex; width: var(--fullwidth); color: var(--whitecolor); font-family: var(--defaultfont); margin-bottom: 10px; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoLeft .moduleCompleted span{background-color: var(--secondaryColor); padding:2px 10px; border-radius: var(--radius15); color: var(--whitecolor); margin-right: 10px;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoRight{display:flex; align-items: center; margin-left: 20px; flex-direction: column; justify-content: center;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoRight .resumeButton{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoRight .resumeButton a{border-radius: 26px;border: 1px solid var(--whitecolor); font-family: var(--fontfamilysemibold); padding:10px 30px; box-shadow: 0 0 5px var(--whitecolor); color: var(--primaryColor); background-color: var(--whitecolor);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .courseInfoWrapper .courseInfoRight .resumeButton a i{margin-right: 10px;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .leaderBoardLink{display: flex; margin-top: 15px;} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .leaderBoardLink i{margin-right:5px; max-width: 22px; display: flex; color:var(--blackcolor);} .pageWrapper .mainContent .modulePageWrapper .moduleCourseCardWrapper .leaderBoardLink a{color:var(--blackcolor); display: flex; align-items: center; font-size: var(--fontsize16);} .pageWrapper .mainContent .moduleLeaderBoardWrapper{display: flex; width: var(--fullwidth); flex-direction: column; padding: 15px; border-radius: 5px; background: linear-gradient(to right, #4776e6, #8e54e9); } .pageWrapper .mainContent .moduleLeaderBoardWrapper .moduleLeaderBoardContainer{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile{display: flex; flex-direction: column; margin-bottom:20px;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .profileThumbSection{display:flex; width: var(--fullwidth); flex-direction: column; align-items: center;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .profileStatusSection{display:flex; flex-direction: column; margin-top: 15px;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userThumb{width:137px; height: 126px; margin-bottom:10px; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 100%;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userThumb img{max-width: 100%; border-radius:var(--radius100);width: 120px;height: 120px;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userThumbContent{display: flex; flex-direction: column; width: var(--fullwidth); align-items: center;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userName{color: var(--whitecolor); font-size: var(--fontsize15); margin-bottom:5px; font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userRank{color: var(--whitecolor); font-size: var(--fontsize15); margin-bottom: 5px; font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userRank i{margin-right: 5px; color: #fff146; font-size: 16px;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .completedStatus{display: flex; justify-content: center; width: 100%; color: var(--whitecolor); font-family: var(--defaultfont); margin-bottom:15px; align-items: center;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .completedStatus span{background-color: var(--color7); margin-left: 10px; padding:2px 10px; border-radius:4px; color: var(--whitecolor);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userStatus{display: flex; justify-content: center;width: 100%; color: var(--whitecolor); font-family: var(--defaultfont); margin-bottom: 10px; align-items: center;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfile .userStatus span{background-color: var(--whitecolor); margin-left: 10px; padding:2px 10px; border-radius: 4px; color: var(--color38);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfileContent{display: flex; color: var(--whitecolor); flex: 1} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfileContent .block{display: flex; text-align: center; align-items: center; width: 50%; flex-direction: column;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfileContent .block:last-child{margin-left: 15px;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfileContent .block:first-child{margin-left:0px;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfileContent .block i{display: flex; margin-bottom: 10px; font-style: normal; font-size: var(--fontsize15);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .userProfileContent .block i .circles-text{ font-size: var(--fontsize15)!important;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .leaderBoardLink{display: flex; margin-top: 15px; justify-content:center; font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .leaderBoardLink i{margin-left:5px; max-width: 22px; font-size: 12px; display: flex; color:var(--whitecolor);} .pageWrapper .mainContent .moduleLeaderBoardWrapper .leaderBoardLink a{display: flex; align-items: center; font-family: var(--fontfamilysemibold); font-weight: normal; text-decoration: none; padding:0px; border-radius: 0px; color: var(--whitecolor); color: #fff146;} .pageWrapper .mainContent .moduleLeaderBoardWrapper .leaderBoardLink a:hover{text-decoration: none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsWrapper{display: flex; padding:15px; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); border-radius:10px; background-color: var(--whitecolor); width: var(--fullwidth); flex-direction: column; margin-top: 40px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsWrapper .modulePageTabsInner{display: flex; border-bottom: 1px solid var(--greyColor4); justify-content: space-between; width: var(--fullwidth); align-items: center; margin-bottom: 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsWrapper .modulePageTabsInner .moduleHeading{ font-size:var(--fontsize20); max-width: 350px; color: var(--color1)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsWrapper .modulePageTabsInner .moduleHeading a{font-size:var(--fontsize14); text-decoration: underline; color: var(--color38)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsWrapper .modulePageTabsInner .moduleHeading a:hover{text-decoration: none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsLinks{display: flex;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsLinks a{border-bottom:5px solid transparent; color: var(--headerThemeTextColorChange); padding: 5px 35px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsLinks a.active{color: var(--blackColor); font-family: var(--fontfamilysemibold); border-bottom:5px solid var(--primaryColor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent { padding: 15px 0; color:var(--greyColor6); margin-top: 0; padding-top: 0; font-size:var(--fontsize15); font-family:var(--defaultfont);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel{border: 0px none; box-shadow: 0px 0px 0px 0px} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading {display: flex; padding: 0; position: relative; width: var(--fullwidth); background-color: transparent; border-radius: 10px 10px 0 0; border: 0px solid var(--lineColor); border-bottom: 0px none; } .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .is_disabled{position: relative; display: flex;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .is_disabled .lockScreen{display: flex} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .lockScreen{position: absolute; left:0; border-radius:3px; color: #fff; flex-direction: column; display: flex; display: none; font-size:var(--fontsize18); align-items: center; justify-content: center; right:0; bottom:0; top:0; background-color: rgba(0,0,0,0.5);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .lockScreen i{font-size:var(--fontsize32); } .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .no-content-result{text-align: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title{display: flex; width: var(--fullwidth); justify-content: space-between; } .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a{display: flex; width: var(--fullwidth); border-radius: 10px 10px; border: 1px solid var(--lineColor); justify-content: space-between; font-size:var(--fontsize14); padding:15px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a[aria-expanded = "true"]{border: 1px solid var(--lineColor); background-color: var(--primaryBgColor); border-bottom:0px solid var(--lineColor); border-radius: 10px 10px 0px 0px; } .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a:hover{color: var(--color38)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child{display: flex; align-items: flex-start; flex: 1;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .moduleThumb{width: var(--fullwidth);display: flex; align-items: center; display: none; justify-content: center; background-color: var(--whitecolor); box-shadow: 0 0 5px var(--greyColor6); height: 60px; max-width: 60px; margin-right: 15px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .moduleThumb img{border-radius:var(--radius100);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .moduleContent{display: flex; flex-direction: column; align-items: flex-start;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .title{margin-bottom:0px; font-size:var(--fontsize15); color:var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .date{display: flex; align-items: center; font-size:var(--fontsize13); color: var(--greyColor6)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .date i{margin-right: 10px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .date span:last-child{margin-left: 10px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .duration{display: flex; margin-top: 5px; align-items: center; font-size:var(--fontsize12); color: var(--tableTh)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .duration i{margin-right:5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .leaderBoardLink{display: flex; margin-top: 15px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:first-child .leaderBoardLink i{margin-right:5px; max-width: 32px; display: flex; color:var(--blackcolor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:last-child{display: flex; align-items: center; font-size:var(--fontsize13); color: var(--greyColor6)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:last-child label{display: flex; font-weight: normal; align-items: center; margin-left: 25px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:last-child label i{margin-right: 8px; color: var(--primaryColor); font-size:var(--fontsize16);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:last-child label b{margin-right:4px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:last-child label:first-child{margin-left: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a[aria-expanded = "true"] div:last-child > .arrow{background-image: url(../images/aside-arrow.png); transform: rotate(-180deg);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-heading .panel-title a div:last-child > .arrow {margin-left: 15px; background-image: url(../images/aside-arrow.png); background-repeat: no-repeat; transition: all 0.2s ease; width: 10px; height:6px; transform: rotate(0deg);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body{display: flex; width: 100%; padding-top: 0; border: 1px solid var(--lineColor); border-top:0px none; border-radius: 0 0 10px 10px; flex-direction: column;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol{display: flex; width: 100%; flex-direction: column;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li{display: flex; background-color: #fff; bordeR:0px none; border-radius:0; border-bottom: 1px solid var(--strokeColor); width: 100%; font-size:var(--fontsize17); margin-top:5px; padding:5px; margin-bottom: 10px} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol a:last-child li{border-bottom:0px none; margin-bottom: 0; padding-bottom: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li.no-content-result{background-color: transparent; justify-content: center; border:0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li.no-content-result:hover{background-color: transparent; justify-content: center; border:0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li:first-child{margin-top: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li:hover{background-color:#fff;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft{display: flex; flex: 1} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .title{display: flex; align-items: center; color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body a{color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .title span{background-color: var(--lightRedColor); font-family: var(--defaultfont); margin-left: 5px; font-size:var(--fontsize12); padding: 2px 5px; border-radius: 5px; color: var(--whitecolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft i{margin-right: 10px; width:150px; background-color: var(--whitecolor); border:1px solid var(--greyColor5); color: var(--greyColor5); height: auto; border-radius: 5px; display: flex; align-items: center; justify-content: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft p{font-size:var(--fontsize12); color: var(--greyColor8)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight{display: flex; justify-content: center; align-items: center; flex-direction: column; margin-left: 30px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .enrollNowButton{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .enrollNowButton a{font-size:var(--fontsize15); color: var(--whitecolor); border-radius:26px; background: linear-gradient(90deg, rgba(22,99,254,1) 47%, rgba(26,228,255,1) 100%); padding:10px 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .enrollNowButton i{margin-left: 5px; font-size:var(--fontsize15);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .progressCls{ height: 4px; width: 150px; margin: 0; background-color:var(--color3); border-radius: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--color39); transition: width 0.6s ease;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .completedProgress{font-size:var(--fontsize14); margin-left: 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .notCreatedYet{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .notCreatedYet span{background-color: var(--color7); font-size:var(--fontsize14); color: var(--whitecolor); padding: 5px 20px; border-radius:26px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .completed{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .completed span{background-color: var(--color15); font-size:var(--fontsize14); color: var(--whitecolor); padding: 5px 20px; border-radius:26px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .completed span i{margin-right: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .title{margin-bottom:5px; font-family: var(--defaultfont); font-size:var(--fontsize14); color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft p{margin-bottom:8px; font-family: var(--defaultfont); color: var(--greyColor8); font-size:var(--fontsize12);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .thumbContent{display: flex; flex-direction: column;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .thumbContent .progress-block{background-color:var(--greyColor4);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .thumbContent .progress{height:4px; background-color:var(--secondaryColor);transition: all 0.2s ease; margin: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .title a{font-family: var(--defaultfont); font-size:var(--fontsize17); color: var(--blackcolor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .date{display: flex; font-family: var(--defaultfont); align-items: center; font-size:var(--fontsize13); color: var(--color10)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .date i{margin-right: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .date span{font-weight: bold; font-family: var(--fontfamilysemibold); color: var(--color38)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .date div:last-child{margin-left: 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .date div:first-child{margin-left:0px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .info{display: flex; align-items: center;margin-bottom: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .info span{margin-left: 10px; display:flex; padding-left:10px; color: var(--greyColor8); font-size:var(--fontsize13); border-left: 1px solid var(--strokeColor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .info span i{margin-right:5px; background-color: transparent; width: auto; height: auto; border: 0px none;color: var(--greyColor5);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .info span:first-child{margin-left:0px; padding-left:0px; border-left: 0px solid #ddd;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentLeft .info span span{border: 0px none; padding-left: 0; color: var(--color38);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .joinButton{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .joinButton a{font-size:var(--fontsize15); color: var(--whitecolor); border-radius:26px; background:#1663fe; padding:10px 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .joinButton i{margin-left: 5px; font-size:var(--fontsize15);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .concludedButton{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .panel-body ol li .contentRight .concludedButton span{font-size:var(--fontsize15); color: var(--whitecolor); border-radius:26px; background: linear-gradient(90deg, rgba(22,99,254,1) 47%, rgba(26,228,255,1) 100%); padding:10px 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li.no-content-result{background-color: transparent; display: flex; justify-content: center; border:0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li.no-content-result:hover{background-color: transparent; box-shadow: 0px 0px 0px 0px; justify-content: center; border:0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs{display:flex; flex-direction: column; width: 100%;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li{padding: 15px; border-radius: 5px; background-color:var(--whitecolor); margin-top:25px; border: 1px solid #ddd;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li:first-child{margin-top: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li:hover{background-color:var(--whitecolor); box-shadow: 0 0 5px 0 var(--greyColor); border: 1px solid var(--greyColor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper{display: flex; flex-direction: column; width: 100%;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo{display: flex; width: 100%; justify-content: space-between;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .title span{background-color: var(--secondaryColor); padding:2px 5px; font-weight: normal; font-family: var(--defaultfont); margin-left: 10px; border-radius: 2px; color: var(--whitecolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoLeft{display: flex; flex: 1} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoLeft .sessionInfoThumb{width: 100%; display: flex; align-items: center; justify-content: center; max-width:100px; margin-right: 10px; height:100px; box-shadow: 0 0 5px #ddd; background-color: var(--whitecolor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoLeft .sessionInfoThumb img{border-radius: 100%;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight{display: flex; justify-content: center; align-items:center; flex-direction: column;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight .circles-text{display: flex; font-size:var(--fontsize16)!important; align-items: center; justify-content: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight .joinButton{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight .joinButton a{font-size:var(--fontsize13); padding:5px 10px; width:auto;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight .joinButton i{margin-left: 5px; font-size:var(--fontsize15);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight .concludedButton{display: flex; align-items: center; margin-top: 10px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .sessionInfoRight .concludedButton span{font-size:var(--fontsize15); color: var(--whitecolor); padding: 5px 10px; border-radius: var(--radius5); background-color: var(--lightRedColor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .title{margin-bottom:15px; font-family: var(--fontfamilysemibold); color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo p{margin-bottom:0px; font-family: var(--defaultfont); color: var(--greyColor8); font-size:var(--fontsize12);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .title .concludedButton{ background-color:transparent; padding:0; color:var(--greenColor2); font-size:var(--fontsize12);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .title .author{ background-color:transparent; padding:0; color:var(--greyColor8); font-size:var(--fontsize12);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .title a{font-family: var(--defaultfont); font-size:var(--fontsize14); color: var(--blackcolor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .date{display: flex; font-family: var(--defaultfont); align-items: center; font-size:var(--fontsize13); color: var(--color10)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .date i{margin-right: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .date span{font-weight: bold; font-family: var(--fontfamilysemibold); color: var(--color38)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .date div:last-child{margin-left: 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .date div:first-child{margin-left:0px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .info{display: flex; align-items: center;margin-bottom: 10px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .info span{margin-left: 10px; padding-left:10px; color: var(--greyColor8); font-size:var(--fontsize12); border-left: 1px solid #ddd;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .info span i{margin-right:5px; color: var(--greyColor6);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionInfo .info span:first-child{margin-left:0px; padding-left:0px; border-left: 0px solid #ddd;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionDetails{display: flex; width: 100%; margin-top: 30px; justify-content: flex-end;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionDetails .block{display: flex; flex-direction: column; border-left: 1px solid var(--greyColor6); padding-left: 14px; margin-left: 14px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionDetails .block:first-child{margin-left: 0; padding-left: 0; border-left: 0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionDetails .block i{margin-bottom: 8px; color: var(--color38); font-size:var(--fontsize18); } .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .sessionsTabs li .sessionDetailsWrapper .sessionDetails .block span{color: var(--color4); font-size: var(--fontsize14);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs{display:flex; flex-direction: column; width: 100%;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li{padding: 15px; position: relative; background-color: var(--whitecolor); border-radius: 5px; margin-top:15px; border: 1px solid var(--strokeColor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li:first-child;{margin-top: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li.no-content-result{background-color: transparent; display: flex; justify-content: center; border:0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li.no-content-result:hover{background-color: transparent; box-shadow: 0px 0px 0px 0px; justify-content: center; border:0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li:hover{background-color: var(--whitecolor);box-shadow: 0 0 5px 0 #ddd; border: 1px solid #d1d0d0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper{display: flex; flex-direction: column; width: 100%; position: relative;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .tagLabel{position: absolute; top: 0; right: 0; background-color: var(--lightRedColor); padding: 5px 10px; border-radius: 0 0 5px 5px; color: var(--whitecolor); font-size:var(--fontsize12);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo{display: flex; width: 100%; justify-content: space-between;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .title span{background-color: var(--secondaryColor); font-size:var(--fontsize12); padding:2px 5px; font-weight: normal; font-family: var(--defaultfont); margin-left: 10px; border-radius: 2px; color: var(--whitecolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoLeft{display: flex; flex: 1} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoLeft .gradeInfoThumb{width: 100%; display: flex; max-width:100px; margin-right: 10px; height: 100px; box-shadow: 0 0 5px #ddd; display: none; align-items: center; justify-content: center; background-color: var(--whitecolor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoLeft .gradeInfoThumb img{border-radius: 100%;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight{display: flex; justify-content: center; align-items:center; flex-direction: column; margin-left: 30px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .score{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .score span{background-color: var(--color15); font-size:var(--fontsize14); color: var(--whitecolor); padding: 5px 20px; border-radius:26px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .circles-text{display: flex; font-size:var(--fontsize16)!important; align-items: center; justify-content: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .joinButton{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .joinButton a{font-size:var(--fontsize15); color: var(--whitecolor); border-radius:26px; background: linear-gradient(90deg, rgba(22,99,254,1) 47%, rgba(26,228,255,1) 100%); padding:10px 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .joinButton i{margin-left: 5px; font-size:var(--fontsize15);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .concludedButton{display: flex; align-items: center;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .gradeInfoRight .concludedButton span{font-size:var(--fontsize15); color: var(--whitecolor); border-radius:26px; background: linear-gradient(90deg, rgba(22,99,254,1) 47%, rgba(26,228,255,1) 100%); padding:10px 20px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .title{margin-bottom:8px; font-size:var(--fontsize14); font-family: var(--defaultfont); color: var(--blackcolor)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo p{margin-bottom:0px; margin-top: 8px; font-family: var(--defaultfont); color: var(--tableTh); font-size:var(--fontsize12);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .title a{font-family: var(--defaultfont); font-size:var(--fontsize17); color: var(--blackcolor);} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails div:first-child{margin-left:0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails{display: flex; font-family: var(--defaultfont); align-items: center; margin-bottom:0px; font-size:var(--fontsize12); color: var(--greyColor8)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails .tagLabel{position: static; margin-left: 0; background-color: transparent; border-radius: 0px; padding:0; font-family: var(--defaultfont); font-size:var(--fontsize12); color: var(--greyColor8)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails i{margin-right: 5px; color: var(--greyColor8)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails div{margin-left:10px; margin-bottom: 0; padding-left:0px; border-left:0px solid #ddd;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails div.score{margin-left: 0;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails .bullet{width:5px; margin:0 10px; height: 5px; border-radius:100%; background-color: var(--greyColor5); display:flex; align-items: center; justify-content:center} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails div.score i{color:var(--blackColor); font-style: normal;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails div.score span{color:var(--greyColor8); margin-left: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .infoDetails div.date{margin-bottom: 0; padding-left:0px; border-left:0px solid #ddd;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .date{display: flex; font-family: var(--defaultfont); align-items: center; margin-bottom: 0px; font-size:var(--fontsize12); color: var(--greyColor8); margin-left: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .date i{margin-right: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .date span{font-weight: bold; font-family: var(--defaultfont); color: var(--greyColor8)} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .date div:last-child{margin-left:10px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .date div:last-child span{margin-right: 5px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .date div:first-child{margin-left:0px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .block{display: flex; flex-direction: column; border-left: 1px solid #ddd; padding-left: 14px; margin-left: 14px;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .block:first-child{margin-left: 0; padding-left: 0; border-left: 0px none;} .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .block i{margin-bottom: 8px; color: var(--color38); font-size:var(--fontsize18); } .pageWrapper .mainContent .modulePageWrapper .modulePageTabsContent .gradeTabs li .gradeTabsDetailsWrapper .gradeInfo .block span{color: var(--color4); font-size: var(--fontsize14);} /*Course Detail css ends here*/ /*Modules Detail page Css start here*/ .pageWrapper .mainContent .moduleDetailWrapper {display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper{display: flex; align-items: center; width: var(--fullwidth); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--strokeColor);} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .backLink{display: flex; align-items: center; margin-right: 20px; white-space: nowrap;} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .backLink a{display: flex; align-items: center; color: var(--blackcolor)} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .backLink i{margin-right: 5px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper{display: flex; align-items: center; width: var(--fullwidth);} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper i{display: flex;margin-right:15px; font-size:var(--fontsize18); color: var(--blackColor)} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper div{display: flex; flex-direction: column;} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper div h3{margin-bottom:2px; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold); color: var(--blackColor)} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper div p{margin-bottom:0px; font-family: var(--defaultfont); color: var(--greyColor5); font-size:var(--fontsize14);} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper div p span{margin-right: 10px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleInfoWrapper .infoWrapper div p span:last-child{margin-right:0px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailInnerWrapper{display: flex; width: var(--fullwidth); align-items: flex-start;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections{display: flex; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); width: var(--fullwidth); width:calc(100% - 325px); border-radius:var(--radius5); padding: 15px; background-color: var(--whitecolor); flex-direction: column; align-items: flex-start;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .pdfPlayerSection{display: flex; justify-content: center; align-items: center; position: relative; width: var(--fullwidth); min-height:400px; min-height:initial; margin-bottom: 30px; flex-direction: column;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .pdfPlayerSection #video-placeholder{position: static;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .pdfPlayerSection .contentTitleStyle{color: var(--blackColor); padding: 0 0 10px; font-size:var(--fontsize18);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .pdfPlayerSection iframe{width: var(--fullwidth)!important} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .pdfPlayerSection video{max-width:none; width: var(--fullwidth);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .videoPlayerSection{display: flex; position: relative; width: var(--fullwidth); min-height:500px; margin-bottom: 30px; flex-direction: column; border: 1px solid #ddd;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .videoPlayerSection video{width: var(--fullwidth);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .notesWrapper{display: flex; width: 100%;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .notesWrapper .pdfviewer{width: 100%;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .notesWrapper .pdfviewer .pdfjs-viewer{max-height:600px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .overviewSection{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .overviewSection h3{margin-bottom:10px; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold); color: var(--blackcolor)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .overviewSection p{margin-bottom:0px; line-height: 24px; font-family: var(--defaultfont); color: var(--greyColor5); font-size:var(--fontsize14);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections.fullwidthactivate{display: none;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .toggleButton a{box-shadow: -1px 0px 1px 0 rgb(0 0 0 / 25%); position: relative; background-color:var(--whitecolor); width: var(--fullwidth); justify-content: center; border-radius: 50px 0 0 50px; display: flex; align-items: center;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .toggleButton a:hover .videoplayer-tooltip{opacity: 1; visibility: visible;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .toggleButton{position: absolute; right: 0px; z-index: 220000; margin-top: -30px; width: 30px; top: 50%; height: 60px; display: flex; align-content: center; justify-content: center;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .toggleButton i{font-size: 22px; color:var(--color1)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .toggleButton .videoplayer-tooltip {visibility: hidden; font-size:var(--fontsize12); font-family: var(--defaultfont); width: 150px; background-color:var(--color1); color:var(--whitecolor); text-align: center; border-radius: 5px; right: 130%; padding: 5px 0; position: absolute; z-index: 220000;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailLeftSections .toggleButton .tooltip-left::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #000;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections{display: flex; width: var(--fullwidth); flex-direction: column; border-radius:var(--radius5); background-color: var(--whitecolor); padding: 15px; max-width:325px; margin-left: 20px; border: 0px solid var(--greyColor); margin-top:0px} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .playerControls{display: flex; width: var(--fullwidth); justify-content: space-between; margin-bottom: 15px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .playerControls a{display: flex; align-items: center; flex-direction: column; font-size:var(--fontsize13); color: var(--color1)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .playerControls a i{margin-bottom: 5px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .playerControls a:last-child img{transform: rotate(180deg);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .playerControls select{border: 0px none; max-width: 180px; font-size:var(--fontsize15)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper{padding:0px; max-height: 418px; display: flex; flex-direction: column; overflow-y: auto;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper:first-child{margin-top: 0;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper{display: flex; flex-direction: column; width: var(--fullwidth); margin-top: 40px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper h2{margin-bottom:5px; padding-bottom:0px; font-size:var(--fontsize14); position: relative; font-family: var(--fontfamilysemibold); color: var(--blackcolor)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper h2:after{background-color: var(--primaryColor); content: ''; position: absolute; left: 0; display:none; width: 50px; height:4px; bottom: 0;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol{display: flex; flex-direction: column; width: 100%;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li{width: 100%; margin-top: 10px; border: 1px solid var(--greyColor4); border-radius: 5px; padding: 5px 10px; display: flex; justify-content: space-between;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li div{display:flex; width: var(--fullwidth); align-items: center;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li a{display: flex; color: var(--blackcolor); font-size:var(--fontsize14); align-items: center; justify-content: space-between; width: var(--fullwidth);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li:hover{background-color:var(--greyColor4);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li#selected {background: none; color: var(--blackcolor); background-color:var(--greyColor4);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li#selected i{color: var(--whitecolor); color: var(--blackcolor);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li#selected div{color: var(--whitecolor); color: var(--blackcolor);} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li#selected .notstarted{background-color: var(--greyColor5); color:var(--color38)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li#selected .completed{background-color: var(--greenColor); color:var(--color38)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li#selected .notstarted{background-color: var(--secondaryColor); color:var(--color38)} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li i{font-size:var(--fontsize18); display: flex; align-items: center; justify-content: center; border-radius: var(--radius100); border: 0px solid var(--greyColor4); width: var(--fullwidth); font-size:var(--fontsize16); max-width:40px; height:40px; margin-right: 10px; flex-shrink: 0;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li .info{font-size:var(--fontsize12); display: flex; display: none; align-items: center;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li .info .completed{background-color: var(--greenColor); font-size:var(--fontsize12); border-radius: 5px; color: var(--whitecolor); padding: 4px 10px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li .info .inprogress{background-color: var(--secondaryColor); font-size:var(--fontsize12); border-radius: 5px; color: var(--whitecolor); padding: 4px 10px;} .pageWrapper .mainContent .moduleDetailWrapper .moduleDetailRightSections .moduleListwrapper .listwrapper ol li .info .notstarted{background-color: var(--greyColor5); font-size:var(--fontsize12); border-radius: 5px; color: var(--whitecolor); padding: 4px 10px;} /*Modules Detail page Css Ends here*/ /*learner-shot-detail start*/ .pageWrapper .mainContent .learningShotDetailsWrapper{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions-wrapper{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .learningShotDetails{display: flex; align-items: flex-start;} .pageWrapper .mainContent .learningShotDetailsWrapper .learningShotDetails .assessmemtViewCertificate{justify-content: flex-end; display: flex; display: none; width: var(--fullwidth); margin-bottom: 20px;} .pageWrapper .mainContent .learningShotDetailsWrapper .learningShotDetails .assessmemtViewCertificate a{display: flex; align-items: center} .pageWrapper .mainContent .learningShotDetailsWrapper .learningShotDetails .assessmemtViewCertificate a:hover{color: var(--whitecolor); background: linear-gradient(270deg, var(--primaryColor) 0%, var(--secondaryColor) 100%);} .pageWrapper .mainContent .learningShotDetailsWrapper .learningShotDetails .assessmemtViewCertificate a i{margin-right: 10px; max-width: 24px;} .pageWrapper .mainContent .learningShotDetailsWrapper .assessmemtTitle{margin-bottom:10px; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold); color: var(--blackcolor)} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block{display: flex; width: var(--fullwidth); padding-bottom: 10px; border-bottom: 1px solid var(--greyColor); margin-bottom:30px;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block h3{margin-bottom:2px; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold); color: var(--primaryColor)} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .backLink{display: flex; align-items: center; margin-right: 20px; white-space: nowrap;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .backLink a{display: flex; align-items: center; color: var(--blackcolor)} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .backLink i{margin-right: 5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper{display: flex; align-items: center; width: 100%;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper i{display: flex;margin-right:15px; font-size:var(--fontsize21); color: var(--primaryColor)} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper div{display: flex; flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper div h3{margin-bottom:2px; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold); color: var(--primaryColor)} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper div p{margin-bottom:0px; font-family: var(--defaultfont); color: var(--greyColor5); font-size:var(--fontsize14);} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper div p span{margin-right: 10px;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block .infoWrapper div p span:last-child{margin-right:0px;} .pageWrapper .mainContent .learningShotDetailsWrapper .heading-block a{color: var(--whitecolor)} .pageWrapper .mainContent .learningShotDetailsWrapper{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .learningShotDetailsWrapper .dashboard-left{flex: 1; display: flex; flex-direction: column; background-color: var(--whitecolor); padding: 15px; border-radius:var(--radius10); box-shadow: 0px 4px 25px rgba(112, 98, 227, 0.1); border: 0px solid var(--greyColor4);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .assessmemtInfo{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .assessmemtInfo .assessmemtTitle{margin-bottom:0px; font-size:var(--fontsize14); padding: 0; font-family: var(--fontfamilysemibold); color: var(--blackcolor)} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .assessmemtInfo .infoBlock{display: flex; align-items: center; width: var(--fullwidth); margin-top: 10px;} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .assessmemtInfo .infoBlock .title{font-size:var(--fontsize12); font-family: var(--defaultfont); color: var(--greyColor8)} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .assessmemtInfo .infoBlock .value{font-size:var(--fontsize12); font-family: var(--defaultfont); color: var(--blackColor); margin-left: 5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .assessmemtInfo .description{ margin-top: 10px; font-size:var(--fontsize14); font-family: var(--defaultfont); color: var(--tableTh); } .pageWrapper .mainContent .learningShotDetailsWrapper .dashboard-right{width: var(--fullwidth); max-width: 325px; margin-left: 30px; padding-left: 0; display: flex; flex-direction: column; background-color: var(--whitecolor); border: 0px solid var(--greyColor4); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); padding: 15px; border-radius:var(--radius10)} .pageWrapper .mainContent .learningShotDetailsWrapper .dashboard-right.polldetailspage{width:25%; padding:0;} .pageWrapper .mainContent .learningShotDetailsWrapper .dashboard-right.polldetailspage .fyt li{border-left:0px none;} .pageWrapper .mainContent .learningShotDetailsWrapper .dashboard-right .proileblk{margin-top:0; box-shadow: 0 0 0 0; padding: 0; width: var(--fullwidth);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk{width: var(--fullwidth);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .imgblk{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .imgblk .video-js{display: flex;width: var(--fullwidth);} .pageWrapper .mainContent .learningShotDetailsWrapper .do-select-details{display: flex; flex-direction:column;} .pageWrapper .mainContent .learningShotDetailsWrapper .do-select-details h3{font-size:var(--fontsize16); color:var(--blackcolor);} .pageWrapper .mainContent .learningShotDetailsWrapper .do-select-details ol{display: flex; flex-direction:column; width: var(--fullwidth);} .pageWrapper .mainContent .learningShotDetailsWrapper .do-select-details ol li{display: list-item; line-height:24px; list-style-type: decimal; flex-direction:column;width: var(--fullwidth); font-size:var(--fontsize16); color: #999; margin:15px 0 0;} .pageWrapper .mainContent .learningShotDetailsWrapper .proileblk { margin-top:40px; box-shadow: 0px 0px 12px 6px rgba(0,0,0,0.1); border-radius:var(--radius5); width: var(--fullwidth); clear: both; overflow: hidden;} .pageWrapper .mainContent .learningShotDetailsWrapper .botr { border-bottom:1px solid var(--greyColor); padding:0px 0 10px; justify-content: space-between; align-items: center; display:flex;} .pageWrapper .mainContent .learningShotDetailsWrapper .botr a{color: var(--blackcolor); font-size:var(--fontsize18); margin-top: 0; font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .learningShotDetailsWrapper .botr .action{display: flex; align-items: center; padding-top: 0;} .pageWrapper .mainContent .learningShotDetailsWrapper .botr .action a{color:var(--primaryColor); font-size:var(--fontsize12); margin-top: 0; font-family: var(--defaultfont)} .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk .description{margin-bottom: 10px; color:var(--greyColor5); font-size:var(--fontsize14);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk-table{border:1px solid var(--greyColor4); border-collapse: collapse;} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk-table + ul{display: flex; justify-content: flex-end;} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk-table th{padding:10px; border:1px solid var(--greyColor4);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk-table tr:nth-child(even){background-color: var(--greyColor3)} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk-table td{padding:10px; border:1px solid var(--greyColor4); color: var(--blackcolor); font-size:var(--fontsize14);} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk { border:0px solid var(--greyColor4); padding:20px; } .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk .nav-tabs { border: none; margin-bottom:20px; } .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk .nav-tabs>li {margin-right: 30px;} .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk .nav-tabs>li>a { border:none; font-size:var(--fontsize15); line-height:20px; border-bottom:5px solid transparent; color:var(--greyColor5); margin-right:10px; border-radius:0px; padding: 5px 10px; } .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk .nav-tabs>li.active>a, .contentblk .nav-tabs>li.active>a:focus, .contentblk .nav-tabs>li.active>a:hover { border:none; background:transparent; border-bottom:5px solid var(--primaryColor); color:var(--primaryColor); font-weight: 200; } .pageWrapper .mainContent .learningShotDetailsWrapper .contentblk .nav>li>a:focus, .contentblk .nav>li>a:hover { background: transparent; } .pageWrapper .mainContent .learningShotDetailsWrapper .contentimgblk canvas#the-canvas{width: 100%; max-height: 450px; border: 1px solid var(--greyColor4);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt {display: flex;border: 0px none; margin: 0;padding: 0;width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt.list li{display: flex;width: var(--fullwidth); border: 1px solid var(--greyColor);border-left: 5px solid var(--primaryColor);;list-style-type: none; padding: 30px 10px 10px;border-radius:var(--radius5);} .pageWrapper .mainContent .contentTitleStyle{font-size:var(--fontsize14);color:var(--blackColor);padding:0px; font-family: var(--fontfamilysemibold); margin-bottom: 15px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt { padding:0px; display: flex; list-style-type: none; flex-direction: column; list-style-type: none; width: var(--fullwidth); margin:0px; border-bottom:0px solid var(--greyColor4);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li{ width: var(--fullwidth); background-color: transparent; display: flex; position: relative; border-left:0px solid var(--primaryColor); padding: 0; align-items: center; list-style-type: none; margin-bottom:10px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt.list li{ width: var(--fullwidth); display: flex; position: relative; border-left:0px solid #1663fe; align-items: center; list-style-type: none; padding:10px; margin-bottom:10px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .list-left{display: flex; width: auto;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .list-right{display: flex; width: 75%; align-items:center; justify-content: flex-end;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .userf { width:50px; height:50px; flex-shrink: 0; margin-left: 10px; margin-right: 10px; border-radius:var(--radius100); border:1px solid var(--greyColor4); } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .userf img {border-radius:var(--radius100);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .perce { margin-right: 10px; font-weight: 700; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .userf + div{display: flex; flex-direction: column; width:auto; color: var(--blackcolor)} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt.list li .userf + div{display: flex; flex-direction: column; width:auto; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .comp-time{color: var(--greyColor4); margin-top:0px; margin-bottom:0px; font-size:var(--fontsize12); display: flex; align-items:center; justify-content: flex-end;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .comp-time span{color: var(--greyColor); margin-left: 5px; padding:3px 5px; border-radius:3px;} .pageWrapper .mainContent .learningShotDetailsWrapper .dashboard-right .actions{align-items: center; padding-top: 10px; justify-content: flex-end; display: flex;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .comp-time .inprogress{color:var(--whitecolor); background-color:var(--secondaryColor)} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .comp-time .notstarted{color: var(--whitecolor); background-color: var(--greyColor4)} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .comp-time .completed{color: #fff; background-color: #019f2a} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .status-completed{position: absolute; right:0; top:0;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .status-inprogress{position: absolute; right:0; top:0;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .status-notstarted{position: absolute; right:0; top:0;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .status-completed span{color: #fff; background-color: #019f2a; padding: 2px 4px; font-size: 12px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .status-inprogress span{color: #fff; background-color: #ffd400; padding: 2px 4px; font-size: 12px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .status-notstarted span{color: #fff; background-color: #999; padding: 2px 4px; font-size: 12px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .position{display: flex; flex-direction: column; width: 50px; margin-right:25px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .position span{display: flex; width:50px; background-color:var(--greyColor8); color:#fff; border-radius:5px; align-items: center; justify-content: center; font-size: 14px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .position i{font-size: 28px; display: flex; align-items: center; color:var(--greyColor8); justify-content: center;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li:nth-child(1) .position i{display: flex; align-items: center; justify-content: center; color:var(--orangeColor2); font-size: 28px; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li:nth-child(2) .position i{display: flex; align-items: center; justify-content: center; color:var(--greyColor5); font-size: 28px; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li:nth-child(3) .position i{display: flex; align-items: center; justify-content: center; color:#cd7f32; font-size: 28px; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li:nth-child(1) .position span{background-color:var(--orangeColor2); color:var(--whitecolor);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li:nth-child(2) .position span{background-color:var(--greyColor5); color:var(--whitecolor);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li:nth-child(3) .position span{background-color:#cd7f32; color:var(--whitecolor);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .circle-wrapper { display: flex; flex-direction: column; width:20%; margin: 0 15px; align-items: center;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .circle-wrapper label{font-weight: normal; font-size: 12px; margin-top: 10px; text-align: center; color: #999;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .circle-wrapper .circle{ display: flex; flex-direction: column; width: auto; height:auto; padding:0; background-color: transparent;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .circle-wrapper .circles-text { position: absolute; top: 0; right: 0; left: 0; bottom: 0; color: var(--color12); font-size: var(--fontsize14); font-family: var(--fontfamilysemibold); display: flex; align-items: center; justify-content: center;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .circle-wrapper .label-text {color: var(--blackcolor); font-size: 38px; font-family: var(--defaultfont); display: flex; align-items: center; justify-content: center;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .progress-wrapper { display: flex; flex-direction: column; width:50%; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .progress-wrapper label{font-weight: normal; font-size: 13px; margin-bottom: 5px; color: #999;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .progress-block { display: flex; width: 100%; overflow: hidden; height: 10px; position: relative; background-color: #e3e3e5; border: 0px solid #ddd; border-radius: 5px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .progress-block .progress { display: flex; margin-bottom: 0; width: var(--fullwidth); background-color: #1663fe; transition: width .6s ease;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .points{color: #999; font-size:15px; display: flex; align-items:center; justify-content: flex-end; text-align: right; width: 33%;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .points span{color: #1663fe; font-size:20px; margin-left: 15px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper{display: flex; flex-direction: column; width: 35%;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper .skills{ display: flex;width: var(--fullwidth); align-items: center; justify-content: flex-end; margin-bottom:0px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper .skills i{margin-left: -19px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper .skills i:first-child{margin-left:0px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper i img{width: 26px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper .skills span{color: #999; font-size:13px; margin-left: 15px; padding:0; border-radius: 5px;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper .skills a{margin-left:10px; color: #1663fe; font-size:13px; text-decoration: underline;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .skills-wrapper .skills a:hover{color: #1663fe; font-size:13px; text-decoration:none;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li{padding:0px; width: var(--fullwidth); display: flex; position: relative; border-left:0px solid var(--primaryColor); align-items: center; list-style-type: none; margin-top:10px; margin-bottom: 0;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .list-left{display: flex; width: auto;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .list-right{display: flex; width: 75%; align-items:center; justify-content: flex-end;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .userf { display:flex; align-items: center; justify-content: center; width:40px; height:40px; flex-shrink: 0; margin-left: 0; margin-right: 10px; border-radius:var(--radius100); border:1px solid var(--greyColor);; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .userf img {border-radius:var(--radius100);} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .perce { margin-right: 10px; font-weight: 700; } .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt li .userf + div{display: flex; color:var(--blackColor); font-size: var(--fontsize12); flex-direction: column; width:auto;} .pageWrapper .mainContent .learningShotDetailsWrapper ul.fyt.list li .userf + div{display: flex; flex-direction: column; width:auto;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions{display: flex; width: var(--fullwidth); margin-top: 15px; flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-title{font-family:var(--fontfamilymedium); font-size: var(--fontsize20); margin-bottom:25px; border-bottom:1px solid #ddd; padding-bottom: 5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement {display: flex; width: 100%; margin-bottom: 15px; flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .question-wrapper{display: flex; width: 100%; border:1px solid #ddd; padding:15px; border-radius:5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .question-left{display: flex; width: 100%;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .question-image-wrapper{display: flex; width: 100%; display: flex; align-items: center; justify-content: center; max-width: 25%; border-left:1px solid #ddd; padding-left: 15px; margin-left: 15px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement p{background-color: #fafafb; font-family: var(--fontfamilysemibold); margin-bottom: 15px; border:1px solid #ddd; padding:5px; border-radius:5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement p span{margin-right: 5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol{display: flex; flex-direction: column; margin:0;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol li{ margin:15px 0 15px; font-size: 14px; color:#999;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol li:last-child{margin-bottom: 0;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol li span{ width: 22px; height:22px; border:1px solid #ddd; margin-right: 10px; border-radius:5px; background-color: #f7f7f7; display: inline-flex; align-items: center; justify-content: center; } .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol li label{font-weight: normal; margin-bottom: 0; display: flex; align-items: center;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol li label input[type="radio"]{margin:0 10px 0 0;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement ol li label input[type="checkbox"]{margin:0 10px 0 0;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .survey-result-block{display: flex; width: 100%; flex-direction: column; border:1px solid #ddd; padding:15px; border-radius:5px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .survey-result-block .options-wrapper{display: flex; width: 100%;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .survey-result-block .options-wrapper .options-block{display: flex; width: 100%; max-width:40%} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .survey-result-block .options-wrapper .options-block ol{display: flex; flex-direction: column; width:100%; border:0px none; padding: 0px; border-radius:0;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .survey-result-block .options-wrapper .result-block{width:40%; margin-left: 20px; border-left:1px solid #ddd;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .survey-result-block .options-wrapper .result-block .survey-chart{ width: var(--fullwidth); height:250px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating{ display: flex; width: 100%; flex-direction: row; align-items: flex-end;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating li{margin:0 0 0 40px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating li:first-child{margin-left: 0} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating li:first-child span{font-family: var(--fontfamilysemibold); display: flex; width:auto; height:auto; padding: 2px 15px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating li:last-child span{font-family: var(--fontfamilysemibold); display: flex; width:auto; height:auto; padding: 2px 15px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating li span{margin:0;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating label{display: flex; flex-direction: column;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating label span{margin-bottom: 25px;} .pageWrapper .mainContent .learningShotDetailsWrapper .survey-questions .survey-question-statement .linear-rating input[type="radio"]{margin:0;} /*learner-shot-detail end*/ /*Assignment Page Css start*/ .pageWrapper .mainContent .assignmentDetailsWrapper{display: flex; width: 100%; flex-direction: column;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper{display: flex; width: 100%; align-items: flex-start; margin-bottom:30px; justify-content: space-between;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-left{display: flex; border:0px solid var(--greyColor4); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); border-radius: var(--radius10); padding: 15px; flex-direction:column; width: 100%; flex:1;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-left p{color: var(--greyColor5); background-color: var(--greyColor3); margin:10px 0; font-size:var(--fontsize15); align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; width: 100%; padding:10px 15px; font-family: var(--defaultfont);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-left p a{width: auto;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentInfo{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentInfo .assignmentTitle{margin-bottom:0px; font-size:var(--fontsize14); padding: 0; font-family: var(--fontfamilysemibold); color: var(--blackcolor)} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentInfo .infoBlock{display: flex; align-items: center; width: var(--fullwidth); margin-top: 10px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentInfo .infoBlock .title{font-size:var(--fontsize12); font-family: var(--defaultfont); color: var(--greyColor8)} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentInfo .infoBlock .value{font-size:var(--fontsize12); font-family: var(--defaultfont); color: var(--blackColor); margin-left: 5px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentInfo .description{ margin-top: 10px; padding:0; background-color: transparent; font-size:var(--fontsize14); font-family: var(--defaultfont); color: var(--tableTh); } .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentFile{ border-top:1px solid var(--strokeColor);margin-top: 20px; padding-top: 10px; display: flex; width: var(--fullwidth); justify-content: space-between; align-items: center;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentFile span{ color:var(--primaryColor); font-family: var(--fontfamilysemibold); font-size:var(--fontsize16); text-decoration:underline;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentFile div{display: flex; align-items: center;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentFile div a{margin-left:20px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignmentFile div a:first-child{margin-left:0px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right{display: flex; background-color: var(--whitecolor);padding: 15px; width: var(--fullwidth); max-width: 325px; flex-direction:column; margin-left:30px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right {border:0px solid var(--greyColor4); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%);padding: 15px; border-radius: var(--radius10);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right h3{margin-bottom:10px; font-size:var(--fontsize14); padding: 0; font-family: var(--fontfamilysemibold); color: var(--blackColor); text-align: center;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right label{font-weight: normal; margin-bottom:10px; font-family: var(--fontfamilysemibold); font-size:var(--fontsize12); color:var(--blackcolor);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right textarea{ height:80px; resize:none;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right.review-popup{position: fixed; max-width:none; top:0; right:0; margin:0; bottom:0; left:0; background-color:rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right.review-popup .review-popup-container{padding:15px; position:relative; border-radius:5px; background-color: #fff; display: flex; width:100%; max-width: 500px; flex-direction:column; margin-left:50px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper .assignment-right.review-popup .review-popup-container .dialog-close{display: flex; align-items: flex-end; justify-content: flex-end; color:#000; font-size:18px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form{display:flex; width: 100%;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .form-group{display: flex; flex-direction: column; width: 100%} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .form-group label{font-size: var(--fontsize14); font-family: var(--fontfamilysemibold); font-weight: normal; color: var(--blackcolor);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .form-group input[type="text"] {max-width: none; height: auto; padding: 10px; line-height: inherit;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .form-group textarea {max-width: none; height: auto; padding: 10px; line-height: inherit;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .form-group input[type="file"] {max-width: none; height: auto; padding: 10px; line-height: inherit;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .form-group input[type="number"] {max-width: none; height: auto; padding: 10px; line-height: inherit;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .twiceWrapper{display: flex; width: 100%; flex-wrap: wrap;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .twiceWrapper .form-group{max-width: 50%; width: 100%;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .twiceWrapper .form-group:first-child{margin-left: 0;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .twiceWrapper .form-group:last-child{margin-left: 20px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .dynamicFields{display: flex; flex-wrap: wrap; width: 100%;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .dynamicFields .twiceWrapper{display: flex; max-width: 50%; width: 100%;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .dynamicFields .twiceWrapper .form-group{ margin-left: 0; max-width: none} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .dynamicFields .twiceWrapper:nth-child(even) .form-group{ margin-left: 20px; } .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .card-footer{display: flex; width: 100%; justify-content: center;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .card-footer button{width: auto;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .card-footer input[type="submit"]{width: auto;} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details{background-color: var(--whitecolor); padding: 15px; border-radius:10px; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%);} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .topHeading{display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 15px;} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details h3{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); color: var(--blackColor);} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .topHeading div{font-family: var(--defaultfont); font-size:var(--fontsize14); } .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .topHeading div span{font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .tableWrapper {display: flex; width:var(--fullwidth); flex-direction: column; margin-top:0px;} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .tableWrapper table{width:var(--fullwidth); border:0px none; margin-top: 0;} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .tableWrapper table th{color:var(--tableTh); padding: 15px; font-family: var(--defaultfont); font-size: var(--fontsize14);} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .tableWrapper table td a{color: var(--blueColor);} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .tableWrapper table td{vertical-align: top; padding: 15px; border: 1px solid var(--strokeColor); border-bottom:0px none; border-left:0px none; border-right:0px none;font-family: var(--defaultfont); font-size: var(--fontsize12); color:var(--blackCololor);} .pageWrapper .mainContent .assignmentDetailsWrapper .submission-details .tableWrapper table td .Submitted{color:var(--lightRedColor);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .submission-details{margin-top: 30px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .assignment-left .descWrapper{display: flex; width: 100%; margin-bottom: 15px; background-color: #efecec; padding: 20px; flex-direction: column; border-radius: 15px; font-size: 16px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .assignment-left .desc{display: flex; width: 100%; font-size: 16px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .assignment-left .date{display: flex; width: 100%; font-size: 16px; margin-top: 15px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .assignment-left .date span{margin:0 10px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .assignment-left .date div{ padding: 5px 10px; background-color: #ff9f9f; border-radius:5px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .submission-details h3{margin-bottom: 15px; font-size: 20px;} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .submission-details table{width:var(--fullwidth); font-family: var(--defaultfont);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .submission-details th{padding:10px; font-family: var(--defaultfont); font-size: var(--fontsize14); color: var(--blackcolor);} .pageWrapper .mainContent .assignmentDetailsWrapper .assignment-wrapper.newDesign form .submission-details td{padding:10px; font-family: var(--defaultfont); font-size: var(--fontsize14); border:1px solid var(--strokeColor); color: var(--blackcolor);} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper{display: flex; width:var(--fullwidth); flex-direction: column;padding:15px; background-color: #efecec;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFieldsSection{padding:15px; background-color: #fff;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFieldsWrapper{display: flex; flex-direction: column; background-color: #fff; padding: 15px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .title{background-color: #efecec; padding:10px; margin-bottom: 15px; font-size: 16px; font-weight:700; text-align: center; border-radius: 5px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .inputblok{display:flex; margin:15px auto;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .inputblokContent{display:flex; margin-bottom: 20px; flex-direction: column; width:100%; font-size: 16px; color:#000; text-align: center;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .inputblokContent p{margin:5px 0; padding:0; font-weight:700; justify-content: center; background-color:transparent; color:#000; text-align: center} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .inputblok input{ padding:5px 15px; background-color: transparent; border-radius:0; min-width:400px; border:0px none; border-bottom:2px dashed #000;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .noteTEXT{font-size: 13px; color:#999;margin:15px 0; } .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields{align-items: center; margin-top: 15px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields span{min-width: 250px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields span{min-width: 250px; max-width: 250px; } .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .card-footer{margin-top: 15px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields span + span{min-width:inherit; flex-direction: column; display: flex;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields span + span input[type="text"]{margin-bottom: 15px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields div{display: flex; align-items: center; font-size: var(--fontsize14);} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields .repeatBlock{display: flex; flex-grow: 1; flex-direction: column; align-items: center; font-size: var(--fontsize14);} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields .repeatBlock .addMoreAction{margin-left: 10px;} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields .repeatBlock div{flex: 1; width: 100%} .pageWrapper .mainContent .assignmentDetailsWrapper .dynamicFieldsWrapper .dynamicFields div input[type="checkbox"]{margin: 0 5px 0 0;} /*Assignment Page Css ends*/ /*Video Dialog css Start From here*/ .videoDialogWrapper.open{display: flex;} .videoDialogWrapper{position:fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 22000000;} .videoDialogWrapper .videoDialogContainer{background-color: var(--blackcolor); position: relative; width: var(--fullwidth); max-width: 900px; display: flex; border-radius:var(--radius15);} .videoDialogWrapper .videoDialogContainer .videoDialogClose{position: absolute; top: -10px; right: -10px} .videoDialogWrapper .videoDialogContainer .videoDialogClose a{width: 30px; height: 30px; color: var(--blackcolor); font-size:var(--fontsize18); border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .videoDialogWrapper .videoDialogContainer .videoContent{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); max-width: 50%;} .videoDialogWrapper .videoDialogContainer .videoSlider{display: flex; flex-direction: column; padding:0px; width: var(--fullwidth); max-width:50%;} .videoDialogWrapper .videoDialogContainer .videoSlider video{height: var(--fullheight);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentTop{display: flex; border-radius:var(--radius15); width: var(--fullwidth); flex-direction: column; background-color: var(--blackcolor); padding: 10px;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentTop h5{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 5px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentTop p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--defaultfont);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle h5{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor); font-family: var(--fontfamilysemibold);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor); font-family: var(--defaultfont);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle ol{display: flex; flex-direction: column; width: var(--fullwidth);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle ol li{display: flex; flex-direction: column; width: var(--fullwidth); padding: 15px 0; border-top: 1px solid var(--greyColor5)} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle ol li:last-child{padding-bottom: 0;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle ol li .commentInfo{display: flex; width: var(--fullwidth); margin-bottom: 10px; color: var(--whitecolor); align-items: center;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle ol li .commentInfo img{max-width: 20px; margin-right: 10px; border-radius: var(--radius100);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle ol li .commentInfo span{font-size:var(--fontsize12); color: var(--greyColor); margin-left: 10px;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentMiddle{display: flex; width: var(--fullwidth); flex-direction: column; background-color: var(--lightBlackColor); padding: 15px;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom{display: flex; border-radius:var(--radius15); width: var(--fullwidth); background-color: var(--blackcolor); padding: 15px;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom .commentSection{display: flex; align-items: center; width: var(--fullwidth); } .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom .commentInputBlock{display: flex; align-items: center; width: var(--fullwidth); } .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom .commentSendBtn{display: flex; align-items: center; margin-left: 15px;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom .commentSendBtn a{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius100); background-color: var(--whitecolor);} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom .commentSendBtn a img{max-width: 20px;} .videoDialogWrapper .videoDialogContainer .videoContent .videoConentBottom .commentInputBlock input[type="text"]{font-size:var(--fontsize14); color: var(--whitecolor); border-radius: var(--radius15); padding:8px 15px; border: 0px none; background-color: var(--lightBlackColor);} /*Video Dialog css Start From here*/ /*programSubscription page css start from here*/ .pageWrapper .mainContent .programSubscriptionWrapper {display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .programSubscriptionWrapper .learnerBreadcrumbWrapper{display: flex; width: var(--fullWidth); color: var(--blackcolor); margin-bottom:20px; font-size: var(--fontsize14);} .pageWrapper .mainContent .programSubscriptionWrapper .learnerBreadcrumbWrapper a{color: var(--greyColor); font-size: var(--fontsize14); margin-right:0px;} .pageWrapper .mainContent .programSubscriptionWrapper .learnerBreadcrumbWrapper a:after {padding:0 8px; color: var(--blackcolor); content: "/\00a0";} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper h3{font-size:var(--fontsize25); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper h4{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock{display: flex; align-items: center; margin-bottom: 10px;} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock div:first-child{display: flex; align-items: center;} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock div:last-child{display: flex; align-items: center; margin-left: 10px; font-size:var(--fontsize12); color: var(--blackcolor);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock div:last-child b{font-weight:700; margin-right: 5px; font-size:var(--fontsize12); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock i{font-size:var(--fontsize12); display: flex; text-align: var(--textLeft); margin-left: 5px; color: var(--secondaryColor);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock i:first-child{margin-left: 0;} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .ratingBlock span{color: var(--secondaryColor); font-size:var(--fontsize12); font-family: var(--fontfamilysemibold); margin-left: 5px;} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .coinBlock{display: flex; margin-bottom: 10px; align-items: center; font-size:var(--fontsize12); color: var(--greyColor6);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .coinBlock img{margin-right: 5px; max-width: 14px;} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .coinBlock b{font-weight:700; margin-right: 5px; font-size:var(--fontsize12); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .durationBlock{display: flex; margin-bottom: 20px; align-items: center; font-size:var(--fontsize12); color: var(--greyColor6); font-family: var(--defaultfont); } .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .durationBlock i{margin-right: 5px; color: var(--secondaryColor);} .pageWrapper .mainContent .programSubscriptionWrapper .detailsWrapper .durationBlock b{font-weight:700; margin-right: 5px; font-size:var(--fontsize12); color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .pageWrapper .mainContent .programSubscriptionWrapper .curriculumBlock{display: flex; width: var(--fullwidth); flex-direction: column;} .pageWrapper .mainContent .programSubscriptionWrapper .curriculumBlock ul{display: flex; align-items: center; margin: 0; padding: 0;} .pageWrapper .mainContent .programSubscriptionWrapper .curriculumBlock ul li{display: list-item; align-items: center; margin: 0; padding: 0; list-style-type: disc; list-style-position: inside; margin-left: 10px; font-size:var(--fontsize13); color: var(--blackcolor); font-family: var(--defaultfont);} .pageWrapper .mainContent .programSubscriptionWrapper .curriculumBlock ul li:first-child{margin-left: 0;} .pageWrapper .mainContent .programSubscriptionWrapper .curriculumBlock ul li:first-child::marker{content: '';} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper{display: flex; width: var(--fullwidth); margin-top: 30px;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock {display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .accordion{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%);display: flex; position: relative; cursor: pointer; background-color: var(--whitecolor); padding: 15px; border-radius:var(--radius10); flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .accordion p{margin-bottom: 0;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .accordion:after{content: '\02795'; position: absolute; right: 10px; top: 50%; margin-top: -10px;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .accordion.active:after{content: "\2796";} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .accordion.active {border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); border-top: 1px solid var(--greyColor4); padding: 15px; flex-direction: column; border-radius:var(--radius10); border-top-left-radius: 0px; border-top-right-radius: 0px; width: var(--fullwidth); display: flex; display: none;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol{display: flex; flex-direction: column; width: var(--fullwidth);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li{display: flex; align-items: center; width: var(--fullwidth); margin-bottom: 20px;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbol{display: flex; margin-right: 10px; flex-shrink: 0;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbol i{color: var(--greyColor2)} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbol.completed i{color: var(--greenColor)} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbol.red i{color: var(--lightRedColor)} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbolContent{display: flex; flex-direction: column; flex: 1} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbolContent p{font-size:var(--fontsize12); display: flex; align-items: center; margin-bottom: 0; text-align: var(--textLeft); color: var(--greyColor5); font-family: var(--defaultfont);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .symbolContent p span{margin: 0 4px;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .progrssBar{display: flex; margin-top: 10px; width: var(--fullwidth); max-width: 300px; height: 7px; background-color: var(--greyColor4); border-radius: var(--radius10);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .panel ol li .progrssBar span{background-color: var(--secondaryColor); border-radius: var(--radius10);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .notificationBell{display: flex; align-items: center; position: absolute; right: 20%; top: 50%; margin-top: -15px;} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .notificationBell a{ display: flex; align-items: center; position: relative; justify-content: center; background-color: var(--greyColor3); width: 29px; height:29px; border-radius:var(--radius100);} .pageWrapper .mainContent .programSubscriptionWrapper .accordianWrapper .accordianBlock .notificationBell a i{color: var(--lightRedColor); font-size:var(--fontsize14); transform: rotate(24deg);} .pageWrapper .mainContent .programSubscriptionWrapper .certificateWrapper{display: flex; width: var(--fullwidth); flex-direction: column; margin-top: 30px;} .pageWrapper .mainContent .programSubscriptionWrapper .certificateWrapper .certificateBlock{display: flex; width: var(--fullwidth); margin-top: 20px;} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper{display: flex; width: var(--fullwidth); flex-direction: column; margin-top: 30px;} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper h4{margin-bottom:0px;} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsBlock{display: flex; width: var(--fullwidth);} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsMain{display: flex; width: var(--fullwidth); flex-direction: column; margin-top: 30px;} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsMain:first-child{margin-top: 0;} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsMain .instructorsThumb{width: 60px; height: 60px; margin-right: 15px; border-radius: var(--radius100)} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsMain .instructorsThumb img{width: 60px; height: 60px; border-radius: var(--radius100)} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsMain .instructorsContent{display: flex; flex-direction: column; flex: 1} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper .instructorsMain .instructorsContent p{font-size:var(--fontsize12); display: flex; margin-top:0px;align-items: center; margin-bottom: 0; text-align: var(--textLeft); color: var(--greyColor5); font-family: var(--defaultfont);} .pageWrapper .mainContent .programSubscriptionWrapper .instructorsWrapper p{font-size:var(--fontsize14); color: var(--blackcolor); margin-bottom: 0; margin-top: 20px;} /*programSubscription page css ends here*/ .confirmationDialog.open{display: flex;} .confirmationDialog{position:fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 22000000;} .confirmationDialog .confirmationDialogContainer{background-color: var(--whitecolor); flex-direction: column; position: relative; width: var(--fullwidth); max-width:400px; padding: 15px; display: flex; border-radius:var(--radius10);} .confirmationDialog .confirmationDialogContainer .dialogClose{position: absolute; top: -10px; right: -10px} .confirmationDialog .confirmationDialogContainer .dialogClose a{box-shadow: 0 0 0 2px #000; width:26px; height: 26px; color: var(--blackcolor); font-size:var(--fontsize18); border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .confirmationDialog .confirmationDialogContainer .dialogContent{display: flex; flex-direction: column; padding:0px; min-height: 50px; justify-content: center; width: var(--fullwidth); color: var(--greyColor5); text-align: center; } .confirmationDialog h5{font-size:var(--fontsize16); border-bottom: 1px solid var(--greyColor4); padding-bottom: 5px; text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .confirmationDialog .confirmationDialogContainer .dialogActions {display: flex; border-top: 1px solid var(--greyColor4); padding-top: 8px; margin-top: 20px; align-items: center; justify-content: center; width: var(--fullwidth);} .confirmationDialog .confirmationDialogContainer .dialogActions a{width: auto; margin-left:0px; padding: 5px 25px;} /*Create Dashboard Css*/ .createDashboardWrapper{display: flex; width:var(--fullwidth); flex-direction: column; background-color: var(--whitecolor); max-width: 1180px; margin: 0 auto;} .createDashboardWrapper .userInfoWrapper{display: flex; justify-content: space-between; align-items: center; width:var(--fullwidth);} .createDashboardWrapper .userInfoWrapper h2{font-size:var(--fontsize36); text-align: var(--textLeft); margin-bottom: 15px; color: var(--newHeadingColor); font-family: var(--fontfamilysemibold);} .createDashboardWrapper .userInfoWrapper p{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom: 15px; color: var(--newTextColor); font-family: var(--defaultfont);} .createDashboardWrapper .modulesWrapper{display: flex; width:var(--fullwidth); margin-bottom: 30px;} .createDashboardWrapper .modulesWrapper ol{display: flex; width:var(--fullwidth); flex-wrap: wrap; justify-content: space-between;} .createDashboardWrapper .modulesWrapper ol li {padding: 25px; transition: all 0.2s ease; border-radius: var(--radius20); max-width: 375px; margin: 20px 0;} .createDashboardWrapper .modulesWrapper ol li:hover a{transform: translateY(-5px);box-shadow: 0 0 5px var(--greyColor4);} .createDashboardWrapper .modulesWrapper ol li ul{margin:15px 0 0; padding: 0; min-height: 115px;} .createDashboardWrapper .modulesWrapper ol li ul li{margin:5px 0 0; padding: 0; list-style-type: disc; list-style-position: inside; display: list-item; background: none; color: var(--blackcolor); font-size: var(--fontsize14);} .createDashboardWrapper .modulesWrapper ol li p{color: #273454; min-height: 78px; font-size:var(--fontsize14); line-height: 26px;} .createDashboardWrapper .modulesWrapper ol li .actions{display: flex; align-items: center; justify-content: flex-end;} .createDashboardWrapper .modulesWrapper ol li .actions a{width: 44px; transition: all 0.2s ease; display: flex; height: 44px; color: var(--whitecolor); font-size: var(--fontsize18); border-radius: var(--radius10); display: flex; align-items: center; justify-content: center;} .createDashboardWrapper .modulesWrapper ol li .actions a i{margin-right: 0;} .createDashboardWrapper .modulesWrapper ol li i{width: 44px;font-size: var(--fontsize20); color: var(--whitecolor); height: 44px; border-radius: var(--radius10); margin-right: 15px; display: flex; align-items: center; justify-content: center;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(1){background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #F0E8FC;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(1) i{background-color: #673AC4;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(1) .heading{display: flex; align-items: center; font-size:var(--fontsize18); color: #673AC4; font-family: var(--fontfamilysemibold); margin-bottom: 20px;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(2){background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #DAEDFF;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(2) i{background-color: #42A3FD;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(2) .heading{display: flex; align-items: center; font-size:var(--fontsize18); color: #42A3FD; font-family: var(--fontfamilysemibold); margin-bottom: 20px;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(3){background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #FFD9E2;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(3) i{background-color: #BF56A5;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(3) .heading{display: flex; align-items: center; font-size:var(--fontsize18); color: #BF56A5; font-family: var(--fontfamilysemibold); margin-bottom: 20px;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(4){background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #E7FBF7;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(4) i{background-color: #2C8775;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(4) .heading{display: flex; align-items: center; font-size:var(--fontsize18); color: #2C8775; font-family: var(--fontfamilysemibold); margin-bottom: 20px;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(5){background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #DCE5FF;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(5) i{background-color: #0352B7;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(5) .heading{display: flex; align-items: center; font-size:var(--fontsize18); color: #0352B7; font-family: var(--fontfamilysemibold); margin-bottom: 20px;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(6){background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #FEDCBF;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(6) i{background-color: #F46105;} .createDashboardWrapper .modulesWrapper ol > li:nth-child(6) .heading{display: flex; align-items: center; font-size:var(--fontsize18); color: #F46105; font-family: var(--fontfamilysemibold); margin-bottom: 20px;} .createDashboardWrapper .configurationsWrapper{display: flex; width:var(--fullwidth); flex-direction: column;} .createDashboardWrapper .configurationsWrapper .heading{font-size:var(--fontsize22); text-align: var(--textLeft); margin-bottom: 15px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .createDashboardWrapper .configurationsWrapper .heading i{margin-right: 10px; font-size:var(--fontsize22); color:var(--blackcolor) } .createDashboardWrapper .configurationsWrapper ol{display: flex; width:var(--fullwidth); flex-wrap: wrap; justify-content: space-between;} .createDashboardWrapper .configurationsWrapper ol li {padding: 25px; transition: all 0.2s ease; display: flex; align-items: center; flex-direction: column; border-radius: var(--radius20); max-width:270px; margin: 20px 0; background-color: #F3F2FD;} .createDashboardWrapper .configurationsWrapper ol li:hover{transform: translateY(-5px);box-shadow: 0 0 5px var(--greyColor4); } .createDashboardWrapper .configurationsWrapper ol li a{display: flex; flex-direction: column; justify-content:center; align-items: center;} .createDashboardWrapper .configurationsWrapper ol li i{width: 44px;font-size: var(--fontsize20); color: var(--whitecolor); height: 44px; border-radius: var(--radius100); margin-bottom: 15px; display: flex; align-items: center; justify-content: center; background-color: #7062E3;} .createDashboardWrapper .configurationsWrapper ol li h2{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom:5px; color: var(--newHeadingColor); font-family: var(--fontfamilysemibold);} .createDashboardWrapper .configurationsWrapper ol li p{font-size:var(--fontsize12); text-align: var(--textCenter); margin-bottom:0px; color: var(--newTextColor); font-family: var(--defaultfont);} /*Create Dashboard Css*/ /*Profile page css*/ .profileWrapper{display: flex; flex-direction: column; width:var(--fullwidth); background-color: var(--whitecolor); padding: 20px; border-radius: var(--radius10);} .profileWrapper .profileMainWrapper{display: flex; width:var(--fullwidth); flex-direction: column; align-items: flex-start; } .profileWrapper .profileMainWrapper .profileInfo {display: flex; flex-direction: column; width:var(--fullwidth);} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper{display: flex; padding: 15px; border-radius: var(--radius15); background-color: var(--extraLightBlue); flex-direction: column; width:var(--fullwidth);} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper > div{display:flex; align-items:flex-start; width:var(--fullwidth); margin-bottom: 15px;} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper > div .logo .uploadLogo{background-color: var(--greyColor4); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--blackcolor); width:80px; height: 80px; border-radius: var(--radius100)} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper > div .logo { position: relative; border: 1px solid var(--lightBlue); margin-right: 15px; flex-shrink: 0; margin-bottom: 0; width:150px; height: 150px; background-color: var(--whitecolor); border-radius: var(--radius100); display: flex; align-items: center; justify-content: center;} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper > div .logo .editUploadLink{position: absolute; right: 10px; top: 10px; box-shadow: 0 0 5px var(--greyColor4); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center; color: var(--blackcolor); width:26px; height: 26px; border-radius: var(--radius100)} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper > div .logo input[type="file"]{display: none;} .profileWrapper .profileMainWrapper .profileInfo .infoWrapper > div .logo img{border-radius: var(--radius100);} .profileWrapper .profileMainWrapper .profileInfo .logoContent{display: flex; flex-direction: column;} .profileWrapper .profileMainWrapper .profileContent{display: flex; width:var(--fullwidth); flex-direction: column; flex: 1; margin-top: 20px;} .profileWrapper .profileMainWrapper .profileInfo h4{font-size:var(--fontsize25); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .profileWrapper .profileMainWrapper .profileInfo h2{font-size:var(--fontsize26); text-align: var(--textLeft); margin-bottom:0px; color: var(--sicPrimaryColor); font-family: var(--fontfamilysemibold);} .profileWrapper .profileMainWrapper .profileInfo .socialIcons{display: flex; margin-top: 15px; width:var(--fullwidth); flex-direction: row;} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol{display: flex; width:var(--fullwidth); justify-content: center;} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol li{font-size:var(--fontsize22); width: 45px; height: 45px; border: 1px solid var(--lightBlue); margin-left: 15px; border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol li:first-child{margin-left: 0;} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol li .fa-twitter-square{color: #56CCF2} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol li .fa-facebook-official{color: #2E5BA6} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol li .fa-youtube-play{color: #EB5757} .profileWrapper .profileMainWrapper .profileInfo .socialIcons ol li .fa-instagram{color: #8a3ab9} .profileWrapper .profileMainWrapper .blockWrapper{display: flex; width:var(--fullwidth); flex-direction: column; border: 1px solid var(--greyColor4); padding: 15px; border-radius: var(--radius15)} .profileWrapper .profileMainWrapper .blockWrapper ol li{display: flex; width:var(--fullwidth); font-size:var(--fontsize16); color: var(--blackcolor);} .profileWrapper .profileMainWrapper .blockWrapper h2{font-size:var(--fontsize20); text-align: var(--textLeft); margin-bottom:10px; color: var(--sicPrimaryColor); font-family: var(--fontfamilysemibold);} .profileWrapper .profileMainWrapper .blockWrapper h2 i{margin-right: 10px;} .profileWrapper .profileMainWrapper .blockWrapper ol{display: flex; width:var(--fullwidth); flex-direction: column;} .profileWrapper .profileMainWrapper .blockWrapper ol li{display: flex; padding: 10px; border-top: 1px solid var(--lightBlue); width:var(--fullwidth); font-size:var(--fontsize16); color: var(--blackcolor);} .profileWrapper .profileMainWrapper .blockWrapper ol li span{font-weight: 700; font-family: var(--fontfamilysemibold); margin-left: 10px;} .profileWrapper .profileMainWrapper .blockWrapper ol li i{min-width:300px; font-style: normal;} .profileWrapper .profileMainWrapper .topActions{display: flex; align-items: center; margin-bottom: 15px; justify-content: flex-end; width:var(--fullwidth);} .profileWrapper .profileMainWrapper .topActions a{display: flex; align-items: center; color: var(--sicPrimaryColor); } .profileWrapper .profileMainWrapper .topActions a i{margin-right: 5px;} .profileWrapper .profileMainWrapper .buttonActions{display: flex; align-items: center; margin-top: 15px; justify-content: center; width:var(--fullwidth);} .profileWrapper .profileMainWrapper .buttonActions a{display: flex; align-items: center; padding: 5px 15px; color: var(--whitecolor); width: auto; margin-left: 15px;} .profileWrapper .profileMainWrapper .buttonActions a:first-child{margin-left: 0;} .profileWrapper .profileMainWrapper .buttonActions a:hover{display: flex; align-items: center; color: var(--primaryColor); width: auto;} .profileWrapper .profileMainWrapper .profileContent .actions{display: flex; align-items: center; margin-bottom: 15px; justify-content: flex-end; width:var(--fullwidth);} .profileWrapper .profileMainWrapper .profileContent .actions a{display: flex; align-items: center; color: var(--sicPrimaryColor); } .profileWrapper .profileMainWrapper .profileContent .actions a i{margin-right: 5px;} .profileWrapper .profileMainWrapper .profileInfo .actions{display: flex; margin-top: 15px;} .profileWrapper .profileMainWrapper .profileInfo .actions i{margin-right:5px; text-decoration: none;} .profileWrapper .profileMainWrapper .profileInfo .actions a{text-decoration: underline;} .profileWrapper .profileMainWrapper .profileInfo .actions a:hover{text-decoration: none;} .profileWrapper .profileInfo{display: flex; width:var(--fullwidth); justify-content: space-between; align-items: center;} .profileWrapper .profileInfo > div{display: flex; align-items: center;} .profileWrapper .profileInfo > div .logo{margin-right: 10px;} .profileWrapper .profileInfo h4{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .profileWrapper .profileInfo h2{font-size:var(--fontsize24); text-align: var(--textLeft); margin-bottom:5px; color: var(--sicPrimaryColor); font-family: var(--fontfamilysemibold);} .profileWrapper .profileInfo .actions{display: flex; align-items: center;} .profileWrapper .profileInfo .actions a{display: flex; align-items: center; color: var(--sicPrimaryColor); } .profileWrapper .profileInfo .actions a i{margin-right: 5px;} .profileWrapper .profileContent{display: flex; width:var(--fullwidth);} .profileWrapper .profileContent .profileLeft{display: flex; width:var(--fullwidth); flex-direction: column; max-width: 65%;} .profileWrapper .profileContent .profileLeft ol{display: flex; width:var(--fullwidth); flex-direction: column;} .profileWrapper .profileContent .profileLeft ol li{display: flex; align-items: center; width:var(--fullwidth); margin-top: 25px; font-size:var(--fontsize16); color: var(--blackcolor);} .profileWrapper .profileContent .profileLeft ol li span{font-weight: 700; font-family: var(--fontfamilysemibold); margin-left: 10px;} .profileWrapper .profileContent .socialIcons{display: flex; margin-top: 20px; width:var(--fullwidth); flex-direction: column;} .profileWrapper .profileContent .socialIcons i{margin-right: 10px;} .profileWrapper .profileContent .socialIcons a{color: var(--sicPrimaryColor); font-size:var(--fontsize16);} .profileWrapper .profileContent .socialIcons .fa-twitter-square{color: #56CCF2} .profileWrapper .profileContent .socialIcons .fa-facebook-official{color: #2E5BA6} .profileWrapper .profileContent .socialIcons .fa-youtube-play{color: #EB5757} .profileWrapper .profileContent .socialIcons .fa-instagram{color: #8a3ab9} .profileWrapper .profileContent .socialIcons .fa-linkedin-square{color: #0077b5} .profileWrapper .profileContent .profileRight{display: flex; width:var(--fullwidth); flex-direction: column; max-width: 35%; margin-top: 40px;} .profileWrapper .profileContent .profileRight h4{font-size:var(--fontsize16); text-align: center; margin-bottom:5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .profileWrapper .profileContent .profileRight img{max-width: 100%;} .profileWrapper .profileContent .profileRight .downloadBlock{display: flex; width:var(--fullwidth); justify-content: flex-end; margin-top: 10px;} .profileWrapper .profileContent .profileRight .downloadBlock a{background-color: var(--sicPrimaryColor); color: var(--whitecolor); padding:5px 10px; border-radius: var(--radius5)} .profileWrapper .profileContent .profileRight .downloadBlock a i{margin-right: 5px;} /*Profile page css*/ /*Contact us page css*/ .contactusWrapper .heading{display: flex; width:var(--fullwidth); justify-content: space-between; align-items: center;} .contactusWrapper .heading h4{font-size:var(--fontsize18); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackcolor); font-family: var(--fontfamilysemibold);} .contactusWrapper .heading span{font-size:var(--fontsize14); color: var(--blackcolor)} .contactusWrapper .contactDetailWrapper{display: flex; width: 100%; margin-top: 20px; padding: 15px; background-color:#fff; border-radius:15px} .contactusWrapper .contactDetailWrapper table{width: 100%; border-collapse: collapse;} .contactusWrapper .contactDetailWrapper table th{font-size:16px; background-color: #f1aa00; font-family: robotomedium; color:#fff; padding: 10px;} .contactusWrapper .contactDetailWrapper table td{line-height: 24px; font-size:14px; background-color: #f6f9ff; border: 1px solid #eaeaea; color: #000 ;padding: 10px;} /*Contact us page css*/ /*Council Page*/ .sicCouncilWrapper{display: flex; width: var(--fullwidth); font-family: roboto; flex-direction: column;} .sicCouncilWrapper .councilHeadingWrapper{display: flex; align-items: center; width: var(--fullwidth); margin-bottom: 20px; justify-content: space-between;} .sicCouncilWrapper .councilHeadingWrapper h3{font-size:var(--fontsize20); display: flex; justify-content: space-between; text-align: var(--textLeft); margin-bottom:10px; color: var(--blackcolor); font-family: roboto;} .sicCouncilWrapper .councilHeadingWrapper p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackcolor); font-family: roboto;} .sicCouncilWrapper .councilHeadingWrapper div:last-child{font-size:var(--fontsize14); color: var(--blackcolor);} .sicCouncilWrapper .sicCouncilMainWrapper {padding:25px; background-color: var(--whitecolor); border-radius: var(--radius10);} .sicCouncilWrapper .councilTabsWrapper{display: flex; width: var(--fullwidth); margin-bottom: 20px; border-bottom: 1px solid var(--greyColor4); } .sicCouncilWrapper .councilTabsWrapper ol{display: flex; width: var(--fullwidth);} .sicCouncilWrapper .councilTabsWrapper ol li{display: flex; flex-direction: column; align-items: center; margin-left:50px;} .sicCouncilWrapper .councilTabsWrapper ol li:first-child{margin-left: 0;} .sicCouncilWrapper .councilTabsWrapper ol li a{color: var(--greyColor5); padding-bottom: 5px; font-size:var(--fontsize16); border-bottom: 4px solid transparent;} .sicCouncilWrapper .councilTabsWrapper ol li a:hover{color: var(--blackcolor); font-size:var(--fontsize16); border-bottom: 4px solid var(--sicPrimaryColor);} .sicCouncilWrapper .councilTabsWrapper ol li a.active{color: var(--blackcolor); font-size:var(--fontsize16); border-bottom: 4px solid var(--sicPrimaryColor);} .sicCouncilWrapper .councilTableWrapper{padding: 15px; background-color: var(--sicTableBGColor); border-radius: var(--radius10); margin-bottom: 30px;} .sicCouncilWrapper .councilTableWrapper:last-child{margin-bottom: 0;} .sicCouncilWrapper .tableHeadingWrapper{display: flex; margin-bottom:30px; width: var(--fullwidth); align-items: center; justify-content: space-between;} .sicCouncilWrapper .tableHeadingWrapper h3{font-size:var(--fontsize16); display: flex; justify-content: space-between; text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: roboto;} .sicCouncilWrapper .tableHeadingWrapper div{display: flex; align-items: center; justify-content: center;} .sicCouncilWrapper .tableHeadingWrapper div .searchWrapper{display: flex; align-items: center; margin-right: 20px;} .sicCouncilWrapper .tableHeadingWrapper div .searchWrapper input[type="search"]{background-color:transparent; border: 0px none; border-radius: 0px; border-bottom: 2px solid var(--blackcolor);} .sicCouncilWrapper .councilTableWrapper table{width: var(--fullwidth);} .sicCouncilWrapper .councilTableWrapper table th{font-size:var(--fontsize14); max-width: 300px; font-family: var(--fontfamilymedium); color: var(--blackcolor);padding: 10px;} .sicCouncilWrapper .councilTableWrapper table td{font-size:var(--fontsize14); max-width: 300px; border-top: 1px solid var(--greyColor); font-family: var(--defaultfont); color: var(--blackcolor);padding: 10px;} .sicCouncilWrapper .councilTableWrapper table .tableActions{display: flex; align-items: center;} .sicCouncilWrapper .councilTableWrapper table .tableActions a{display: flex; align-items: center; margin-left:10px;} .sicCouncilWrapper .councilTableWrapper table .tableActions a:first-child{margin-left:0px; color: var(--sicPrimaryColor); font-size:var(--fontsize18); } .sicCouncilWrapper .councilTableWrapper table .tableActions a:last-child{ color: var(--lightRedColor)} .sicCouncilWrapper .councilTableWrapper table .tableActions button{ color: var(--lightRedColor); background-color: transparent; bordeR: 0px none; font-size:var(--fontsize18); margin-left:10px;} .sicCouncilWrapper .councilTableWrapper table.dataTable{width: var(--fullwidth); margin:15px 0;} .sicCouncilWrapper .councilTableWrapper table.dataTable th{border: 0px none;} .sicCouncilWrapper .councilTableWrapper table.dataTable th{font-size:var(--fontsize14); max-width: 300px; font-family: var(--fontfamilymedium); color: var(--blackcolor);padding: 10px;} .sicCouncilWrapper .councilTableWrapper table.dataTable td{font-size:var(--fontsize14); max-width: 300px; border-top: 1px solid var(--greyColor); font-family: var(--defaultfont); color: var(--blackcolor);padding: 10px;} .sicCouncilWrapper .councilTableWrapper .dataTables_wrapper .dataTables_filter label{display:flex; align-items: center;} .sicCouncilWrapper .councilTableWrapper .dataTables_wrapper .dataTables_length select{max-width: none; width: auto; margin: 0 10px;} .sicCouncilWrapper .councilTableWrapper .dataTables_wrapper .dataTables_length label{display:flex; align-items: center;} .sicCouncilWrapper .councilTableWrapper .dataTables_wrapper .dataTables_filter label input[type="search"]{ background-position: right 6px center; max-width: none; width: auto; margin: 0 10px;} .sicCouncilWrapper .councilTableWrapper .dataTables_paginate .paginate_button.current{background-color: var(--primaryColor); padding: 2px 10px; border: 0px none; color:var(--whitecolor)!important} .sicCouncilWrapper .councilTableWrapper .dataTables_paginate .paginate_button{background-color: var(--primaryColor); padding: 2px 10px; border: 0px none; color:var(--whitecolor)!important} .sicCouncilWrapper .councilTableWrapper .dataTables_paginate .paginate_button:hover{background-color: var(--primaryColor); padding: 2px 10px; border: 0px none; color:var(--whitecolor)!important} .sicCouncilWrapper .councilTableWrapper .dataTables_paginate .paginate_button.current:hover{background-color: var(--primaryColor); padding: 2px 10px; border: 0px none; color:var(--whitecolor)!important} /*Council Page*/ /*Executive Dialog*/ .executiveDialogWrapper.version2.open{display: flex;} .executiveDialogWrapper.version1.open{display: flex;} .executiveDialogWrapper{position: fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(0,0,0,0.7); z-index: 2200000; font-family: roboto; } .executiveDialogWrapper .executiveContainer{background-color:var(--whitecolor); max-width: 700px; width: var(--fullwidth); position: relative; padding: 20px; border-radius: var(--radius20);} .executiveDialogWrapper .executiveContainer .dialogClose{position: absolute; right: -10px; top: -10px;} .executiveDialogWrapper .executiveContainer .dialogClose a{color: var(--blackcolor); font-size: var(--fontsize22); display: flex; align-items: center; justify-content: center; background-color: var(--whitecolor); width: 30px; height: 30px; border-radius: var(--radius100);} .executiveDialogWrapper .executiveContainer h2{font-size: var(--fontsize20); color: var(--blackcolor); text-align: center; margin-bottom:20px; border-bottom: 1px solid var(--greyColor4); padding-bottom: 10px; font-family:robotomedium;} .executiveDialogWrapper .executiveContainer .formWrapper{display: flex; width: var(--fullwidth); margin-bottom: 30px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock{display: flex; position: relative; width: var(--fullwidth); flex-direction: column; margin-left: 20px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock:first-child{ margin-left:0px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock label{position: absolute; transform: translate(0, -38%); margin: 0;padding: 0 0px; transition: all 0.2s ease; top: 0; bottom: 0; left: 0; padding: 6px 10px; font-weight: normal; pointer-events: none;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock label .text{color: var(--greyColor5); padding: 0 2px; background-color: var(--whitecolor); color: var(--greyColor5);} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock input[type="text"]{max-width: 350px; padding: 10px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock input[type="number"]{max-width: 350px; padding: 10px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock .designationInput{max-width: 350px; padding: 10px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock .designationInput:hover::-webkit-calendar-picker-indicator {-webkit-appearance: none; display: none!important;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock .designationInput:focus::-webkit-calendar-picker-indicator {-webkit-appearance: none; display: none!important;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock input:focus + label{transform: translate(0, -38%);} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock input:focus + label .text{background-color: var(--whitecolor); color: var(--greyColor5);} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock input[type="email"]{max-width: 350px; padding: 10px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock input[type="tel"]{max-width: 350px; padding: 10px;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock select{max-width: 350px; padding: 10px;} .executiveDialogWrapper .executiveContainer .formWrapper .forgotPassword{display: flex; justify-content: flex-end;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock .errorMsg{color: var(--redColor); margin-top: 5px; display: none;} .executiveDialogWrapper .executiveContainer .formWrapper .formBlock .errorMsg.show{display: flex;} .executiveDialogWrapper .executiveContainer .formActions{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 10px; justify-content: center; width: 100%; margin-top: 20px;} .executiveDialogWrapper .executiveContainer .formActions a:last-child{background:var(--sicPrimaryColor); color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} .executiveDialogWrapper .executiveContainer .formActions a:first-child{color:var(--sicPrimaryColor); text-decoration: underline; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius: 10px; padding:0px; margin-right: 20px;} .executiveDialogWrapper .executiveContainer .formActions a:first-child:hover{text-decoration: none;} .executiveDialogWrapper .executiveContainer .formActions button{background:var(--sicPrimaryColor); border: 0px none; color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} /*Executive Dialog*/ /*Teaching Dialog*/ .teachingDialogWrapper.open{display: flex;} .teachingDialogWrapper{position: fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(0,0,0,0.7); z-index: 2200000; font-family: roboto; } .teachingDialogWrapper .teachingContainer{background-color:var(--whitecolor); max-width: 700px; width: var(--fullwidth); position: relative; padding: 20px; border-radius: var(--radius20);} .teachingDialogWrapper .teachingContainer .dialogClose{position: absolute; right: -10px; top: -10px;} .teachingDialogWrapper .teachingContainer .dialogClose a{color: var(--blackcolor); font-size: var(--fontsize22); display: flex; align-items: center; justify-content: center; background-color: var(--whitecolor); width: 30px; height: 30px; border-radius: var(--radius100);} .teachingDialogWrapper .teachingContainer h2{font-size: var(--fontsize20); color: var(--blackcolor); text-align: center; margin-bottom:20px; border-bottom: 1px solid var(--greyColor4); padding-bottom: 10px; font-family:robotomedium;} .teachingDialogWrapper .teachingContainer .formWrapper{display: flex; width: var(--fullwidth); margin-bottom: 30px;} .teachingDialogWrapper .teachingContainer h2 + .formWrapper .formBlock select{max-width: none;} .teachingDialogWrapper .teachingContainer .formWrapper.last .formBlock select{max-width: none;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock{display: flex; position: relative; width: var(--fullwidth); flex-direction: column; margin-left: 20px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock:first-child{ margin-left:0px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown{width: 100%;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown-toggle{padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown-toggle.active{background-color: transparent;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown-toggle:active{background-color: transparent;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown-toggle.btn-default{background-color: transparent;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown-toggle:focus{background-color: transparent;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .dropdown-toggle:hover{background-color: transparent;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock label{position: absolute; transform: translate(0, -38%); margin: 0;padding: 0 0px; transition: all 0.2s ease; top: 0; bottom: 0; left: 0; padding: 6px 10px; font-weight: normal; pointer-events: none;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock label .text{color: var(--greyColor5); padding: 0 2px; background-color: var(--whitecolor); color: var(--greyColor5);} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock input[type="text"]{max-width: 350px; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock input[type="number"]{max-width: 350px; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .designationInput{max-width: 350px; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .designationInput:hover::-webkit-calendar-picker-indicator {-webkit-appearance: none; display: none!important;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .designationInput:focus::-webkit-calendar-picker-indicator {-webkit-appearance: none; display: none!important;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock input:focus + label{transform: translate(0, -38%);} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock input:focus + label .text{background-color: var(--whitecolor); color: var(--greyColor5);} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock input[type="email"]{max-width: 350px; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock input[type="tel"]{max-width: 350px; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock select{max-width: 350px; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock.fullWidth select{max-width: none; padding: 10px;} .teachingDialogWrapper .teachingContainer .formWrapper .forgotPassword{display: flex; justify-content: flex-end;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .errorMsg{color: var(--redColor); margin-top: 5px; display: none;} .teachingDialogWrapper .teachingContainer .formWrapper .formBlock .errorMsg.show{display: flex;} .teachingDialogWrapper .teachingContainer .formActions{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 10px; justify-content: center; width: 100%; margin-top: 20px;} .teachingDialogWrapper .teachingContainer .formActions a{background:var(--sicPrimaryColor); color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} .teachingDialogWrapper .teachingContainer .formActions button{background:var(--sicPrimaryColor); border: 0px none; color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} /*Teaching Dialog*/ /*Student Dialog*/ .studentDialogWrapper.open{display: flex;} .studentDialogWrapper{position: fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(0,0,0,0.7); z-index: 2200000; font-family: roboto; } .studentDialogWrapper .studentContainer{background-color:var(--whitecolor); max-width: 700px; width: var(--fullwidth); position: relative; padding: 20px; border-radius: var(--radius20);} .studentDialogWrapper .studentContainer .dialogClose{position: absolute; right: -10px; top: -10px;} .studentDialogWrapper .studentContainer .dialogClose a{color: var(--blackcolor); font-size: var(--fontsize22); display: flex; align-items: center; justify-content: center; background-color: var(--whitecolor); width: 30px; height: 30px; border-radius: var(--radius100);} .studentDialogWrapper .studentContainer h2{font-size: var(--fontsize20); color: var(--blackcolor); text-align: center; margin-bottom:20px; border-bottom: 1px solid var(--greyColor4); padding-bottom: 10px; font-family:robotomedium;} .studentDialogWrapper .studentContainer .formWrapper{display: flex; width: var(--fullwidth); margin-bottom: 30px;} .studentDialogWrapper .studentContainer h2 + .mainWrapper .formWrapper .formBlock select{max-width: none;} .studentDialogWrapper .studentContainer .formWrapper.last .formBlock select{max-width: none;} .studentDialogWrapper .studentContainer .formWrapper .formBlock{display: flex; position: relative; width: var(--fullwidth); flex-direction: column; margin-left: 20px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock:first-child{ margin-left:0px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown{width: 100%;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown-toggle{padding: 10px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown-toggle.active{background-color: transparent;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown-toggle:active{background-color: transparent;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown-toggle.btn-default{background-color: transparent;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown-toggle:focus{background-color: transparent;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .dropdown-toggle:hover{background-color: transparent;} .studentDialogWrapper .studentContainer .formWrapper .formBlock label{position: absolute; transform: translate(0, -38%); margin: 0;padding: 0 0px; transition: all 0.2s ease; top: 0; bottom: 0; left: 0; padding: 6px 10px; font-weight: normal; pointer-events: none;} .studentDialogWrapper .studentContainer .formWrapper .formBlock label .text{color: var(--greyColor5); padding: 0 2px; background-color: var(--whitecolor); color: var(--greyColor5);} .studentDialogWrapper .studentContainer .formWrapper .formBlock input[type="text"]{max-width: 350px; padding: 10px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock input[type="number"]{max-width: 350px; padding: 10px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock input:focus + label{transform: translate(0, -38%);} .studentDialogWrapper .studentContainer .formWrapper .formBlock input:focus + label .text{background-color: var(--whitecolor); color: var(--greyColor5);} .studentDialogWrapper .studentContainer .formWrapper .formBlock input[type="email"]{max-width: 350px; padding: 10px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock input[type="tel"]{max-width: 350px; padding: 10px;} .studentDialogWrapper .studentContainer .formWrapper .formBlock select{max-width: 350px; padding: 10px;} .studentDialogWrapper .studentContainer .formWrapper .forgotPassword{display: flex; justify-content: flex-end;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .errorMsg{color: var(--redColor); margin-top: 5px; display: none;} .studentDialogWrapper .studentContainer .formWrapper .formBlock .errorMsg.show{display: flex;} .studentDialogWrapper .studentContainer .formActions{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 10px; justify-content: center; width: 100%; margin-top: 20px;} .studentDialogWrapper .studentContainer .formActions a{background:var(--sicPrimaryColor); color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} .studentDialogWrapper .studentContainer .formActions button{background:var(--sicPrimaryColor); border: 0px none; color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} /*Student Dialog*/ /*External Members Dialog*/ .externalDialogWrapper.open{display: flex;} .externalDialogWrapper{position: fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(0,0,0,0.7); z-index: 2200000; font-family: roboto; } .externalDialogWrapper .externalContainer{background-color:var(--whitecolor); max-width: 700px; width: var(--fullwidth); position: relative; padding: 20px; border-radius: var(--radius20);} .externalDialogWrapper .externalContainer .dialogClose{position: absolute; right: -10px; top: -10px;} .externalDialogWrapper .externalContainer .dialogClose a{color: var(--blackcolor); font-size: var(--fontsize22); display: flex; align-items: center; justify-content: center; background-color: var(--whitecolor); width: 30px; height: 30px; border-radius: var(--radius100);} .externalDialogWrapper .externalContainer h2{font-size: var(--fontsize20); color: var(--blackcolor); text-align: center; margin-bottom:20px; border-bottom: 1px solid var(--greyColor4); padding-bottom: 10px; font-family:robotomedium;} .externalDialogWrapper .externalContainer .formWrapper{display: flex; width: var(--fullwidth); margin-bottom: 30px;} .externalDialogWrapper .externalContainer h2 + .mainWrapper .formWrapper .formBlock select{max-width: none;} .externalDialogWrapper .externalContainer .formWrapper.last .formBlock select{max-width: none;} .externalDialogWrapper .externalContainer .formWrapper .formBlock{display: flex; position: relative; width: var(--fullwidth); flex-direction: column; margin-left: 20px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock:first-child{ margin-left:0px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown{width: 100%;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown-toggle{padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown-toggle.active{background-color: transparent;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown-toggle:active{background-color: transparent;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown-toggle.btn-default{background-color: transparent;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown-toggle:focus{background-color: transparent;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .dropdown-toggle:hover{background-color: transparent;} .externalDialogWrapper .externalContainer .formWrapper .formBlock label{position: absolute; transform: translate(0, -38%); margin: 0;padding: 0 0px; transition: all 0.2s ease; top: 0; bottom: 0; left: 0; padding: 6px 10px; font-weight: normal; pointer-events: none;} .externalDialogWrapper .externalContainer .formWrapper .formBlock label .text{color: var(--greyColor5); padding: 0 2px; background-color: var(--whitecolor); color: var(--greyColor5);} .externalDialogWrapper .externalContainer .formWrapper .formBlock input[type="text"]{max-width: 350px; padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock input[type="number"]{max-width: 350px; padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .designationInput{max-width: 350px; padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .designationInput:hover::-webkit-calendar-picker-indicator {-webkit-appearance: none;display: none!important;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .designationInput:focus::-webkit-calendar-picker-indicator {-webkit-appearance: none; display: none!important;} .externalDialogWrapper .externalContainer .formWrapper .formBlock input:focus + label{transform: translate(0, -38%);} .externalDialogWrapper .externalContainer .formWrapper .formBlock input:focus + label .text{background-color: var(--whitecolor); color: var(--greyColor5);} .externalDialogWrapper .externalContainer .formWrapper .formBlock input[type="email"]{max-width: 350px; padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock input[type="tel"]{max-width: 350px; padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .formBlock select{max-width: 350px; padding: 10px;} .externalDialogWrapper .externalContainer .formWrapper .forgotPassword{display: flex; justify-content: flex-end;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .errorMsg{color: var(--redColor); margin-top: 5px; display: none;} .externalDialogWrapper .externalContainer .formWrapper .formBlock .errorMsg.show{display: flex;} .externalDialogWrapper .externalContainer .formActions{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 10px; justify-content: center; width: 100%; margin-top: 20px;} .externalDialogWrapper .externalContainer .formActions a{background:var(--sicPrimaryColor); color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} .externalDialogWrapper .externalContainer .formActions button{background:var(--sicPrimaryColor); border: 0px none; color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} /*External Members Dialog*/ /*Reels Page Changes*/ .pageWrapper .mainContent .reelsSection.marginTopZero.scrollbaradded::-webkit-scrollbar{scrollbar-width: 0px; width: 0; height: 0;} .pageWrapper .mainContent .reelsSection.marginTopZero.scrollbaradded{scrollbar-width: none; height: calc(100vh - 110px); overflow-y: auto; scroll-snap-type: y mandatory;} .pageWrapper .mainContent .reelsSection .reelsSlider{ margin-top: 0; height: 100%; align-items:center; } .pageWrapper .mainContent .reelsSection .reelsSlider .no-content-message{align-items:center; height:100%; display: flex; justify-content: center; text-align: center; box-shadow: 0px 4px 25px rgba(112 98 227 / 10%); background-color: var(--whitecolor); width: var(--fullwidth); padding: 15px; border-radius: var(--radius10); margin-bottom: 0px;} .pageWrapper .mainContent .reelsSection.marginTopZero{margin-top: 0; justify-content: flex-start; border: 0px solid #ff0000; scroll-padding:0px 0px;} .pageWrapper .mainContent #gallery .reelsSlider .items{max-height: inherit; scroll-snap-align: center; min-height:100%;} .pageWrapper .mainContent #gallery .reelsSlider .items > a{ width:var(--fullwidth);} /*Reels Page Changes*/ /*Static Page*/ .staticPageWrapper{display: flex; width: var(--fullwidth); flex-direction: column; padding: 71px 30px;} .staticPageWrapper h1{font-size: var(--fontsize18); color: var(--blackcolor); margin-bottom:10px; font-family:robotomedium; margin-bottom:20px; border-bottom: 1px solid var(--greyColor4); padding-bottom: 10px; } .staticPageWrapper h2{font-size: var(--fontsize16); color: var(--blackcolor); margin-bottom:10px; font-family:robotomedium;} .staticPageWrapper p{font-size:var(--fontsize14); margin-bottom:10px; color: var(--newTextColor); font-family: var(--defaultfont);} .staticPageWrapper ul li{margin: 10px 0 10px; list-style-type: disc; list-style-position: inside;} /*Static Page*/ .mailSentWrapper.open{display: flex;} .mailSentWrapper{position: fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(0,0,0,0.7); z-index: 2200000; font-family: roboto; } .mailSentWrapper .mailSentContainer{background-color:var(--whitecolor); max-width: 450px; width: var(--fullwidth); position: relative; padding: 20px; border-radius: var(--radius20);} .mailSentWrapper .mailSentContainer i{display: flex; max-width: 100px; width: var(--fullwidth); margin-left: auto; margin-right: auto; justify-content: center; align-items: center;} .mailSentWrapper .mailSentContainer .actions{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 10px; justify-content: center; width: 100%; margin-top: 20px;} .mailSentWrapper .mailSentContainer .actions a{background:var(--primaryColor); color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} .mailSentWrapper .mailSentContainer h3{font-size: var(--fontsize22); align-items: center; justify-content: center; display: flex; width: var(--fullwidth); font-weight: 500; color: var(--greyColor2)} .mailSentMessage.open{display: flex;} .mailSentMessage{position: fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(0,0,0,0.7); z-index: 2200000; font-family: roboto; } .mailSentMessage .mailSentContainer{background-color:var(--whitecolor); max-width: 450px; width: var(--fullwidth); position: relative; padding: 20px; border-radius: var(--radius20);} .mailSentMessage .mailSentContainer i{display: flex; max-width: 100px; width: var(--fullwidth); margin-left: auto; margin-right: auto; justify-content: center; align-items: center;} .mailSentMessage .mailSentContainer .actions{display: flex; align-items: center; border-top: 1px solid var(--greyColor4); padding-top: 10px; justify-content: center; width: 100%; margin-top: 20px;} .mailSentMessage .mailSentContainer .actions a{background:var(--primaryColor); color:var(--whitecolor); text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; border-radius:var(--radius30); padding:5px 38px;} .mailSentMessage .mailSentContainer h3{font-size: var(--fontsize22); align-items: center; justify-content: center; display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom: 15px; color: var(--greyColor2)} .mailSentMessage .mailSentContainer input[type="text"]{border: 1px solid var(--greyColor4)} .assignmentDetailsTableWrapper{display:flex; width:100%; border: 1px solid var(--greyColor4); background-color: var(--whitecolor); border-radius: var(--radius10); padding: 15px; flex-direction: column; width: calc(100% - 0);} .assignmentDetailsTableWrapper .councilTableWrapper{padding: 15px; background-color: var(--sicTableBGColor); border-radius: var(--radius10); margin-bottom: 30px;} .assignmentDetailsTableWrapper .councilTableWrapper:last-child{margin-bottom: 0;} .assignmentDetailsTableWrapper .tableHeadingWrapper{display: flex; margin-bottom:30px; width: var(--fullwidth); align-items: center; justify-content: space-between;} .assignmentDetailsTableWrapper .tableHeadingWrapper h3{font-size:var(--fontsize16); display: flex; justify-content: space-between; text-align: var(--textLeft); margin-bottom:0px; color: var(--blackcolor); font-family: roboto;} .assignmentDetailsTableWrapper .tableHeadingWrapper div{display: flex; align-items: center; justify-content: center;} .assignmentDetailsTableWrapper .tableHeadingWrapper div .searchWrapper{display: flex; align-items: center; margin-right: 20px;} .assignmentDetailsTableWrapper .tableHeadingWrapper div .searchWrapper input[type="search"]{background-color:transparent; border: 0px none; border-radius: 0px; border-bottom: 2px solid var(--blackcolor);} .assignmentDetailsTableWrapper .councilTableWrapper table{width: var(--fullwidth);} .assignmentDetailsTableWrapper .councilTableWrapper table th{font-size:var(--fontsize13); max-width: 300px; font-family: var(--fontfamilymedium); color: var(--blackcolor);padding: 10px;} .assignmentDetailsTableWrapper .councilTableWrapper table td{font-size:var(--fontsize13); max-width: 300px; border-top: 1px solid var(--greyColor); font-family: var(--defaultfont); color: var(--blackcolor);padding: 10px;} .assignmentDetailsTableWrapper .councilTableWrapper table .tableActions{display: flex; align-items: center;} .assignmentDetailsTableWrapper .councilTableWrapper table .tableActions a{display: flex; align-items: center; margin-left:10px;} .assignmentDetailsTableWrapper .councilTableWrapper table .tableActions a:first-child{margin-left:0px; color: var(--sicPrimaryColor); font-size:var(--fontsize18); } .assignmentDetailsTableWrapper .councilTableWrapper table .tableActions a:last-child{ color: var(--lightRedColor)} .assignmentDetailsTableWrapper .councilTableWrapper table .tableActions button{ color: var(--lightRedColor); background-color: transparent; bordeR: 0px none; font-size:var(--fontsize18); margin-left:10px;} /*World of work dashboard Page Start*/ .worldofworkWrapper{display: flex; width:100%; flex-direction: column;} .worldofworkWrapper .userInfoDetails{display: flex; flex-direction: column; border-bottom:1px solid var(--color22); padding-bottom: 15px;} .worldofworkWrapper .userInfoDetails.noborder{border-bottom:0px none;} .worldofworkWrapper .userInfoDetails h3{font-size: var(--fontsize28); font-family:var(--fontfamilysemibold); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--headerThemeTextColorChange)} .worldofworkWrapper .userInfoDetails p{font-size: var(--fontsize14); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--newTextColor)} .worldofworkWrapper .exploreSections{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); border-radius: var(--radius10); width: var(--fullwidth); padding: 20px; display: flex; flex-direction: column;} .worldofworkWrapper .exploreSections h4{font-size: var(--fontsize14); font-family:var(--defaultfont); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--headerThemeTextColorChange)} .worldofworkWrapper .exploreSections h3{font-size: var(--fontsize16); font-family:var(--fontfamilysemibold); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:10px; color: var(--headerThemeTextColorChange)} .worldofworkWrapper .exploreSections h5{font-size: var(--fontsize14); margin:0; margin-top: 15px; font-family:var(--defaultfont); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:10px; color: var(--tableTh)} .worldofworkWrapper .exploreSections .searchBlock{display: flex; align-items: center; width: var(--fullwidth); padding: 5px 10px; border-radius:21px; background-color: var(--primaryBgColor);} .worldofworkWrapper .exploreSections .searchBlock input[type="search"]{border:0px none; background-color: transparent;} .worldofworkWrapper .exploreSections .popularSearchBlock{display: flex;width: var(--fullwidth); flex-wrap: wrap;} .worldofworkWrapper .exploreSections .popularSearchBlock span{padding: 5px 10px; margin-right: 10px; color:var(--blackColor); font-size: var(--fontsize14); font-family:var(--defaultfont); border-radius:32.7651px; background-color: var(--primaryBgColor);} .worldofworkWrapper .exploreSections .popularSearchBlock span a{color:var(--blackColor); font-size: var(--fontsize14); font-family:var(--defaultfont);} .pageWrapper .mainContent .worldofworkWrapper .featureTrendsWrapper{background-color: transparent; box-shadow: 0px 0px 0px 0px; margin-top: 20px;} .pageWrapper .mainContent .worldofworkWrapper .featureTrendsWrapper h3{margin-bottom: 5px;} .pageWrapper .mainContent .worldofworkWrapper .featureTrendsWrapper p{margin-bottom: 15px; font-size: var(--fontsize12); display: flex; width: var(--fullwidth); font-weight: 500; color: var(--tableTh)} .pageWrapper .mainContent .worldofworkWrapper .featureTrendsWrapper .block .items{background-color: var(--whitecolor);} .pageWrapper .mainContent .worldofworkWrapper .featureTrendsWrapper .block .items div > span{color: var(--tableTh);} .worldofworkWrapper .popularsJobsWrapper{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); margin-top: 20px; background-color: var(--whitecolor); border-radius: var(--radius10); width: var(--fullwidth); padding: 20px; display: flex; flex-direction: column;} .worldofworkWrapper .popularsJobsWrapper h3{font-size: var(--fontsize14); font-family:var(--defaultfont); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:15px; color: var(--blackColor)} .worldofworkWrapper .popularsJobsWrapper ol{display: flex; padding:0px; width:var(--fullwidth); flex-direction: column;} .worldofworkWrapper .popularsJobsWrapper ol li .thumb img{border-radius:10px;} .worldofworkWrapper .popularsJobsWrapper ol li a{width:var(--fullwidth); display:flex; } .worldofworkWrapper .popularsJobsWrapper ol li:first-child{margin-top: 0;} .worldofworkWrapper .popularsJobsWrapper ol li{box-shadow: 0px 0px 0px 0px; border-bottom: 1px solid var(--color22); align-items: center; flex-direction: row; border-radius:0px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor); margin-top:5px; padding:15px;} .worldofworkWrapper .popularsJobsWrapper ol li .left{flex:1; display: flex; align-items: flex-start;} .worldofworkWrapper .popularsJobsWrapper ol li .right{font-size:var(--fontsize20); display: flex; align-items: center; color:var(--blackColor);} .worldofworkWrapper .popularsJobsWrapper ol li .right a{font-size:var(--fontsize12);} .worldofworkWrapper .popularsJobsWrapper ol li .thumb{width:var(--fullwidth); flex-shrink: 0; max-width: 100px; display: flex; max-height:100px; ; margin-right:15px;} .worldofworkWrapper .popularsJobsWrapper ol li .thumbContent{width:var(--fullwidth); flex:1} .worldofworkWrapper .popularsJobsWrapper ol li .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); margin-bottom:2px; color: var(--blackColor);} .worldofworkWrapper .popularsJobsWrapper ol li .thumbContent .offeredBy{display:flex; color:var(--greyColor8); font-size:var(--fontsize12); width:var(--fullwidth); margin-bottom: 10px;} .worldofworkWrapper .popularsJobsWrapper ol li .thumbContent .offeredBy i{color:var(--greyColor8); font-size:var(--fontsize12); font-style:normal; min-width: 97px;} .worldofworkWrapper .popularsJobsWrapper ol li .thumbContent .offeredBy span{color:var(--blackColor); max-width: 55%; text-transform: uppercase; white-space: normal; overflow: hidden; text-overflow: ellipsis;} .worldofworkWrapper .popularsJobsWrapper ol li .thumbContent .offeredBy img{max-width: 100%} .worldofworkWrapper .popularsJobsWrapper ul{display: flex; flex-direction: row;} .worldofworkWrapper .popularsJobsWrapper ul li{display: flex; border-bottom:0px none; margin:0; box-shadow: 0px 0px 0px 0px; padding:0; font-weight: 200; flex-direction: row;font-size:var(--fontsize12); width:auto; color:var(--greyColor8); margin-left:20px;} .worldofworkWrapper .popularsJobsWrapper ul li:first-child{margin-left: 0;} .worldofworkWrapper .popularsJobsWrapper ul li i{margin-right: 5px; font-size:var(--fontsize12);} .worldofworkWrapper .popularsJobsWrapper ul li img{margin-right: 5px;} .worldofworkWrapper .popularsJobsWrapper ul li span{display: flex; align-items: center; font-size:var(--fontsize12);} .worldofworkWrapper .popularsJobsWrapper .actions{display: flex; margin-top: 15px; width:var(--fullwidth); justify-content: center; align-items: center;} .worldofworkWrapper .popularsJobsWrapper .actions a{font-size:var(--fontsize12);} .worldofworkWrapper .opportunitiesWrapper{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); margin-top: 20px; background-color: var(--whitecolor); border-radius: var(--radius10); width: var(--fullwidth); padding: 20px; display: flex; flex-direction: column;} .worldofworkWrapper .opportunitiesWrapper h3{font-size: var(--fontsize14); font-family:var(--defaultfont); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:25px; color: var(--blackColor)} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock{display: flex; border-bottom: 1px solid var(--color22); padding:0px 0 30px; margin-bottom: 30px; width:var(--fullwidth); flex-direction: column;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .thumb img{border-radius:0px; object-fit: contain;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock a{width:var(--fullwidth); display:flex; } .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock{flex:1; display: flex; align-items: flex-start; flex-direction: column;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock .info{flex:1; display: flex; align-items: flex-start; margin-bottom: 20px;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock .thumb{width:var(--fullwidth); flex-shrink: 0; max-width: 52px; display: flex; max-height:100px; ; margin-right:15px;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock .thumbContent{width:var(--fullwidth); flex:1} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock .thumbContent h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); margin-bottom:2px; color: var(--blackColor);} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock ul{display: flex; margin: 0; padding: 0;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock ul li{display: flex; border:0px none;align-items: center; border-bottom:0px none; margin:0; box-shadow: 0px 0px 0px 0px; padding:0; font-weight: 200; flex-direction: row;font-size:var(--fontsize12); width:auto; color:var(--greyColor8); margin-left:20px;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock ul li:first-child{margin-left: 0;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock ul li i{margin-right: 5px; font-size:var(--fontsize12);} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock ul li img{margin-right: 5px;} .worldofworkWrapper .opportunitiesWrapper .opportunitiesBlock .companyBlock ul li span{display: flex; align-items: center; font-size:var(--fontsize12);} .worldofworkWrapper .opportunitiesWrapper ol{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding:0px; flex-wrap: wrap; gap:20px; width:var(--fullwidth); flex-direction: row;} .worldofworkWrapper .opportunitiesWrapper ol li{margin-top: 0; padding: 10px; width:var(--fullwidth); border-radius: 10px; border: 1px solid var(--color22); } .worldofworkWrapper .opportunitiesWrapper ol li a{display: flex; flex-direction: column; width:var(--fullwidth);} .worldofworkWrapper .opportunitiesWrapper ol li h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); margin-bottom:5px; color: var(--blackColor);} .worldofworkWrapper .opportunitiesWrapper .actions{display: flex; margin-bottom: 20px; align-items: center; width:var(--fullwidth); justify-content: space-between;} .worldofworkWrapper .opportunitiesWrapper .actions a{font-size:var(--fontsize12); width:auto;} .worldofworkWrapper .opportunitiesWrapper .actions div{font-size:var(--fontsize12); width:auto; color: var(--blackColor)} .worldofworkWrapper .opportunitiesWrapper .actions div span{margin-left:5px; font-weight: 700; color: var(--blackColor)} .worldofworkWrapper .opportunitiesWrapper .showAllActions{display: flex; margin-top:0px; width:var(--fullwidth); justify-content: center; align-items: center;} .worldofworkWrapper .opportunitiesWrapper .showAllActions a{font-size:var(--fontsize12);} .worldofworkWrapper .topHiringWrapper{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); margin-top: 20px; background-color: var(--whitecolor); border-radius: var(--radius10); width: var(--fullwidth); padding: 20px; display: flex; flex-direction: column;} .worldofworkWrapper .topHiringWrapper h3{font-size: var(--fontsize14); font-family:var(--defaultfont); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:0px; color: var(--blackColor)} .worldofworkWrapper .topHiringWrapper .logoSection{display: flex; padding:0px; width:var(--fullwidth); flex-wrap: wrap;} .worldofworkWrapper .topHiringWrapper .logoSection img{border-radius:0px; margin:10px; object-fit: contain; width: 70px; height: 70px;} /*World of work dashboard Page ends*/ /*G dashboard Page Start*/ .pageWrapper .mainContent .dashboardHeadingTitle h3{font-size:var(--fontsize14); align-items: center; width: var(--fullwidth); display: flex; justify-content: space-between; margin-bottom:15px; color: var(--blackcolor); font-family: var(--fontfamilymedium);} .pageWrapper .mainContent .dashboardHeadingTitle h3 div{display: flex; align-items: center;} .pageWrapper .mainContent .dashboardHeadingTitle h3 div i{margin-right: 5px; color:var(--primaryColor);} .pageWrapper .mainContent .dashboardHeadingTitle h3 a{font-size:var(--fontsize12); font-family: var(--defaultfont);} .pageWrapper .mainContent .dashboardHeadingTitle h3 + p{color:var(--tableTh); font-size:var(--fontsize14); margin-bottom: 15px; font-family: var(--defaultfont);} .pageWrapper .mainContent .dashboardHeadingTitle h3.marginCustom{margin:0 0 5px;} .g-dashboardWrapper{display: flex; width:100%; flex-direction: column;} .g-dashboardWrapper .userInfoDetails{display: flex; flex-direction: column; border-bottom:1px solid var(--color22); padding-bottom: 15px;} .g-dashboardWrapper .userInfoDetails.noborder{border-bottom:0px none;} .g-dashboardWrapper .userInfoDetails h3{font-size: var(--fontsize28); font-family:var(--fontfamilysemibold); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--headerThemeTextColorChange)} .g-dashboardWrapper .userInfoDetails p{font-size: var(--fontsize14); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--newTextColor)} .g-dashboardWrapper .featuredUpdatesWrapper{display: flex; width:100%; flex-direction: column; margin-top:0px;} .g-dashboardWrapper .featuredUpdatesWrapper h3{font-size: var(--fontsize14); justify-content: space-between; font-family:var(--fontfamilymedium); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--greyColor2)} .g-dashboardWrapper .featuredUpdatesWrapper h3 i{margin-right: 5px; color: var(--secondaryColor);} .g-dashboardWrapper .featuredUpdatesWrapper h3 a{font-size: var(--fontsize12);} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper{display: grid; width:100%; gap:20px; grid-template-columns: repeat(2,minmax(0,1fr));} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper .items .coursesContent{padding:10px 0 0; background-color: transparent;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper .items{display: flex; margin:0px; flex-direction: column; width: 100%; max-width:none; border-radius: var(--radius10); padding:0px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper .items h5{font-size: var(--fontsize14); font-family:var(--fontfamilysemibold); color: var(--greyColor6)} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper .items p{font-size: var(--fontsize12); font-family:var(--defaultfont); color: var(--greyColor5)} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper .items .coursesThumb{display: flex; margin-bottom:0px; max-height: 240px; min-height: 240px; overflow: hidden;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper .items .coursesThumb img{border-radius:10px; object-fit: contain;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol{display: flex; flex-direction: column; width: 100%;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li{display: flex; flex-direction: column; width: 100%; border-radius: var(--radius10); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); margin-top: 15px; background-color: var(--whitecolor); padding:15px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li .livenow{color:var(--primaryColor); text-transform: uppercase; margin-bottom:10px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li .livenow i{margin-right: 5px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li h5{font-size: var(--fontsize19); font-family:var(--fontfamilysemibold); color: var(--color5)} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li p{font-size: var(--fontsize16); font-family:var(--defaultfont); color: var(--greyColor2)} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li .upcoming{display: flex; color:var(--greyColor2); margin-bottom: 10px; width:100%; align-items: center; justify-content: space-between} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ol li .upcoming span{background-color: var(--primaryColor); font-size: var(--fontsize14); color:var(--whitecolor); padding:5px 10px; border-radius:10px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul{display: flex; flex-direction: column; width: 100%;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul li{display: flex; width: 100%; border-radius: var(--radius10); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); margin-top: 15px; background-color: var(--whitecolor); padding:15px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul li i{margin-right:10px;} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul li h5{font-size: var(--fontsize18); font-family:var(--fontfamilysemibold); color: var(--color5)} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul li p{font-size: var(--fontsize16); font-family:var(--defaultfont); color: var(--greyColor2)} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul li a{display: flex; align-items:flex-start; width:100%} .g-dashboardWrapper .featuredUpdatesWrapper .updatesWrapper ul li a i{display: flex; align-items:flex-start; width:100%; max-width: 100px;} .g-dashboardWrapper .myClassesSectionWrapper{margin-top: 30px;} .g-dashboardWrapper .myClassesSectionWrapper h3{font-size: var(--fontsize18); justify-content: space-between; font-family:var(--defaultfont);display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--blackcolor)} .pageWrapper .mainContent .g-dashboardWrapper .myClassesSectionWrapper .listingWrapper ol li{ margin-top: 10px; background-color: var(--greyColor3);} .pageWrapper .mainContent .g-dashboardWrapper .myClassesSectionWrapper .listingWrapper ol li:hover{bordeR:1px solid var(--primaryColor)} .g-dashboardWrapper .myCoursesWrapper{display: flex; width: 100%; flex-direction: column; margin-top: 30px; background-color: var(--whitecolor); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); padding: 15px; border-radius:10px;} .g-dashboardWrapper .myCoursesWrapper .items{display: flex!important; width: 100%; margin-right:15px; margin-top:0px; align-items: center; border:1px solid var(--lineColor);padding:10px; border-radius:10px;} .g-dashboardWrapper .myCoursesWrapper h3{font-size: var(--fontsize18); justify-content: space-between; font-familyvar:var(--defaultfont); display: flex; width: var(--fullwidth); font-weight: 500; margin-bottom:5px; color: var(--blackcolor)} .g-dashboardWrapper .myCoursesWrapper .listingWrapper{ display: flex; background-color: var(--greyColor3);flex-direction: column; width:100%} .g-dashboardWrapper .myCoursesWrapper .listingWrapper.withoutbg{background-color: transparent;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .right i{color: var(--greyColor2)} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .left{flex:1; display: flex;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items a .right{opacity: 0;visibility: hidden;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items a:hover .right{opacity: 1;visibility: visible;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesThumb{max-width:70px; max-height: 70px;border-radius: var(--radius5); overflow: hidden; margin-right: 10px; position: relative; width: var(--fullwidth);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent{display: flex; padding:0px; flex-direction: column; width: var(--fullwidth);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent .coursesTop{display: flex; position: relative; flex-direction: column; width: var(--fullwidth);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent .coursesTop p{font-size:var(--fontsize15);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent .coursesTop p i{margin-right: 10px; color: var(--secondaryColor);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent .coursesBottom{align-items: center; display: flex; justify-content: space-between; width: var(--fullwidth);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent .coursesBottom p{margin-bottom: 0; font-size:var(--fontsize15);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 10px; color: var(--blackColor); font-family: var(--fontfamilysemibold);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesContent p{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesPrice{display: flex; align-items: center;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesPrice del{margin-left: 10px; color: var(--greyColor2); font-size:var(--fontsize15);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesPrice ins{margin-left:10px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesRating{position: absolute; left: 15px; top: 15px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesRating span{ display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.7); padding: 5px 15px; border-radius:var(--radius10);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesRating span i{color: var(--orangeColor); margin-left: 5px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesScore{position: absolute; right: 0px; top: 5px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesScore span{ display: flex; align-items: center; font-size:var(--fontsize12);justify-content: center; background-color:var(--lightOrangeColor); color: var(--blackcolor); padding: 5px 10px; border-radius:var(--radius5);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .coursesScore span i{color: var(--orangeColor); margin-right: 5px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items a{color: var(--whitecolor); display: flex; flex:1} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items img{border-radius:var(--radius5);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .progrssBar{display: flex; margin-top:5px; width: var(--fullwidth); height: 5px; background-color: var(--greyColor4); border-radius: var(--radius10);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .progrssBar span{background-color: var(--greenColor2); border-radius: var(--radius10);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .progrssBarBlock{display: flex; max-width: none; width: var(--fullwidth); flex-direction: column; margin-top:10px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .items .completed_percentage{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--tableTh); font-family: var(--defaultfont);} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .slick-slide {margin: 0 10px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .slick-list { margin: 0 -10px;} .g-dashboardWrapper .myCoursesWrapper .listingWrapper .slick-track{display: flex; width: var(--fullwidth); margin-left: 0;} .g-dashboardWrapper .latestTrendsWrapper{display: flex; width: 100%; flex-direction: column; margin-top: 30px; background-color: var(--whitecolor); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); padding: 15px; border-radius:10px;} .g-dashboardWrapper .latestTrendsWrapper .items{display: flex; width: 100%; margin-right:15px; margin-top: 15px; align-items: center; background-color: #F8F8F8; padding:10px; border-radius:10px;} .g-dashboardWrapper .latestTrendsWrapper h3{font-size: var(--fontsize14); border-bottom: 1px solid var(--color22); justify-content: space-between; font-family:var(--fontfamilysemibold); display: flex; width: var(--fullwidth); font-weight: 500; padding-bottom: 10px; margin-bottom:15px; color: var(--blackcolor)} .g-dashboardWrapper .latestTrendsWrapper h3 a{font-family: var(--defaultfont); color: var(--blackColor); font-size:var(--fontsize12);} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper{ display: flex; width:100%} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .items{display: flex; width: 100%; min-height: 300px; border-radius:10px; position: relative; width:100%} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .items .overlay{position: absolute; top:0; right:0; bottom:0; border-radius:10px; left:0; background-color:rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .items .overlay a{color:var(--whitecolor); font-size:var(--fontsize35);} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .items video{position: absolute; top:0; left:0; border-radius:10px; right:0; bottom:0;} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .slick-slide { margin: 0 10px;} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .slick-list {margin: 0 -10px; display: flex; width:100%} .g-dashboardWrapper .latestTrendsWrapper .listingWrapper .slick-track{margin-left: 0; display: flex; width:100%} .carvaanPostFilterSection{display: flex; width:var(--fullwidth); align-items: center; justify-content: space-between; align-items: center;} .carvaanPostFilterSection p{color:var(--tableTh); font-size:var(--fontsize14);} .carvaanPostFilterSection div{display: flex; align-items: center;} .carvaanPostFilterSection div label{margin-bottom: 0; margin-right: 5px; display: flex; white-space: nowrap; color:var(--tableTh); font-size:var(--fontsize14);} .pageWrapper .mainContent .g-dashboardWrapper .carvaanPostSection{margin-top: 0;} .g-dashboardWrapper .recommendedWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px; background-color: var(--whitecolor); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); padding: 15px; border-radius:10px;} .g-dashboardWrapper .recommendedWrapper .items{display: flex; width: 100%; margin-right:15px; margin-top: 15px; align-items: center; background-color: #F8F8F8; padding:10px; border-radius:10px;} .g-dashboardWrapper .recommendedWrapper h3{font-size: var(--fontsize14); border-bottom: 1px solid var(--color22); justify-content: space-between; font-family:var(--fontfamilysemibold); display: flex; width: var(--fullwidth); font-weight: 500; padding-bottom: 10px; margin-bottom:15px; color: var(--blackcolor)} .g-dashboardWrapper .recommendedWrapper h3 a{font-family: var(--defaultfont); font-size:var(--fontsize12);} .g-dashboardWrapper .recommendedWrapper .listingWrapper{ display: flex; width:100%} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items{display: flex; flex-direction: column; border: 1px solid var(--greyColor);width: var(--fullwidth); max-width: none; padding:10px 10px; padding:0; margin:0;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesThumb{max-height: 170px; min-height: 170px; overflow: hidden;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items {display: flex; border:0px none; border-radius:var(--radius15); background-color: var(--whitecolor); box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); position: relative; width: var(--fullwidth);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems a{width:var(--fullwidth)} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent{display: flex; padding: 15px; flex-direction: column; width: var(--fullwidth);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesTop{display: flex; flex-direction: column; width: var(--fullwidth);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesTop p{font-size:var(--fontsize15);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesTop p.gridDesc{font-size:var(--fontsize15); min-height: 162px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesTop p.gridDesc a{color:var(--primaryLinkColor); text-decoration: underline;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesTop p.gridDesc a:hover{color:var(--primaryLinkColor); text-decoration: none;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesTop p i{margin-right: 10px; color: var(--secondaryColor);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesBottom{align-items: center; display: flex; justify-content: space-between; width: var(--fullwidth);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesContent .coursesBottom p{margin-bottom: 0; font-size:var(--fontsize15);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items h5{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom: 0px; color: var(--blackcolor); font-family:var(--fontfamilysemibold);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items p{font-size:var(--fontsize16); text-align: var(--textLeft); margin-bottom: 10px; color: var(--greyColor2); font-family: var(--defaultfont);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesPrice{display: flex; align-items: center;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesPrice del{margin-left: 10px; color: var(--greyColor2); font-size:var(--fontsize15);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesPrice ins{margin-left:10px; color: var(--greenColor); text-decoration: none; font-size:var(--fontsize18); font-family: var(--fontfamilysemibold);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems .coursesRating{position: absolute; left: 15px; top: 15px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems .coursesRating span{ display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.7); padding: 5px 15px; border-radius:var(--radius10);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems .coursesRating span i{color: var(--orangeColor); margin-left: 5px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems .coursesScore{position: absolute; right: 15px; top: 15px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems .coursesScore span{ display: flex; align-items: center; font-size:var(--fontsize12);justify-content: center; background-color: rgba(0,0,0,0.7); padding: 5px 15px; border-radius:var(--radius10);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items .coursesItems .coursesScore span i{color: var(--orangeColor); margin-right: 5px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items a{color: var(--whitecolor);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .items img{border-radius:var(--radius15);} .g-dashboardWrapper .recommendedWrapper .listingWrapper .slick-slide {margin: 0 10px 10px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .slick-list { margin: 0 -10px; padding-bottom: 10px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .slick-slide { margin: 0 10px;} .g-dashboardWrapper .recommendedWrapper .listingWrapper .slick-list {margin: 0 -10px; display: flex; width:100%} .g-dashboardWrapper .recommendedWrapper .listingWrapper .slick-track{margin-left: 0; display: flex; width:100%} /*G dashboard Page ends*/ /*G Careers Page start*/ .careersListingWrapper{display: flex; width:var(--fullwidth); flex-direction: column;} .careersListingWrapper .completeProfileSection{display: flex; align-items: center; margin-bottom:20px; width:var(--fullwidth); background-color: var(--greenColor2); padding:15px; border-radius:10px;} .careersListingWrapper .completeProfileSection h3{font-size:var(--fontsize17); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom: 10px; color: var(--whitecolor);} .careersListingWrapper .completeProfileSection p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor);} .careersListingWrapper .completeProfileSection a{display: flex; width:var(--fullwidth); align-items: center;} .careersListingWrapper .completeProfileSection div:first-child{flex:1; align-items: flex-start;} .careersListingWrapper .completeProfileSection div:last-child{width:auto; align-items: center; color: var(--whitecolor); font-size:var(--fontsize22);} .careersListingWrapper .JobListingSection{display: flex; width:var(--fullwidth); margin-bottom:20px; flex-direction: column; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); background-color: var(--whitecolor); padding:15px; border-radius: var(--radius10);} .careersListingWrapper .JobListingSection h3{font-size:var(--fontsize17); font-family: var(--defaultfont); text-align: var(--textLeft); margin-bottom:15px; color: var(--blackColor);} .careersListingWrapper .JobListingSection ol{display: flex; width:var(--fullwidth); flex-direction: column;} .careersListingWrapper .JobListingSection ol li{display: flex; width:var(--fullwidth); border-top:1px solid var(--greyColor4);margin-top:0px; padding:15px 0;} .careersListingWrapper .JobListingSection ol li .companyLogo{width:var(--fullwidth); max-width: 100px; margin-right:15px;} .careersListingWrapper .JobListingSection ol li .jobInfo .left{display: flex; flex-direction: column; align-items: flex-start; flex:1} .careersListingWrapper .JobListingSection ol li .jobInfo{width:var(--fullwidth);display: flex; align-items: center;} .careersListingWrapper .JobListingSection ol li .jobInfo h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .careersListingWrapper .JobListingSection ol li .jobInfo p{font-size:var(--fontsize14); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackcolor);} .careersListingWrapper .JobListingSection ol li .jobInfo .info{display: flex; width:var(--fullwidth);} .careersListingWrapper .JobListingSection ol li .jobInfo span{display: flex; font-size:var(--fontsize14); color:var(--greyColor); margin-left: 15px; align-items: center;} .careersListingWrapper .JobListingSection ol li .jobInfo span:first-child{margin-left: 0;} .careersListingWrapper .JobListingSection ol li .jobInfo .info span i{margin-right: 5px;} .careersListingWrapper .JobListingSection ol li .jobInfo a{color:var(--primaryColor); font-size:var(--fontsize16); font-family: var(--fontfamilysemibold);} .careersListingWrapper .JobListingSection .jobActions{display: flex; width:var(--fullwidth); border-top:1px solid var(--greyColor4); padding-top: 15px; justify-content: center} .careersListingWrapper .JobListingSection .jobActions a{color:var(--primaryColor);} .careersListingWrapper .completePortfolioSection{display: flex; align-items: center; margin-bottom:20px; width:var(--fullwidth); background: linear-gradient(270deg, var(--primaryColor) 0%, var(--secondaryColor) 100%); padding:15px; border-radius:10px;} .careersListingWrapper .completePortfolioSection h3{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:5px; color: var(--whitecolor);} .careersListingWrapper .completePortfolioSection p{font-size:var(--fontsize12); text-align: var(--textLeft); margin-bottom:0px; color: var(--whitecolor);} .careersListingWrapper .completePortfolioSection a > i{ margin-right:15px; } .careersListingWrapper .completePortfolioSection a{display: flex; width:var(--fullwidth); align-items: center;} .careersListingWrapper .completePortfolioSection i + div{flex:1; align-items: flex-start;} .careersListingWrapper .completePortfolioSection i + div + div{width:auto; align-items: center; color: var(--whitecolor); font-size:var(--fontsize22);} /*G Careers Page ends*/ /*G competitions Activity Page start*/ .competitionsActivityListingWrapper{display: flex; width:var(--fullwidth); flex-direction: column;} .competitionsActivityListingWrapper .headingTitle{display:flex; width:var(--fullwidth); justify-content:space-between; padding-bottom: 10px; border-bottom:1px solid var(--lineColor); } .competitionsActivityListingWrapper .headingTitle h3{font-size:var(--fontsize17); font-weight: 400; font-family: var(--defaultFont); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackColor);} .competitionsActivityListingWrapper .headingTitle a{display: flex; align-items: center; font-size:var(--fontsize17); color: var(--blackColor);} .competitionsActivityListingWrapper .listingWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 20px;} .competitionsActivityListingWrapper .listingWrapper ol{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .competitionsActivityListingWrapper .listingWrapper ol li .thumb img{border-radius:10px;} .competitionsActivityListingWrapper .listingWrapper ol li a{width:var(--fullwidth); display:flex; } .competitionsActivityListingWrapper .listingWrapper ol li:first-child{margin-top: 0;} .competitionsActivityListingWrapper .listingWrapper ol li{box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); align-items: center; flex-direction: row; border-radius: 10px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor); margin-top:15px; padding:15px;} .competitionsActivityListingWrapper .listingWrapper ol li .left{flex:1; display: flex; align-items: flex-start;} .competitionsActivityListingWrapper .listingWrapper ol li .right{font-size:var(--fontsize20); display: flex; align-items: center; color:var(--blackColor);} .competitionsActivityListingWrapper .listingWrapper ol li .thumb{width:var(--fullwidth); max-width: 100px; margin-right:15px;} .competitionsActivityListingWrapper .listingWrapper ol li .thumbContent{width:var(--fullwidth); flex:1} .competitionsActivityListingWrapper .listingWrapper ol li .thumbContent h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .competitionsActivityListingWrapper .listingWrapper ol li .thumbContent .offeredBy{display:flex; font-size:var(--fontsize12); color:var(--greyColor8); width:var(--fullwidth); margin-bottom: 10px;} .competitionsActivityListingWrapper .listingWrapper ol li .thumbContent .offeredBy span{color:var(--blackColor); margin-left: 10px; text-transform: uppercase;} .competitionsActivityListingWrapper .listingWrapper ol li .thumbContent .offeredBy img{max-width: 100%} .competitionsActivityListingWrapper .listingWrapper ul{display: flex; flex-direction: row;} .competitionsActivityListingWrapper .listingWrapper ul li{display: flex; font-size:var(--fontsize12); margin:0; box-shadow: 0px 0px 0px 0px; padding:0; flex-direction: row; width:auto; margin-left:20px;} .competitionsActivityListingWrapper .listingWrapper ul li:first-child{margin-left: 0;} .competitionsActivityListingWrapper .listingWrapper ul li i{margin-right: 5px; font-size:var(--fontsize12);} .competitionsActivityListingWrapper .listingWrapper ul li img{margin-right: 5px;} .competitionsActivityListingWrapper .listingWrapper ul li span{display: flex; align-items: center;} .competitionsActivityListingWrapper .listingWrapper ul li:nth-child(1){color:var(--blackColor);} .competitionsActivityListingWrapper .listingWrapper ul li:nth-child(1) span{color:var(--tableTh); margin-left: 5px;} .competitionsActivityListingWrapper .listingWrapper ul li:nth-child(2) span{color:var(--goldenColor);} .competitionsActivityListingWrapper .listingWrapper ul li:nth-child(3) span{color:var(--tableTh);} .competitionsActivityListingWrapper .listingWrapper .progressCls{ height: 6px; width:var(--fullwidth); margin:8px 0; background-color:var(--strokeColor); border-radius: 5px;} .competitionsActivityListingWrapper .listingWrapper .progressCls .progressBar{float: left;width: 0;height: 100%; font-size:var(--fontsize15); line-height: 20px; text-align: center; border-radius: 5px; background-color:var(--greenColor2); transition: width 0.6s ease;} .competitionsActivityListingWrapper .listingWrapper .urgent-msg{font-size:var(--fontsize12); align-items: center; color:var(--primaryColor); display: flex;} .competitionsActivityListingWrapper .listingWrapper .urgent-msg i{margin-right: 5px;} .competitionsActivityListingWrapper .listingWrapper .shortlisted-msg{font-size:var(--fontsize12); color:var(--greenColor); display: flex;} .competitionsActivityListingWrapper .listingWrapper .not-shortlisted-msg{font-size:var(--fontsize12); color:#4EBBEB; display: flex;} .competitionsActivityListingWrapper .listingWrapper .progress-steps{font-size:var(--fontsize12); color:var(--greyColor8); display: flex; margin-top: 8px;} .competitionsActivityListingWrapper .listingWrapper .progress-steps span{color:var(--blackColor);} .competitionsActivityListingWrapper .listingWrapper .itemInfo{display: flex; flex:1; align-items: center;} .competitionsActivityListingWrapper .listingWrapper .itemInfo div{display: flex; align-items:center; color: var(--greyColor8); font-size: var(--fontsize12);} .competitionsActivityListingWrapper .listingWrapper .itemInfo .bullet{width:5px; margin:0 10px; height: 5px; border-radius:100%; background-color: var(--greyColor5); display:flex; align-items: center; justify-content:center} .competitionsActivityListingWrapper .listingWrapper .itemInfo div span{ margin-left: 5px;} /*G competitions Activity Page start*/ /*G competitions Page start*/ .competitionsListingWrapper{display: flex; width:var(--fullwidth); flex-direction: column;} .competitionsListingWrapper .headingTitle{display:flex; width:var(--fullwidth); justify-content:space-between; padding-bottom: 10px; border-bottom:1px solid var(--lineColor); } .competitionsListingWrapper .headingTitle h3{font-size:var(--fontsize17); font-weight: 400; font-family: var(--defaultFont); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackColor);} .competitionsListingWrapper .headingTitle a{display: flex; align-items: center; font-size:var(--fontsize17); color: var(--blackColor);} .competitionsListingWrapper .listingWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .competitionsListingWrapper .listingWrapper ol{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .competitionsListingWrapper .listingWrapper ol li .thumb img{border-radius:10px;} .competitionsListingWrapper .listingWrapper ol li a{width:var(--fullwidth); display:flex; } .competitionsListingWrapper .listingWrapper ol li:first-child{margin-top: 0;} .competitionsListingWrapper .listingWrapper ol li{box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); align-items: center; flex-direction: row; border-radius: 10px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor); margin-top:15px; padding:15px;} .competitionsListingWrapper .listingWrapper ol li .left{flex:1; display: flex; align-items: flex-start;} .competitionsListingWrapper .listingWrapper ol li .right{font-size:var(--fontsize20); display: flex; align-items: center; color:var(--blackColor);} .competitionsListingWrapper .listingWrapper ol li .thumb{width:var(--fullwidth); flex-shrink: 0; max-width: 100px; display: flex; max-height:100px; ; margin-right:15px;} .competitionsListingWrapper .listingWrapper ol li .thumbContent{width:var(--fullwidth); flex:1} .competitionsListingWrapper .listingWrapper ol li .thumbContent h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:2px; color: var(--blackColor);} .competitionsListingWrapper .listingWrapper ol li .thumbContent .outer{min-height: 40px;} .competitionsListingWrapper .listingWrapper ol li .thumbContent .offeredBy{display:flex; color:var(--greyColor8); font-size:var(--fontsize12); width:var(--fullwidth); margin-bottom: 10px;} .competitionsListingWrapper .listingWrapper ol li .thumbContent .offeredBy i{color:var(--greyColor8); font-size:var(--fontsize12); font-style:normal; min-width: 97px;} .competitionsListingWrapper .listingWrapper ol li .thumbContent .offeredBy span{color:var(--blackColor); max-width: 55%; text-transform: uppercase; white-space: normal; overflow: hidden; text-overflow: ellipsis;} .competitionsListingWrapper .listingWrapper ol li .thumbContent .offeredBy img{max-width: 100%} .competitionsListingWrapper .listingWrapper ul{display: flex; flex-direction: row;} .competitionsListingWrapper .listingWrapper ul li{display: flex; margin:0; box-shadow: 0px 0px 0px 0px; padding:0; flex-direction: row; width:auto; margin-left:40px;} .competitionsListingWrapper .listingWrapper ul li:first-child{margin-left: 0;} .competitionsListingWrapper .listingWrapper ul li i{margin-right: 5px; font-size:var(--fontsize12);} .competitionsListingWrapper .listingWrapper ul li img{margin-right: 5px;} .competitionsListingWrapper .listingWrapper ul li span{display: flex; align-items: center; font-size:var(--fontsize12);} .competitionsListingWrapper .listingWrapper ul li:nth-child(1) span{color:var(--greenColor2);} .competitionsListingWrapper .listingWrapper ul li:nth-child(2) span{color:var(--goldenColor);} .competitionsListingWrapper .listingWrapper ul li:nth-child(3) span{color:var(--tableTh);} .competitionsListingWrapper .listingWrapper ol li .thumbContent .chipsTag{display: flex; width: var(--fullwidth); margin-bottom: 5px;} .competitionsListingWrapper .listingWrapper ol li .thumbContent .chipsTag span{background-color: var(--greyColor12); font-size: var(--fontsize11); padding:2px 10px; border-radius: 5px; color:var(--greyColor5);} .pageWrapper .mainContent .jobSearchBlock{display: flex; margin-bottom: 20px; width:var(--fullwidth); justify-content: space-between; align-items: center;} .pageWrapper .mainContent .jobSearchBlock .search{display: flex; align-items: center; flex:1} .pageWrapper .mainContent .jobSearchBlock .search input[type="search"]{ max-width: 95%; background-color: var(--whitecolor); padding:15px; padding-left: 40px; border:0px none; border-radius: 48px;} .competitionsFiltersddWrapper.show{display: flex} .competitionsFiltersddWrapper{position: absolute; right:0; width:var(--fullwidth); top:100%; z-index: 2200056; display: none} .competitionsFiltersddWrapper .filtersddContainer{padding: 15px; margin-left: auto; box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); border-radius:10px; width:var(--fullwidth); max-width: 400px; background-color: var(--whitecolor);} .competitionsFiltersddWrapper .filtersddContainer h4{font-size:var(--fontsize16); padding-bottom:10px; border-bottom:1px solid var(--greyColor); display: flex; align-items: center; justify-content: space-between; font-weight: 400; font-family: var(--defaultFont); text-align: var(--textLeft); margin-bottom:10px; color: var(--blackColor);} .competitionsFiltersddWrapper .filtersddContainer h4 div{display: flex; align-items: center;} .competitionsFiltersddWrapper .filtersddContainer h4 a{color:var(--blackColor);font-size:var(--fontsize14); margin-right: 10px; font-family: var(--defaultfont); } .competitionsFiltersddWrapper .filtersddContainer .filtersData{padding:15px 0 0; overflow-y: auto; max-height: 220px; display: flex; flex-direction: column; width:var(--fullwidth);} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block{ margin-bottom: 25px; display: flex; flex-direction: column; width:var(--fullwidth);} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block:last-child{margin-bottom: 0;} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block h5{margin-bottom:8px; display: flex; flex-direction: column; width:var(--fullwidth); color:var(--blackColor);} .competitionsFiltersddWrapper .filtersddContainer .filtersData .filtersContent{display: flex; width:var(--fullwidth); flex-wrap: wrap;} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label{display: flex; cursor: pointer; font-size:var(--fontsize13); align-items: center; margin-right: 15px;} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label input[type="checkbox"]{margin: 0; margin-right: 5px; display: none} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label input[type="radio"]{margin: 0; margin-right: 5px; display: none} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label span{color:var(--blackColor); border:1px solid var(--greyColor3); background-color: var(--greyColor3); padding:5px 15px; border-radius: 32.7651px;} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label input[type="radio"]:checked + span{background-color: var(--lightSecondaryColor); border:1px solid var(--primaryColor); color:var(--blackColor);} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label input[type="checkbox"]:checked + span{background-color: var(--lightSecondaryColor); border:1px solid var(--primaryColor); color:var(--blackColor);} .competitionsFiltersddWrapper .filtersddContainer .filtersData .block label.show span{background-color: var(--lightSecondaryColor); border:1px solid var(--primaryColor); color:var(--blackColor);} .competitionsListingWrapper .popularActivityWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .competitionsListingWrapper .popularActivityWrapper h3{font-size:var(--fontsize17); font-weight: 400; font-family: var(--defaultFont); text-align: var(--textLeft); margin-bottom:10px; color: var(--greyColor8);} .competitionsListingWrapper .popularActivityWrapper h3 i{margin-right: 5px; color:var(--goldenColor);} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider{display: flex; padding:0px; width:var(--fullwidth);} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider .items{box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); max-width: none; align-items: center; flex-direction: column; border-radius: 10px; margin:10px 0 10px 10px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor);} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider .items .thumb{width:var(--fullwidth); justify-content: center; display: flex} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider .items .thumb img{border-radius:10px 10px 0 0; max-width: 100%; min-height: 183px; max-height: 183px;} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider .items .thumbContent{width:var(--fullwidth); flex:1; padding:15px;} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider .items .thumbContent h4{font-size:var(--fontsize16); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:8px; color: var(--blackColor);} .competitionsListingWrapper .popularActivityWrapper ..activitiesSlider .items .thumbContent .offeredBy{display:flex; width:var(--fullwidth); max-width: 60px; margin-bottom: 10px;} .competitionsListingWrapper .popularActivityWrapper .activitiesSlider .items .thumbContent .offeredBy img{max-width: 100%} .competitionsListingWrapper .popularActivityWrapper ul{display: flex; flex-direction: row; margin-bottom:10px;} .competitionsListingWrapper .popularActivityWrapper ul li{display: flex; margin:0; box-shadow: 0px 0px 0px 0px; padding:0; flex-direction: row; width:auto; margin-left:20px;} .competitionsListingWrapper .popularActivityWrapper ul li:first-child{margin-left: 0;} .competitionsListingWrapper .popularActivityWrapper ul li i{margin-right: 5px; font-size:var(--fontsize12);} .competitionsListingWrapper .popularActivityWrapper ul li img{margin-right: 5px;} .competitionsListingWrapper .popularActivityWrapper ul li span{display: flex; align-items: center; font-size:var(--fontsize12);} .competitionsListingWrapper .popularActivityWrapper ul li:nth-child(1) span{color:var(--greenColor2);} .competitionsListingWrapper .popularActivityWrapper ul li:nth-child(2) span{color:var(--goldenColor);} .competitionsListingWrapper .popularActivityWrapper .thumbContent div{display:flex; align-items: center; font-size:var(--fontsize12);} .competitionsListingWrapper .popularActivityWrapper .thumbContent div span{color:var(--tableTh); font-size:var(--fontsize12);} .competitionsListingWrapper .popularActivityWrapper .thumbContent div i{margin-right: 5px;} .competitionsListingWrapper .popularActivityWrapper .slick-list{width:var(--fullwidth); margin-left: 0; margin-bottom: 15px;} .competitionsListingWrapper .popularActivityWrapper .slick-track{width:var(--fullwidth); margin-left: 0;} .competitionsListingWrapper .popularActivityWrapper .slick-dots{justify-content: center;} .competitionsListingWrapper .popularActivityWrapper .slick-dots li button:hover:before{color:var(--primaryColor);} .competitionsListingWrapper .popularActivityWrapper .slick-dots li.slick-active button:before{color:var(--primaryColor);} .competitionsListingWrapper .popularActivityWrapper .slick-slide { margin: 0 10px;} .competitionsListingWrapper .popularActivityWrapper .slick-list {margin: 0 -10px;} .competitionsListingWrapper .popularActivityWrapper .slick-track{margin-left: 0;} /*G competitions Page start*/ /*G competitions Detail Page start*/ .competitionsDetailWrapper{display: flex; width:var(--fullwidth); flex-direction: column;} .competitionsDetailWrapper .headingTitle{display:flex; width:var(--fullwidth); justify-content:space-between; padding-bottom: 10px; border-bottom:1px solid var(--lineColor); } .competitionsDetailWrapper .headingTitle h3{font-size:var(--fontsize17); font-weight: 400; font-family: var(--defaultFont); text-align: var(--textLeft); margin-bottom:0px; color: var(--blackColor);} .competitionsDetailWrapper .headingTitle a{display: flex; align-items: center; font-size:var(--fontsize17); color: var(--blackColor);} .competitionsDetailWrapper .competitionsInfo{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .competitionsDetailWrapper .competitionsInfo ol{display: flex; padding:5px; width:var(--fullwidth); flex-direction: column;} .competitionsDetailWrapper .competitionsInfo ol li .thumb img{border-radius:10px;} .competitionsDetailWrapper .competitionsInfo ol li a{width:var(--fullwidth); display:flex;} .competitionsDetailWrapper .competitionsInfo ol li:first-child{margin-top: 0;} .competitionsDetailWrapper .competitionsInfo ol li{box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); align-items: center; flex-direction: row; border-radius: 10px; display: flex; width:var(--fullwidth); background-color: var(--whitecolor); margin-top:15px; padding:15px;} .competitionsDetailWrapper .competitionsInfo ol li.forJobDetails{flex-direction:column;} .competitionsDetailWrapper .competitionsInfo ol li.forJobDetails .left{width:var(--fullwidth);} .competitionsDetailWrapper .competitionsInfo ol li.forJobDetails .info{width:var(--fullwidth); display:flex; align-items:center} .competitionsDetailWrapper .competitionsInfo ol li.forJobDetails .info span{font-size:var(--fontsize12); margin-left:15px; color: var(--blackcolor);} .competitionsDetailWrapper .competitionsInfo ol li.forJobDetails .info span i{margin-right:5px;} .competitionsDetailWrapper .competitionsInfo ol li.forJobDetails .info span:first-child{margin-left:0px;} .competitionsDetailWrapper .competitionsInfo ol li .left{flex:1; display: flex; align-items: flex-start;} .competitionsDetailWrapper .competitionsInfo ol li .right{font-size:var(--fontsize20); display: flex; align-items: center; color:var(--blackColor);} .competitionsDetailWrapper .competitionsInfo ol li .thumb{width:var(--fullwidth); max-width: 100px; margin-right:15px;} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent{width:var(--fullwidth); flex:1} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent h4{font-size:var(--fontsize14); font-family: var(--fontfamilysemibold); text-align: var(--textLeft); margin-bottom:5px; color: var(--blackColor);} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent .outer{display:flex; min-height:20px; font-size:var(--fontsize12);color: var(--greyColor8); width:var(--fullwidth); margin-bottom: 10px;} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent .offeredBy{display:flex; font-size:var(--fontsize12);color: var(--greyColor8); width:var(--fullwidth); margin-bottom: 10px;} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent .offeredBy.marginBottomZero{display:flex; font-size:var(--fontsize12);color: var(--greyColor8); width:var(--fullwidth); margin-bottom:0px;} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent .offeredBy span{text-transform: uppercase; color:var(--blackColor); margin-left: 5px;} .competitionsDetailWrapper .competitionsInfo ol li .thumbContent .offeredBy img{max-width: 100%; max-width: 60px; margin-left: 10px;} .competitionsDetailWrapper .competitionsInfo ul{display: flex; flex-direction: row;} .competitionsDetailWrapper .competitionsInfo ul li{display: flex; margin:0; box-shadow: 0px 0px 0px 0px; padding:0; flex-direction: row; width:auto; margin-left:10px;} .competitionsDetailWrapper .competitionsInfo ul li:first-child{margin-left: 0;} .competitionsDetailWrapper .competitionsInfo ul li i{margin-right: 5px; font-size:var(--fontsize12);} .competitionsDetailWrapper .competitionsInfo ul li img{margin-right: 5px;} .competitionsDetailWrapper .competitionsInfo ul li span{display: flex; align-items: center; background-color: var(--greyColor3); padding:4px 5px; border-radius:5px;} .competitionsDetailWrapper .competitionsInfo ul li:nth-child(1) span{color:var(--greenColor2); font-size:var(--fontsize12);} .competitionsDetailWrapper .competitionsInfo ul li:nth-child(2) span{color:var(--goldenColor); font-size:var(--fontsize12);} .competitionsDetailWrapper .competitionsInfo ul li:nth-child(3) span{color:var(--tableTh); font-size:var(--fontsize12);} .competitionsDetailWrapper .competitionsInfo p{font-size:var(--fontsize12);color: var(--greyColor8); line-height: 27px; margin-top: 10px;} .competitionsDetailWrapper .competitionsInfo .urgent-msg{font-size:var(--fontsize12); color:var(--primaryColor); display: flex;} .competitionsDetailWrapper .competitionsInfo .shortlisted-msg{font-size:var(--fontsize12); color:var(--greenColor); display: flex;} .competitionsDetailWrapper .jobApplyAction{display: flex; margin-top:30px; width:var(--fullwidth); justify-content:center; align-items:center} .competitionsDetailWrapper .jobApplyAction a{display: flex; max-width:300px; justify-content:center;} .competitionsDetailWrapper .competitionsAccordianWrapper{align-items: center; flex-direction: row; display: flex; width:var(--fullwidth); margin-top:15px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock {display: flex; flex-direction: column; border-radius: 10px; background-color: var(--whitecolor); padding:15px; margin:5px; width: var(--fullwidth); box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); } .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .accordion{display: flex; text-align: left; position: relative; font-size:var(--fontsize16); cursor: pointer; flex-direction: column; width: var(--fullwidth);font-family: var(--fontfamilysemibold);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .accordion p{margin-bottom: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .accordion:after{content: '\02795'; position: absolute; right: 10px; top: 50%; margin-top: -10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .accordion.active:after{content: "\2796";} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .accordion.active {border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .accordion.active + .panel{display: flex; box-shadow: 0px 0px 0px 0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel{padding:15px 0 0px; flex-direction: column; width: var(--fullwidth); display: flex; display: none;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper{display: flex;border-radius: 20px; z-index:1; position: relative; width:var(--fullwidth); flex-direction: column; margin:0px 0; padding:40px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper:before{content:''; transform: rotate(-180deg); width: auto; height: auto; position: absolute; left:0; right:0; bottom:0; top:0; z-index:-1; border-radius:20px; background: linear-gradient(270deg, var(--primaryColor) 0%, var(--secondaryColor) 100%); opacity: 0.3} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper .crown{display: flex; margin-bottom: 10px; align-items: flex-start; justify-content: center} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol{display: flex; width:var(--fullwidth); align-items: flex-end; max-width: 750px; margin:0 auto;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li .thumb{width:80px; margin:0 auto 5px; height: 80px; border-radius:100%; border:5px solid var(--strokeColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li .thumb img{max-width: 100%; height: 100%; border-radius:100%;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li .thumb.middle{width:134px; margin:0 auto 5px; height: 134px; border-radius:100%; border:5px solid var(--goldenColor)!important;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li{display: flex; flex-direction: column; max-width: none; width:var(--fullwidth); text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li h3{color:var(--blackcolor); font-family: var(--fontfamilysemibold); margin-bottom:2px; font-size: var(--fontsize12); text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li p + p{color:var(--tableTh);font-size: var(--fontsize11); font-family: var(--defaultfont);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li p{color:var(--primaryColor); font-family: var(--fontfamilysemibold); margin-bottom:5px; font-size: var(--fontsize12); text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li .thumbContent{display: flex; flex-direction: column; align-items: center; justify-content: center} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li .thumbContent div{display: flex; align-items: center; justify-content: center; font-size: var(--fontsize10); color:var(--blackColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li .thumbContent div i{margin-right: 5px; max-width: 20px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li:nth-child(1) .thumb{border:5px solid var(--strokeColor)} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .leadboardWrapper ol li:nth-child(3) .thumb{border:5px solid var(--leaderBoardColor3)} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock {display: flex; width:var(--fullwidth); margin-top:30px; flex-direction: column;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock h3{color:var(--blackcolor); text-align: left; font-family: var(--fontfamilysemibold); margin-bottom:5px; font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block{display: flex; box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.1); align-items: center; justify-content: space-between; border-radius:5px; padding:10px; border:1px solid var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .left{display: flex; align-items: center; flex:1} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .left span{color:var(--blackcolor); margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .left div{display: flex; align-items: center; flex:1 ;color:var(--blackcolor); font-size:var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .left div img{max-width: 34px; min-width: 34px; display: flex; align-items: center; min-height:34px; max-height: 34px; width:var(--fullwidth); margin-right: 10px; border-radius:100%; flex-shrink: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .left div p{color:var(--primaryColor); margin-left: 40px; flex:1; text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .right{display: flex; align-items: center; color:var(--blackcolor); font-size:var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .rankBlock .block .right img{color:var(--blackcolor); margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table{width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper .dataTables_wrapper .dataTables_filter label{display:flex; white-space: nowrap; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper .dataTables_wrapper .dataTables_length select{max-width: none; width: auto; margin: 0 10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper .dataTables_wrapper .dataTables_length label{display:flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper.marginTopZero{margin-top: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table th:nth-child(1){width: 12%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table th:nth-child(2){width: 50%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table th:nth-child(3){width: 30%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table th:nth-child(4){width: 8%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(1){width: 12%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(2){width: 20%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(3){width: 10%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(4){width: 10%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(5){width: 15%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(6){width: 8%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .JobsTabs .tableWrapper table th:nth-child(7){width: 12%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table th{color:var(--tableTh); padding: 10px; font-family: var(--defaultfont); font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .shortlistAction span{background-color: var(--siaPrimaryBgColor); padding:5px 10px; border-radius:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td a{color: var(--blackcolor);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .shortlistAction span i{display: none} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .shortlistAction span a{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .shortlistAction span a.active{color:var(--greenColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .shortlistAction span a.active i{color:var(--greenColor); display: flex; margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td{vertical-align: top; padding: 10px; font-family: var(--defaultfont); font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .competitionsUser{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .competitionsPoints{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel .tableWrapper table td .competitionsUser img{margin-right: 5px;width: 34px; height: 34px; border-radius: 100%;} .competitionsDetailWrapper .competitionsAccordianWrapper .accordianBlock .panel table td .competitionsPoints img{margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper{ display:flex; width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters{display: flex; margin-bottom: 20px; width:var(--fullwidth); justify-content: space-between} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters h3{width: auto;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters a{display: flex; align-items: center; color:var(--primaryColor); } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters div{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters div a{margin-left: 15px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters div a:first-child{margin-left:0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesFilters a i{margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .uploadAssignmentBlock{display:flex; width:var(--fullwidth); justify-content: center} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .uploadAssignmentBlock a{background-color: var(--blackcolor); color:var(--whitecolor); font-size: var(--fontsize16); padding: 10px 50px; border-radius:40px} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .uploadAssignmentBlock a i{margin-left: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper h3{font-size: var(--fontsize16); text-align: left; font-family: var(--fontfamilysemibold); margin-bottom: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left{ display:flex; width:var(--fullwidth); align-items: flex-start; flex-direction: column; max-width: 350px; margin-right:50px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul{display: flex; position: relative; flex-direction: column; width:var(--fullwidth); } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li{display: flex; position: relative; flex-direction: column; width:var(--fullwidth); padding-top: 20px; padding-left: 20px; padding-right: 0; padding-bottom: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .tabBlock{display: flex; position: relative; flex-direction: column; width:var(--fullwidth); padding:15px; border-radius:10px; border: 1px solid var(--greyColor4);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li:first-child{padding-top: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul::after {content: ''; display: none; position: absolute;width: 4px;background-color:var(--greyColor4);top:0px; bottom: 0;left:0; margin-left:0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li::after {content: ''; position: absolute;width: 4px;background-color:var(--greyColor4);top:0px; bottom: 0;left:0; margin-left:0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li:last-child::after{display: none} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .timeline-marker .active{position: absolute; width: 20px; height: 20px;left:-9px;background-color:var(--whitecolor); border: 4px solid var(--primaryColor); top:20px;border-radius: 50%;z-index: 1;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li:first-child .timeline-marker .active{top:0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .timeline-marker .fa-lock{position: absolute; width: 20px; height: 20px;left:-9px; background-color:var(--primaryColor); display: flex; align-items: center; justify-content: center; top:20px; margin-top:0px; border-radius: 50%;z-index: 1;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .timeline-marker .fa-check{position: absolute; width: 20px; height: 20px;left:-9px; background-color:var(--primaryColor); display: flex; align-items: center; justify-content: center; top:20px; margin-top:0px; border-radius: 50%;z-index: 1;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .timeline-marker i{color: var(--whitecolor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .tabBlock:hover{border: 1px solid var(--primaryColor); box-shadow: 0 0 0 1px var(--primaryColor)} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .mainDiv{cursor:pointer;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .mainDiv .thumbContent{flex:1} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .contentActions{justify-content: flex-end; display: flex} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .contentActions a{ margin-left:8px; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .contentActions a i.zmdi{max-width:15px; display:flex; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .contentActions a:first-child{ margin-left:0px; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .mainDiv .thumbContent .contentEditLink{ display:flex; justify-content: flex-end; position: absolute; right:10px; top:10px} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .mainDiv .thumbContent .contentDeleteLink{ display:flex; justify-content: flex-end; position: absolute; right:10px; top:10px} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .tabBlock.active{border: 1px solid var(--primaryColor); box-shadow: 0 0 0 1px var(--primaryColor)} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .tabBlock.selected{border: 1px solid var(--primaryColor); box-shadow: 0 0 0 1px var(--primaryColor)} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li p{color:var(--tableTh); font-size: var(--fontsize14); margin-bottom:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo{display: flex; align-items: center; flex-direction: row; margin-top:20px; padding-top: 10px; border-top: 1px solid var(--greyColor4);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo span{display: flex; flex-grow: 1; align-items: center; color:var(--tableTh); font-size: var(--fontsize14); font-family: var(--fontfamilysemibold); margin-left: 10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo span:first-child{margin-left: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo span.type{margin-left: 0; color:var(--greenColor2);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo span i{margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo span.points{color:var(--orangeColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .competitionsInfo span.points img{max-width: 15px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .reportsInfo{display: flex; align-items: center; width:var(--fullwidth); color: var(--tableTh); font-size: var(--fontsize12); margin-top:15px; font-family: var(--defaultfont);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .reportsInfo span{color:var(--primaryColor); font-family: var(--fontfamilysemibold); margin:0 2px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info{display:flex; width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info .thumb{display:flex; margin-right:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info .thumbContent{display:flex; width:var(--fullwidth); flex-direction:column} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info{display: flex; width:var(--fullwidth); align-items: flex-start;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info .thumb img{width: 45px; height: 45px; border-radius: 100%; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info .thumb{margin-right:10px; flex-shrink: 0; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info h4{font-size: var(--fontsize16); color:var(--blackcolor); font-family: var(--fontfamilysemibold); } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .info p{font-size: var(--fontsize14); margin:0; margin-top: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info .thumb{display:flex; margin-right:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info .thumbContent{display:flex; flex-direction:column} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info{display: flex; width:var(--fullwidth); align-items: flex-start;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info .thumb img{width: 45px; height: 45px; border-radius: 100%; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info .thumb{margin-right:10px; flex-shrink: 0; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info h4{font-size: var(--fontsize16); color:var(--blackcolor); font-family: var(--fontfamilysemibold); } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .left ul li .info p{font-size: var(--fontsize14); margin:0; margin-top: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right{ display:flex; width:var(--fullwidth); flex:1; flex-direction: column;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper{margin-bottom: 20px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails{ display:flex; flex-direction: column; margin-bottom: 20px; padding-bottom: 20px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails h4{font-size: var(--fontsize16); margin-bottom:5px; text-align: left; font-family: var(--fontfamilysemibold);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails p{color:var(--tableTh); font-size: var(--fontsize14); margin-top:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .submitbefore{display: flex; margin-top:5px; color:var(--tableTh); font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .submitbefore strong{color:var(--blackColor); margin-left:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .marks{display: flex; margin-top:5px; font-weight: 600; color:var(--blackColor); font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .level{display: flex; margin-top:5px; font-weight: 200; color:var(--greyColor8); font-size: var(--fontsize14); font-family: var(--defaultfont);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .level div{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .level div .level{display: flex; align-items: center; text-transform: capitalize; margin-top: 0; margin-left: 15px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .level span{color:var(--greenColor); margin-left:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .level strong{color:var(--blackColor); margin-left:0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .actions{display: flex; margin:10px 0; width:var(--fullwidth); justify-content: flex-end} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails .actions a{color:var(--primaryColor); display: flex; align-items: center; margin-left: 20px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails ul{margin:0px 0 0; padding: 0; display: flex; flex-direction: column; width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails ul li{margin:10px 0 0; padding: 0; font-size: var(--fontsize14); color:var(--tableTh); width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .activitiesDetails ul li i{margin-right: 5px; color:var(--greenColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper ol{display: flex; width: var(--fullwidth); border-bottom: 1px solid var(--siaPrimaryBgColor)} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper ol li{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper ol li a{color: var(--blackcolor); font-size:var(--fontsize16); padding: 5px 10px; border-bottom: 4px solid transparent; margin-left: 35px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper ol li a:hover{color: var(--primaryColor); padding: 5px 10px; border-bottom: 4px solid var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper ol li a.active{color: var(--primaryColor); padding: 5px 10px; border-bottom: 4px solid var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabsWrapper ol li:first-child a{margin-left: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tabcontentssssss{display: flex; padding:0px 0 0px; display: none; flex-direction: column; width: var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .reportsTabTopActions{display: flex; width: var(--fullwidth); justify-content: space-between; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .reportsTabTopActions div{color:var(--newHeadingColor); font-size: var(--fontsize16); font-family: var(--fontfamilysemibold);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .reportsTabTopActions div span{margin-left: 10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .reportsTabTopActions a{color:var(--blackColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .reportsTabTopActions a i{margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock{position: relative; display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label{display:inline-block; cursor: pointer; height: 25px; position: relative; width:50px; margin: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock span{margin-right: 10px; color: var(--greyColor2); font-size:var(--fontsize13);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock span.active{margin-right: 10px; color: var(--orangeColor); font-size:var(--fontsize13);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label + span{margin-left: 10px; margin-right: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label input{opacity: 0; visibility: hidden;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label input:checked + span{ background-color:var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label input:checked + span + div{ color:var(--greenColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label span + div{color:var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock .slider:before { position: absolute; content: ""; height: 22px; border-radius: var(--radius100); width: 22px; left: 2px; bottom: 2px; background-color:var(--whitecolor); transition: .4s;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock .slider{position: absolute; margin: 0; top: 0; background-color: var(--greyColor4); border-radius: var(--radius15); left: 0; right: 0; bottom: 0; transition: .4s;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .toggleBlock label input:checked + span:before{transform: translateX(24px);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper{display: flex; width:var(--fullwidth); flex-direction: column;border-radius: 20px; margin:0px 0; padding:40px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper .crown{display: flex; margin-bottom: 10px; align-items: flex-start; justify-content: center} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol{display: flex; width:var(--fullwidth); align-items: flex-end; max-width: 750px; margin:0 auto;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li .thumb{width:80px; margin:0 auto 5px; height: 80px; border-radius:100%; border:5px solid var(--strokeColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li .thumb img{max-width: 100%; height: 100%; border-radius:100%;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li .thumb.middle{width:134px; margin:0 auto 5px; height: 134px; border-radius:100%; border:5px solid var(--goldenColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li{display: flex; flex-direction: column; max-width: none; width:var(--fullwidth); text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li h3{color:var(--blackcolor); font-family: var(--fontfamilysemibold); margin-bottom:0px; font-size: var(--fontsize12); text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li p{color:var(--primaryColor); font-family: var(--fontfamilysemibold); margin-bottom:5px; font-size: var(--fontsize12); text-align: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li .thumbContent{display: flex; flex-direction: column; align-items: center; justify-content: center} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li .thumbContent div{display: flex; align-items: center; justify-content: center; font-size: var(--fontsize10);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .leadboardWrapper ol li .thumbContent div i{margin-right: 5px; max-width: 20px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock {display: flex; width:var(--fullwidth); margin-top:30px; flex-direction: column;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock h3{color:var(--blackcolor); font-family: var(--fontfamilysemibold); margin-bottom:5px; font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block{display: flex; box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.1); align-items: center; justify-content: space-between; border-radius:5px; padding:10px; border:1px solid var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .left{display: flex; align-items: center; max-width: none; flex-direction: row; width:auto;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .left span{color:var(--blackcolor); margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .left div{display: flex; align-items: center; color:var(--blackcolor); font-size:var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .left div img{max-width: 34px; min-width: 34px; display: flex; align-items: center; min-height:34px; max-height: 34px; width:var(--fullwidth); margin-right: 10px; border-radius:100%; flex-shrink: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .left div p{color:var(--primaryColor); margin-left: 40px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .right{display: flex; align-items: center; color:var(--blackcolor); width:auto; flex: inherit; flex-direction: row; font-size:var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .rankBlock .block .right img{color:var(--blackcolor); margin-right: 5px; } .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top: 30px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table{width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table th{color:var(--tableTh); padding: 10px; font-family: var(--defaultfont); font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table th:nth-child(1){width: 12%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table th:nth-child(2){width: 50%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table th:nth-child(3){width: 38%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .ContentReportTab .tableWrapper table th:nth-child(1){width: 24%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .ContentReportTab .tableWrapper table th:nth-child(2){width: 10%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .ContentReportTab .tableWrapper table th:nth-child(3){width: 10%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .ContentReportTab .tableWrapper table th:nth-child(4){width: 16%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .ContentReportTab .tableWrapper table th:nth-child(5){width: 15%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .ContentReportTab .tableWrapper table th:nth-child(6){width: 15%!important} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td a.viewSubmissionLink1{color:var(--primaryColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .shortlistAction span{background-color: var(--siaPrimaryBgColor); padding:5px 10px; border-radius:5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .shortlistAction span i{display: none} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .shortlistAction span a{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .shortlistAction span a.active{color:var(--greenColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .shortlistAction span a.active i{color:var(--greenColor); display: flex; margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td{vertical-align: top; padding: 10px; font-family: var(--defaultfont); font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td a{color: var(--blackcolor);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .competitionsUser{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .competitionsPoints{display: flex; align-items: center;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right .tableWrapper table td .competitionsUser img{margin-right: 5px;width: 34px; height: 34px; border-radius: 100%;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .competitionsPoints img{margin-right: 5px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .lastSubmissionDate{display: flex; flex-direction: column} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .lastSubmissionDate span:first-child{margin-bottom: 5px; font-size:var(--fontsize11); color:var(--greyColor8);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD{display: flex; flex-direction: column; align-items: center; position: relative;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .default{display: flex; align-items: center; cursor: pointer; font-size:var(--fontsize12); background-color: var(--siaPrimaryBgColor); border-radius:5px; padding: 5px 10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .default i{margin-left: 10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .default.shortlisted{color:var(--greenColor2); font-family: var(--fontfamilysemibold);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .default.notshortlisted{color:var(--lightRedColor); font-family: var(--fontfamilysemibold);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .statusDDInner{background-color:var(--whitecolor); z-index: 220002; box-shadow: 0px 0px 5px rgb(29 23 71 / 10%); min-width: 150px; left:0; position: absolute; right:0; top:100%; display: flex; display: none; flex-direction: column;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .statusDDInner .top{display: flex; justify-content: space-between; padding:10px; width:var(--fullwidth); font-size:var(--fontsize12); border-bottom:1px solid var(--greyColor); color:var(--tableTh);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .statusDDInner .content{display: flex; padding:10px; flex-direction: column; width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .statusDDInner label{cursor: pointer; margin-bottom: 0; margin-top: 10px; display: flex;width:var(--fullwidth); align-items: center; font-size:var(--fontsize12); color:var(--greyColor8);} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .statusDDInner label:first-child{margin-top: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .activitywiseWrapper .right table td .statusDD .statusDDInner label input[type="radio"]{margin:0; margin-right: 10px;} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-top:0px;} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper h3{color:var(--blackColor); text-align: left; font-family: var(--fontfamilysemibold); margin-bottom:5px; font-size: var(--fontsize14);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block:first-child{margin-top: 0;} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block{display: flex; width:var(--fullwidth); flex-direction: column; margin-top:30px;} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block ul{margin:0px 0 0; padding: 0; display: flex; flex-direction: column; width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block ul li{margin:15px 0 0; padding: 0; color:var(--tableTh); font-size: var(--fontsize14); width:var(--fullwidth);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block ul li i{margin-right:10px; color:var(--orangeColor);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block ul li i.fa-circle{margin-right:10px; color:var(--tableTh); font-size: var(--fontsize10);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block .accordianBlock{box-shadow: 0px 0px 0px 0px; border:1px solid var(--tableTh);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block .accordianBlock h3{font-size: var(--fontsize14); font-family:var(--defaultfont);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .block .accordianBlock .panel{font-size: var(--fontsize14); color:var(--tableTh); font-family:var(--defaultfont);} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper textarea{max-width: none; resize: none; border:0px none; overflow: unset;} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper textarea{overflow: hidden;} .competitionsDetailWrapper .competitionsAccordianWrapper .additionalInformationWrapper .previewData{white-space: pre-wrap; line-height: 30px; font-size: var(--fontsize14); color:var(--tableTh); font-family:var(--defaultfont);} /*G competitions Detail Page start*/ /*New Design Form Page start here*/ .newFormDesignWrapper{display: flex; width:var(--fullwidth); flex-direction: column;} .newFormDesignWrapper.noStyle{display: flex; width:var(--fullwidth); flex-direction: column;} .newFormDesignWrapper .formBlockMain.noStyle{box-shadow: 0px 0px 0px 0px; padding:0; background-color: transparent;} .addCustomStyle{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); width:var(--fullwidth); background-color: var(--whitecolor); padding:15px; border-radius:var(--radius10)} .newFormDesignWrapper .noPadding{padding:0;} .newFormDesignWrapper .formBlockMain{display: flex; flex-direction: column; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); width:var(--fullwidth); background-color: var(--whitecolor); padding:15px; border-radius:var(--radius10)} .newFormDesignWrapper .formBlockMain .formBlockWrapper {display: flex; width:var(--fullwidth);} .newFormDesignWrapper .headingWrapper{display: flex; width:var(--fullwidth); flex-direction: column; margin-bottom: 30px;} .newFormDesignWrapper .headingWrapper h2{font-size: var(--fontsize20); color: var(--blackcolor); margin-bottom:5px; font-family: var(--fontfamilysemibold);} .newFormDesignWrapper .headingWrapper p{font-size: var(--fontsize14); color: var(--greyColor8); margin-bottom:0px; font-family: var(--defaultfont);} .newFormDesignWrapper .formBlockMain .formBlockWrapper .formdisplay {display: flex; width:var(--fullwidth);} .newFormDesignWrapper .formBlockLeft{display: flex; flex-direction: column; width:var(--fullwidth); flex: 1} .newFormDesignWrapper .formBlockRight{display: flex; flex-direction: column; width:var(--fullwidth); max-width: 350px; margin-left: 30px;} .newFormDesignWrapper .formBlockLeft .formBlock{padding: 0;} .newFormDesignWrapper .formBlockLeft .domainInfo{display: flex; flex-direction: column; align-items: flex-start;} .newFormDesignWrapper .formBlockLeft .domainInfo .domain{font-family: var(--fontfamilysemibold); margin-bottom:5px;} .newFormDesignWrapper .formBlockLeft .domainInfo .domain a{font-family: var(--fontfamilysemibold); color: var(--blackColor);} .newFormDesignWrapper .formBlockLeft .domainInfo p{font-size: var(--fontsize14); color: var(--greyColor8); margin-bottom:0px; font-family: var(--defaultfont);} .newFormDesignWrapper .formBlockLeft .domainInfo a{color:var(--primaryColor);} .newFormDesignWrapper .formBlockLeft .domainInfo a i{ margin-left:5px;} .newFormDesignWrapper .formBlockLeft .growthInfo{display: flex; align-items: flex-start;} .newFormDesignWrapper .formBlockLeft .growthInfo span{ont-size: var(--fontsize18); margin-right: 10px;} .newFormDesignWrapper .formBlockLeft .growthInfo .growth{display: flex; align-items:center;} .newFormDesignWrapper .formBlockLeft .growthInfo .growth.up{color:var(--greenColor)} .newFormDesignWrapper .formBlockLeft .growthInfo .growth.down{color:var(--redColor)} .newFormDesignWrapper .formBlockLeft .growthInfo .growth.up i{margin-left: 5px; font-size: var(--fontsize25);} .newFormDesignWrapper .formBlockLeft .growthInfo .growth.down i{margin-left: 5px; font-size: var(--fontsize25);} /*Domain Detail*/ .marginTop30{margin-top: 30px;} .detailDomainWrapper{ display:flex; width: var(--fullwidth); flex-direction: column;} .detailDomainWrapper .chartDetailDD{display: flex; width: var(--fullwidth); align-items:flex-end; margin-bottom: 30px;} .detailDomainWrapper .chartDetailDD h3{font-size: var(--fontsize16); flex: 1; margin-bottom: 10px; display: flex; align-items: center; font-weight: 400; color: var(--blackColor)} .detailDomainWrapper .chartDetailDD .left{width: var(--fullwidth); max-width: 600px;} .detailDomainWrapper .chartDetailDD .left select{width: var(--fullwidth); border-radius:5px; padding:10px; font-size:var(--fontsize16); border:1px solid var(--blackColor);} .detailDomainWrapper .chartDetailDD .growthValue{display: flex; width: var(--fullwidth); margin-left: 25px;} .detailDomainWrapper .chartDetailDD .growthValue span{background-color: var(--lightSecondaryColor); border-radius:10px; padding:5px 15px; font-size:var(--fontsize13); color:var(--lightColor);} .detailDomainWrapper .chartDetailDD .growthValue span div{color:var(--greenColor2); justify-content: center; display: flex; align-items: center; padding:0px; text-align: center; font-size:var(--fontsize18);} .detailDomainWrapper .chartDetailDD .growthValue span div i{margin-left: 5px; margin-top:0px; font-size:var(--fontsize35);} .jobSkillWrapper{display: flex; width:100%;} .jobSkillWrapper .chartDetailDD{display: flex; width: var(--fullwidth); align-items:flex-end; margin-bottom: 30px;} .jobSkillWrapper .chartDetailDD h3{font-size: var(--fontsize16); flex: 1; margin-bottom: 10px; display: flex; align-items: center; font-weight: 400; color: var(--blackColor)} .jobSkillWrapper .left{width: var(--fullwidth); max-width: 600px;} .jobSkillWrapper .growthValue{display: flex; width: var(--fullwidth); margin-left: 25px;} .jobSkillWrapper .growthValue span{background-color: var(--lightSecondaryColor); border-radius:10px; padding:5px 15px; font-size:var(--fontsize13); color:var(--lightColor);} .jobSkillWrapper .growthValue span div{color:var(--greenColor2); justify-content: center; display: flex; align-items: center; padding:0px; text-align: center; font-size:var(--fontsize18);} .jobSkillWrapper .growthValue span div i{margin-left: 5px; margin-top:0px; font-size:var(--fontsize35);} .jobSkillWrapper .growthValue .growth{display: flex; align-items:center; justify-content: center;} .jobSkillWrapper .growthValue .growth.up{color:var(--greenColor)} .jobSkillWrapper .growthValue .growth.down{color:var(--redColor)} .jobSkillWrapper .growthValue .growth.up i{margin-left: 5px; font-size: var(--fontsize25);} .jobSkillWrapper .growthValue .growth.down i{margin-left: 5px; font-size: var(--fontsize25);} .jobSkillWrapper .growthValue p{color:var(--greyColor);} .detailSkillDashboardWrapwer{ display:flex; width: var(--fullwidth); flex-direction: column;} .detailSkillDashboardWrapwer .chartDetailDD{display: flex; width: var(--fullwidth); align-items:flex-end; margin-bottom: 30px;} .detailSkillDashboardWrapwer .chartDetailDD h3{font-size: var(--fontsize16); flex: 1; margin-bottom: 10px; display: flex; align-items: center; font-weight: 400; color: var(--blackColor)} .detailSkillDashboardWrapwer .chartDetailDD .left{width: var(--fullwidth); max-width: 600px; margin-left: 30px;} .detailSkillDashboardWrapwer .chartDetailDD .left:first-child{margin-left: 0;} .detailSkillDashboardWrapwer .chartDetailDD .left select{width: var(--fullwidth); font-size:var(--fontsize16); border:1px solid var(--blackColor);} .detailSkillDashboardWrapwer .chartDetailDD .left p{font-size: var(--fontsize16); color: var(--blackColor); font-family: var(--fontfamilysemibold);} .departmentWrapper .tableWrapper{display: flex; width:var(--fullwidth); flex-direction: column; background-color: var(--whitecolor); padding:15px; border-radius:var(--radius5)} .departmentWrapper .tableWrapper th{padding:8px; font-family: var(--defaultfont); text-transform: capitalize; color:var(--blackcolor); font-size:var(--fontsize14);} .departmentWrapper .tableWrapper td{padding: 8px; font-family: var(--defaultfont); color:var(--greyColor5); border:1px solid var(--greyColor4); font-size:var(--fontsize14);} .departmentWrapper .au-checkmark{position: static; width:20px; height: 20px; border-radius:var(--radius5); display: flex; border:1px solid var(--greyColor4); background-color: var(--whitecolor);} .departmentWrapper .status--process{border:0px none; border-radius:var(--radius5); padding:2px 5px 5px;} .departmentWrapper .status--denied {color: var(--lightRedColor); border:0px none; border-radius:var(--radius5); padding:2px 5px 5px;} .departmentWrapper td.actions i{font-size: var(--fontsize16);} .departmentWrapper .alignRight{justify-content:flex-end} .newFormDesignWrapper .pageTitle.newdesign { border-bottom: 1px solid var(--greyColor4); display: flex; width:var(--fullwidth); justify-content: space-between; align-items: center; padding: 0 0 15px; margin-bottom: 20px; border-radius: 0} /*Domain Detail*/ /*Video Interview*/ .videoInterviewWrapper{display:flex; width: var(--fullwidth); flex-direction: column; position: relative; height: 100%} .videoInterviewWrapper .questionBarWrapper{box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); border-radius: 10px; padding: 20px; background-color: var(--whitecolor); } .videoInterviewWrapper .questionTopBar{display: flex; width: var(--fullwidth); justify-content: space-between; align-items: center;} .videoInterviewWrapper .questionTopBar .title{display: flex; font-size: var(--fontsize14); gap:5px; align-items: center; font-family: var(--defaultfont); color:var(--greyColor5); } .videoInterviewWrapper .questionTopBar .title strong{font-weight: bold; color:var(--blackColor); } .videoInterviewWrapper .questionTopBar .timeCounter{display: flex; flex-direction: column; gap:5px;} .videoInterviewWrapper .questionTopBar .timeCounter div:nth-child(1){display: flex; align-items: center; gap:5px; color:var(--greenColor); font-family: var(--fontfamilysemibold); font-size: var(--fontsize22); } .videoInterviewWrapper .questionTopBar .timeCounter div:nth-child(2){display: flex; color:var(--greyColor5); font-family: var(--defaultfont); font-size: var(--fontsize12); justify-content: flex-end;} .videoInterviewWrapper .stepper-wrapper { margin-top: auto; display: flex; justify-content: space-between; margin: 20px 0;} .videoInterviewWrapper .stepper-wrapper .stepper-item {position: relative; display: flex; flex-direction: column; align-items: center; flex: 1;} .videoInterviewWrapper .stepper-wrapper .stepper-item::before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 12px; left: -50%; z-index: 2;} .videoInterviewWrapper .stepper-wrapper .stepper-item::after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 12px; left: 50%; z-index: 2;} .videoInterviewWrapper .stepper-wrapper .stepper-item .step-counter { position: relative; color: var(--greyColor7); font-weight: bold; font-size: var(--fontsize12); z-index: 5; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background:var(--greyColor4); margin-bottom:0px;} .videoInterviewWrapper .stepper-wrapper .stepper-item.active .step-counter{font-weight: bold; background-color: var(--orangeColor); color: var(--whitecolor);} .videoInterviewWrapper .stepper-wrapper .stepper-item.active::before { position: absolute; content: ""; border-bottom: 2px solid var(--orangeColor); width: 100%; z-index: 3;} .videoInterviewWrapper .stepper-wrapper .stepper-item.completed .step-counter {background-color:var(--greenColor); font-family: var(--fontfamilysemibold); color:var(--whitecolor);} .videoInterviewWrapper .stepper-wrapper .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #4bb543; width: 100%; top: 12px; left: 50%; z-index: 3;} .videoInterviewWrapper .stepper-wrapper .stepper-item:first-child::before {content: none;} .videoInterviewWrapper .stepper-wrapper .stepper-item:last-child::after {content: none;} .videoInterviewWrapper .stepper-wrapper-legend{display: flex; align-items: center; justify-content: flex-end; gap:15px;} .videoInterviewWrapper .stepper-wrapper-legend div{display: flex; align-items: center; font-size: var(--fontsize12); gap:5px; font-family: var(--defaultfont); color:var(--greyColor5);} .videoInterviewWrapper .stepper-wrapper-legend div i{display: flex; align-items: center; width:14px; height: 14px; border-radius: 100%} .videoInterviewWrapper .stepper-wrapper-legend div:nth-child(1) i{background-color:var(--greenColor); } .videoInterviewWrapper .stepper-wrapper-legend div:nth-child(2) i{background-color:var(--orangeColor); } .videoInterviewWrapper .questionsWrapper{display: flex; gap:20px; margin-top: 20px; flex-direction: column; width: 100%; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); border-radius: 10px; padding: 20px; background-color: var(--whitecolor);} .videoInterviewWrapper .questionsWrapper .questionsTitle{display: flex; width: 100%; gap:10px; font-family: var(--defaultfont); font-size: var(--fontsize14); align-items: center; color:var(--blackColor);} .videoInterviewWrapper .questionsWrapper .questionsTitle span{font-family: var(--fontfamilysemibold); flex-shrink: 0;} .videoInterviewWrapper .questionsWrapper .questionContent{display: flex; width: 100%} .videoInterviewWrapper .questionsWrapper .questionContent .videoContent{display: flex; width: 100%} .videoInterviewWrapper .questionsWrapper .questionContent video{display: flex; width: 100%; max-width: 300px;} .videoInterviewWrapper .answerTheQuestion{display: flex; flex-direction: column; width: 100%; gap:10px;} .videoInterviewWrapper .answerTheQuestion p{font-family: var(--defaultfont);border-bottom:1px solid var(--strokeColor); padding-bottom: 5px; font-size: var(--fontsize14); color:var(--greyColor5);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock{display: flex; flex:1; gap: 10px;} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .inputBlock{display: flex; flex:1} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock input[type="text"]{display: flex; width: 100%; max-width: none; bordeR:0px none; flex:1; padding: 10px; border-radius: 5px; background-color: var(--lightPrimaryColor);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD{display: flex; align-items: center; position: relative;;} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .selectedChoice{display: flex; align-items: center; width:40px; font-size: var(--fontsize24); border-radius: 5px; height: 40px; color:var(--whitecolor); display: flex; align-items: center; justify-content: center; background-color: var(--primaryColor);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .choiceOptionsDDHover{ position: absolute; min-width: 120px; max-width: 120px; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); bottom:100%; display: flex; display:none; flex-direction: column; padding:20px; border-radius: 10px; background-color:var(--whitecolor);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .choiceOptionsDDHover ul{margin: 0; padding: 0; gap:15px; display: flex; flex-direction: column;} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .choiceOptionsDDHover ul li{margin: 0; align-items: center; padding: 0; display: flex; gap:10px; font-size: var(--fontsize14); color:var(--blackcolor);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .choiceOptionsDDHover ul li a{margin: 0; align-items: center; padding: 0; display: flex; gap:10px; font-size: var(--fontsize14); color:var(--blackcolor);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .choiceOptionsDDHover ul li a:hover{margin: 0; align-items: center; padding: 0; display: flex; gap:10px; font-size: var(--fontsize14); color:var(--primaryColor);} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD:hover .choiceOptionsDDHover{display: flex;} .videoInterviewWrapper .answerTheQuestion .sendAnswerBlock .choiceOptionsDD .choiceOptionsDDHover.open{display: flex;} .videoInterviewWrapper .questionBottomActionbar{font-size: var(--fontsize14); align-items: center; margin-top: 20px; color:var(--greyColor5); display: flex; justify-content: space-between; width: 100%; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); border-radius: 10px; padding: 20px; background-color: var(--whitecolor);} .videoInterviewWrapper .questionBottomActionbar a{gap:5px; display: flex; align-items: center;} .videoInterviewWrapper .questionBottomActionbar .questionBackButton{display: flex; align-items: center;} .videoInterviewWrapper .questionBottomActionbar .questionActionsButton{gap:15px; display: flex;} .videoInterviewWrapper .questionsWrapper .userUploadedContent{display: flex; align-items: center; color:var(--greyColor5); font-size: var(--fontsize14); width: 100%; gap:15px; border:1px solid var(--strokeColor); padding:15px; border-radius: 10px;} .videoInterviewWrapper .questionsWrapper .userUploadedContent .thumb{max-width: 150px; justify-content: center; display: flex; align-items: center; width:100%; height: 100%; min-height: 100px; flex-shrink: 0; box-shadow: 0px 4px 25px rgb(112 98 227 / 10%); border-radius: 10px; padding:0px; background-color: var(--whitecolor);} .videoInterviewWrapper .questionsWrapper .questionsTitle{display: flex; width: 100%; gap:10px; font-family: var(--defaultfont); font-size: var(--fontsize14); align-item height: 100px; display: flex; width: 100%} .videoInterviewWrapper .questionsWrapper .userUploadedContent .thumb img{object-fit: contain; width: 100%} .videoInterviewWrapper .questionsWrapper .userUploadedContent .thumb video{width:100%; height: 100%} .videoInterviewWrapper .questionsWrapper .userUploadedContent .thumb i{font-size: var(--fontsize25); color:var(--blackColor);} .videoInterviewWrapper .questionsWrapper .userUploadedContent .thumbContent{display: flex; flex-direction: column; flex:1} .videoInterviewResultDialog.open{display: flex;} .videoInterviewResultDialog{position:fixed; display: flex; display: none; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 22000000;} .videoInterviewResultDialog .videoInterviewResultContainer{background-color: var(--whitecolor); gap: 20px; position: relative; flex-direction: column; width: var(--fullwidth); padding: 20px; max-width:600px; display: flex; border-radius:var(--radius15);} .videoInterviewResultDialog .videoInterviewResultContainer .dialogClose{position: absolute; top: -10px; right: -10px} .videoInterviewResultDialog .videoInterviewResultContainer .dialogClose a{width: 30px; height: 30px; color: var(--blackcolor); font-size:var(--fontsize18); border-radius: var(--radius100); background-color: var(--whitecolor); display: flex; align-items: center; justify-content: center;} .videoInterviewResultDialog .videoInterviewResultContainer .questionResult{display: flex; gap:15px; flex-direction: column; width: 100%; background-color: var(--greyColor4); padding: 10px;} .videoInterviewResultDialog .videoInterviewResultContainer .questionResult h5{font-size: var(--fontsize16); justify-content: center; flex: 1; margin-bottom:0px; display: flex; align-items: center; font-family: var(--fontfamilysemibold); font-weight: 400; color: var(--blackColor)} .videoInterviewResultDialog .videoInterviewResultContainer .questionResult ol{display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; justify-content: center; gap:10px;} .videoInterviewResultDialog .videoInterviewResultContainer .questionResult ol li{display: flex; font-family: var(--fontfamilysemibold); width: 32px; color:var(--whitecolor); font-size:var(--fontsize14); height: 32px; background-color: var(--greenColor); align-items: center; justify-content: center; border-radius:100%; margin: 0; padding: 0;} .videoInterviewResultDialog .videoInterviewResultContainer .questionResult ol li.notattempted{background-color: var(--orangeColor);} .videoInterviewResultDialog .questionResultLegend{display: flex; align-items: center; justify-content:space-between; gap:15px;} .videoInterviewResultDialog .questionResultLegend div{display: flex; align-items: center; font-size: var(--fontsize12); gap:5px; font-family: var(--defaultfont); color:var(--greyColor5);} .videoInterviewResultDialog .questionResultLegend div i{display: flex; align-items: center; width:14px; height: 14px; border-radius: 100%} .videoInterviewResultDialog .questionResultLegend div:nth-child(1) i{background-color:var(--greenColor); } .videoInterviewResultDialog .questionResultLegend div:nth-child(2) i{background-color:var(--orangeColor); } .videoInterviewResultDialog .questionResultActions{display: flex; width: 100%; gap:15px; justify-content: center; flex-direction: column;} .videoInterviewResultDialog .questionResultActions h5{font-size: var(--fontsize16); justify-content: center; flex: 1; margin-bottom:0px; display: flex; align-items: center; font-family: var(--fontfamilysemibold); font-weight: 400; color: var(--blackColor)} .videoInterviewResultDialog .questionResultActions div{display: flex; gap: 15px; width: 100%; justify-content: center; gap:15px;} .videoInterviewResultDialog .questionResultActions div a{width: auto; padding: 5px 20px; font-size: var(--fontsize14);} /*Video Interview*/ @media screen and (max-width:1000px) { .sicCouncilWrapper .councilTabsWrapper{overflow-x: auto; white-space: nowrap;} .sicCouncilWrapper .tableHeadingWrapper{flex-direction: column;} .sicCouncilWrapper .tableHeadingWrapper h3{margin-bottom: 15px;} .sicCouncilWrapper .councilTableWrapper .tableBlock{overflow-x:auto; white-space: nowrap; max-width: none;} .sicCouncilWrapper .councilTableWrapper table tbody{width: 100%;} .loginWrapper .loginLeft .logoBlock img{max-width: 100px;} .loginWrapper .loginLeft .bannerSlider .left{max-width: none} .loginWrapper .loginLeft .bannerSlider{margin-top: 0; margin-bottom: 0;} .loginWrapper .loginLeft .bannerSlider .right{max-width: none} } @media screen and (max-width:600px) { .sicCouncilWrapper .tableHeadingWrapper a{ padding: 5px 12px; font-size: var(--fontsize12); white-space: normal;} } @media (min-width: 768px) and (max-width: 1100px){ .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer{ flex-direction:column; padding: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoMain{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentsBlock{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe{height: 200px!important;} header .headerContainer .headerRight{flex-direction: row;} header .headerContainer .headerLeft .mobileMenu{display: flex; font-size: var(--fontsize20);} header .headerContainer .headerLeft .mobileMenu i{margin-top: -4px;} header .headerContainer .profileBlock .accountDD div{display: none} header .headerContainer{padding: 10px 15px;} header .headerContainer .profileBlock{margin-left: 10px;} .languageChanger{margin-right: 0;} .languageChanger label{display: none} header .headerContainer .profileBlock .dropdown-menu{min-width: 300px;} .pageWrapper .sidebarRight{display: none} .pageWrapper .sidebarLeft{position: absolute; left: -325px;} main{padding: 30px 15px;} .pageWrapper .mainContent{margin:0;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe {height: 340px!important;} .languageChanger label{display: flex;} } @media (min-width: 481px) and (max-width: 767px) { .sicCouncilWrapper .councilHeadingWrapper{flex-direction: column;} .sicCouncilWrapper .dataTables_length{display: flex; float: none; justify-content: center; align-items: center;} .sicCouncilWrapper .dataTables_filter{display: flex; float: none; justify-content: center; align-items: center;} .sicCouncilWrapper .tableHeadingWrapper h3{text-align: center;} .sicCouncilWrapper .councilTableWrapper .dataTables_wrapper .dataTables_filter label input[type="search"]{width: 100%;} .pageWrapper .sidebarLeft{position: absolute; left: -325px;} .pageWrapper .mainContent.marginRightZero{ margin-left:0} .loginWrapper{flex-direction: column;} .loginWrapper .loginLeft{max-width: none; padding: 15px; height: auto;} .loginWrapper .loginLeft .logoBlock img{max-width: 100px;} .loginWrapper .loginLeft .logoBlock{margin-bottom: 0} .loginWrapper .loginLeft .bannerSlider{display: none} .loginWrapper .loginRight{max-width: none; padding: 15px; height: auto;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer{ flex-direction:column; padding: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoMain{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentsBlock{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe{height: 200px!important;} header .headerContainer .headerRight{flex-direction: row;} header .headerContainer .headerLeft .mobileMenu{display: flex; font-size: var(--fontsize20);} header .headerContainer .headerLeft .mobileMenu i{margin-top: -4px;} header .headerContainer .profileBlock .accountDD div{display: none} header .headerContainer{padding: 10px 15px;} header .headerContainer .profileBlock{margin-left: 10px;} .languageChanger{margin-right: 0;} .languageChanger label{display: none} header .headerContainer .profileBlock .dropdown-menu{min-width: 300px;} .pageWrapper .sidebarRight{display: none} main{padding: 30px 15px;} .pageWrapper .mainContent{margin:0;} .portfolioDetailWrapper .portfolioInfo .left .openToWork{justify-content: center;} } @media (max-width: 480px) { .mecRegister .loginWrapper{margin:0px; overflow-y: auto;} .mecRegister .loginWrapper .loginLeft{max-width: none; width:var(--fullwidth); padding:0 0 0px; flex:unset; height: inherit;} .mecRegister .loginWrapper .loginRight{padding: 20px;} .mecRegister .loginWrapper .loginRight{height: unset} .mecRegister .loginWrapper .loginRight form{max-height: unset} .mecRegister .loginWrapper .loginLeft .logoBlock{text-align: center; margin-bottom: 15px;} .mecRegister .loginWrapper .loginLeft .logoBlock img{max-width: 150px;} .mecRegister .loginWrapper .loginRight{position: static} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginLeft .loginOverlay h4{font-size: var(--fontsize22);} .mecRegister .loginWrapper .loginLeft .loginOverlay h4 br{display: none} .mecRegister .loginWrapper .loginLeft .loginOverlay{padding: 20px;} .mecRegister .loginWrapper .loginRight{overflow-y: unset;} .mecRegister .loginWrapper .loginRight{overflow-y: unset;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height: unset} .loginWrapper{flex-direction: column;} .loginWrapper .loginLeft{max-width: none; padding: 15px; height: auto;} .loginWrapper .loginLeft .logoBlock img{max-width: 100px;} .loginWrapper .loginLeft .logoBlock{margin-bottom: 0} .loginWrapper .loginLeft .bannerSlider{display: none} .loginWrapper .loginRight{max-width: none; padding: 15px; height: auto; flex-direction: column;} .loginWrapper .loginRight .languageChanger{position: static; margin-bottom:15px; margin-right: 0; width: 100%; justify-content: center} .loginWrapper .loginRight .languageChanger label{margin-bottom: 0} .loginWrapper .loginRight h4{text-align: center;} .loginWrapper .loginRight .formWrapper{overflow-y: auto; max-height: 400px;} header .headerContainer .headerRight{flex-direction: row;} header .headerContainer .headerLeft .mobileMenu{display: flex; font-size: var(--fontsize20);} header .headerContainer .headerLeft .mobileMenu i{margin-top: -4px;} header .headerContainer .profileBlock .accountDD div{display: none} header .headerContainer{padding: 10px 15px;} header .headerContainer .profileBlock{margin-left: 10px;} .languageChanger{margin-right: 0;} .languageChanger label{display: none} header .headerContainer .profileBlock .accountDD i{margin-right: 0;} .pageWrapper .sidebarRight{display: none} .pageWrapper .mainContent{margin:0;} main{padding: 30px 15px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info{flex-wrap: wrap;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span.points:before{display: none} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span{margin-bottom: 5px;} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span:before{display: none} .pageWrapper .mainContent .dashboardCompetitionsWrapper .activityArea .items .thumbContent .info span{margin-right: 15px; margin-left: 0;} .createPostDialogWrapper .createPostDialogContainer{margin: 10px;} .pageWrapper .mainContent .colorfullBoxesSection ol{ grid-template-columns: repeat(1,minmax(0,1fr));} .pageWrapper .mainContent .coursesRecommendedSection ol li .section{flex-direction: column;} .pageWrapper .mainContent .coursesRecommendedSection ol li .coursesItems .coursesContent{padding-left: 0; margin-top: 15px;} header .headerContainer .profileBlock .dropdown-menu{min-width: 300px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer{ flex-direction:column; padding: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoMain{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentsBlock{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe{height: 200px!important;} .pageWrapper .sidebarLeft{display: none} .portfolioDetailWrapper .portfolioInfo .left .openToWork{justify-content: center;} .fullScreen.loginWrapper .loginLeft{background-color: transparent; height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .slick-slide > div{height: 100%} .fullScreen.loginWrapper .loginLeft .fixedBlock{top:10px; left:10px; gap:0; right:10px; align-items: center;} .fullScreen.loginWrapper .loginLeft .fixedBlock h4{font-size: var(--fontsize22); text-align: center;} .fullScreen.loginWrapper .loginLeft .fixedBlock p{ font-size: var(--fontsize16); text-align: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right{left:10px; height:auto; right:10px; bottom:10px; width:auto; padding: 0; } .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{display: none} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{display: none} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock{width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock br{display: none;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right div{width:100%} .fullScreen.loginWrapper .loginLeft .fixedBlock p br{display: none} .fullScreen.loginWrapper .loginLeft .logoBlock img{max-width: 220px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .items{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .left{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{height: 100%} .fullScreen.loginWrapper .slick-slide img{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{display: flex; } .fullScreen.loginWrapper .loginRight{position: static;} .fullScreen.loginWrapper .loginRight .loginWithUserNameWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepOneWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepTwoWrapper{min-width: 340px; max-width: 340px;background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepThreeWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFourWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFiveWrapper{min-width: 340px;max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .registerWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginTermsSection{flex-direction: column; word-break: break-all; align-items: center;} .fullScreen.loginWrapper .loginRight .formWrapper{max-height: 250px; overflow-y: auto;} .au-breadcrumb a{ font-size: var(--fontsize12); font-family: var(--defaultfont);} .au-breadcrumb .au-breadcrumb__list{flex-wrap: wrap;} .jobDashboardWrapper .jobDashboardContainer .domainsListingWrapper .dataTables_length label{display: flex; align-items: center; font-weight: normal; } .jobDashboardWrapper .jobDashboardContainer .domainsListingWrapper .dataTables_wrapper .dataTables_length select{max-width: 200px; margin: 0 10px; font-weight: normal;} .jobDashboardWrapper .jobDashboardContainer .domainsListingWrapper .dataTables_wrapper .dataTables_filter label{display: flex; align-items: center; font-weight: normal; } .jobDashboardWrapper .jobDashboardContainer .domainsListingWrapper .dataTables_wrapper .dataTables_filter input{max-width: 230px; margin: 0 10px; font-weight: normal;} } @media (orientation:portrait) and (max-width: 1100px){ .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer{ flex-direction:column; padding: 15px;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoMain{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .commentsBlock{max-width: none} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe{height: 200px!important;} header .headerContainer .headerRight{flex-direction: row;} header .headerContainer .headerLeft .mobileMenu{display: flex; font-size: var(--fontsize20);} header .headerContainer .headerLeft .mobileMenu i{margin-top: -4px;} header .headerContainer .profileBlock .accountDD div{display: none} header .headerContainer{padding: 10px 15px;} header .headerContainer .profileBlock{margin-left: 10px;} .languageChanger{margin-right: 0;} .languageChanger label{display: none} header .headerContainer .profileBlock .dropdown-menu{min-width: 300px;} .pageWrapper .sidebarRight{display: none} .pageWrapper .sidebarLeft{position: absolute; left: -325px;} main{padding: 30px 15px;} .pageWrapper .mainContent{margin:0;} .fullScreenVideoDialogWrapper .fullScreenVideoDialogContainer .videoBlock iframe {height: 340px!important;} .languageChanger label{display: flex;} .mecRegister .loginWrapper{margin:0px; overflow-y: auto; flex-direction: column;} .mecRegister .loginWrapper .loginLeft{max-width: none; width:var(--fullwidth); padding:0 0 0px; flex:unset; height: inherit;} .mecRegister .loginWrapper .loginRight{padding: 20px;} .mecRegister .loginWrapper .loginLeft .logoBlock{text-align: left; margin-bottom: 15px;} .mecRegister .loginWrapper .loginLeft .logoBlock img{max-width: 100%; object-fit: contain;height: 100%;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginLeft .loginOverlay h4{font-size: var(--fontsize18);} .mecRegister .loginWrapper .loginLeft .loginOverlay h4 br{display: block} .mecRegister .loginWrapper .loginLeft .loginOverlay{padding: 20px;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginRight form{max-height:unset;} .mecRegister .loginWrapper .loginRight{overflow-y: unset; position: static; margin:20px; width:auto;} .mecRegister .loginWrapper .loginRight{overflow-y: unset;} .mecRegister .loginWrapper .loginLeft .loginOverlay{justify-content: space-evenly;} .mecRegister .loginWrapper .loginLeft .bannerSlider .left img{height: auto; object-fit: contain;} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots{bottom: 25px; display: none} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots li button:before{color:var(--whitecolor);} .mecRegister{position: unset;} .mecRegister .loginWrapper .loginLeft .bannerSlider{position: static;} .fullScreen.loginWrapper .loginLeft{background-color: transparent; height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .slick-slide > div{height: 100%} .fullScreen.loginWrapper .loginLeft .fixedBlock{top:10px; left:10px; gap:0; right:10px; align-items: center;} .fullScreen.loginWrapper .loginLeft .fixedBlock h4{font-size: var(--fontsize22); text-align: center; margin-bottom:5px;} .fullScreen.loginWrapper .loginLeft .fixedBlock p{ font-size: var(--fontsize16); text-align: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right{left:10px; height:auto; right:10px; bottom:10px; width:auto; padding: 0; } .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{display: flex; text-align: center; justify-content: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{display: flex; text-align: center; justify-content: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock{width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock br{display: none;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right div{width:100%} .fullScreen.loginWrapper .loginLeft .fixedBlock p br{display: none} .fullScreen.loginWrapper .loginLeft .logoBlock img{max-width: 220px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .items{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .left{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{height: 100%} .fullScreen.loginWrapper .slick-slide img{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{display: flex; } .fullScreen.loginWrapper .loginRight{position: static;} .fullScreen.loginWrapper .loginRight .loginWithUserNameWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepOneWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepTwoWrapper{min-width: 340px; max-width: 340px;background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepThreeWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFourWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFiveWrapper{min-width: 340px;max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .registerWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginTermsSection{flex-direction: column; word-break: break-all; align-items: center;} .fullScreen.loginWrapper .loginRight .formWrapper{max-height: 300px; overflow-y: auto;} } @media (orientation:landscape) and (max-width: 1180px){ .mecRegister .loginWrapper{margin:0px; overflow-y: auto; flex-direction: column;} .mecRegister .loginWrapper .loginLeft{max-width: none; width:var(--fullwidth); padding:0 0 0px; flex:unset; height: inherit;} .mecRegister .loginWrapper .loginRight{padding: 20px;} .mecRegister .loginWrapper .loginLeft .logoBlock{text-align: left; margin-bottom: 15px;} .mecRegister .loginWrapper .loginLeft .logoBlock img{max-width: 250px;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginLeft .loginOverlay h4{font-size: var(--fontsize22);} .mecRegister .loginWrapper .loginLeft .loginOverlay h4 br{display: block} .mecRegister .loginWrapper .loginLeft .loginOverlay{padding: 20px;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginRight form{max-height:unset;} .mecRegister .loginWrapper .loginRight{overflow-y: unset; position: static; margin:20px; width:auto;} .mecRegister .loginWrapper .loginRight{overflow-y: unset;} .mecRegister .loginWrapper .loginLeft .bannerSlider .left img{height: auto; object-fit: contain;} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots{bottom: 25px; display: none} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots li button:before{color:var(--whitecolor);} .mecRegister{position: unset;} .mecRegister .loginWrapper{position: unset;} .mecRegister .loginWrapper .loginLeft .bannerSlider{position:unset; height:inherit;} .mecRegister .loginWrapper .loginRight { justify-content: center; position: absolute; max-width: 380px; background-color: var(--whitecolor); left: auto; right: 30px; padding: 15px; border-radius: 15px; bottom: auto; } .mecRegister .loginWrapper .loginLeft .bannerSlider{position: absolute;} .mecRegister .loginWrapper .loginLeft .bannerSlider .left img{object-fit:cover; height: 100vh} .mecRegister .loginWrapper .loginLeft .loginOverlay{justify-content: space-between;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height: 600px} .fullScreen.loginWrapper .loginLeft{background-color: transparent; height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .slick-slide > div{height: 100%} .fullScreen.loginWrapper .loginLeft .fixedBlock{top:10px; left:10px; gap:0; right:10px; align-items: center; display: none} .fullScreen.loginWrapper .loginLeft .fixedBlock h4{font-size: var(--fontsize22); text-align: center; margin-bottom:5px;} .fullScreen.loginWrapper .loginLeft .fixedBlock p{ font-size: var(--fontsize16); text-align: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right{left:10px; height:auto; right:10px; bottom:10px; width:auto; padding: 0; } .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{display: none} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{display: none} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock{width: 100%; margin-top: 20px; display: flex; display: none; align-items: center; justify-content: center; flex-direction: column;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock br{display: none;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right div{width:100%} .fullScreen.loginWrapper .loginLeft .fixedBlock p br{display: none} .fullScreen.loginWrapper .loginLeft .logoBlock img{max-width: 220px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .items{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .left{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{height: 100%} .fullScreen.loginWrapper .slick-slide img{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{display: flex; } .fullScreen.loginWrapper .loginRight{position: static; } .fullScreen.loginWrapper .loginRight .loginWithUserNameWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepOneWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepTwoWrapper{min-width: 340px; max-width: 340px;background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepThreeWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFourWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFiveWrapper{min-width: 340px;max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .registerWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginTermsSection{flex-direction: column; word-break: break-all; align-items: center;} .fullScreen.loginWrapper .loginRight .formWrapper{max-height: 250px; overflow-y: auto;} } @media (orientation:landscape) and (max-width:1180px){ .loginWrapper{flex-direction: column;} .loginWrapper .loginLeft{max-width: none; padding: 15px;} .loginWrapper .loginLeft .logoBlock img{max-width: 100px;} .loginWrapper .loginLeft .logoBlock{margin-bottom: 0} .loginWrapper .loginLeft .bannerSlider{display: none} .loginWrapper .loginRight{max-width: none; padding: 15px; height: auto; flex-direction: column;} .loginWrapper .loginRight .languageChanger{position: absolute; margin-bottom:0px; margin-right: 0;} .loginWrapper .loginRight h4{text-align: left;} .loginWrapper .loginRight .formWrapper{overflow-y: auto; max-height:200px;} .loginWrapper .loginRight label{margin-bottom: 0;} .pageWrapper .sidebarRight{display: none} .pageWrapper .mainContent{margin: 0;} main{padding: 30px 15px;} header .headerContainer{padding: 10px 15px;} header .headerContainer .headerLeft .mobileMenu{display: flex; font-size: var(--fontsize20);} header .headerContainer .headerLeft .mobileMenu i{margin-top: -4px;} header .headerContainer .profileBlock{margin-left: 10px;} .pageWrapper .mainContent .reelsSection .reelsSlider .items{max-width: none} .pageWrapper .sidebarLeft{position: absolute; left: -325px;} .fullScreen.loginWrapper .loginLeft{background-color: transparent; height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .slick-slide > div{height: 100%} .fullScreen.loginWrapper .loginLeft .fixedBlock{top:10px; left:10px; gap:0; right:10px; align-items: center; display: flex;} .fullScreen.loginWrapper .loginLeft .fixedBlock h4{font-size: var(--fontsize22); text-align: center;} .fullScreen.loginWrapper .loginLeft .fixedBlock p{ font-size: var(--fontsize16); text-align: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right{left:10px; height:auto; right:10px; bottom:10px; width:auto; padding: 0; } .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{display: flex; justify-content: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{display: flex; justify-content: center; text-align: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock{width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p + .logoBlock br{display: none;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right div{width:100%} .fullScreen.loginWrapper .loginLeft .fixedBlock p br{display: none} .fullScreen.loginWrapper .loginLeft .logoBlock img{max-width: 120px;} .fullScreen.loginWrapper .loginLeft .bannerSlider .items{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider .left{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{height: 100%} .fullScreen.loginWrapper .slick-slide img{height: 100%} .fullScreen.loginWrapper .loginLeft .bannerSlider{display: flex; } .fullScreen.loginWrapper .loginRight{position: static;} .fullScreen.loginWrapper .loginRight .loginWithUserNameWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepOneWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepTwoWrapper{min-width: 340px; max-width: 340px;background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepThreeWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFourWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginStepFiveWrapper{min-width: 340px;max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .registerWrapper{min-width: 340px; max-width: 340px; background-color: var(--whitecolor); padding:20px; border-radius: 20px;} .fullScreen.loginWrapper .loginRight .loginTermsSection{flex-direction: column; word-break: break-all; align-items: center;} .fullScreen.loginWrapper .loginRight .formWrapper{max-height: 250px;} } @media (orientation:landscape) and (max-width:900px){ .fullScreen.loginWrapper .loginLeft .bannerSlider .right{display: none} .fullScreen.loginWrapper .loginLeft .fixedBlock{display: none} .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{display: none; text-align: center; justify-content: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{display: none; text-align: center; justify-content: center;} } @media (orientation:portrait) and (max-width:480px){ .fullScreen.loginWrapper .loginLeft .bannerSlider .right h4{display: none; text-align: center; justify-content: center;} .fullScreen.loginWrapper .loginLeft .bannerSlider .right p{display: none; text-align: center; justify-content: center;} } @media (max-width: 480px) { /*body { background-color: red; }*/ .videoInterviewWrapper .questionTopBar{flex-direction: column; gap:20px;} .videoInterviewWrapper .questionTopBar .title{flex-direction: column;} .videoInterviewWrapper .questionTopBar .timeCounter div:nth-child(2){justify-content: center;} .videoInterviewWrapper .stepper-wrapper-legend div{font-size: var(--fontsize10);} .videoInterviewWrapper .questionsWrapper .userUploadedContent{flex-direction: column;} .videoInterviewWrapper .questionsWrapper .userUploadedContent .thumb{max-width:none; min-height: none;} .videoInterviewWrapper .questionBottomActionbar{flex-direction: column; gap:10px;} .videoInterviewResultDialog .videoInterviewResultContainer{margin:10px;} .videoInterviewResultDialog .questionResultLegend div{ font-size: var(--fontsize10);} } /* Media Query for low resolution Tablets, Ipads */ @media (min-width: 481px) and (max-width: 767px) { /* body { background-color: yellow; }*/ .mecRegister .loginWrapper{margin:0px; overflow-y: auto; flex-direction: column;} .mecRegister .loginWrapper .loginLeft{max-width: none; width:var(--fullwidth); padding:0 0 0px; flex:unset; height: inherit;} .mecRegister .loginWrapper .loginRight{padding: 20px;} .mecRegister .loginWrapper .loginLeft .logoBlock{text-align: left; margin-bottom: 15px;} .mecRegister .loginWrapper .loginLeft .logoBlock img{max-width: 100%; object-fit: contain; height: 100%} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginLeft .loginOverlay h4{font-size: var(--fontsize18);} .mecRegister .loginWrapper .loginLeft .loginOverlay h4 br{display: block} .mecRegister .loginWrapper .loginLeft .loginOverlay{padding: 20px;} .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginRight form{max-height:unset;} .mecRegister .loginWrapper .loginRight{overflow-y: unset; position: static; margin:20px; width:auto;} .mecRegister .loginWrapper .loginRight{overflow-y: unset;} .mecRegister .loginWrapper .loginLeft .bannerSlider .left img{height: auto; object-fit: contain;} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots{bottom: 25px; display: none} .mecRegister .loginWrapper .loginLeft .bannerSlider .slick-dots li button:before{color:var(--whitecolor);} .mecRegister{position: unset;} .mecRegister .loginWrapper{position: unset;} .mecRegister .loginWrapper .loginLeft .bannerSlider{position:unset; height:inherit;} } /* Media Query for Tablets Ipads portrait mode */ @media (min-width: 768px) and (max-width: 1024px){ /* body { background-color: blue; }*/ .mecRegister .loginWrapper .loginRight { justify-content: center; position: absolute; max-width: 380px; background-color: var(--whitecolor); left: auto; right: 30px; padding: 15px; border-radius: 15px; bottom: auto; top: 9%; } .mecRegister .loginWrapper .loginRight .formWrapper{max-height:550px;} .mecRegister .loginWrapper .loginLeft .bannerSlider{position: absolute;} .mecRegister .loginWrapper .loginLeft .bannerSlider .left img{object-fit:cover; height: 100vh} .mecRegister .loginWrapper .loginLeft .loginOverlay{justify-content: space-between;} .mecRegister .loginWrapper .loginLeft .logoBlock img{max-width: 250px} } /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* CSS styles specific to iPad Air portrait mode */ /* body { background-color: red; } */ .mecRegister .loginWrapper .loginRight .formWrapper{max-height:unset;} .mecRegister .loginWrapper .loginRight {max-width: 360px; right:10px} } /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* CSS styles specific to iPad Air landscape mode */ } .pageWrapper .mainContent .topCategorySection .topCategorySlider .items a.btn { padding: 10px 20px; }