body{ font-size: 15px; overflow-x: hidden;}
a, a:link, a:visited, a:hover, a:active, button, button:hover { text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
p{line-height: 24px;}
h1{font-size: 26px; font-weight: 700; color: black;}
h3{font-size: 20px; font-weight: 700;}
header{padding: 20px 0px;}
.cart-icon{padding-top: 5px; display: inline-block; position: relative; margin-left: 20px;}
.cart-icon sup{width: 15px; height: 15px; background: #FF3B30; border-radius: 50%; display: block; text-align: center;
right: -6px; top: 0px; position: absolute; line-height: 16px; color: var(--white); font-weight: 700;}
.login-btn{display: inline-block;}
.login-btn button{border: 1px solid #000; padding: 8px 14px; border-radius: 30px; background:var(--white);
font-size: 16px; font-weight: 700; min-width: 100px;}
button.btn-register{background: var(--primary-colour); border-color: var(--primary-colour); color: var(--white);}
.login-btn button:hover{background: #1D4F57; color: var(--white); border-color: #1D4F57;}
.fixed{position: fixed; background: var(--white); width: 100%; z-index: 333333; -webkit-box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);}
.ad-banner{position: relative; }
.ad-banner img{object-fit: cover; height: 290px; width: 100%;}
.ad-banner-overlay{position: absolute; top:50%; left: 10%;  background:var(--white); padding: 20px; transform: translate(0%, -50%); width: 30%; box-shadow:7px 7px 20px 0px rgba(50, 50, 50, 0.3); border-radius: 8px;}
.bt-secondary{background: #FF3B30; color: var(--white); border-radius: 30px; padding: 8px 20px; font-size: 16px; font-weight: 700;
border: none; box-shadow:7px 7px 20px 0px rgba(50, 50, 50, 0.30);}
.bt-secondary:hover{background: #1D4F57;}
.ad-banner p{font-size: 16px;}
.bt-primary{border: none; display: inline-block; text-align: center; min-width: 150px; padding: 10px; background:linear-gradient(rgba(13, 178, 178, 0.5), #0C9C9C); font-size:16px ;
color: var(--white); border-radius: 6px; font-weight: 700; box-shadow:7px 7px 20px 0px rgba(50, 50, 50, 0.15); height: 50px;}
.bt-primary:hover{background:linear-gradient( #0C9C9C, rgba(13, 178, 178, 0.5));}
.request-private h1{ margin-bottom: 15px; line-height: 40px; font-size: 24px; color: var(--primary-colour);}
/* .request-private img{ width: 100%; } */
.live-class{padding: 20px 0px; background: rgba(13, 178, 178, 0); }
.live-course-box, .prerecorded-box{background: var(--white); border-radius: 8px; box-shadow:7px 7px 7px 0px rgba(50, 50, 50, 0.06);}
.live-course-box-img, .prerecorded-box-img{border-radius: 8px; overflow: hidden; position: relative;}
.live-course-box-img img{height: 180px; object-fit: cover; width: 100%; transition: all 0.3s ease-in;}
.live-course-box:hover .live-course-box-img img{transform:scale(1.5);}
.live-course-box-content, .prerecorded-box-content{padding: 15px;}
.live-course-box-content h5, .prerecorded-box-content h5{font-size: 15px; color: #000; font-weight: 700; line-height: 24px;}
.live-course-box-content h5:hover, .prerecorded-box-content h5:hover{color: var(--primary-colour);}
.live-course-box-content p{margin: 0px;}
.live-course-box-content h6{font-size: 14px; color: var(--secondary-colour);}
.owl-nav .owl-prev,
.owl-nav .owl-next {background: var(--primary-colour) none repeat scroll 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%;
border-radius: 50%; -moz-box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1);
 -webkit-box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1); -o-box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1);
box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1); color: var(--white); font-size: 20px;
height: 40px; left: -17px; padding: 0; position: absolute; text-align: center; top: 50%; transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out;
width: 40px; line-height: 42px;}
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {background: var(--white)fff none repeat scroll 0 0;color: var(--primary-colour);}
.owl-nav .owl-next { left: auto; right: -17px;}
.prerecorded{padding: 20px 0px; }
.prerecorded-box{margin-bottom: 30px;}
.prerecorded-box, .prerecorded-box-img{border-radius: 6px;}
.prerecorded-box-content p{margin: 0px;}
.prerecorded-box-img img{height: 150px; object-fit: cover; width: 100%; transition: all 0.3s ease-in; border-radius: 6px;}
.prerecorded-box:hover .prerecorded-box-img img{transform:scale(1.5);}
.prerecorded-box-content p img{margin-top: -4px;}
footer{background: #1D4F57; text-align: center;}
footer img{
    /*filter: brightness(0) invert(1);*/
    margin-bottom: 20px;}
footer p{display: inline-block; padding: 0px 12px; color: var(--white);}
footer a p:hover{color: var(--primary-colour);}
footer h6{color: var(--white); margin-bottom: 0px; direction: ltr;}
.mobile-view{display: none !important;}
#topcontrol{font-size: 24px; color: #17a2b8; z-index: 222; left: 5px; right: auto !important;} 
.ad-two{margin: 30px 0px 0px;}
.inner-heading{ background: url(../images/subject-details-bgm2.jpg) 100%; padding: 30px 0px; position: relative; overflow: hidden;}
.inner-overlay{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(rgba(34, 79, 88, 0.7), #1D4F57);}
.inner-heading h1{color: var(--white); font-size: 34px;}
.inner-heading .nav-tabs{border:none; padding: 0px; text-align: center; display: block;}
.inner-heading .nav-tabs li{display: inline-block;}
.inner-heading .nav-tabs li a{ display:block; padding: 12px 25px; font-size: 18px; line-height: 24px; color: var(--white); margin: 15px 10px; min-width: 180px; border-radius: 30px; border: 1px solid var(--white); cursor: pointer;}
.inner-heading .nav-tabs li.active a, .inner-heading .nav-tabs li:hover a{background:var(--white); color:var(--primary-colour); font-weight: 700; -webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
 -moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);}
.ad-box-img{overflow: hidden; position: relative; border-radius: 10px; height: 230px; }
.ad-box-img img{transition: all 0.3s ease-in; object-fit: cover; width: 100%; height: 240px;}
/* .ad-two .container:hover .ad-box-img img{transform: scale(1.5);} */
.live-class-category{padding-bottom: 40px;  padding-top: 40px;}
.live-class-category h3{margin-bottom: 10px;}
.liveclass-category .live-course-box-content h5{font-size: 16px;}
.owl-carousel .owl-stage-outer{padding-bottom: 30px;}
.liveclass-category .live-course-box-content h4{font-size: 16px; font-weight: 700; color: #FF3B30; margin: 0px; margin-top: 10px;}
.owl-carousel .disabled{opacity: 0.5; cursor: not-allowed !important;}
.my-subscribed-courses{padding-bottom: 60px; padding-top: 40px; }
.live-class h3, .my-subscribed-courses h3{margin-bottom: 15px;}
.my-subscribed-courses .prerecorded-box-content img{width: auto; display: inline-block;}
.pad-bot30{padding-bottom: 30px;}
.owl-carousel {touch-action: manipulation; }
#reserved{padding-bottom: 40px; padding-top: 30px;}
.reserved-classBox{position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 6px 22px 0 rgb(0 0 0 / 8%);}
.reserve-classBox-img img{width: 100%; height: 120px; object-fit: cover;}
.reserved-classBox-overlay{position: relative;  z-index: 1; padding: 20px; }
.dp{display: inline-block; width: 50px; height: 50px; border: 1px solid var(--primary-colour); padding: 1px; border-radius: 50%;}
.reserve-classBox-img{position: relative; overflow: hidden;}
.reserve-classBox-img img{object-fit: cover; width: 100%; height: 120px;}
.reserved-classBox-overlay p{margin-bottom: 8px; font-size: 14px; color: #1D4F57;}
.reserved-notes{background: #1D4F57; padding: 3px 14px; border-radius: 4px; font-size: 12px; display: inline-block; color: var(--white);}
.reserved-notes i{padding-right: 4px;}
.live-class-collapse{width:25px; height:25px; border-radius:50%; background:var(--primary-colour); text-align: center; line-height: 27px; position: absolute; left: 20px; top:20px; cursor: pointer;color: var(--white);}
.reserved-classBox .collapsed .fa-angle-down, .reserved-classBox .fa-angle-up { display: inline-block;}
.reserved-classBox .collapsed .fa-angle-up, .reserved-classBox .fa-angle-down { display: none;}
.reserved-classBox .collapse.in:not(.show){ display: block;}
.reserved-class-box-content{padding: 0px 20px;  position: relative;height: 225px; overflow-y: scroll;}
.reserved-class-box-content ul{padding: 0px; margin:0px; list-style: none;}
.reserved-class-box-content ul li{padding:16px 0px; border-bottom: 1px solid #f4f4f4; position: relative;}
.reserved-class-box-content ul li:hover h6{color:var(--primary-colour);}
.reserved-class-box-content h6{margin: 0px; color:#1a1a1a;  line-height: 22px; margin-bottom: 8px; font-size: 14px;}
.reserved-class-box-content p{margin: 0px; direction: ltr; color: #1D4F57; line-height: 16px; font-size: 14px;}
.reserved-class-box-content p span{padding: 0px 3px;}
.reserved-class-box-content::-webkit-scrollbar { width: 6px;}
.reserved-class-box-content::-webkit-scrollbar-thumb {background-color: #1d5a66;}
.reserved-class-box-content {scrollbar-color: var(--primary-colour) var(--white); scrollbar-width:thin;}
.reserved-class-box-content ul button{position: absolute; left: 0px; bottom: 10px; background: #4CD964; color: var(--white); border-radius: 4px; color: var(--white);
border: none; padding: 5px 16px; font-size: 12px;}
.reserved-class-box-content ul button:hover{background: #4CD964;}
.reserved-class-box-content ul button.watch{background: var(--primary-colour); padding: 3px 12px;}
.reserved-class-box-content ul button.watch:hover{background: var(--primary-colour);}
.live-class-details{padding: 60px 0px; }
.live-class-details h5{font-weight: 700; margin-bottom: 15px;}
.live-class-details h6{margin-bottom: 10px; font-size: 14px; line-height: 26px;}
.live-class-details h4{font-weight: 700; margin-bottom: 15px; font-size: 18px;}
.live-class-details ul{ padding: 0px; margin-bottom: 8px;}
.live-course-sideBox ul li{list-style: none; position: relative; padding-right: 30px; padding-bottom: 12px; line-height: 26px; font-size: 16px;}
.live-course-sideBox-content ul li img{position: absolute; right: 0px; top: 3px; max-width: 20px;}
.live-class-details h3{color: #FF3B30; font-weight: 700; margin-bottom: 15px; text-align: center; font-size: 24px;}
.live-class-details h3 small{text-decoration: line-through; color: black; padding-left: 10px;}
.live-class-details button.preview{border: 1px solid var(--primary-colour); padding: 7px 20px; border-radius: 6px; height: 50px; min-width:150px;
background: none; color: var(--primary-colour); font-weight: 700; width: 100%; margin-bottom: 20px; font-size: 16px;}
.live-class-details button.preview img{padding-left: 5px;}
.live-class-details button.preview:hover{background: var(--primary-colour); color: var(--white);}
.live-class-details button.preview:hover img{filter: brightness(0) invert(1);}
.live-class-details-img{border-top-left-radius: 8px; border-top-right-radius: 8px; overflow: hidden; position: relative;}
.live-class-details-img img{object-fit: cover; height: 170px; width: 100%; transition: all 0.3s ease-in;}
.pad-bot60{padding-bottom: 60px;}
.wrapper{width:100%;  } 
.panel-heading { padding: 0;   border:0;}
.panel-title{margin-bottom: 0px !important;}
.panel-title>a, .panel-title>a:active{ display:block; padding:15px; color:var(--primary-colour); background: rgba(13, 178, 178, 0.05); font-size:18px; font-weight:normal;
text-transform:uppercase;text-decoration:none; border-bottom: 1px solid var(--primary-colour); }
.panel-heading  a:before { font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f107";   transition: all 0.5s; width: 30px; height: 30px; border-radius: 50%;
background: var(--white); border: 1px solid var(--primary-colour); position: absolute; left: 10px; top: 8px; text-align: center; color: var(--primary-colour); font-size: 18px; line-height: 30px;
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);}
.panel-heading  a.collapsed:before { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);} 
.collapse.in{display: block;}
.panel-default{border: 1px solid var(--primary-colour); margin-bottom: 15px; border-radius: 5px; position: relative;}
.panel-body ul{margin: 0px;list-style: none; padding: 0px;}
.panel-body li{padding: 10px 0px;}
.panel-body::-webkit-scrollbar { width: 6px;}
.panel-body::-webkit-scrollbar-thumb {background-color: #1d5a66;}
.panel-body {scrollbar-color: var(--primary-colour) var(--white); scrollbar-width:6px;}
.video-library{padding: 0px; padding-top: 40px;}
.prerecorded-box-content h6{color: #FF3B30; font-weight: 700; margin-bottom: 0px; margin-top: 8px;}
.pad-top30{padding-top: 30px;}
.video-library-details .live-class-details-img img{height: 330px;}
.video-library-details .live-class-details-img{position: relative;}
.overlay{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.3);}
.course-detail-page{background: #1D4F57; text-align: center; padding-left: 40px;}
.course-detail-page h5{margin-top: 10px; color: var(--white); font-weight: 400; margin-bottom: 0px;}
.live-course-sideBox{border: 1px solid #ddd; background: var(--white); border-radius: 8px; box-shadow:7px 7px 20px 0px rgba(50, 50, 50, 0.06); position: sticky; top: 100px;}
.live-course-sideBox-content{padding: 15px;}
.live-course-sideBox-content .bt-primary{width: 100%; margin-bottom: 20px;}
/* .video-library-tab .nav-tabs li{font-size: 14px; font-weight: normal; padding: 8px 16px; margin: 15px 6px;} */
.video-library-subscribed{padding: 40px 0px; }
.video-library-subscribed h5{font-weight: 700; margin-bottom: 20px; font-size: 16px;}
.video-library-subscribed .panel-body li{position: relative; font-size: 15px; padding-right: 24px; padding-left: 80px;}
.video-library-subscribed .panel-body li::before{ content: "\f192"; font-family: "Font Awesome 5 Free"; font-weight: 400; color: var(--primary-colour); position: absolute;
right: 0px;}
.video-library-subscribed .panel-body li span{position: absolute; left: 0px; color: var(--primary-colour); top: 4px;}
.video-library-subscribed .panel-body li span img{transform: rotateY(180deg);}
.video-library-subscribed .panel-body a li:hover{color: var(--primary-colour);}
.video-library-subscribed .panel-body a li:hover img{opacity: 0.7;}
.dropdown-menu { padding:0px;font-size: 0.875rem;line-height: 22px; color: #5c5776; border: none; box-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1); border-radius: 0.5rem; left: auto;}
.dropdown-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(20px); transition: all 0.3s ease-in; }
.dropdown:hover > .dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; }
.dropdown-submenu:hover > .dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; }
.avatar-md { width: 56px; height: 56px;}
.avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%;}
.avatar { position: relative; display: inline-block; width: 3rem; height: 3rem; font-size: 1rem;  border-radius: 50%;}
.avatar-online:before { background-color: green;}
.avatar-indicators:before { content: ""; position: absolute; bottom: 0px; right: 5%; width: 30%; height: 30%; border-radius: 50%; border: 2px solid var(--white);display: table; }
.dropdown-divider{margin: 0px;}
.profile-dropdown{padding: 0px;  margin: 0px; list-style: none; text-align: right;}
.profile-dropdown li a{padding: 8px 25px;}
.profile-dropdown li a:hover{background: var(--primary-colour); color: var(--white);}
.profile-dropdown li i{padding-left: 8px;}
.live-course-box button{margin-top: 4px; padding: 8px; min-width: 110px;}
.prerecorded-box button{margin-top: 8px; padding: 8px; min-width: 110px;}
.main-header .dropdown .dropdown-menu p{color: var(--primary-colour); font-size: 12px;}
.active-liveclass .live-course-box-content h5{line-height: 26px; min-height: 52px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;
font-size: 16px;}
.active-liveclass .live-course-box{border: 1px solid #ddd; min-height: 140px;}
.live-course-box .notes{background: #1D4F57; color: var(--white); border-radius: 30px; font-size: 12px; padding: 2px 12px; display: inline-block; margin-top: 4px;}
.live-course-box .join{background: var(--red); color: var(--white); border-radius: 4px; font-size: 14px; padding: 4px; display: inline-block; min-width: 70px; text-align: center;
position: absolute; left: 15px; bottom: 15px;}
.live-course-box .join:hover{background: var(--primary-colour);}
.active-liveclass .owl-nav .owl-prev, .active-liveclass .owl-nav .owl-next{top: 30%;}
.my-privateClasses{ padding-top: 40px; }
.my-privateClasses h3{margin-bottom: 15px;}
.ad-box-video{position: relative; overflow: hidden; height: 230px; width: 100; border-radius: 8px;}
.ad-box-video img{width: 100%; height: 230px; object-fit: cover;}
.ad-box-video .play-icon{top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; padding-left: 0px; line-height: inherit;
background: var(--white); color: var(--primary-colour);}
.liveclass-category .live-course-box-content h4 span{ font-weight: 300; color: #1a1a1a; text-decoration: line-through; margin-left: 5px;}
.prerecorded-box-content h6 span{ font-weight: 300; color: #1a1a1a; text-decoration: line-through; margin-left: 5px; font-size: 12px;}
.price-pop{background: var(--white); border-radius: 8px; width: 100%; max-width: 360px; text-align: center !important;}
.price-pop .close, .sampleVideo-pop .close{position: absolute; left: 10px; top: 10px; width: 35px; height: 35px; border: 1px solid var(--primary-colour); 
border-radius: 50%; color: var(--primary-colour); line-height: 35px; font-size: 16px; opacity: 1;}
/* #price-popup, #sampleVideo-popup{position: initial !important;} */
.price-pop h5{font-weight: 700; font-size: 24px; border-bottom: 2px solid var(--primary-colour); padding: 15px;}
.price-pop .cart-price-radio .checkmark{width: 100%; height: 75px; padding: 10px; border-radius: 6px;}
.price-pop .cart-price-radio .checkmark{ height: 90px;}
.price-pop .cart-price-radio{width: 100%; height: 90px;}
.price-pop .cart-price-radio.you-save{width: 100%; height: 90px;}
.price-pop .cart-price-radio .checkmark h6{color: #000; font-weight: normal; margin-bottom: 8px;}
.price-pop .cart-price-radio h4{font-weight: 700; font-size: 20px; margin: 0px; color: #000;}
.price-pop .cart-price-radio p{color: #FF3B30; margin-bottom: 0px;}
.price-pop .cart-price-radio input:checked ~ .checkmark h6, .price-pop .cart-price-radio:hover input ~ .checkmark h6{color: var(--primary-colour) !important;}
.price-pop .cart-price-radio input:checked ~ .checkmark, .price-pop .cart-price-radio:hover input ~ .checkmark{border:2px solid var(--primary-colour);}
.sampleVideo-pop{text-align: center !important; width: 100%; max-width: 450px;}
.video-pop{position: relative;}
.panel-body h5{padding: 8px 0px; margin: 0px; font-size: 16px; font-weight: 300; position: relative; color: var(--primary-colour);}
.innerCollapse{position: relative; display: block; cursor: pointer;}
.innerCollapse:before { font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f107";   transition: all 0.5s;  position: absolute; left: 0px; top: 2px; text-align: center; color: #1D4F57; font-size: 16px; line-height: 30px;
    -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);}
.innerCollapse.active:before { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);} 
.innerCollapse.active .innerConetnt{display: none !important;}
.innerCollapse .innerConetnt{display: block !important;}
.innerConetnt .innerCollapse{display: none !important;}
.price-pop button{margin-bottom: 10px; width: 100%;}
.reserved-classBox-overlay.inactive{background: rgba(117, 192, 144, 0.05); border-bottom: 1px solid var(--primary-colour);}
.reserve-classBox-img img{display: none;}
.slider-carousel .owl-stage-outer{padding-bottom: 0px;}
.slider-carousel .owl-dots{position: absolute; left: 50%; bottom: 0px; transform: translate(-50%, -50%);}
.slider-carousel .owl-dots .owl-dot{background: #FF3B30; border: 1px solid var(--white);}
.slider-carousel .owl-dots .owl-dot.active{background: var(--primary-colour);}
.slider-carousel .owl-nav .owl-prev{left: 10px;}
 .slider-carousel .owl-nav .owl-next{ right: 10px;}
.show-all{position: absolute; left:15px; top: 15px; font-weight: 700; color: var(--primary-colour); font-size: 16px;}
.show-all:hover{ color: #FF3B30;}
.active-liveclass .show-all, .my-privateClasses .show-all{top: 8px;}
.weekClass h5{font-weight: 700;}
.weekClass .reserved-class-box-content h5{font-size: 16px; margin-bottom: 15px;}
.weekClass .reserved-class-box-content .reserved-notes{position: absolute; left: 0; top: 15px; padding: 3px 10px;}
.video-library-subscribed .panel-body li .videoPlay-icon{position: absolute; left:0px; top: 11px; right: auto;}
.price-pop u{font-size: 14px; color: var(--secondary-colour); float: left; display: inline-block; text-transform: capitalize; margin-top: 10px; text-decoration: none;}
.price-pop u:hover{text-decoration: underline;}
.price-pop u.privacy{float: right;}
.offer-rate{background: var(--primary-colour); clip-path: polygon(100% 0, 100% 100%, 51% 74%, 0 100%, 0 0); position: absolute; right: 10px;
width: 50px; height: 55px; top: 0px; font-size: 10px; color: var(--white); line-height: inherit; padding-top: 5px;}
.pad-80{padding: 80px 0px;}
.live-course-sideBox-content span{font-family: 'droid_arabic_kufiregular' !important; font-size:13px !important; line-height: 22px !important;}
.live-course-sideBox-content .course-details-list div{display:flex !important;}
/* .live-class-details .center-block .panel-body{padding: 10px 20px;} */
.video-library-subscribed .center-block .panel-body{padding:10px 15px;}
.videorecorder-carousel .prerecorded-box{margin-bottom: 0px;}
.live-course-box-content p, .prerecorded-box-content p{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.live-course-box-content h5{min-height: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.back-btn{position: absolute; right:0px; top: 0px; background: rgba(255, 255, 255, 1); width: 35px; height: 35px; border-radius: 50%; text-align: center; line-height: 36px; color: var(--primary-colour);}
.back-btn:hover{background: var(--white); color: #0C9C9C;}
.request-private-box{border-radius: 10px; overflow: hidden; background: #EAFAF9; position: relative;}
.footer-nav{position: fixed; bottom: 0px; width: 100%; z-index: 111; background: var(--white); box-shadow:         0px -5px 10px 0px rgba(50, 50, 50, 0.3);
display: flex; flex-wrap: wrap;}
.footer-menu{display: none;  padding: 8px 2px; width: calc(100% / 4); text-align: center; filter: grayscale(75%);}
.footer-menu h6{color: var(--grey); margin: 0px; font-size: 12px;}
.footer-menu.active{filter: grayscale(0);}
.footer-menu.active h6{color: var(--primary-colour);}
.footer-menu img{height: 24px;}
.live-class-details .center-block .panel-body{padding: 10px;}
.request-private .empty-cart img{width: auto;}
.cart-item-price{position: absolute; left: 8px; top: 0px;}
.cart-item-price h5{margin-bottom: 0px;}
.unstyled{background: rgba(244, 244, 244, 0.75) !important;}
.reserve-class .form-group i{position: absolute; left: 15px; color: #000; bottom: 20px; cursor: pointer; font-size: 18px; z-index: -1;}
.unstyled::-webkit-inner-spin-button, .unstyled::-webkit-calendar-picker-indicator {opacity: 0.01; position: absolute; z-index: 1; cursor: pointer; right: 0px;}
.private-class-box .form-group i{position: absolute; left: 15px; color: #23a9b9; bottom: 12px; cursor: pointer;}
.unstyled::-webkit-calendar-picker-indicator::after{content: "\f073"; font-family: "Font Awesome 5 Free"; font-weight: 400;}
.contact-social{padding: 0px; margin: 0px;}
.contact-social h5{margin-bottom: 12px;}
.contact-social i{width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; background: var(--primary-colour); color: var(--white);
font-size: 18px;}
.contact-social i:hover{background: #1D4F57;}
.skillsubject-carousel.owl-carousel .owl-stage-outer{padding-bottom: 0px;}
.icons-video.disabled{ opacity: 0.3; pointer-events: none;}
.icons-video-img{ width: 50px; height: 50px; background: rgba(13, 178, 178, 0.10); line-height: 55px; text-align: center; border-radius: 100%; margin: 0 auto;}
.icons-video:hover .icons-video-img{background:var(--primary-colour);}
.icons-video:hover .icons-video-img img{filter: brightness(0) invert(1);}
input[type=date], input[type=datetime-local], input[type=month], input[type=time] { -webkit-appearance: listbox;}
.main-header img{margin-bottom: 0px !important; max-height: 50px;}
.e-input-group-icon.e-date-icon, *.e-control-wrapper .e-input-group-icon.e-date-icon{position: absolute; left: 10px; top: 60%;}
.unstyled::-webkit-calendar-picker-indicator { padding-right: 100%;}
.video-library-subscribed .previous-test button{border-radius: 5px; font-size: 12px; line-height: 14px; margin: 0px 2px; padding: 8px 14px; min-width: auto;}
.min-vh-100 .active-liveclass{padding-top: 40px; padding-bottom: 0px;}
.active-liveclass .live-course-box button{text-align: left;}
.privateclass-carousel .request-box{margin-bottom: 0px;}
.privateclass-carousel .owl-nav .owl-prev, .privateclass-carousel .owl-nav .owl-next{top: 25%;}
.videoCount{ position: absolute; left: 0px; border: 1px solid #7AC08B; color: #7AC08B; font-size: 12px; font-style: normal; line-height: 20px; width: 48px; text-align: center;
border-radius: 30px;}
.videoCount img{ max-width: 15px; position: relative !important; top: 1px !important;}
.unsubscriber-overlay{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); z-index: 1;}
.unsubscriber-overlay img{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5;}
.video-library-tab{text-align: center;}
.analystic-graph i{color: var(--white); border-left: 1px solid var(--white); padding-left: 10px; line-height: 54px;}
.profile-info-icon{position: absolute; top: 25%; left: 15px;}
.brd-rht{border-right: 1px solid var(--white); width: 1px; height: 100%; position: absolute; top: 0%; left: 55%;}
.analystic-graph img:hover{opacity: 0.7;}
.profileInfo-popup{background: var(--white); border-radius: 8px; width: 100%; max-width: 450px; padding: 20px; text-align: center !important;}
.profileInfo-popup h5{font-weight:700; border-bottom: 2px solid #0C9C9C; display: inline-block; padding-bottom: 8px;}
.profileInfo-popup p{margin: 0px;}
.student-grade img{position: absolute; top: 4px; left: 30px;}
.welcome-radio .checkmark{line-height: 150px;}
.welcome-radio .checkmark img{max-width: 120px;}
.welcome{ padding: 50px 0px 80px;}
.welcome h1{text-align: center; margin-bottom: 30px;}
.welcome h5{text-align: center; margin-bottom: 40px;}
.profile-point img{width: 44px; height: 44px; border: 2px solid var(--white); border-radius: 50%;}
.panel-body h5 img{max-width: 24px; background: #E1EBEC; padding: 3px; border-radius: 50%; position: absolute; left: 0px; top: 4px;}
.quiz-icon2{position: absolute; left: 80px; right: auto; height: 20px;}
.book2{position: absolute; left: 55px; right: auto; height: 16px; top: 11px;}
.profileInfo-popup button{margin-top: 20px; background: var(--primary-colour); border-radius: 30px; border: none; color: var(--white); padding: 10px 20px; font-size: 16px; min-width: 150px;}
.video-play-list .c100.small{font-size: 40px; margin: 0px; position: absolute; left: 0px; top: 10px;}
.video-play-list .c100 > span{font-size: 12px; line-height: 40px;}
.notification{padding: 40px 0px 60px;}
.notification-icon{position: absolute; left: 0px; top: 0px; padding: 6px 14px; border-radius: 6px; border: none; background: none;}
.notification-icon.markread{background: none; right:0px; left: auto;}
.notification-icon:focus{background: var(--primary-colour); border-color: var(--primary-colour); color: var(--white);}
.notification-icon img{filter: invert(1) brightness(100);}
.notification-box{border-radius: 6px; padding: 15px 20px;  margin-bottom: 15px; opacity: 0.8; border: 1px solid #ddd;}
.notification-box h6{color: #1a1a1a; font-size: 14px; margin-top: 10px; margin-bottom: 0px;}
.notification-box h4{color: #1A1A1A; font-size: 16px; font-weight: 700; margin-bottom: 10px;}
.notification-box p{color: #1A1A1A; font-size: 14px; margin: 0px;}
.notification-box i{position: absolute; left: 15px; top: 15px; border: 1px solid #ddd; padding:2px 4px; color: rgba(0, 0, 0, 0.5);}
.notification-box.not-read{opacity: 1; background: rgba(13, 178, 178, 0.10); border-color: var(--primary-colour);}
.pvt-icon2{position: absolute; left: 0px; top: 0px;}
.pvt-icon1{position: absolute; right: 0px; top: 0px;}
.request-private-box button{ border: none; background: var(--primary-colour); border-radius: 30px; height: 50px;
 min-width: 210px; color: var(--white); font-size: 16px;}
.request-private-box button:hover{ background: var(--secondary-colour); color: var(--white);}
.request-private-box .overlay{    background: rgba(0, 0, 0, 0.1);}
.quiz-list {padding: 10px;border: 1px solid var(--primary-colour); border-radius: 6px; position: relative;  width: 100%; margin-bottom: 20px; 
 background: rgba(13, 178, 178, 0.10); box-shadow: 0px 2px 2px 0px rgba(13, 178, 178, 0.5); padding-right: 100px; min-height: 100px;}
.myquiz-icon{width: 80px; height: 80px;  border-radius: 4px; text-align: center; background: #f5f5f5; overflow: hidden; position: absolute; right: 10px; top: 10px;}
.myquiz-icon img{border-radius: 4px; width: 100%; height: 100%; object-fit: cover;}
.quiz-subject h5{margin: 0px; font-size: 18px; margin-top: 10px;}
.quiz-subject p{font-size: 18px; margin-top: 12px; margin-bottom: 0px; font-weight: 700;}
.quiz-subject p img{height: 24px; margin-left: 5px;}
.quiz-subject p span{margin-left: 10px;}
.quiz-list:hover{box-shadow: 0px 4px 4px 0px rgba(13, 178, 178, 0.8);}
.popup_background, .popup_wrapper{z-index: 444444 !important;}
.ques{position: relative; display: flex; flex-wrap: wrap; align-items: center;}
.ques-img{width: 40%;}
.ques-que{width: 60%; padding:0px 20px; }
.ques.direction-ltr h3{text-align: left;}
.width-100{width: 100%;}
.quiz-radio img{height: 60px !important; width: auto !important; object-fit: cover; margin: 0 auto; border-radius: 0px; display: block; }
.mb-fixed{ position: fixed; bottom: 15px; width: 100%; max-width: 300px; z-index: 2222; border: none; text-align: center; display: none; height: 50px;
padding: 10px; background: linear-gradient(rgba(13, 178, 178, 0.8), #0C9C9C); font-size:16px ; left: 50%; color: var(--white); border-radius: 6px; font-weight: 700; box-shadow:7px 7px 20px 0px rgba(50, 50, 50, 0.15);
transform: translate(-50%, 0);}
.my-courses-home{padding-bottom: 30px; }
.my-courses-home h3{margin-bottom: 30px;}
.prerecorded-box-content{ padding: 8px;}
.empty-timeline img{margin-bottom: 20px; width: 100%; max-width: 500px;}
.vidNext{position: absolute; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: var(--white); width: 90%; z-index: 9;}
.vidNext .fa-forward{float: right; cursor: pointer;}
.vidNext .fa-forward.fa-rotate-180{float: left; cursor: pointer;}
.video:hover .vidNext{opacity: 1;}
.reward-pop{width: 100%; max-width: 350px; background: var(--white); border-radius: 11px; position: relative; padding: 20px;}
.reward-pop img{max-width: 150px;}
.reward-pop h5{font-weight: 700; margin: 15px 0px;}
.reward-pop p{color: rgba(0, 0, 0, 0.5);}
.reward-pop p span{font-weight: 700; color: var(--primary-colour); font-size: 24px;}
.reward-pop button{border: none; background: #4CD964; color: var(--white); border-radius: 8px; padding: 8px 16px;}
.reward-pop .point-pop_close{position: absolute; right: 15px; top: 15px; font-size: 18px; z-index: 11; color: var(--primary-colour); cursor: pointer;}
.confetti-container { perspective: 700px; position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0;}
.confetti { position: absolute; z-index: 1; top: -10px; border-radius: 0%;}
.confetti--animation-slow { animation: confetti-slow 3.25s linear 1 forwards; }
.confetti--animation-medium {animation: confetti-medium 2.75s linear 1 forwards; }
.confetti--animation-fast {animation: confetti-fast 2.25s linear 1 forwards; }
.my-course-btn{position: absolute; top: 4px; left: 35%;}
.my-course-btn button{border: none; background: linear-gradient(to bottom, rgba(13, 178, 178, 0.5), var(--primary-colour)); color: var(--white);
border-radius: 30px; padding: 6px 15px; position: relative;}
.my-course-btn button img{max-height: 24px; position: absolute; bottom: -14px; left: 4px; transition: all 0.3s ease-in-out; animation: 8s swell linear -2s infinite;}
.my-course-btn button:hover{background: linear-gradient(to bottom, var(--primary-colour), rgba(13, 178, 178, 0.5));}
.my-course-btn-mb{position: relative; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(to bottom, rgba(13, 178, 178, 0.5), var(--primary-colour)); text-align: center; line-height: 34px;}
.my-course-btn-mb img{max-width: 22px !important; filter: brightness(100) invert(1);}
.ds-none{display: none;}
.video-comment{position: relative; margin: 8px 0px; justify-content: center; display: flex; flex-wrap: wrap; align-items: center;}
.video-rating{ margin-left: 20px; line-height: 50px;}
.video-rating i{transform: rotate(180deg); cursor: pointer;}
.video-rating i.far{color: rgba(0, 0, 0, 0.30);}
.video-comment-field{width: 63%; margin-left: 20px;}
.video-comment-field input{width: 100%; background:none; border: 1px solid #ddd; padding: 8px; border-radius: 5px; height: 50px;}
.video-comment-sendBtn{background: linear-gradient(to bottom, rgba(13, 178, 178, 0.5), var(--primary-colour)); color: var(--white);
width: 50px; height: 50px; line-height: 55px; border-radius: 30px; text-align: center; font-size: 18px; cursor: pointer;}
.rating-video {  border: none;  float: left; direction: ltr;}
.rating-video > input { display: none; } 
.rating-video > label:before {  margin: 2px; font-size: 1.25em; font-family: "Font Awesome 5 Free"; display: inline-block; content: "\f005"; font-weight: 900; }
.rating-video > .half:before {  content: "\f089"; position: absolute;}
.rating-video > label { color: #ddd; float: left; cursor: pointer; }
.rating-video > input:checked ~ label { color: #FFD700;  } /* hover previous stars in list */
.rating-video > input:checked + label:hover, /* hover current star when changing rating-video */
.rating-video > input:checked ~ label:hover,
.rating-video > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating-video > input:checked ~ label:hover ~ label { color: #FFD700;  } 
.pop-video.fade:not(.show){opacity: 1; background: rgba(0, 0, 0, 0.5);}
.pop-video{z-index: 444444;}
.pop-video.modal.fade .modal-dialog{ -webkit-transform: translate(0, 50%); transform: translate(0,50%);}
.pop-video .modal-body {position:relative; padding:0px;}
.pop-video .close {position:absolute; left:-30px; top:0; z-index:999; font-size:2rem; font-weight: normal; color:var(--white); opacity:1;}
.quiz-video-player{position: absolute; overflow: hidden; border-radius: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 75vw;}
.quiz-video{position: relative; width: 100vw; height: 100vh; background: #000;}
.quiz-video-close-btn{position: absolute; left: 30px; top: 30px;}
.quiz-video-close-btn i{width: 40px; height: 40px; line-height: 40px; text-align: center; background: var(--white);
border-radius: 50%; color: var(--primary-colour); font-size: 18px;}
.quiz-video-player:hover .vidNext{opacity: 1;}
.next-10, .back-10{position: absolute; left: 10%; cursor: pointer;}
.next-10{left: auto; right: 10%;}
.back-10{ transform: scaleX(-1);}
.vidNext i{opacity: 0.6;}
.vidNext i:hover{opacity: 1;}
.quizDescrip-popup{background: var(--white); border-radius: 6px; text-align: center !important; max-width: 350px; padding-bottom: 20px; width: 100%;}
.quizDescrip-popup h5{padding:15px; border-bottom: 1px solid #ddd; color: #000; font-weight: 700; font-size: 16px;}
.quizDescrip-popup p{padding: 6px 15px;}
.quizDescrip-popup button{border: none; background: var(--primary-colour); color: var(--white); border-radius: 30px; padding: 6px; font-weight: 700; min-width: 100px;}
.quizDescrip-popup .fa-times{position: absolute; left: 10px; top: 10px; color: var(--primary-colour); font-size: 16px; cursor: pointer;}
.audio-record{display: flex; margin-bottom: 20px;}
.audio-record i{width: 40px; height: 40px; background: #1B615F; border-radius: 50%; text-align: center; line-height: 40px;
color: var(--white); font-size: 16px; cursor: pointer;}
.audio-record input{display: none;}
.audio-record audio{height: 40px; margin-right: 10px;}
.audio-record i.Rec{background: red; display: inline-block; display: none; animation-name: pulse;animation-duration: 1.5s;
animation-iteration-count: infinite;animation-timing-function: linear;}
.topic-box audio{height: 40px; filter: invert(0.1);}
.topic-box-attach{position: absolute; left: 20px; top: 20px; font-size: 30px; color: #FF3B30;}
.removed-lesson-title{color: var(--white); }
.removed-lesson-title select{width: 100%; padding: 5px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.15); border:none; color: var(--white);}
.removed-lesson-title .form-group{margin: 0px;}
.removed-lesson-title h1{margin-bottom: 15px;}
.removed-lesson-title select:focus{border: none; box-shadow: none; outline: none;}
.removed-lesson-title select option{color: #000;}
.removed-lesson-title button{background: var(--white); color: var(--primary-colour); border: none; width: 100%; padding: 5px 7px; height: 38px; border-radius: 5px;}
.removed-lesson-title button i{display: none;}
.removed-lessons{padding: 60px 0px; }
.removed-lessons h3{color: #0C9C9C;}
.removed-lessons ul{margin: 0px; padding: 0px;}
.removed-lessons ul li{position: relative; list-style: none;  padding-right: 25px;}
.removed-lessons ul li::before{position: absolute; content: "\f1ce"; right: 0px; color: red; font-family: "Font Awesome 5 Free";
font-weight: 900;}
.removed-lessons table{width: 100%; border: 1px solid #ddd; margin-top: 20px; border-collapse: collapse;}
.removed-lessons table th, .removed-lessons table td{padding: 6px 8px; border: 1px solid #ddd;}
.removed-lessons table th{background: #0C9C9C; color: var(--white); text-align: center;}
.removed-lessons table p{margin: 0px;}
.removed-lessons .coming-soon{width: 100%; max-width: 450px; background: #f5f5f5; border-radius: 20px; padding: 20px; display: inline-block;}
.removed-lessons .coming-soon h1{font-size: 48px; font-weight: 700; color: #1B5966;}
.removed-lessons .coming-soon img{max-width: 200px;}
.removed-lesson-nodata img{max-width: 400px; margin-bottom: 30px; width: 100%;}
.removed-lesson-nodata h5{line-height: 32px;}
.removed-lesson-title h1 img{filter: invert(12%) sepia(93%) saturate(5281%) hue-rotate(0deg) brightness(103%) contrast(118%);
    -webkit-filter: invert(12%) sepia(93%) saturate(5281%) hue-rotate(0deg) brightness(103%) contrast(118%); max-width: 30px;}
.removed-search-img{position: absolute; max-width: 230px; left: 13%; bottom: 14%;}
.bg-f5f5{background: #f5f5f5;}
.removed-lessons table  td:last-child{text-align: center;}
.ps-rel{position: relative; z-index: 1;}
.topbar-icons{margin: 0px; padding: 0px; list-style: none; margin-top: 6px; text-align: left;}
.topbar-icons li{position: relative; display: inline; padding: 0px 5px;}
.topbar-icons li img{max-height: 26px;}
.topbar-icons li sup{width: 16px;height: 16px;background: var(--primary-colour);border-radius: 50%;display: inline-block;font-size: 12px;text-align: center;color: var(--white);
font-weight: 700;top: -5px; left:0px; line-height: 17px; position: absolute;}
.liveClassnotification{width: 100%; max-width: 350px; text-align: center !important; background: var(--white); padding: 15px; border-radius: 8px;}
.liveClassnotification img{max-width: 250px; margin-bottom: 10px;}
.liveClassnotification h3{font-weight: 700; font-size: 20px;}
.liveClassnotification h5{font-size: 18px;}
.liveClassnotification button{border: none; background: linear-gradient(to bottom, rgba(13, 178, 178, 0.5), var(--primary-colour)); color: var(--white);
border-radius: 30px; padding: 6px 15px; min-width: 150px;}
.liveClassnotification button:hover{ background: linear-gradient(to bottom, var(--primary-colour), rgba(13, 178, 178, 0.5));}
.liveClassnotification i{position: absolute; left: 15px; top: 15px; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; background: #f5f5f5;}
.live-course-box-img .subscribed-icon, .prerecorded-box-img .subscribed-icon{position: absolute; left: 10px; top: 10px;}
.live-course-box-img .subscribed-icon img, .prerecorded-box-img .subscribed-icon img{width: 30px; height: 30px;} 
.story-section{padding-top: 15px; position: relative; text-align: center;}
.stories{padding: 0px; margin: 0px; display: flex !important; justify-content: end ;}
.stories li{list-style: none; cursor: pointer; width: 140px; display: inline-block;}
.stories-img{width: 80px; height: 80px; overflow: hidden; border: 3px solid #ddd; padding: 2px; border-radius: 50%; display: inline-block;}
.stories-img img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.stories li h6{text-wrap: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; font-size: 14px; margin: 0px;}
.unseen{border-color: var(--primary-colour);}
.stories::-webkit-scrollbar { height: 2px;}
.stories::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);} 
.stories::-webkit-scrollbar-thumb { background-color: var(--secondary-colour); outline: 1px solid var(--secondary-colour);}
.story-pop-content{position: relative; width: 100%; max-width: 600px; border-radius: 10px;}
.story-close{width: 45px; height: 45px; background: var(--white); border-radius: 50%; line-height: 45px; text-align: center; font-size: 20px; position: absolute;
top: -48px; left: 0px; cursor: pointer;}
.story-pop-content img, .story-pop-content video{width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.story-pop-content .owl-nav .owl-prev, .story-pop-content .owl-nav .owl-next{background: var(--white); width: 45px; height: 45px; line-height: 45px; color: #000;}
.story-pop-content .owl-nav .owl-prev{left: -55px;}
.story-pop-content .owl-nav .owl-next{right: -55px;}
#story-pop_background{opacity: 0.80 !important;}
.story-view{position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.90); z-index: 444444; height: 100vh; display: none;}
.story-flow{overflow: hidden;}
.story-content{width: 100%; max-width: 400px; position: absolute; left: 50%; transform: translate(-50%, 10%); height: 100%; max-height: 90vh;}
.story-dp{color: var(--white);  margin-bottom: 15px; position: relative; padding-right: 70px;}
.story-dp p{margin: 0px;} 
.notification-day{  margin-bottom: 20px;}
.story-close-icon{position: absolute; left: 10px; top: 10px; }
.story-close-icon i{width: 50px; height: 50px; line-height: 50px; text-align: center; background: #232323; border-radius: 50%; color: var(--white);
cursor: pointer; font-size: 20px;}
.story-carousel .disabled{ display: none;}
.story-carousel video, .story-carousel img{width: 100%; height: 100%; object-fit: cover;}
.story-carousel .owl-dots{display: flex;}
.story-carousel .owl-dots .owl-dot{ -ms-flex-preferred-size: 0;  flex-basis: 0;  -ms-flex-positive: 1;  flex-grow: 1;  min-width: 0; max-width: 100%;
border-radius: 0; width: inherit; height: 4px; border-radius: 4px;}
.story-carousel .owl-nav .owl-prev, .story-carousel .owl-nav .owl-next{ width: 50px; height: 50px; line-height: 50px; text-align: center; background: #232323; border-radius: 50%; color: var(--white);
cursor: pointer; font-size: 20px;}
.story-carousel .owl-nav .owl-prev{left: -20%;}
.story-carousel .owl-nav .owl-next{right: -20%;}
.story-carousel .owl-dots .owl-dot.active{  background-image: -webkit-linear-gradient(left,  rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 50%,
 rgba(88, 89, 104,.5) 50.001%, rgba(88, 89, 104,.5) 100%);background-repeat: no-repeat;background-size: 200%;
background-color: var(--primary-colour); background-position: 100% 50%; animation-timing-function: linear; animation-delay: .2s; animation-duration: 5s; animation-name: Loader;}
/* .story-carousel:hover .owl-dots .owl-dot.active{animation-play-state: paused;} */
.story-carousel .owl-dots.disabled{display: flex; opacity: 1; cursor: pointer!important;}
.empty-notification{min-height: 80vh; position: relative; padding: 30px 0px;}
.empty-notification-content{ position: absolute; width: 100%; max-width: 450px; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.empty-notification-content img, .empty-notification-content h1{margin-bottom: 20px;}
.readMore{color: var(--primary-colour); font-weight: 700;}
.topic-more p{display: block;}
.video-continue{position: fixed; z-index: 1110; left: 0; bottom: 0; right: 0; background: var(--white); border-top: 1px solid #ddd;
box-shadow: 0px 0px 20px rgb(0 0 0 / 15%); width: 100%; height: 100px;}
.video-continue-box_img{width: 150px; height: 100px; position: absolute; top: 0; right: 0px;}
.video-continue-box_img img{object-fit: cover; width: 100%; height: 100%;}
.video-continue-box{position: relative;  padding: 20px; padding-left: 60px; padding-right: 170px;}
.video-continue-box p{color: #8EA7AB; margin: 0px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.video-continue-box h5{  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;
font-size: 16px;}
.video-continue-play{position: absolute; left: 0px; top: 50%; transform: translate(0%, -50%);}
.video-continue-play i{width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--primary-colour); text-align: center; line-height: 50px;
color: var(--primary-colour); cursor: pointer;}
.video-continue-play i:hover{background: var(--primary-colour); color: var(--white);}
.video-continue-close{position: absolute; left: 8px; top: 8px; font-size: 18px; cursor: pointer;}
.private-class-empty{padding: 20px 0px;}
.private-class-empty img{max-width: 450px; margin-bottom: 20px; width: 100%;}
.private-class-empty button{border: none; width: 100%; max-width: 300px; height: 50px; border-radius: 6px; background: var(--primary-colour); color: var(--white);
font-weight: 700;}
.private-class-empty p{font-size: 16px;}
.request_privateclass{padding: 30px 0px; }
.request_privateclass .form-group{margin-bottom: 20px;}
.request_privateclass .form-group label{font-size: 16px; margin-bottom: 10px; display: block;}
.request_privateclass .form-group select{ border: 1px solid var(--primary-colour); background: none;}
.calendar-container { position: relative; display: inline-block;}
#date-input { padding: 10px; width: 450px; border: 1px solid #ccc; border-radius: 4px;}
.calendar {border: 1px solid var(--primary-colour); border-radius: 6px; font-family: "Nunito Sans", sans-serif;}
.calendar-header {  display: flex; justify-content: space-between; padding: 10px; background: var(--primary-colour); border-bottom: 1px solid var(--primary-colour);
font-size: 18px; font-weight: 700; color: var(--white);}
.calendar-header button { background: none; border: none; cursor: pointer; color: var(--white); font-size: 16px;}
.calendar-body {padding: 10px;}
.calendar-weekdays { display: flex; justify-content: space-between; font-weight: bold;}
.calendar-days { display: flex; flex-wrap: wrap;}
.calendar-days div { width: calc(100% / 7); padding: 10px; box-sizing: border-box; text-align: center; cursor: pointer;}
.calendar-days div:hover {  background: var(--primary-colour); color: var(--white); border-radius: 6px;}
.calendar-days .selected {  background: var(--primary-colour);  color: white;  border-radius: 6px;}
.calendar-weekdays div{ width: calc(100% / 7); box-sizing: border-box; text-align: center; }
.radio-group{display: inline-block; margin-left: 8px; max-width: 135px;}
.radio-group input[type="radio"] { display:none;}
.radio-group label {  display: inline-block; border: 1px solid #ddd; cursor: pointer; border-radius: 6px; text-align: center; padding: 6px 12px;
margin: 0px;}
.radio-group input[type="radio"]:checked + label {  background: var(--primary-colour); color: var(--white); border-color: var(--primary-colour);}
.request_privateclass .form-group input[type=file]{  padding: 10px; background: rgba(13, 178, 178, 0.10); border-radius: 8px; border: 1px solid var(--primary-colour);
height: 68px;}
.request_privateclass .form-group input[type=file]::file-selector-button {padding: 10px 60px; background: var(--primary-colour); border: 1px solid var(--primary-colour); border-radius: 6px; color: var(--white);}
.request_privateclass .form-group textarea{border: 1px solid var(--primary-colour); border-radius: 6px; resize: none;}
.request_privateclass .form-group textarea::placeholder{color: #000;}
.send-btn{min-width: 250px; height: 50px; border-radius: 6px; color: var(--white); background: var(--primary-colour); border: none; font-size: 16px;
font-weight: 700;}
.my-profile{padding-top: 30px;}
.my-profile-box{background: var(--white); border-radius: 8px; position: relative; padding: 15px; -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06);
-moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); }
.my-profile-box h1{margin-bottom: 10px; font-size: 22px;}
.my-profile-box h5{font-size: 16px; color: #8EA7AB; margin: 0px;}
.my-profile-qr{position: relative; width: 200px; height: 200px; display: inline-block;}
.my-profile-qr img{width: 100%; height: 100%; object-fit: cover;}
.my-profile-dp{width: 90px; height: 90px; background: var(--white); padding: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
border-radius: 50%;}
.my-profile-dp img{border: 2px dotted var(--primary-colour); padding: 4px; border-radius: 50%;}
.my-profile-edit{position: absolute; left: 15px; top: 15px; cursor: pointer;}
.profile-relative-videos{position: relative; background: var(--white); border-radius: 6px; -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06);  overflow: hidden;
transition: 0.3s all ease-in-out;}
.profile-relative-videos:hover{-webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.25); 
box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.25);}
.profile-relative-videos-img{width: 100%; height: 150px;}
.profile-relative-videos-img img{border-radius: 6px; width: 100%; height: 100%; object-fit: cover;}
.profile-relative-videos-content{padding: 10px;}
.profile-relative-videos-content h5{font-weight: 700; font-size: 18px; margin-bottom: 12px;}
.profile-relative-videos-content p{margin-bottom: 8px;}
.profile-relative-videos-content p span{margin-right: 5px; font-weight: 700;}
.profile-relative-videos-content img{width: 24px;}
.profile-relative-videos-content h6{font-size: 14px;}
.profile-relative-videos-content h6 span{float: left;}
.profile-videos{padding-top: 0px; padding-bottom: 60px;}
.video-remaining{font-weight: 700; color: #FF3B30;}
.video-rating label span{font-size: 16px; margin: 0px; margin-left: 8px;}
.subject-details-tab{ position: relative; margin-top: -80px; text-align: center; background: var(--white); border-top-left-radius: 80px; border-top-right-radius: 80px;}
.subject-details-tab .nav-tabs{display: block; margin: 0px; padding: 0px; border: none;}
.subject-details-tab .nav-tabs li{padding: 20px 40px; display: inline-block; font-size: 20px; border-bottom: 10px solid rgba(142, 167, 171, 0.25); 
margin-left: -5px;}
.subject-details-tab .nav-tabs li img{display: block; max-height: 80px; margin: 0 auto;}
.subject-details-tab .nav-tabs li.active{border-bottom: 10px solid var(--primary-colour); color: var(--primary-colour);}
.subject-details-page{position: relative; padding: 40px 0px; background: url(../images/subject-details-bgm2.png); background-size: cover; padding-bottom: 100px;}
.subject-details-page h1{ color: var(--white); font-size: 42px;}
.subject-details-page select{background: none; border: none; font-size: 18px; color: var(--white); outline: none; cursor: pointer;}
.subject-details-page select option{color: #000; font-size: 14px;}
.live-class-details h2{font-weight: 700; font-size: 28px; margin-bottom: 20px;}
.subject-notes-box, .subject-tests-box{border: 1px solid var(--primary-colour); padding: 12px; border-radius: 6px;}
.subject-notes-box p{font-size: 16px; border-bottom: 1px solid #E1EBEC; padding-bottom: 20px; position: relative; padding-left: 90px; margin-bottom: 20px;}
.subject-notes-box p span{ position: absolute; left: 0px; color: var(--primary-colour);}
.subject-notes-box h6{font-size: 18px; font-weight: 700; color: var(--secondary-colour);}
.subject-notes-box h6 span{float: left;}
.subject-notes-box h6 span img{width: 38px; height: 38px;}
.subject-tests-box p{font-size: 16px; margin-bottom: 10px;}
.subject-tests-box h6{font-size: 16px; text-align: left; color: var(--primary-colour);}
.subject-tests-box h6 span{color: #224F58; margin-right: 12px;}
.subject-tests-download{border-bottom: 1px solid #E1EBEC; padding-bottom: 8px; margin-bottom: 15px;}
.video-library-subscribed h2{font-weight: 700; font-size: 28px; margin-bottom: 20px;}
.liveclass-box{ border-bottom: 1px solid rgba(13, 178, 178, 0.5); margin-bottom: 15px;}
.liveclass-box p {font-size: 16px; margin-bottom: 8px;}
.video-library-subscribed .panel-body p{line-height: 30px; font-size: 15px;}
.menu-icon{width: 40px; height: 40px; line-height: 45px; border-radius: 50%; background: var(--primary-colour); text-align: center; right: 0px;
position: absolute; top: 50%; transform: translate(0, -50%);}
.menu-icon img{max-height: 24px; filter: invert(1) brightness(100);}
.switches-container { width: 80px;position: absolute; left: 0px; top: 50%; transform: translate( 0, -50%); display: flex;padding: 0; background:#E1EBEC; line-height: 40px; border-radius: 3rem; }
.switches-container img{max-height: 22px;}
.switches-container input { visibility: hidden; position: absolute; top: 0;}
.switches-container label { width: 50%; padding: 0; margin: 0; text-align: center; cursor: pointer;}
.switch-wrapper {position: absolute; top: 0; bottom: 0; width: 50%; padding: 0.15rem; z-index: 3; transition: transform .5s cubic-bezier(.77, 0, .175, 1);}
.switch div {  width: 32px; height: 32px; border-radius: 50%;  text-align: center;  opacity: 0;display: block; background: var(--primary-colour); border: 2px solid var(--white); transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
will-change: opacity; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.switches-container input:nth-of-type(1):checked~.switch-wrapper { transform: translateX(0%);}
.switches-container input:nth-of-type(2):checked~.switch-wrapper { transform: translateX(-100%);}
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) { opacity: 1;}
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {  opacity: 1;}
.home-title h2{ font-weight: 700; font-size: 26px; margin-bottom: 15px;}
.empty-liveclass{padding: 20px 0px;}
.empty-liveclass img{max-width: 400px; width: 100%; margin-bottom: 20px;}
.empty-liveclass p{font-size: 16px; margin-bottom: 20px;}
.empty-liveclass button{width: 100%; max-width: 400px;}
.empty-data{text-align: center;}
.empty-data img{max-width: 400px; width: 100%; margin-bottom: 20px;}
.empty-data p{font-size: 16px;}
.quiz-top{position: relative; overflow: hidden; height: 250px;}
.quiz-top img{object-fit: cover; height: 100%; width: 100%;}
.quiz-back-btn{position: absolute; right: 15%; top: 50px; color: var(--white); font-size: 32px; cursor: pointer;}
.quiz-time-box{position: relative; background: var(--white); border-radius: 6px; -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06);
-moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); padding: 15px; margin-top: -102px;}
.quiz-time-right{ font-size: 22px;}
.quiz-time-right i{color: #4CD964;}
.quiz-time-wrong{text-align: left; font-size: 22px;}
.quiz-time-wrong i{color: #FF3B30;}
.quiz-time-questions{text-align: center; margin-top: 20px;}
.quiz-time-questions h2{font-size: 28px; margin-bottom: 20px;}
.quiz-time-questions h2 span{font-size: 38px; font-weight: 700;}
.quiz-time-questions .progress{  margin:20px 0px;  margin-top: 35px;  padding:0;  width:100%;  height:15px;  overflow:hidden;  background:#E1EBEC;  
border-radius:30px;}
.quiz-time-questions .bar{ position:relative; float:left; min-width:1%; height:100%; background:var(--primary-colour); }
.quiz-countdown #countdown {position: relative;  margin: auto;  height: 120px;  width: 120px;text-align: center;}
.quiz-countdown #countdown-number {  color: var(--primary-colour);  font-size: 30px; font-weight: 700; display: inline-block;  line-height: 120px;}
.quiz-countdown svg {position: absolute; top: 0; right: 0; width: 120px; height: 120px; transform: rotateY(-180deg) rotateZ(-90deg);}
.quiz-countdown svg circle {stroke-dasharray: 339px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 6px; stroke: var(--primary-colour);fill: none;
animation: countdown 30s linear infinite forwards;}
.quiz-countdown{position: absolute; top: 0px; left: 50%; transform: translate(-50%, -50%); background: var(--white); border-radius: 50%; padding: 10px;}
.quiz-question-box p{ font-size: 18px;}
.quiz-big-image{text-align: center; margin-bottom: 25px;}
.quiz-question-box{margin-top: 20px;}
.quiz-question, .quiz-answer-box{text-align: right; }
.quiz-question p{line-height: 36px;}
.true-false button{width: 180px; height: 60px; border: 1px solid var(--primary-colour); border-radius: 5px; font-size: 18px; background: none; margin-left: 20px;}
.quiz-answer-box{margin-top: 30px;}
.true-false button.highlight, .answer-options button.highlight{background: var(--primary-colour); color: var(--white);}
.true-false button.wrong-answer, .answer-options button.wrong-answer{background: #FF3B30; color: var(--white); border-color: #FF3B30;}
.true-false button.wright-answer, .answer-options button.wright-answer{background: #4CD964; color: var(--white); border-color: #4CD964;}
.quiz-submit-area{background: var(--white); padding: 15px 0px; position: fixed; z-index: 1111; bottom: 0px; left: 0px; width: 100%; -webkit-box-shadow: 0px -6px 20px 0px rgba(0,0,0,0.08);
-moz-box-shadow: 0px -6px 20px 0px rgba(0,0,0,0.08); box-shadow: 0px -6px 20px 0px rgba(0,0,0,0.08); }
.quiz-submit-area button{width: 100%; max-width: 400px; height: 60px; border-radius: 6px; font-size: 18px; background: var(--primary-colour); color: var(--white);
font-weight: 700; border: none;}
.clearfix2{width: 100%; position: relative; height: 200px;}
.quiz-submit-area h5{ position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); display: inline-block; font-weight: 700; color: var(--secondary-colour);}
.answer-options button{width: 100%; min-height: 60px; border: 1px solid var(--primary-colour); border-radius: 5px; font-size: 18px; background: none;  padding: 10px 20px;
margin-bottom: 20px; position: relative; text-align: right;}
.answer-options button p{margin: 0px;}
.answer-options button.highlight img, .answer-options button.wrong-answer img, .answer-options button.wright-answer img{filter: invert(1) brightness(100);}
.answer-options button.highlight::after, .answer-options button.wright-answer::after{content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 400; position: absolute; left: 20px; font-size: 30px;
top: 50%; transform: translate(0, -50%);}
.answer-options button.wrong-answer::after{content: "\f057"; font-family: "Font Awesome 5 Free"; font-weight: 400; position: absolute; left: 20px; font-size: 30px;
    top: 50%; transform: translate(0, -50%);}
.quiz-question  figure.center-block{ text-align: center;}
.quiz-question  figure.left-block{ float: left; margin-right: 20px;}
.quiz-question  figure.right-block{ float: right; margin-left: 20px;}
.validation-pop{position: fixed; height: 0; width: 100%; bottom: 0; transition: 0.5s; right: 0; z-index: 1113; background: var(--white); -webkit-box-shadow: 0px -6px 20px 0px rgba(0,0,0,0.08);
-moz-box-shadow: 0px -6px 20px 0px rgba(0,0,0,0.08); box-shadow: 0px -6px 20px 0px rgba(0,0,0,0.08); }
.validation-pop-content img{position: absolute; right: 0px; max-width: 180px !important; top: 0px;}
.validation-pop-content{ padding: 20px; position: relative; padding-right: 200px;}
.validation-pop-content h4{font-size: 32px; font-weight: 700;  margin-bottom: 20px;}
.validation-pop-content p{font-size: 18px;}
.validation-pop button{width: 100%; height: 60px; border-radius: 6px; color: var(--white); font-size: 22px; font-weight: 700; border: none;
background: var(--primary-colour); margin-top: 10px;}
.validation-pop .success{color: var(--primary-colour);}
.validation-pop .failed{color: #FF3B30;}
.quiz-new-questions{direction: initial;}
.quiz-congratz-bgm{position: relative; background: url(../images/quiz-bgm.png); background-size: cover; height: 600px; padding: 50px 0px; overflow: hidden;}
.quiz-congratz{ text-align: center;}
.quiz-congratz h1{font-size: 48px; font-weight: 700; color: var(--white); margin-bottom: 40px;}
.quiz-congratz-circle{width: 210px; height: 210px; background: var(--white); border-radius: 50%; position: relative; display: inline-block;
border: 8px solid rgba(255, 255, 255, 0.5);}
.quiz-score{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 90%;}
.quiz-score h2{color: var(--primary-colour); font-size: 80px; font-weight: 700; margin: 0px;}
.quiz-score p{margin: 0px; font-size: 20px; color: var(--dark); font-weight: 700;}
.quiz-congratz-circle::before {content: "";position: absolute; left: 50%;top: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);display: block; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; -webkit-animation: pulse-border 1500ms ease-out infinite;
animation: pulse-border 1500ms ease-out infinite;}
.gif-bgm{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.quiz-congratz-avatar{position: relative; margin-top: -300px; text-align: center; overflow: hidden;}
.quiz-congratz-avatar p{font-size: 20px; margin-top: -70px;}
.quiz-result-box{background: var(--white); border-radius: 10px; -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); -moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06);
box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.06); overflow: hidden; margin-top: 20px; margin-bottom: 30px;}
.quiz-result-title{background: rgba(13, 178, 178, 0.10); text-align: center; padding: 20px; border-bottom: 4px solid var(--primary-colour);}
.quiz-result-title h4{margin: 0px; font-weight: 700; font-size: 28px;}
.quiz-result-content{padding: 30px;}
.quiz-result-time{position: relative;  padding-right: 80px; margin-bottom: 20px;}
.quiz-result-time h5{margin-bottom: 12px;}
.quiz-result-time h5:last-child{margin: 0px; font-size: 24px; font-weight: 700;}
.quiz-result-time img{max-height: 60px; position: absolute; right: 0px;}
.quiz-result-right{ background: rgba(76, 217, 99, 0.10); border-radius: 6px; text-align: center; padding: 15px;}
.quiz-result-right h5{margin-bottom: 15px;}
.quiz-result-right h5:last-child{margin: 0px; font-size: 24px; font-weight: 700;}
.quiz-result-wrong{background: rgba(255, 58, 48, 0.10);}
.primary-button{background: var(--primary-colour); border-radius: 6px; color: var(--white); font-size: 22px; font-weight: 700; border: none;
width: 100%; height: 60px;}
.quiz-result-buttons{text-align: center; padding-bottom: 50px;}
.quiz-result-buttons button{margin-bottom: 20px;}
.quiz-result-buttons h5{color: var(--primary-colour);}
.quiz-score-bgm{ position: relative; background: url(../images/quiz-bgm.png); background-size: cover; padding: 50px 0px; overflow: hidden; min-height: 500px;}
.quiz-score-title{text-align: center;}
.quiz-score-title h1{font-size: 34px; font-weight: 700; color: var(--white); margin-bottom: 50px;}
.quiz-score-right{position: absolute; right: 0px; top: 30%;  color: var(--white);}
.quiz-score-right h6, .quiz-score-left h6{font-size: 18px; margin-bottom: 15px;}
.quiz-score-right h5, .quiz-score-left h5{font-size: 28px; font-weight: 700; margin-bottom: 15px;}
.quiz-score-right label{font-size: 32px;}
.quiz-score-right label i.yellow{ color: #FFB800;}
.quiz-score-left{position: absolute; left: 0px; top: 30%; color: var(--white); text-align: left;}
.quiz-questions-number{list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin-top: 30px; padding: 0px;}
.quiz-questions-number li{width: 60px; height: 60px; border-radius: 4px; background: #ddd; line-height: 60px; font-size: 26px; font-weight: 700;
margin: 0px 5px;}
.quiz-questions-number li.right{background: #4CD964; color: var(--white);}
.quiz-questions-number li.wrong{background: #FF3B30; color: var(--white);}
.quiz-questions-number li.active{background: var(--primary-colour); color: var(--white);}
.quiz-related-videos{padding: 30px 0px; }
.quiz-related-videos h3{font-size: 24px; font-weight: 700; margin-bottom: 30px;}
.quiz-related-videos-box{position: relative; overflow: hidden; border-radius: 4px; background: var(--white); -webkit-box-shadow: 10px 4px 15px 0px rgba(0,0,0,0.06);
-moz-box-shadow: 10px 4px 15px 0px rgba(0,0,0,0.06); box-shadow: 10px 4px 15px 0px rgba(0,0,0,0.06);}
.quiz-related-videos-box-img{position: relative;}
.quiz-related-videos-box-img img{width: 100%; height: 180px; object-fit: cover;}
.quiz-related-videos-box-content{padding: 15px; text-align: center;}
.quiz-related-videos-box-content h5{margin: 0px; font-size: 18px;}
.language-swich-circle{width: 45px; height: 45px; line-height: 50px; background: #E1EBEC; border-radius: 50%; text-align: center; display: inline-block;}
.language-swich-circle img{height: 16px;}
.language-swich-login label{margin: 0px; margin-right: 6px; font-size: 18px; cursor: pointer;}
.theme-swich-login{text-align: left;}
.theme-swich-login label{margin: 0px; margin-left: 6px; font-size: 16px; cursor: pointer;}
.theme-swich-login .language-swich-circle img{height: 24px;}
.new-login{padding: 50px 0px 80px; }
.new-login h1{text-align: center; margin-bottom: 40px;}
.new-login input{width: 100%; height: 60px; border-radius: 6px; background: rgba(26, 26, 26, 0.05); border: none; padding: 6px 14px;
font-size: 16px;}
.new-login label{margin-bottom: 15px; font-size: 18px;}
.new-login .form-group{margin-bottom: 30px; position: relative;}
.btn-primary{width: 100%; height: 50px; border-radius: 6px; font-size: 18px; font-weight: 700; color: var(--white); background: var(--primary-colour);
border: none; box-shadow: none; outline: none;}
.btn-primary:hover, .btn-primary:focus{ background: var(--secondary-colour); box-shadow: none;}
.btn-secondary{width: 100%; height: 60px; border-radius: 6px; font-size: 18px; font-weight: 700; color: var(--secondary-colour); background: none;
border: 1px solid var(--secondary-colour);}
.btn-secondary:hover{background: var(--secondary-colour);}
.new-login .btn-secondary{margin-top: 30px;}
.new-login h5{margin-top: 40px; text-align: center; color: var(--primary-colour);}
.forgot-password{width: 100%; max-width: 500px; border-radius: 6px; background: var(--white); padding: 20px; text-align: center !important; position: relative;}
.forgot-password h3{ margin-bottom: 20px;}
.forgot-password p{ color: var(--grey);}
input{width: 100%; height: 60px; border: none; border-radius: 6px; background: rgba(26, 26, 26, 0.05); font-size: 16px; padding: 6px 14px;}
.forgot-password button{margin-top: 20px;}
.forgot-password h5{font-size: 16px; margin-top: 20px; line-height: 28px;}
.close-icon{position: absolute; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; background: var(--white); color: var(--primary-colour);
cursor: pointer; left: 0px; top: -42px;}
.login-back-btn{width: 45px; height: 45px; line-height: 45px; background: var(--light-grey); border-radius: 50%; text-align: center; font-size: 16px;}
.new-login h4{margin-top: 40px; text-align: center; font-size: 20px;}
.new-login h4 a{color: var(--primary-colour);}
.stories .owl-stage-outer{ padding-bottom: 0px;}
.stories .owl-nav .owl-prev, .stories .owl-nav .owl-next{width: 24px; height: 24px; line-height: 26px; font-size: 14px; top: 30%; left: 0px;}
.stories .owl-nav .owl-next{right: 0px; left: auto;}
.stories .owl-stage{padding: 0px !important;}
.story-dp img{width: 60px; height: 60px; object-fit: cover; border: 2px solid var(--white); border-radius: 50%; padding: 2px; position: absolute;
right: 0px;}
.dropdown-item h5{font-size: 14px;}
.active-liveclass .live-course-box-content{position: relative; min-height: 170px;}
.request-box h6{font-size: 18px;}
.price-popup-content{padding: 15px; padding-bottom: 40px;}
.price-popup-radio{border: 1px solid var(--primary-colour); border-radius: 4px; padding: 15px; margin-bottom: 15px; position: relative; cursor: pointer;}
.price-popup-radio h6{font-size: 18px; margin-bottom: 10px;}
.price-popup-radio h4{font-weight: 700; margin-bottom: 10px;}
.price-popup-radio p{color: var(--primary-colour); margin: 0px; font-size: 16px;}
.price-popup-radio.highlight{background: rgba(13, 178, 178, 0.10);}
.price-popup-radio.highlight::before{content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 700; position: absolute; color:  var(--primary-colour);
right: 10px; top: 10px; width: 40px; height: 40px; background: var(--white); border-radius: 4px; line-height: 40px; border: 1px solid var(--primary-colour);
font-size: 20px;}
.price-plus-icon{font-size: 20px; color: var(--primary-colour); margin-bottom: 15px;}
.survey-form, .notificationEnable{width: 100%; max-width: 550px; border-radius: 6px; padding: 20px; background: var(--white); text-align: right !important;}
.survey-form h4{font-weight: 700; color: var(--primary-colour); border-bottom: 1px solid var(--light-dark); padding-bottom: 20px; margin-bottom: 20px;
font-size: 22px;}
.survey-form label{font-size: 16px; margin-bottom: 15px;}
.survey-true button{border: 1px solid var(--light-dark); border-radius: 4px; height: 45px; padding: 6px 14px; background: none; min-width: 120px;}
.survey-true button.highlight{background: var(--green); color: var(--white); border: none;}
.survey-form .form-group{margin-bottom: 20px;}
.survey-form .form-group .form-control{border: 1px solid var(--light-dark); background: none; height: 60px;}
.survey-footer{text-align: center;}
.survey-footer p{font-size: 16px; color: var(--grey);}
.survey-close{position: absolute; left: 10px; top: 20px; width: 45px; height: 45px; border-radius: 50%; color: var(--primary-colour);
font-size: 18px; cursor: pointer;}
.notificationEnable{text-align: center !important;}
.notificationEnable img{max-width: 300px; margin-bottom: 20px;}
.notificationEnable h4{color: var(--primary-colour); font-weight: 700; margin-bottom: 20px;}
.notificationEnable p{font-size: 18px; margin-bottom: 20px;}
.notificationEnable button{margin-bottom: 20px;}
.notificationEnable h5{font-size: 18px; color: var(--grey); cursor: pointer;}
.popup-notes{margin-bottom: 15px; position: relative;}
.popup-notes-text{text-align: center; position: absolute; top: 50%; right: 30px; transform: translate(-5%, -50%);}
.popup-notes-text p{font-size: 16px; margin: 0px; max-width: 130px; font-weight: 700;}
.popup-notes-text h6{font-size: 20px; font-weight: 700;}
.sub-vid-ico{position: relative; top: 2px;}
.quiz-right-arrow{position: absolute; right: 20px; top: 40%; transform: translate(0, -50%); font-size: 30px; color: var(--primary-colour);}
.quiz-left-arrow{position: absolute; left: 20px; top: 40%; transform: translate(0, -50%); font-size: 30px; color: var(--primary-colour);}
.privateClass-popup-close-btn{position: absolute; left: 15px; top: 15px; width: 35px; height: 35px; line-height: 35px;border-radius: 50%; background: #f5f5f5;}
.bookmark-page select.form-control{background: none; border: 1px solid var(--primary-colour); color: var(--primary-colour);}
.bookmark-image{position: relative; border-radius: 4px; overflow: hidden;}
.cart-price-box{border: 1px solid var(--dark); border-radius: 4px; padding: 4px; text-align: center; width: 100%; max-width: 90px; line-height: 18px;
display: inline-block; cursor: pointer;}
.cart-select-price{margin-top: 15px;}
.cart-price-box.selected{border-color: var(--primary-colour); color: var(--primary-colour);}
.empty-timeline button{width: 100%; max-width: 400px; margin-top: 20px;}
.dropdown-item:focus, .dropdown-item:hover{background: none;}
.recorded-details-img img{height: 210px;}
.profile-edit{padding-top: 60px; padding-bottom: 80px; position: relative;}
.profile-edit-dp{position: relative; text-align: center; margin-bottom: 30px;}
.profile-edit-dp img{border-radius: 50%; border: 1px solid var(--primary-colour); width: 200px; height: 200px; object-fit: cover; background: var(--white);}
.profile-edit-dp i{width: 60px; height: 60px; background: var(--white); line-height: 60px; text-align: center; position: absolute;
left: 50%; top: 50%; transform: translate(60%, 60%); border-radius: 50%; cursor: pointer; color: var(--primary-colour);
font-size: 24px; border: 1px solid var(--primary-colour);}
.dp-upload{display: none;}
.profile-edit .form-group{position: relative; margin-bottom: 25px;}
.profile-edit .form-group .verified{ position: absolute; left: 25px; top: 50%; transform: translate(-50%, 10%); font-size: 24px;
color: var(--green);}
.profile-edit .form-group select{ width: 100%; height: 60px; border: none; border-radius: 6px; background: rgba(26, 26, 26, 0.05);
font-size: 16px; padding: 6px 14px;}
.profile-edit .btn-primary{max-width: 160px; margin-top: 10px;}
.delete-btn{position: absolute; left: 0px; top: 8px;}
.deleteprofile-popup{background: var(--white); border-radius: 6px; text-align: center !important; padding: 15px; width: 100%; max-width: 330px;}
.deleteprofile-popup h5{font-weight: 700; margin-bottom: 20px;}
.deleteprofile-popup h4{font-size: 16px; color: var(--primary-colour); margin-bottom: 20px;}
.deleteprofile-popup button{width: 100%; max-width: 130px; height: 50px; border-radius: 6px; border: none; font-size: 16px;}
.delete-y{background: var(--primary-colour); color: var(--white);}
.delete-n{background: rgba(13, 178, 178, 0.1);}
.select-class-popup select.form-control{background: none; border: 1px solid var(--primary-colour); color: var(--primary-colour); height: 50px;}
.video-subscribe-pop{background: var(--white); border-radius: 8px; padding: 15px; width: 100%; max-width: 350px; text-align: center !important;}
.video-subscribe-pop p{margin-bottom: 20px; font-size: 16px; line-height: 30px;}
.video-subscribe-pop i{position: absolute; left: 10px; top: 10px; width: 35px; height: 35px; background: var(--primary-colour); border-radius: 50%;
color: var(--white); line-height: 35px; border-radius: 50%; cursor: pointer;}
.video-subscribe-pop button{height: 50px; background: var(--primary-colour); width: 100%; max-width: 150px; border-radius: 6px; border: none;
font-size: 16px; font-weight: 700; color: var(--white);}
.error-message{position: relative; height: 90vh; text-align: center;}
.error-message-box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.error-message-box img{max-width: 300px; margin-bottom: 20px;}
.error-message-box h3{margin-bottom: 30px;}
.subject-details-subskill{border-bottom: 1px solid var(--primary-colour); margin-bottom: 10px;}
.panel-body .subject-details-subskill:last-child{border: none; margin: 0px;}
.edit-gender label{display: block;}
.edit-gender .welcome-radio .checkmark img{max-width: 80px;}
.edit-gender .welcome-radio .checkmark{width: 90px; height: 90px; line-height: 90px;}
.edit-gender .welcome-radio{width: 90px; height: 90px; margin: 4px;}
.liveclass-feedbakpop{width: 100%; max-width: 450px; background: var(--white); border-radius: 8px; padding: 15px; text-align: right !important;}
.liveclass-feedbakpop h4{color: var(--primary-colour); border-bottom: 1px solid var(--grey-light); font-size: 18px; padding-bottom: 20px;
font-weight: 700; margin-bottom: 20px;}
.liveclass-feedbakpop i{position: absolute; left: 10px; top: 10px; background: var(--white); width: 40px; height: 40px; line-height: 40px;
border-radius: 50%; text-align: center; color: var(--primary-colour); cursor: pointer;}
.liveclass-feedbakpop hr{margin: 20px 0px; border-color: var(--grey-light);}
.liveclass-feedbakpop .rating-video{float: none; text-align: center; margin-bottom: 15px;}
.liveclass-feedbakpop .rating-video > label{float: none; font-size: 24px;}
.liveclass-feedbakpop textarea{ width: 100%; border-radius: 6px; border: 1px solid var(--grey-light); padding: 10px; resize: none;
margin-bottom: 20px;}
.liveclass-feedbakpop button{width: 100%;}
.liveclass-feedbakpop h6{text-align: center; margin-top: 15px; color: var(--grey); cursor: pointer;}
.pdf-view{padding: 40px 0px;}
.pdf-view iframe{width: 100%; height: 100vh;} 
.pdf-view canvas{width: 100% !important;}
.chat-icon{width: 48px; height: 48px; text-align: center; border-radius: 50%; position: relative; bottom: 35px; right: 20px; line-height: 48px;
box-shadow: rgba(103, 103, 103, 0.3) 0px 8px 10px; background: var(--primary-colour); z-index: 9999; border: 1px solid var(--white);}
.chat-icon img{max-width: 30px; cursor: pointer;}
.chat-icon-img .chat-close-ico{display: none;}
.chat-icon-img.chat-close .chat-open-ico{display: none; transition: all 0.3s ease-in-out;}
.chat-icon-img.chat-close .chat-close-ico{display: inline-block; transition: all 0.3s ease-in-out;}
.hidden{display: none;}
#chatWindow{position: absolute; right:20px; bottom: 90px; transition: height 0.5s ease-in-out; z-index: 1111;
transition: width 200ms ease 0s, height 200ms ease 0s, max-height 200ms ease 0s, transform 300ms cubic-bezier(0, 1.2, 1, 1) 0s, opacity 83ms ease-out 0s;
width: 300px; height: 450px;  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px; border-radius: 16px; overflow: hidden;}
#chatWindow iframe{width: 100%; height: 100%; border: none;}
#widgetMove{position: fixed; cursor: grab; left: 97%; top: 95%; z-index: 999999;}
.request-private-content{padding-right: 50px;}
.request-private-content h6{margin-bottom: 15px;}
.district-popup{width: 100%; max-width: 380px; border-radius: 10px; padding: 20px; background: var(--white); text-align: right !important;
position: relative; overflow: hidden;}
.district-title h5{font-size: 18px; color: var(--primary-colour); text-align: center !important;}
.district-title{border-bottom: 1px solid var(--light-grey); padding-bottom: 15px;}
.district-close{position: absolute; left: 15px; top: 15px; color: var(--dark2); cursor: pointer;}
.district-content{padding-top: 20px;}
.district-content img{ max-height: 150px; display: block; margin: 0 auto; margin-bottom: 20px;}
.district-content select{width: 100%; height: 50px; border-radius: 6px; border: 1px solid var(--light-grey); padding: 10px; outline: none;}
.district-content label{margin-bottom: 15px;} 
.story-carousel .owl-stage-outer{ width: 100%; max-width: 400px; height: 100%; max-height: 90vh; overflow: hidden; background: #0F1217;}

:root {
    --primary-colour: #0DAFAF;
    --white: #fff;
    --secondary-colour:#1B5967;
    --dark:#000;
    --dark2:#28303F;
    --light-dark:#ddd;
    --light-grey:#E1EBEC;
    --green: #4CD964;
    --yellow: #FCD34C;
    --red: #FF3B30;
    --grey: #8EA7AB;
    --grey-light: #ddd;
  
  }