/*
Theme Name: habitrade
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn {
    background: var(--tutor-color-primary);
    border: 1px solid var(--tutor-color-primary) !important;
}

/*************** ADD CUSTOM CSS HERE.   ***************/
#main {
	min-height: 100vh
}
.home #main{
	min-height: unset !important;
}

.mb-0 *{
	margin-bottom: 0 !important
}
.col-home-right .icon-box{
	width: auto;
	justify-content: center;
	gap: 20px;
	margin-bottom: 10px
}
.col-home-right .icon-box-text.last-reset {
	flex: none;
	padding: 0 !important
}
.col-home-right .col-inner{
	display: flex;
	flex-direction: column;
	justify-content: center
}
.col-home-right .icon-box-text{
	font-size: 26px;
	font-weight: 700;
}
.tutor-course-filter{
	display: none !important;
}
.main-title h1{
	font-size: 50px;
	line-height: 1.5;
	margin-bottom: 40px;
	font-weight: 900;
}
.main-title-s h1{
	font-size: 40px
}
.main-title p{
	font-size: 26px;
	font-weight: 700;
}
.tutor-wrap {
	padding-top: 50px;
}
.title h1, .tutor-archive-title h1, .tutor-course-details-title,
.title h2{
	font-size: 29px;
	letter-spacing: 0.2px;
	margin-bottom: 15px;
  text-transform: uppercase;
}
h1.entry-title,
.title-s h1,
.title-s h2{
	font-size: 29px;
	margin-bottom: 30px;
  text-transform: uppercase;
}
.title-s2 h2{
	font-size: 38px;
	margin-bottom: 16px
}
.video-cus .overlay-icon {
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	border-width: 10px;
	opacity: 1;
	background: none;
}

.video-cus .absolute {
	opacity: 1;
}
.list-ul li::before{
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	background: #292929;
	width: 12px;
	height: 12px;
	border-radius: 100%;
}
.list-ul li{
	list-style:none;
	position:relative;
	margin: 0 0 25px !important;
	padding-left: 30px
}
.list-ul li a{
	color: #0F67FF;
	text-decoration: underline;
	font-size: 20px;
	font-weight: 500;
	text-underline-offset: 5px;
}
.list-ul li a:hover{
	color: var(--fs-experimental-link-color-hover);
}
.rank-math-breadcrumb p{
	margin-bottom: 8px
}
.icon-contact{
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.2px
}
.icon-contact-big{
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.2px
}
.icon-contact .icon-box-img+.icon-box-text{
	padding-left: 20px
}
.box-contact-desc{
	font-size: 18px;
	font-weight: 700
}
.header-social-icons a.icon.button {
	opacity: 1;
	border-color: #fff;
	color: #fff;
	margin-right: 10px;
}
.header-social-icons a.button i{
	top: 0
}
.account-item  .nav-dropdown, .account-item:before, .account-item:after{
  display: none !important;
}
.show-more-box .tutor-btn-show-more{
    border: 1px solid #ddd;
    padding: 10px 15px !important;
    border-radius: 5px;
    color: #333
}
.show-more-box .tutor-btn-show-more:hover{
    background: #F00;
    color: #FFF;
    border-color: #F00;
}
.page-wrapper{
	padding-top: 50px;
}
.footer-title *{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px
}
.widget .is-divider,
.absolute-footer{
	display: none
}
.customer-item a{
	border: 1px solid #DEDEDE;
	overflow: hidden;
	display: block
}
.customer-item img{
	aspect-ratio: 1 / 0.63;
	object-fit: cover;
}
.customer-item h2{
	width: 100%;
	height: 72px;
	font-size: 22px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}
#post-list .col.post-item .col-inner, .blog-cus .col.post-item .col-inner{
  padding-bottom: 30px;
  border-bottom: 1px solid #DDD;
}
#post-list .col.post-item:last-child .col-inner, .blog-cus .col.post-item:last-child .col-inner, .related-post .col.post-item .col-inner{
  padding-bottom: 0;
  border-bottom: 0;
}

.box-vertical.box-blog-post{
  border: 0;
}
.box-vertical .post-title{
  margin-top: 0;
}
.box-vertical .post-title a{
	font-size: 22px;
	font-weight: 700;
	color: #282938;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 1.4;
}
.box-vertical .post-title a:hover{

}
.box-vertical  .from_the_blog_excerpt {
	font-size: 16px;
	color:#282938;
}
.box-vertical .image-cover{
	padding-top: 63% !important
}
.box-vertical .box-image {
	width: 35%  !important;
  border-radius: 5px;
}
.box-vertical .box-image img{
  border-radius: 5px;
}
.blog-archive  .large-10{
	max-width: 100%;
	flex-basis: 100%;
}
.entry-content,
.entry-header-text{
	padding:0
}

.entry-divider,
.box-blog-post .is-divider{
	display: none
}
.box-vertical  .button {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	color: #282938;
	text-transform: none;
}
.box-vertical .button::after{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16' fill='none'%3E%3Cpath d='M18.3454 8.70711C18.7359 8.31658 18.7359 7.68342 18.3454 7.29289L11.9814 0.928932C11.5909 0.538408 10.9577 0.538408 10.5672 0.928932C10.1767 1.31946 10.1767 1.95262 10.5672 2.34315L16.2241 8L10.5672 13.6569C10.1767 14.0474 10.1767 14.6805 10.5672 15.0711C10.9577 15.4616 11.5909 15.4616 11.9814 15.0711L18.3454 8.70711ZM0.613281 9H17.6383V7H0.613281V9Z' fill='%23282938'/%3E%3C/svg%3E");
	position: relative;
	top: 3px;
}
.box-vertical  .box-text{
	padding: 0 0 0 30px;
  vertical-align: top;
}
span.widget-title{
	width: 100%;
	height: 43px;
	display: flex;
	align-items: center;
	/* justify-content: center; */
	text-align: left;
	background: #2E2F34;
	color: #fff;
	font-size: 16px;
	padding-left: 20px;
	font-weight: 500;
}
.recent-blog-posts-li{
	border: 0 !important
}
.flatsome_recent_posts ul{
	padding: 15px 23px 25px;
	background: #F8F8F8;
	box-shadow: 0px 4px 4px 0px #0000000D;
}
.flatsome_recent_posts .badge{
	width: 70px;
	height: 70px
}
.flatsome_recent_posts a{
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
h1.page-title {
	font-size: 29px;
	text-align: left;
	margin: 0;
  letter-spacing: 0;
}
.acc-cus .accordion-title.active{
	background: none;
	border: none;
	font-weight: 500
}
.acc-cus .accordion-title{
	border: none;
	font-weight: 500;
	font-size: 22px;
	padding-left: 28px;
}
.acc-cus .accordion-title span{
	display: block;
	max-width: 70%
}
.acc-cus .toggle{
	position: absolute;
	left: auto;
	right: 10px;
	opacity: 1;
	top: 23px;
}
.acc-cus .toggle i::before{
	content: "";
	opacity: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='45' viewBox='0 0 47 45' fill='none'%3E%3Crect x='0.199219' y='0.36554' width='46.3232' height='43.8063' rx='8' fill='%23F7F7FF'/%3E%3Cpath d='M22.2461 13.7686C22.2461 13.2163 22.6938 12.7686 23.2461 12.7686H23.4785C24.0308 12.7686 24.4785 13.2163 24.4785 13.7686V30.7689C24.4785 31.3212 24.0308 31.7689 23.4785 31.7689H23.2461C22.6938 31.7689 22.2461 31.3212 22.2461 30.7689V13.7686Z' fill='%23A2A2A2'/%3E%3Cpath d='M13.3164 22.2132C13.3164 21.6609 13.7641 21.2132 14.3164 21.2132H32.4084C32.9607 21.2132 33.4084 21.6609 33.4084 22.2132V22.3243C33.4084 22.8766 32.9607 23.3243 32.4084 23.3243H14.3164C13.7641 23.3243 13.3164 22.8766 13.3164 22.3243V22.2132Z' fill='%23A2A2A2'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 45px;
	height: 45px;
	display: block
}
.acc-cus .active .toggle i::before{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='45' viewBox='0 0 47 45' fill='none'%3E%3Crect x='0.199219' y='0.223022' width='46.3232' height='43.8063' rx='8' fill='%2328B76B'/%3E%3Cpath d='M14.3145 20.9206C13.6793 20.9206 13.1645 21.4355 13.1645 22.0706V22.1818C13.1645 22.8169 13.6793 23.3318 14.3145 23.3318H32.4064C33.0416 23.3318 33.5564 22.8169 33.5564 22.1818V22.0706C33.5564 21.4355 33.0416 20.9206 32.4064 20.9206H14.3145Z' fill='white' stroke='white' stroke-width='0.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acc-cus  .accordion-item{
	box-shadow: 0px 5px 16px 0px #080F340F;
	border-radius: 16px;
	margin-bottom: 25px;
	padding: 10px 0;
}
.acc-cus  .accordion-inner{
	font-size: 18px;
	max-width: 70%;
	padding: 0 30px 10px;
}
.col-s .col{
	padding-bottom: 10px
}
.login-page{
	padding: 60px 0
}
#login-container{
	width: 577px;
	max-width: 100%;
	border: 1px solid #CFCFCF;
	margin: 70px auto 0;
	padding:  40px 70px;
}
.login-main input:not([type="submit"], [type="checkbox"])::placeholder{
	color: #333333;
}

.login-main input:not([type="submit"],[type="checkbox"]){
	background: #E3E3E3;
	width: 100%;
	height: 48px;
	padding-left: 20px;
	margin-bottom: 18px;
	box-shadow: none;
	border: 0;
	color: #333333;
	font-size:16px
}
.login-main input[type="checkbox"]{
	width: 15px;
	height: 15px;
	margin-right: 13px;
	margin-bottom: 0;
}
.forgetmenot label{
	display: flex;
	align-items:center
}
.login-main-bottom a{
	text-align: right;
	display: block
}
.login-main-bottom a,
.forgetmenot label{
	font-size: 14px;
	font-weight: 500
}
.login-main input[type="submit"]{
	width: 213px;
	height: 55px;
	margin-top: 20px;
	margin-bottom: 0;
	background: #F00;
	font-size: 18px
}
.login-main h2{
	font-size:18px;
	margin-bottom: 20px
}
.off-canvas .mfp-content{
	background: #fff
}
.off-canvas:not(.off-canvas-center) .nav-vertical li>a{
	color: #333;
	font-weight: 700
}
.nav-pills>li.html_topbar_right{
	margin-right: 15px;
}
.tutor-course-details-page{
	margin-bottom: 50px;
}
.tutor-course-topic-item .title_label{
  background: #000;
  border-radius: 5px;
  color: #FFF;
  padding-left: 3px;
  padding-right: 5px;
  line-height: 20px;
  height: 22px;
  margin-left: 5px;
  font-size: 11px;
  margin-right: 0px;
  display: inline-block;
    position: relative;
    top: -3px;
}
.tutor-course-topic-item .title_label img{
    width: 15px;
    margin-top: -2px;
}
.show-more-box{
	text-align: center;
}
.price-box-inner .tutor-btn-outline-primary{
    padding: 0;
    border: 0;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    background: #FFF;
    line-height: 1.25;
}
.related-post{
    background: #F8F8F8;
}
.related-post .box-vertical .button{
    display: none;
}
.related-post .post-item .box{
    padding: 10px 15px 0 15px;
    border: 0;
}
.related-post .box-vertical .box-text{
    padding: 0 0 0 15px;
}
.related-post .box-vertical .post-title a{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-post .col.post-item{
    padding-bottom: 0;
}
.related-post .col.post-item:last-child .box{
    padding-bottom: 25px;
}
.habi-lesson-sidebar .tutor-accordion-item-body {
  max-height: 400px;
  overflow: auto;
}

.tutor-accordion-item-body::-webkit-scrollbar {
  width: 10px;
}
.home-left .icon-box-text p{
    margin-bottom: 5px !important;
}
.home-left .icon-box-text p + p{
    line-height: 1.3;
    display: block;
}
/* Track */
.tutor-accordion-item-body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 12px;
}

/* Handle */
.tutor-accordion-item-body::-webkit-scrollbar-thumb {
  background: #6F6F6F;
  border-radius: 12px;
}

/* Handle on hover */
.tutor-accordion-item-body::-webkit-scrollbar-thumb:hover {
  background: #6F6F6F;
}
.single-lesson .single-lesson-box{
  padding-top: 50px;
}

.related-document h3{
    font-size: 29px;
    text-transform: uppercase;
    line-height: 50px;
    margin-bottom: 15px;
}
.related-document .col.col-large-12{
  padding-bottom: 0;
}
.tutor-pagination-wrapper-replaceable{
  margin-bottom: 30px !important;
}

#footer .col{
    padding-bottom: 0;
}
.footer-title p{
    margin-bottom: 5px;
}
.pb0{
  padding-bottom: 0 !important;
}

.related-document .post-item .box{
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  border: 1px solid var(--tutor-border-color);
}
.related-document .post-item .box .box-image img{
  width: 100%;
  border-radius: 0 0 6px 6px;
}
.related-document .post-item .box .box-text.text-center{
  padding: 0;
}
.related-document .post-item .box .box-text .post-title a{
  color: #282938;
  font-size: 16px;
  font-weight: bold;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-document .post-item .box .box-text .from_the_blog_excerpt{
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
}
.related-document .post-item .box .box-text .button{
  border-top: 1px solid #cdcfd5 !important;
  padding: 15px;
  border: 1px solid #000;
  width: 100%;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
}
.related-document .post-item .box .box-text .button:hover{
  color: var(--tutor-color-primary);
}
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #2e2f34;
  border-bottom-color: #F00;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.habi-auto-register{
    text-align: center;
    padding-top: 150px;
}
.habi-auto-register .noice{
    margin-top: 20px;
}
.warning-box {
  text-align: center;
}
.warning-box .row{
  margin: 0 auto !important;
  border: 1px solid #d5d5d5;
}
.warning-box .row .col{
  padding: 0;
}
.warning-box .section-title-normal {
  padding: 5px 15px;
    border-bottom: 1px solid #d5d5d5;
}
.warning-box  .section-title-normal span{
  border: 0;
}
.warning-box p{
  padding: 0 15px;
}

.category  .large-9.col .rank-math-breadcrumb{
    display: none;
}
.tutor-course-single-content-wrapper{
  padding-top: 17px;
}
.ip-country-div .select2 {
  margin-bottom: 1em;
}
.ip-country-div .select2  .select2-selection--single{
  height: 40px !important;
  padding: 0 !important;
  border-radius: 5px !important;
}
.ip-country-div  .select2-selection--single .select2-selection__rendered{
  line-height: 40px !important;
}

.review-sidebar .section-title-container{
  margin-bottom: 0;
}
.review-sidebar .col-inner .section-title{
  background: #000;
  color: #FFF;
  padding: 5px 15px;
  margin-bottom: 0;
  border: 0;
}
.review-sidebar .section-title-normal span{
  padding: 0;
}
.review-sidebar ul{
  list-style: none;
}
.review-sidebar ul li{
  border: 1px solid #000;
  margin: 0;
  padding: 5px 15px;
  border-bottom: 0;
}
.review-sidebar ul li:last-child{
  border-bottom: 1px solid #000;
}
.review-sidebar ul li a{
  color: #000;
  text-decoration: none;
}
.review-sidebar ul li a:hover{
  text-decoration: underline;
  color: var(--tutor-color-primary);
}
.box-view-avatar{
    position: relative;
    overflow: hidden;
}
.box-view-avatar-position{
    text-align: center;
    position: static;
}
.box-view-avatar img{
    height: auto;
}
.btn-set-ip-avatar{
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
}
.error-message{
  color: #F00;
}
.success-message{
  color: #F00;
}
.password-box {
  position: relative;
}
.password-box svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 15px;
    color: #333;
}
.password-box svg:hover path{
  stroke: #F00;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@media only screen and (max-width: 1200px) {
	.header-main .nav > li > a {
		font-size: 16px;
	}
}
@media only screen and (max-width: 850px) {
	/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.main-title p,
	.col-home-right .icon-box-text{
		font-size: 18px;
	}
	.main-title h1{
		font-size: 28px;
		margin-bottom: 20px
	}
	.col-home-right .icon-box{
		gap : 10px
	}
	.col-home-right .icon-box-img{
		width: 30px !important
	}
	.title h1, .tutor-archive-title h1, .tutor-course-details-title,
	.title h2,
	.title-s2 h2,
	h1.page-title ,
	h1.entry-title,
	.title-s h1,
	.title-s h2{
		font-size: 24px;
	}
	.box-vertical .box-text{
		padding: 0 0 0 20px
	}
  #post-list .col.post-item, .blog-cus .col.post-item {
    padding-bottom: 20px;
  }
  #post-list .col.post-item .col-inner, .blog-cus .col.post-item .col-inner{
    padding-bottom: 20px;
  }
	.acc-cus  .accordion-inner{
		font-size: 14px;
	}
	.acc-cus .accordion-title{
		font-size: 18px;
	}
	.acc-cus .toggle {
		top: 5px;
	}
	.acc-cus .toggle i::before {
		width: 30px;
		height: 30px;
	}
	.acc-cus .accordion-title span {
		max-width: 100%;
	}
	#login-container{
		margin: 40px auto 0;
		padding:  20px ;
	}
	.login-main input[type="submit"]{
		font-size: 14px;
		width: 160px
	}
}
@media(max-width: 849px){
  .community-single{
      padding-top: 20px;
  }
  .post-sidebar{
    display: none !important;
  }
  .review-sidebar .col-inner{
    float: left;
  }
  .related-document h3{
      font-size: 24px;
      text-transform: uppercase;
      line-height: 50px;
      margin-top: 35px;
      margin-bottom: 15px;
  }
  .single-lesson .single-lesson-box{
    padding-top: 20px;
  }
	.home .is-full-height{
		height: auto !important;
	}
	#main-menu .nav-sidebar.nav-vertical>li+li{
		padding: 0;
	}
	#main-menu .nav-sidebar.nav-vertical>li+li a{
    font-size: 12.8px;
	}
	.page-wrapper{
		padding-top: 20px;
	}
  .box-vertical .post-title a{
    font-size: 20px;
  }
  .box-vertical .from_the_blog_excerpt{
    font-size: 15px;
  }
	.mobile-nav.nav-right a:last-child{
		margin-right: 0;
	}
	footer .icon-box-left .icon-box-img+.icon-box-text{
		padding-left: 5px;
	}
	footer .col{
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 20px;
	}
	footer .icon-box, .copy-right-text{
		font-size: 13.5px;
	}
	footer .icon-box > *{
	}
	footer .icon-box-img svg{
		padding-top: 0;
		line-height: 1;
		position: relative;
		vertical-align: top;
	}
	.header-wrapper:not(.stuck) .logo img, .stuck #logo img{
		max-width: 160px;
    max-height: 30px;
	}
	.tutor-course-single-content-wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
	}
	.tutor-lesson-sidebar, .tutor-course-single-content-wrapper #tutor-single-entry-content{
    flex: 0 0 auto;
    width: 100%;
		display: block;
	}
	.tutor-lesson-sidebar{
		position: static;
		opacity: 1;
		z-index: 2;
		order: 2;
		padding-right: 0 !important;
		padding-top: 15px;
	}
	.tutor-spotlight-mobile-progress-complete, .tutor-iconic-btn{
		display: none !important;
	}
	.tutor-dashboard .tutor-frontend-dashboard-header{
		padding-bottom: 10px;
	}
	.page-dashboard-users .tutor-wrap{

	}
	.tutor-wrap{
		padding-top: 25px;
	}

	.wapper-main-user_pass > h3, .wapper-main-user-profile > h3, .wapper-main-tutor-enrolled > h3{
		font-size: 24px;
		margin-bottom: 15px;
	}
	.tutor-dashboard:not(.is-sidebar-expanded) .tutor-dashboard-left-menu{
		display: block !important;
	}
	.tutor-dashboard #tutor-dashboard-footer-mobile{
		display: none !important;
	}
	.tutor-dashboard .tutor-frontend-dashboard-maincontent ul.tutor-dashboard-permalinks{
	}
	.tutor-dashboard-content, .tutor-dashboard-permalinks{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks{
		margin-bottom: 30px;
		margin-right: auto;
		margin-left: auto;
	}
	.tutor-header-right-side{
		margin: 0;
	}
	.tutor-row.tutor-frontend-dashboard-maincontent{
		margin-top: 20px;
	}
	.tutor-dashboard-header-avatar .tutor-avatar-xl{
    width: 60px;
    height: 60px;
	}
	.tutor-user-info{
		margin-left: 15px;
	}
	.tutor-dashboard-header-username{
		font-weight: bold;
		font-size: 18px;
	}
	.customer-item h2{
		font-size: 18px;
	}

  .home-left .icon-box-text p{
      line-height: 1.3;
  }
  .home-left .icon-box-text p + p{
      font-size: 15px;
  }
  .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header{
    display: block;
  }
  .tutor-course-topic-single-header-title{
    margin-bottom: 10px;
  }
  .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header{
    margin-bottom: 15px;
  }

  .icon-contact .icon-box-img , .icon-contact .icon-box-img {
    width: 28px !important;
  }
  .icon-contact .icon-box-img+.icon-box-text{
    padding-left: 7px;
  }
  .icon-contact-big{
    font-size: 14px;
  }
  .box-contact-desc{
    font-size: 15px;
    line-height: 1.36;
  }
}
@media(max-width: 750px){
  .box-vertical .from_the_blog_excerpt{
    display: none;
  }
}
@media(max-width: 550px){
  .box-list-view .box .box-image, .box-list-view .box .box-text, .box-vertical .box-image, .box-vertical .box-text {
    direction: ltr;
    display: table-cell;
    vertical-align: middle;
  }
  .box-vertical .post-title a {
    font-size: 15px;
    margin-bottom: 0;
  }
  .box-vertical .from_the_blog_excerpt{
    display: none;
  }
  .box-vertical .button{
    font-size: 14px;
  }
}
@media(max-width: 549px){
    .header .header-inner{
        padding-left: 10px;
        padding-right: 10px;
    }
    #logo {
        width: 175px !important;
    }
    .footer-title *{
      font-size: 17px;
    }
    .copy-right-text{
      line-height: 1.2;
    }
    #wrapper .header.show-on-scroll,#wrapper .stuck .header-main {
        height: 70px !important;
    }
    .login-main input[type="checkbox"]{
      margin-right: 5px;
      margin-top: -3px;
    }
    #post-list .col.post-item .col-inner, .blog-cus .col.post-item .col-inner {
      padding-bottom: 12px;
    }
    #post-list .col.post-item, .blog-cus .col.post-item {
      padding-bottom: 12px;
    }
    .box-vertical .box-text, .box-vertical .box-image{
      vertical-align: top;
    }
    .box-vertical .box-text .button{
      display: inline;
    }
}

@media(max-width: 420px){
  #logo {
      width: 165px !important;
  }
  .footer-title * {
      font-size: 15px;
  }
  footer .icon-box-img *{
    width: 19px;
  }
  footer .icon-box-left .icon-box-img+.icon-box-text{
    padding: 3px;
  }
}



.lesson-banner .col-home-right{
    padding: 30px 60px 60px;
}
.tutor-accordion-item{
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #F8F8F8;
    margin-bottom: 0;
}
.tutor-course-content-list-item:last-child{
    border-radius: 0;
    margin: 0;
}
.tutor-accordion-item .tutor-accordion-item-header{
    background: #6F6F6F;
    padding: 15px 45px 15px 20px;
    line-height: 20px;
    color: #FFF;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
}
.tutor-accordion-item-header::after{
    color: #FFF;
}
.tutor-course-content-list-item{
    background: #F8F8F8;
    padding: 15px ;
    font-size: 16px;
    font-weight: normal;
    border-bottom: 1px solid #E9E9E9;
    margin: 0;
}
.tutor-course-content-list-item .tutor-d-flex.tutor-align-center{
    max-width: calc(100% - 80px);
}
.tutor-course-content-list-item .tutor-color-muted{
    margin-left: 10px;
}
.tutor-course-content-list-item-title{
    line-height: 1.3;
}
.tutor-dashboard-content .password-box svg{
  top: 43px;
}
/* Bài tập */
.commentform textarea{
    padding: 22px 10px;
    box-shadow: none !important;
    border-radius: 0px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 0;
}
.commentform .comment-image{
    background: #f7f7f7;
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    position: relative;
}
.commentform .comment-image label {
    font-size: 15px;
    font-weight: 500;
}
.commentform .comment-image label *{
    vertical-align: middle;
}

.commentform .input-upload-image{
    opacity: 0;
    visibility: visible;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.commentform .comment-image > *{
    cursor: pointer;
}
.commentform svg{
    width: 32px;
    height: 32px;
}
.commentform .box-image-preview{
    padding: 5px;
    border: dashed 1px #bbbbbb;
    display: none;
    width: 90px;
    height: 90px;
    position: relative;
    overflow: hidden;
    background-position: 50% 50%;
    background-size: cover;
    margin-top: 10px;
}
.commentform #comment-image-preview{
    width: 90% !important;
    height: 90% !important;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    position: absolute;
    object-position: 50% 50%;
    object-fit: cover;
    transition: all .5s linear;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -ms-transition: all .5s linear;
}
.comment-item .user-item{
    position: relative;
    display: block;
    vertical-align: middle;
}
.comment-item .user-item *{
    vertical-align: middle;
}
.comment-item .user-item .user-avatar{
    width: 55px;
    height: 55px;
    position: relative;
    overflow: hidden;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 10px;
}
.comment-item .user-item .user-avatar img{
    width: 100% !important;
    height: 100% !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    object-position: 50% 50%;
    object-fit: cover;
    transition: all .5s linear;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -ms-transition: all .5s linear;
}
.comment-item strong{
    display: inline-block;
    padding-right: 7px;
    font-size: 15px;
}
.admin-label{
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    background: #000;
    color: #FFF;
    padding: 0 5px;
    line-height: 1.5;
    border-radius: 4px;
    top: -2px;
    position: relative;
}
.comment-item .comment-date{
    display: inline-block;
    float: right;
    font-size: 12px;
    vertical-align: middle;
}
.comment-item{
    margin-bottom: 5px;
}
.comment-item .comment-reply{
  padding-left: 12px;
  display: inline-block;
  vertical-align: middle;
}
.comment-content{
    background: #f7f7f7;
    margin-top: 0px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 15.5px;
    line-height: 1.4;
}
.comment-author{
  margin-bottom: 2px;
}
.comment-item .reply-btn{
    padding: 0;
    margin: 0;
    text-transform: none;
    font-weight: normal;
    font-size: 13px;
    font-weight: 600;
    height: auto;
    min-height: 1px;
    line-height: 1.4;
    color: #333;
    border: 0;
    line-height: 20px;
}
.comment-reactions span{
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
    height: 20px;
    vertical-align: middle;
}
.reply-item:last-child{
  margin-bottom: 0;
}
.comment-item .reply-btn:hover{
    text-decoration: underline;
}
.comment-content .comment-image{
    margin-top: 10px;
}
.comment-content .comment-image img{
    max-height: 100px;
}
.replies {
    margin-bottom: 5px;
    margin-left: 70px;
}
.replies .replies {
  margin-bottom: 0;
}
.replies .replies .reply-item{
  margin-bottom: 3px;
}
.replies .replies .reply-btn-wrapper{
  display: none;
}
.view-reply b{
    font-size: 14px;
    color: #444;
    font-weight: 600;
    cursor: pointer;
    display: block;
    line-height: 1.35;
}
.view-reply b:hover{
  color: #000;
}
.reply-item{
  margin-bottom: 7px;
}
#load-more-posts{
    border: 1px solid #000;
}
#load-more-posts:hover{
    background:#000;
    color: #FFF;
}
.exercise-single .rank-math-breadcrumb{
  display: none;
}

.comment-item .user-item{
    float: left;
}
.comment-item .comment-box{
    padding-left: 65px;
    position: relative;
}
.remove-cmt-btn svg path{
  stroke: #555 !important;
}
.remove-cmt-btn:hover svg path{
  stroke: #f00 !important;
}
.exercise-list{
    margin-top: 30px;
}
.exercise-list h3{
    margin-bottom: 5px;
    text-transform: uppercase;
}
.exercise-list ul{
    margin-top: 10px;
    list-style: none;
    padding-left: 0;
}
.exercise-list ul li{
    margin-bottom: 10px;
}
.exercise-list ul li a{
    display: block;
    background: #6F6F6F;
    padding: 10px 45px 10px 10px;
    line-height: 20px;
    color: #FFF;
    font-size: 15px;
    position: relative;
}
.exercise-list ul li a:hover{
    background: #222;
}
.exercise-list ul li a svg{
    position: absolute;
    right: 5px;
}
#comments-sort-form{
    text-align: right;
    margin-bottom: 0;
}
#comments-sort-form label{
    display: inline-block;
    font-weight: 500;
    line-height: 34px;
    vertical-align: top;
}
#comments-sort-form #sort-order{
    width: 200px;
    display: inline-block;
    border-radius: 3px;
    height: 34px;
    box-shadow: none;
    border: 1px solid #ccc;
    vertical-align: top;
    margin-bottom: 10px;
}
.comment-image img{
    max-width: 100px;
    padding: 3px;
    border: 1.7px solid #b5b5b5;
}
.msg-pass .green{
   color: #F00;
}
.msg-pass .red{
   color: #F00;
}
.video-comment{
    margin-top: 30px;
}
.video-comment textarea{
    margin-bottom: 15px;
}
.single-lesson .tutor-course-single-sidebar-wrapper {
    background: #FFF;
}
.tutor-course-single-content-wrapper{
  background: none;
  border: 0;
}
.tutor-quiz-sidebar{
  padding-right: 45px;
  background: #FFF;
  border: 0;
}

@media(max-width: 550px){
  .comment-item .user-item .user-avatar{
    width: 32px;
    height: 32px;
  }
  .comment-item .comment-box{
    padding-left: 35px;
  }
  .comment-content{
    padding: 5px 10px;
    font-size: 15px;
  }
  .comment-item .comment-date, .comment-item .reply-btn{
    font-size: 12px;
  }
  .replies {
    margin-left: 40px;
  }
}



/* lightbox custom */
.lightbox-link, #cus-lightbox{
  cursor: pointer;
}
#cus-lightbox .cus-lightbox-content{
  cursor: initial;
}
.cus-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1010;
}

.cus-lightbox-content {
    max-width: 90%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
}


/* new style comment */

.commentform{
    position: relative;
}
.commentform textarea{
    resize: none !important;
    min-height:35px;
    height:35px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 0;
}
.commentform-box{
    position: relative;
    padding-bottom: 35px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.commentform input[type=submit].submit_comment{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0;
    width: 35px;
    height: 35px;
    box-shadow: none;
    border: 0 !important;
    background: url('/wp-content/uploads/2024/09/send-gray-icon.svg') center center no-repeat;
    background-size: 80%;
}
.commentform input[type=submit].submit_comment:hover{
background: url('/wp-content/uploads/2024/09/send-icon.svg') center center no-repeat;
background-size: 80%;
}
.commentform .comment-image{
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: none;
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    cursor: pointer;
    -webkit-transition: ease all .4s;
    -o-transition: ease all .4s;
    transition: ease all .4s;
}
.commentform .input-upload-image{
    cursor: pointer;
    margin: 0;
}
.commentform .comment-image:hover{
    background: #F2f2f2;
}
.commentform .comment-image label{
    margin: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.commentform .comment-image svg{
    width: 16px;
    height: 16px;
}
textarea.comment-content-input::-webkit-scrollbar {
    width: 10px; /* Độ rộng của thanh cuộn */
    border-radius: 3px; /* Độ bo góc của thanh trượt */
}

textarea.comment-content-input::-webkit-scrollbar-track {
  border-radius: 3px; /* Độ bo góc của thanh trượt */
    background: #f1f1f1; /* Màu nền của thanh cuộn */
}

textarea.comment-content-input::-webkit-scrollbar-thumb {
    background-color: #888; /* Màu của thanh trượt */
    border-radius: 3px; /* Độ bo góc của thanh trượt */
    border: 2px solid #f1f1f1; /* Đường viền quanh thanh trượt */
}

textarea.comment-content-input::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Màu của thanh trượt khi hover */
}

/* Đối với Firefox */
textarea.comment-content-input {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
/* new style comment */

.commentform .msg-pass{
    font-size: 13.5px;
    margin-top: 5px;
}

.box-image-preview .remove-image{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    line-height: 1;
    cursor: pointer;
}
.box-image-preview .remove-image svg{
    width: 22px;
    height: 22px;
    line-height: 1;
    cursor: pointer;
}
.box-image-preview .remove-image svg:hover *{
    fill: #F00 !important;
    color: #F00 !important;
}
.pb0{
    padding-bottom: 0;
}
.community-single{
    padding-top: 50px;
}
.community-single h1{
    margin-bottom: 25px;
}
.community-item {
    margin-bottom: 5px;
    overflow: hidden;
    padding: 5px;
    border-radius: 8px
}
.community-item.active {
    background:#e3e3e3 !important;
}
.community-item:hover{
    background: #f2f2f2;
    color: #000;
}
.community-item:hover a{
  color: #000;
}
.community-item.active a, .community-item.active{
    color: #000 !important;
}
.community-item .box-image{
    width: 36px;
    height: 36px;
    float: left;
}
.community-item .box-image img{
    border-radius: 50%;
}
.community-item .box-text{
    padding-left: 43px;
    padding-top: 6px;
    padding-bottom: 0;
}
.community-item .box-text.lock{
  position: relative;
  padding-right: 15px;
}
.community-item .box-text.lock span{
    position: absolute;
    right: 0;
    top: 8px;
    font-size: 15px;
  }
.community-item .box-text h2{
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: inherit;
    margin: 0;
}
.community-item .box-text .description{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    display: block;
    height: 1.4;
    display: none;
}
.community-item .box-text .description p{
    margin: 0;
}
.community-box-content-inner{
    max-height: 150px;
    font-size: 16px;
    overflow: hidden;
}
.community-box-content .show-more {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0;
    margin-top: -70px;
    background: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .91) 50%, #fff 55%);
    background: -o-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .91) 50%, #fff 55%);
    background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .91) 50%, #fff 55%);
}
.community-box-content .show-more .readmore {
    display: block;
    overflow: hidden;
    position: relative;
    line-height: 32px;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    background: none;
}
.community-box-content .show-more .readmore:hover{
    color: #F00;
}
.community-box-content .show-more .readmore:hover svg path{
    stroke: #F00;
}

.community-box-content .show-more .readmore svg{
  position: relative;
  top: 6px;
}
.community-box-content .show-more:before {
    content: "";
    background: rgb(255,255,255);
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
    height: 25px;
    margin-top: -50px;
    display: block;
    opacity: 1;
    visibility: visible;
}
.remove-readmore .show-more{
  display: none;
}
.community-box-content.open .community-box-content-inner {
    max-height: 100%;
}
@media screen and (min-width: 850px) {
    .community-layout-left{
        flex-basis: 28%;
        max-width: 28%;
    }
    .community-layout-right{
        flex-basis: 72%;
        max-width: 72%;
    }
}
.community-list{
    padding: 10px;
    border-right: 1px solid #ddd;box-shadow: 6px 5px 5px 3px rgba(230,230,230,0.63);
    box-shadow: 2px 2px 12px 1px rgba(168,168,168,0.56);
    -webkit-box-shadow: 2px 2px 12px 1px rgba(168,168,168,0.56);
    -moz-box-shadow: 2px 2px 12px 1px rgba(168,168,168,0.56);
}
.single-lesson-box .habi-lesson-sidebar .tutor-accordion-item-header {
  font-size: 15px;
  font-weight: 500;
    background: #6F6F6F;
    padding: 12px 45px 12px 15px;
    line-height: 20px;
    color: #FFF;
    border-radius: 0;
    user-select: none;
}
.lesson-sidebar-mobile{
  display: none;
}

@media(max-width: 1199px){
  .lesson-sidebar-mobile{
    display: block;
  }
  .habi-lesson-sidebar{
    padding-top: 20px;
    display: none;
  }
  .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn{
    display: none !important;
  }
  .tutor-course-topic-single-header .tutor-d-xl-none, .tutor-spotlight-mobile-progress-complete{
    display: none !important;
  }
}
.lesson-sidebar-mobile .lesson-title-box{
  margin-top: 20px;
  margin-bottom: 0;
}
.habi-lesson-sidebar-button-box{
  display: block;
  overflow: hidden;
}
.lesson-sidebar-mobile .habi-lesson-sidebar .tutor-accordion-item-header .tutor-course-topic-title {
    font-size: 15px;
    font-weight: normal;
}
.lesson-sidebar-mobile .habi-lesson-sidebar .tutor-course-topic-item a {
    background: #F8F8F8;
    padding: 12px 0px 12px 15px;
    font-size: 15px;
    font-weight: normal;
    border-bottom: 1px solid #E9E9E9;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    text-decoration: none;
    background-color: #fff;
}
.tutor-course-single-content-wrapper .lesson-sidebar-mobile .habi-lesson-sidebar input.tutor-form-check-input.tutor-form-check-circle{
    width: 15px;
    height: 15px;
    margin-top: 3px;
}
.lesson-sidebar-mobile{
  overflow: hidden;
  padding-top: 20px;
}
.lesson-sidebar-mobile .habi-lesson-sidebar-button{
    display: inline-block;
    float: right;
    overflow: hidden;
    background: var(--primary-color);
    padding: 5px 15px 5px 15px;
    color: #FFF;
    line-height: 32px;
    cursor: pointer;
}
.lesson-sidebar-mobile .habi-lesson-sidebar-button *{
  vertical-align: middle;
  display: inline-block;
}
.comment-meta-button{
    padding: 0;
    margin: 0;
    line-height: 1;
    min-height: 1px;
    margin-left: 30px;
}
.replies .comment-meta-button{
  margin-left: 12px;
}
.back-button a{
    position: relative;
    display: block;
    margin-bottom: 20px;
}
.back-button a svg{
    position: relative;
    top: 6px;
}
.back-button a:hover svg path{
    fill: #F00;
}
.community-single .back-button{
    display: none;
}
.community-content{
    margin-bottom: 15px;
}
.community-content p{
    margin-bottom: 5px;
}
.community-box-content br{
    line-height: 1;
}
.community-single .commentform{
    margin-bottom: 12px;
}
.community-single h1{
    margin-bottom: 15px;
}
@media(max-width: 849px){
    .community-single .back-button{
        display: block;
    }
    .community-single .community-layout-left{
        display: none !important;
    }
    .community-single h1{
      margin-bottom: 10px;
    }
    .back-button a{
      margin-bottom: 10px;
    }
    .community-single{
      padding-top: 20px;
    }
}
.community-content{
  line-height: 1.4;
}
.notify-item {
    overflow: hidden;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 8px;
    color: #050505;
    -webkit-transition: ease all .4s;
    -o-transition: ease all .4s;
    transition: ease all .4s;
    opacity: 0.8;
}
.notify-item.new{
  opacity: 1;
}

.notify-item:hover{
  background: #f2f2f2;
  color: #050505;
}
.notify-item:hover a{
  color: #050505 !important;
}
.notify-item .notify-author-avatar{
    float: left;
    line-height: 1;
}
.notify-item .notify-meta{
    font-size: 13px;
}
.notify-item.new  .notify-meta{
    color: var(--tutor-color-primary);
    font-weight: bold;
}
.notify-item .user-avatar {
    width: 55px;
    height: 55px;
    position: relative;
    overflow: hidden;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 10px;
}
.notify-item .user-item .user-avatar img {
    width: 100% !important;
    height: 100% !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    object-position: 50% 50%;
    object-fit: cover;
    transition: all .5s linear;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -ms-transition: all .5s linear;
}
.notify-item .notify-content {
  margin-bottom: 3px;
}
span.header_notify {
    display: inline-block;
    font-size: 11px;
    width: 15px;
    height: 15px;
    background: #F00;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    position: relative;
    position: absolute;
    letter-spacing: -1px;
    right: 2px;
    top: 3px;
    color: #FFF;
}
.header-top-notify{
    display: inline-flex;
    position: relative;
    padding: 10.5px 15px 10.5px 0;
    cursor: pointer;
}
.header-notify{
    position: absolute;
    min-width: 320px;
    background: #FFF;
    right: 0;
    top: 100%;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding-bottom: 10px;
}
.header-notify{
    display: none;
}
.header-top-notify.open .header-notify{
    display: block;
}
.header-notify .notify-box{
    margin-left: 8px;
    margin-right: 8px;
}
.header-notify h3{
    margin: 10px 16px 5px 16px;
    width: auto;
    font-size: 20px;
    font-weight: bold;
}
.header-notify .notify-item.new{
    margin-bottom: 0;
    padding-bottom: 5px;
}
.header-notify .notify-item .user-avatar{
    width: 40px;
    height: 40px;
}
.header-notify .notify-item .notify-content{
    font-size: 13px;
    line-height: 1.3;
}
.header-notify .notify-item .notify-meta{
    padding-left: 50px;
    font-size: 11.5px;
}
.view-all-notify{
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 5px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    background: rgb(228, 230, 235);
    border-radius: 5px;
}
.view-all-notify:hover{
    color: #333;
    background: rgb(215,215,215);
}
.comment-list .spam {
    background: #fff9ef;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #f7af48;
}
.comment-reactions {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.reaction-btns {
}
.reaction-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-right: 8px;
    padding: 0;
    transition: transform 0.3s ease;
}
.reaction-btns:hover .reaction-btn {

}
.reaction-btn img {
    width: 30px;
    height: 30px;
}

.reaction-btn:hover {
    transform: scale(1.2);
}

.reaction-counts {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.reaction-count {
    margin-right: 15px;
    font-size: 14px;
    font-weight: bold;
}

.like-count { color: #1877F2; }
.love-count { color: #F33E58; }
.haha-count { color: #F7B125; }
.wow-count { color: #F7B125; }
.sad-count { color: #F7B125; }
.angry-count { color: #E9710C; }
.comment-reactions{
    position: relative;
}
.reaction-btns{
    padding: 4px 0;
    background: #FFF;
    border-radius: 49px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);position: absolute;
    width: 410px;
    z-index: 10;
    position: absolute;
    top: -45px;
    opacity: 0;
    visibility: hidden;
}
.comment-reactions span{
    color: #333;
}
.comment-reactions span:hover{
  text-decoration: underline;
}

.comment-reactions.active .reaction-btns{
  opacity: 1;
  visibility: visible;
  -webkit-transition: ease all .3s;
  -o-transition: ease all .3s;
  transition: ease all .3s;
}
.replies .view-reply{
  margin-top: 5px;
}
.reaction-btns .reaction-btn{
    margin: 0 4px;
    line-height: 1;
    min-height: 0;
}
.reaction-btns .reaction-btn img{
    line-height: 1;
    width: 39px;
    height: 39px;
}
.emoji {
  width: 39px;
  height: 39px;
  display: inline-block;
  margin: 10px;
}
.reaction-counts span{
    display: inline-block;
    background: #dfdfdf;
    border-radius: 30px;
    padding: 2px 5px;
    font-weight: bold;
    font-size: 13px;
    color: #000000;
    margin-right: 5px;
}
.reaction-counts span.active{
  background: #2f2f2f;
  color: #FFF;
}
.reaction-counts span img{
    width: 15px;
    margin-right: 5px;
}

@media(max-width: 550px){
  .reaction-btns{
    margin-left: -30px;
    width: 320px;
    top: -40px;
  }
  .reaction-btns .reaction-btn {
    margin: 0 2px;
  }
  .reaction-btns .emoji{
    width: 32px;
    height: 32px;
  }
  .replies .reaction-btns{
    margin-left: -35px;
  }
  .replies .replies .reaction-btns{
    margin-left: -75px;
  }
  .reaction-counts span img {
    width: 17px;
  }
  .reaction-counts span {
    padding: 2px 5px;
  }
}