@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap);

html body {
	font-family: 'Montserrat' ;
  	font-weight:400;
  	color:#000; 
  	font-size:16px;
}
hr {
	margin: 15px 0;
	color: #ccc;
	background-color: currentColor;
	border: 0;
	opacity: 1;
}
.container .wrapper {
	padding:10px 0;
	max-width:500px;
	margin:auto;
	padding-top:70px;
}
.top-nav {
	padding: 10px 5px;
	border-bottom:1px solid #ccc;
	margin-bottom:10px;
}
.top-nav i {
	font-size:20px;
}
/* tabs */
.nav-tabs {
	margin-bottom:20px;
}
.nav-tabs i{
	font: normal normal normal 16px/16px FontAwesome;
	margin-right:6px;
}
.nav-link {
	color:#444;
	min-width:70px;
}
/* post */

.post .wrap-flex, .wrap-flex {
	align-items: center;
	display: flex;
	margin-bottom:0px;
}
.post .wrap-flex.start, .wrap-flex.start {
	align-items: flex-start;
}


/* profile */
.profile  {
	margin-bottom:20px;
}

.profile .userid {
	align-items: center!important;
	font-size:14px;
	line-height:14px;
	color:#111;
	font-weight:400;

}
.profile .profile-img  {
	display:block;
	text-align:center;
	/* max-width:82px; */
	/* min-width:82px; */
	margin:3px 3px;
	line-height:0px;
	margin-right:5px;
}
.profile .profile-img img {
	width:66px;
	border-radius:50%;
	display:block;
	margin:0px auto 8px auto;
}

.profile .badge-wrap {
	margin-bottom:20px;
	display:flex;
	align-items: center;
	min-height:88px;
	background-color:#fff;
	padding:10px;
	border-radius:10px;
}
.profile .profile-badge {
 	width:15px;
 	height:15px;
 	border-radius:50%;
 	background-color:#000;
 	display:inline-block;
 	margin:3px 3px;
}

.post .main {
	padding-left:10px;
}


.post .profile-img  {
	display:block;
	text-align:center;
	max-width:72px;
	min-width:72px;
	margin:3px 3px;
	line-height:0px;
}
.post .profile-img i{
	font: normal normal normal 18px/18px FontAwesome;
	margin:0 3px;
}

.post .profile-img i.fa-youtube,
.post .social-activity  i.fa-youtube {
	color:red;
	font-size:21px;
}
.post .social-activity  i{
	font: normal normal normal 18px/18px FontAwesome;
	margin:0 3px;
}

.post .profile-img img {
	width:66px;
	border-radius:50%;
	display:block;
	margin:0px auto 8px auto;
}
.post .profile-badge {
 	width:9px;
 	height:9px;
 	border-radius:50%;
 	background-color:#000;
 	display:inline-block;
 	margin:3px 0;
}
.profile-badge.converter {
	background-color: #2381e8;
}
.profile-badge.whale {
	background-color: #009658;
}
.profile-badge.engage  {
	background-color: #ee5da8;
}
.profile-badge.type-4  {
	background-color: #4e3379;
}
.profile-badge.type-5  {
	background-color: #f78232;
}
.profile-badge.type-6  {
	background-color: #ade0eb;
}
.profile-badge.type-7  {
	background-color: #f7b83d;
}
.profile-badge.type-8  {
	background-color: #c59b73;
}
.profile-badge.type-9  {
	background-color: #00687f;
}
.profile-badge.type-10  {
	background-color: #f28c88;
}

@media (max-width: 728px) {
	.container .wrapper {
		padding-top: 95px;
	}
}
@media (max-width: 450px) {
	.post .profile-img  {
		max-width:62px;
		min-width:62px;
	}
	.post .profile-img img {
		width:56px;
		margin:5px auto;
	}
}

/* original post section */

.post .original  {
	margin-left:0px;
	padding:5px 0;
	padding-left:10px;
}
.post .details .original  {
	padding:10px 0 5px 0;
	margin-left:0px;
}
.post .original .video {
	display:flex;
	align-items: center;
	margin-bottom:10px;
}
.post .original .video-thumb img {
	width:70px;
	margin-right:10px;
}
.post .original .video-title {
	font-size:12px;
	line-height:16px;
	color:#999;
}

.post .activity-type {
	font-size:12px;
	font-weight:700;
	padding:10px 0 15px 0;
	color:#bbb;
}
.post .details .activity-type {
	padding:0px 0 20px 0;
}
.post .activity-type a {
	text-decoration:none;
}
.post .userid {
	align-items: center!important;
	display: flex!important;
	font-size:14px;
	line-height:14px;
	color:#666;
	font-weight:400;
	margin-bottom:6px;
}

.post .write-reply{
	font-size:15px;
	color:#666;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:6px 0 3px 0;
	margin:15px 0;
}

.post .profile-img, 
.post .social-activity {
    display: block;
    text-align: center;
    max-width: 72px;
    min-width: 72px;
    margin: 3px 3px;
    line-height: 0px;
}
.post .profile-img.reply img {
	width: 40px;
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-bottom: 3px;
}
.reply-field {
	width:100%;
	height:30px;
	resize: none;
	padding-top:5px;
	border:0px;
	outline:none;
	overflow:hidden;
}

.reply-field::placeholder {
	-webkit-text-security: none;
	color: #000;
	pointer-events: none;
}
.reply-field::placeholder.focus {
	-webkit-text-security: none;
	color: #fff;
	pointer-events: none;
}

.reply-field.focus {
	width:100%;
	height:160px;
	padding:6px;
	overflow:auto;
	border:1px solid #eee;
	outline:none;
}
.reply-buttons, .comment-buttons {
	text-align:right;
}
.btn-secondary {
	border-radius:0;
	padding:5px 20px;
	font-size:14px;
	font-weight:600;
	margin-bottom:6px;
}
.btn-secondary.cancel {
	background-color:#ddd;
	color:#444;
	border-color:#ddd;
}
    						
/* activity content */

.post .content {
	width:100%;
	font-size:15px;
	line-height:23px;
	cursor:pointer;
	color:#222;
}

.likes-wrap  {
	margin-top:5px;
	color:#222;
}
.likes-wrap i{
	font: normal normal normal 16px/16px FontAwesome;
	margin-right:6px;
}
.likes-wrap .fa {
	margin-right:6px;
}
.likes-wrap .likes {
	margin-right:20px;
}

.filter-group .btn-secondary {
	height: 53px;
	line-height: 43px;
	background-color: #D0D0D0;
	color: #000000;
	font-weight: normal;
}

.filter-group .btn-check:checked+.btn-secondary {
	background-color: #D0D0D0;
	color: #000000;
	font-weight: bold;
}
.filter-group .btn-check:focus+.btn-secondary,
.filter-group .btn-secondary:focus {
	box-shadow: none !important;
}
.btn-group .btn-secondary.active {
	font-weight: bold;
}
.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

#loading svg {
	width: 72px;
	height: 72px;
	padding: 0;
	-webkit-animation-name: spin;
	-webkit-animation-duration: 1500ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spin;
	-moz-animation-duration: 1500ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spin;
	-ms-animation-duration: 1500ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	animation-name: spin;
	animation-duration: 1500ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


@-ms-keyframes spin {
	from {
	  	-ms-transform: rotate(0deg);
	}
	to {
	  	-ms-transform: rotate(360deg);
	}
}
  
@-moz-keyframes spin {
	from {
	  	-moz-transform: rotate(0deg);
	}
	to {
	  	-moz-transform: rotate(360deg);
	}
}
  
@-webkit-keyframes spin {
	from {
	  	-webkit-transform: rotate(0deg);
	}
	to {
	  	-webkit-transform: rotate(360deg);
	}
}
  
@keyframes spin {
	from {
	  	transform: rotate(0deg);
	}
	to {
	  	transform: rotate(360deg);
	}
}

.post .channel {
	align-items: center!important;
	display: flex!important;
	color:#666;
	font-size:14px;
	line-height:14px;
	font-weight:400;
	margin-bottom:10px;
}

.post .write-reply{
	font-size:16px;
	color:#666;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:6px 0 0 0;
}