ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / keebchat.com / themes / default / statics / scss / apps / common

// @*************************************************************************@
// @ @author Mansur Altamirov (Mansur_TL)									 @
// @ @author_url 1: https://www.instagram.com/mansur_tl                      @
// @ @author_url 2: http://codecanyon.net/user/mansur_tl                     @
// @ @author_email: highexpresstore@gmail.com                                @
// @*************************************************************************@
// @ ColibriSM - The Ultimate Modern Social Media Sharing Platform           @
// @ Copyright (c) 21.03.2020 ColibriSM. All rights reserved.                @
// @*************************************************************************@

@import '../main-variables';

html {
	scroll-behavior: smooth;
	font-family: Helvetica, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

body{
	font-family: inherit !important;

svg[stroke-width="1.8"]{
		stroke-width: 1.6;
	}

video{
		max-height: 100%;
	}

div.announcement-holder{
		display: block;
		line-height: 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1500;

div.announcement-danger{
			width: 100%;
			padding: 15px;
			color: #fff;
			font-size: 14px;
			line-height: 22px;
			font-weight: 500;
			background: $red;
			text-align: center;
		}

&:empty{
			display: none;
		}
	}

div.popover{
		padding: 0;
		max-width: 100%;
		border: none;
		box-shadow: none;
		outline: 0;
		border-radius: 0px;
		background: transparent;
		overflow: visible;

div.arrow{
			display: none;
		}

h3.popover-header{
			display: none;
		}

div.popover-body{
			padding: 1px;
			margin: 0;
			border: none;
			box-shadow: none;

div.user-info-lbox{
				width: 340px;
				display: block;
				background: #fff;
				box-shadow: $btn_shadow;
				border-radius: $border_rad1;
				z-index: 1200;

div.user-info-lbox__inner{
					width: 100%;

div.user-info-lbox__user-data{
						display: block;
						border-bottom: 1px solid $border;

div.user-info-lbox__avatar{
							margin-bottom: 50px;
							position: relative;

div.cover{
								width: 100%;
								min-height: 110px;
								background: #f5f8fa;
								border-top-left-radius: $border_rad1;
								border-top-right-radius: $border_rad1;
								overflow: hidden;

img{
									width: 100%;
								}
							}

div.avatar{
								width: 100px;
								height: 100px;
								overflow: hidden;
								border-radius: 100px;
								position: absolute;
								left: 15px;
								bottom: -50px;
								border: 3px solid #fff;
								background: #f5f8fa;

img{
									width: 100%;
								}
							}
						}

div.user-info-lbox__info{
							padding: 15px;

div.name{
								margin-bottom: 10px;

a{
									text-decoration: none;
									display: block;

h4{
										color: $black;
										font-size: 20px;
										line-height: 28px;
										padding: 0;
										margin: 0;
										font-weight: 700;
									}

span{
										display: inherit;
										width: 100%;
										color: $grey;
										font-size: 14px;
										line-height: 18px;
									}
								}
							}

div.stats{
								width: 100%;
								overflow: hidden;
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;

div.stat-holder{
									line-height: 0px;
									overflow: hidden;
									padding: 0px 3px;
									max-width: 50%;

a{
										text-decoration: none;
										line-height: 0;
										display: inline-flex;
										align-items: center;
										overflow: hidden;
										max-width: 100%;
									}

span{
										font-size: 13px;
										line-height: 18px;
										color: $grey;
										overflow: hidden;
										text-overflow: ellipsis;
									}

b{
										font-size: 14px;
										color: $black;
										font-weight: 700;
										line-height: 18px;
										margin-right: 5px;
									}

&:first-child{
										margin-right: 15px;
									}
								}
							}

div.about{
								width: 100%;
								margin-top: 15px;

p{
									font-size: 14px;
									line-height: 22px;
									color: lighten($black, 5);
									padding: 0;
									margin: 0;
								}
							}
						}
					}

div.user-info-lbox__user-ctrls{
						padding: 15px;
					}
				}
			}
		}
	}
}

.ov-h{
	overflow: hidden;
}
	
main.main-content-container{
	width: 100%;
	background: #fff;
	min-width: 320px;
	-moz-transition: right 0.5s;
    -o-transition: right 0.5s;
    -webkit-transition: right 0.5s;
    transition: right 0.5s;

div.main-content-container-inner{
		width: 100%;
		max-width: 1220px !important;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		overflow: hidden;
		
		div.timeline-container-wrapper{
			flex: 2;
			max-width: 600px;
			min-width: 600px;
			border-left: 1px solid $border;
			border-right: 1px solid $border;
			min-height: 100vh;
			position: relative;

div.timeline-container-inner{
				div.timeline-container{
					display: block;
					width: 100%;
					
					div.timeline-header{
						width: 100%;
						overflow: hidden;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						height: 65px;
						align-items: center;
						justify-content: space-between;
						line-height: 0;
						padding: 0px 15px;
						border-bottom: 1px solid $border;
						position: relative;
						background: #fff;

div.lp{
							div.nav-link-holder{
								line-height: 0;
								display: block;
								padding: 0;
								margin: 0;

a{
									padding: 0;
									margin: 0;
									font-size: 16px;
									line-height: 16px;
									font-weight: 700;
									color: $black;
									text-decoration: none;
								}
							}
						}
						
						div.cp{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
							margin: auto;
							width: 30px;
							height: 30px;
							a{
								text-decoration: none;
								img{
									height: 30px;
								}
							}
						}

div.rp{
							div.nav-link-holder{
								line-height: 0px;
								a{
									text-decoration: none;
									svg{
										width: 20px;
										height: 20px;
										stroke: $blue;
									}
								}

span.go-back{
									padding: 0;
									margin: 0;
									font-size: 16px;
									line-height: 16px;
									color: $black;
									cursor: pointer;

svg{
										width: 20px;
										height: 20px;
										stroke: $blue;
										stroke-width: 2;
									}
								}
							}
						}

&.fixed{
							position: fixed;
							top: 0;
							z-index: 50;
							box-shadow: rgba(0, 0, 0, 0.02) 0px 2px 5px 0px;
						}
					}

div.timeline-posts-container{
						width: 100%;
						display: block;
						line-height: 0px;

div.timeline-posts-ls{
							width: 100%;
							display: block;
							line-height: 0px;

div.post-list-item{
								width: 100%;
								display: block;
								padding: 15px;
								border-bottom: 1px solid $border;
								transition: all 0.27s ease-in-out;

&:hover{
									background: #f5f8fa9c;
								}

div.post-list-item-header{
									width: 100%;
									display: flex;
									margin-bottom: 5px;
									padding-left: 50px;

div.publication-repost{
										line-height: 0;
										padding: 0px;

svg{
											width: 12px;
											height: 12px;
											vertical-align: middle;
											display: inline-block;
											stroke-width: 2.5;
											stroke: $grey;
										}

a{
											font-size: 10px;
											line-height: 10px;
											color: $grey;
											display: inline-block;
											text-transform: uppercase;
										}
									}
								}
				
								div.post-list-item-content{
									width: 100%;
									display: flex;
									flex-direction: row;
									flex-wrap: nowrap;
								
									div.publisher-avatar{
										width: 45px;
										flex-basis: 45px;
										max-width: 45px;
										min-width: 45px;

div.avatar-holder{
											display: block;
											overflow: hidden;
											width: 45px;
											height: 45px;
											background: $border;
											border-radius: 10em;

img{
												width: 100%;
												height: 100%;
												object-fit: cover;
												border: none;

&:not([data-loaded]) {
													visibility: hidden;
												}
											}
										}
									}

div.publication-data{
										flex: 1;
										padding-left: 15px;
										overflow: hidden;

div.publication-data-inner{
											width: 100%;
											display: block;
											line-height: 0px;

div.publication-target{
												width: 100%;
												display: block;
												line-height: 0;
												margin-top: 5px;

div.post-reply{
													width: 100%;
													display: block;
													line-height: 0;
													span{
														font-size: 11px;
														line-height: 11px;
														color: $grey;

a{
															color: $link;
														}
													}
												}
											}

div.publisher-info{
												width: 100%;
												line-height: 0;
												display: flex;
												flex-direction: row;
												flex-wrap: nowrap;
												justify-content: space-between;
												align-items: center;

div.lp{
													flex: 1;

a{
														line-height: 0;
														padding: 0;
														margin: 0;
														text-decoration: none !important;

b{
															font-size: 14px;
															line-height: 14px;
															color: $black;

&:hover,&:focus,&:active{
																text-decoration: underline;
															}

span{
																color: inherit;
															}
														}

span{
															font-size: 14px;
															line-height: 14px;
															color: $grey;
															text-transform: lowercase;
															
															&:hover,&:focus,&:active{
																text-decoration: underline;
															}
														}
													}
												}

div.rp{
													span.posted-time{
														display: inline-block;
														line-height: 0px;
														padding: 0;
														margin: 0;

svg{
															width: 15px;
															height: 15px;
															display: inline-block;
															vertical-align: middle;
															stroke-width: 2;
															stroke: $grey;
														}

time{
															color: $grey;
															opacity: 0.9;
															font-size: 13px;
															line-height: 13px;
															vertical-align: middle;
														}
													}
												}
											}

div.publication-content{
												width: 100%;
												display: block;
												line-height: 0px;
												margin-top: 10px;

div.publication-text{
													width: 100%;
													overflow: hidden;
													display: block;
													line-height: 0px;
													margin-bottom: 10px;

p.pub-text{
														font-size: 14px;
														line-height: 20px;
														font-weight: 400;
														padding: 0;
														margin: 0;
														color: $black;
														word-break: break-word;
														display: block;

a.inline-link{
															display: inline;
														}
													}
												}

div.lozad-media{
													width: 100%;
													display: block;

&[data-lozad-media="loading"] {
														min-height: 120px;
														position: relative;

div.publication-image{
															visibility: hidden;
															opacity: 0;
														}
													}
												
													div.lozad-preloader{
														position: absolute;
														left: 0px;
														top: 0px;
														right: 0px;
														bottom: 0px;
														display: flex;
														flex-direction: row;
														flex-wrap: nowrap;
														justify-content: center;
														align-items: center;
														background: #fcfcfc;
														border: 1px solid $border;
														border-radius: $border_rad1;
														z-index: 5;
													
														div.icon{
															width: 30px;
															height: 30px;
															
															svg{
																width: 100%;
																height: 100%;
																opacity: 0.5;

*{
																	stroke: $grey2;
																}
															}
														}
													}
												}

div.publication-image{
													width: 100%;
													border: 1px solid $border;
													display: block;
													border-radius: $border_rad1;
													overflow: hidden;
													background: #e6ecf0;
													position: relative;

img.lozad{
														width: 100%;
														object-fit: cover;

&:not([data-loaded]) {
															visibility: hidden;
														}
													}

a.fbox-media{
														position: relative;
														display: block;

div.video-icon{
															position: absolute;
															left: 0;
															top: 0;
															bottom: 0;
															right: 0;
															display: flex;
															flex-direction: row;
															align-items: center;
															justify-content: center;
															cursor: pointer;

span{
																width: 55px;
																height: 55px;
																background: rgba(0, 0, 0, 0.60);
																border-radius: 10em;
																padding: 15px;
																box-shadow: $btn_shadow;

svg{
																	width: 100%;
																	height: 100%;
																	fill: #fff;
																}
															}
														}
													}
												}

div.publication-images-collage{
													width: 100%;
													display: flex;
													justify-content: flex-start;
													flex-wrap: wrap;
													overflow: hidden;

a.fbox-media{
														width: calc(20% - 5px);
														min-width: calc(15% - 5px);
														margin-right: 5px;
														margin-bottom: 5px;

div.image-collage-item{
															display: block;

div.publication-image{
																border-radius: $border_rad2;
															}
														}
													}
												}

div.publication-audio{
													audio{
														width: 100%;
														outline: 0;
													}
												}

div.publication-og-data{
													width: 100%;
													display: block;
													line-height: 0;
													margin-bottom: 10px;
													overflow: hidden;
													background: #fff;
													border-radius: $border_rad1;
													border: 1px solid $border;
													position: relative;

div.publication-og-data-inner{
														width: 100%;
														overflow: hidden;

&.embeded-iframe{
															display: flex;
															flex-direction: column;
															flex-wrap: nowrap;

div.og-image{
																width: 100%;

a{
																	display: block;
																	width: 100%;
																	position: relative;
																	text-decoration: none;
																	line-height: 0;

img{
																		width: 100%;
																		display: block;
																	}

div.video-icon{
																		position: absolute;
																		left: 0;
																		top: 0;
																		bottom: 0;
																		right: 0;
																		display: flex;
																		flex-direction: row;
																		align-items: center;
																		justify-content: center;
																		cursor: pointer;

span{
																			width: 55px;
																			height: 55px;
																			background: rgba(0, 0, 0, 0.60);
																			border-radius: 10em;
																			padding: 15px;
																			box-shadow: $btn_shadow;

svg{
																				width: 100%;
																				height: 100%;
																				fill: #fff;
																			}
																		}
																	}
																}

div.lozad-preloader{
																	border-radius: 0px;
																	border: none;
																	border-bottom: 1px solid $border;
																}
															}

div.og-url-data{
																p{
																	margin-bottom: 0px;
																}
															}
														}

&.link{
															display: flex;
															flex-direction: column;
															flex-wrap: nowrap;

div.og-image{
																width: 100%;
																overflow: hidden;
																border-bottom: 1px solid $border;
																background: $el_hovbg;

img{
																	width: 100%;
																	display: block;
																}
															}
														}

div.og-url-data{
															flex: 1;
															padding: 15px;
															overflow: hidden;

h5, p, a{
																width: 100%;
																display: block;
																
															}

h5{
																padding: 0;
																margin: 0 0 15px 0;
																font-size: 16px;
																line-height: 1.4;
																color: $black;
																word-wrap: break-word;
																font-weight: 700;
															}

p{
																font-size: 13px;
																color: $grey;
																line-height: 1.4;
																padding: 0;
																margin: 0 0 15px 0;
																word-wrap: break-word;
															}

a{
																font-size: 14px;
																line-height: 18px;
																color: $blue;
																padding: 0;
																margin: 0;
																word-wrap: break-word;
															}
														}
													}
												}

div.publication-poll-data{
													width: 100%;
													display: block;
													line-height: 0;
													overflow: hidden;

div.publication-poll-data-inner{
														width: 100%;
														display: block;
														line-height: 0;
														overflow: hidden;

div.poll-option-bar{
															width: 100%;
															max-width: 100%;
															display: flex;
															flex-direction: row;
															flex-wrap: nowrap;
															align-items: center;
															height: 30px;
															padding: 20px 15px;
															background: rgba(29, 161, 242, 0.1);
															margin-bottom: 10px;
															border-radius: 30px;
															cursor: pointer;
															overflow: hidden;
															position: relative;
															z-index: 1;

div.bar-icon{
																width: 22px;
																height: 22px;
																line-height: 0;
																min-height: 20px;
																min-width: 20px;

svg{
																	width: 100%;
																	height: 100%;
																	stroke: $blue;
																}
															}

div.bar-text{
																flex-grow: 1;
																padding-left: 15px;
																padding-right: 15px;
																overflow: hidden;
																
																p{
																	padding: 0;
																	margin: 0;
																	display: block;
																	width: 100%;
																	max-width: 100%;
																	font-size: 14px;
																	line-height: 14px;
																	color: $black;
																	white-space: nowrap;
																	overflow: hidden;
																	text-overflow: ellipsis;
																}
															}

div.bar-num{
																b{
																	font-size: 14px;
																	line-height: 14px;
																	color: $blue;
																}
															}

&:last-child{
																margin-bottom: 0px;
															}

span.bar-slider{
																display: block;
																position: absolute;
																left: 0;
																top: 0;
																bottom: 0;
																background: rgba(29, 161, 242, 0.2);
																max-width: 100%;
																min-width: 10px;
																border-radius: 0px;
																z-index: 3;
															}
														}
													}

&[data-status="1"]{
														div.publication-poll-data-inner{
															div.poll-option-bar{
																cursor: default;
															}
														}
													}
												}
											}

div.publication-footer-ctrls{
												width: 100%;
												display: flex;
												flex-direction: row;
												flex-wrap: nowrap;
												justify-content: space-between;
												align-items: center;
												margin-top: 15px;

button.ctrls-item{
													line-height: 0px;
													background: transparent;
													border: none;
													box-shadow: none;
													outline: none;
													padding: 0;
													margin: 0;
													cursor: pointer;

a{
														text-decoration: none;
													}

span.icon, a.icon{
														display: inline-block;
														vertical-align: middle;
														padding: 0;
														margin: 0;
														line-height: 0px;

svg{
															width: 20px;
															height: 20px;
															stroke: $grey;
														}
													}

a.icon:before, a.icon:after{
													 	display: none;
													}

span.num{
														display: inline-block;
														vertical-align: middle;
														padding: 0;
														margin: 0;
														font-size: 13px;
														color: $grey;
														line-height: 18px;
														font-weight: 300;
														margin-left: 5px;

&:empty{
															display: none;
															opacity: 0;
															visibility: hidden;
														}
													}

&:hover,&:active,&:focus{
														span.icon svg, a.icon svg{
															*{
																stroke: $blue;
															}
														}

span.num {
															color: $blue;
														}
													}

&.liked{
														span.icon, a.icon{
															svg{
																fill: $red !important;

*{
																	stroke: $red !important;
																}
															}
														}

span.num{
															color: $red !important;
														}
													}

&.reposted{
														span.icon, a.icon{
															svg{
																*{
																	stroke: $blue !important;
																}
															}
														}

span.num{
															color: $blue !important;
														}
													}
												}
											}
										}

div.soft-hidden-post{
											width: 100%;
											display: block;
											border: 1px solid $border;
											padding: 12px 15px;
											border-radius: $border_rad1;

p{
												color: $grey;
												padding: 0;
												margin: 0;
												font-size: 13px;
												line-height: 18px;
												margin-right: 15px;
											}

button.btn-custom{
												font-size: 11px;
											}

& + div.publication-data-inner{
												display: none;
											}

&.show + div.publication-data-inner{
												display: block !important;
											}
										}
									}
								}

&.post-ad-item{

&:hover, &:active, &:focus{
										background: inherit;
									}

div.post-list-item-content{
										div.publication-data{
											div.publication-data-inner{
												div.publisher-info{
													align-items: flex-start;

div.lp {
														a{
															display: block;
															margin-bottom: 7px;
														}

span.ad-badge{
															display: inline-block;
															line-height: 0px;
															padding: 0;
															margin: 0;

svg{
																width: 13px;
																height: 13px;
																display: inline-block;
																vertical-align: middle;
																stroke-width: 2;
																stroke: $link;
															}

span, a{
																color: $grey;
																opacity: 0.9;
																font-size: 11px;
																line-height: 13px;
																vertical-align: middle;
																text-transform: uppercase;
																font-weight: 500;
															}

a{
																display: inline-block;
																vertical-align: middle;
																margin: 0;
																padding: 0;
																color: $link;
																text-decoration: underline;
															}
														}
													}
												}

div.publication-content{
													background: $el_hovbg;
													box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 10px 0px;
													border: 1px solid $border;
													overflow: hidden;
													border-radius: 0px;
													margin-top: 20px;

div.publication-text{
														padding: 15px;
														margin-bottom: 0px;

h4{
															font-size: 16px;
															font-weight: 600;
															line-height: 22px;
															color: $black;
															padding: 0;
															margin: 0 0 15px 0;
														}
													}

div.lozad-media{
														&[data-lozad-media="loading"] {
															min-height: 120px;
															position: relative;

div.publication-image{
																visibility: hidden;
																opacity: 0;
															}
														}

div.lozad-preloader{
															border: none;
															border-radius: 0px;
															border-top: 1px solid $border;
														}

div.publication-image{
															border-radius: 0px;
															overflow: hidden;
															border: none !important;
															background: none !important;

div.ad-target-ctrls{
																width: 100%;
																display: block;
																line-height: 0;

div.ad-target-ctrls-inner{
																	width: 100%;
																	display: block;
																	padding: 15px;

a{
																		text-decoration: none;
																	}

button.target-url-btn{
																		border-radius: 1px;
																		display: block;
																	}
																}
															}
														}
													}
												}

div.ad-alert-message{
													width: 100%;
													display: block;
													margin-top: 20px;

p{
														color: $red;
														font-size: 13px;
														line-height: 18px;
														margin: 0;
														padding: 0;
													}
												}
											}
										}
									}
								}

div.post-placeholder{
									width: 100%;
									display: block;
									border: 1px solid $border; 
									padding: 12px 15px;
									border-radius: $border_rad1;

div.icon{
										width: 25px;
										height: 25px;
										min-width: 25px;
										min-height: 25px;
										margin-right: 15px;

svg{
											width: 100%;
											height: 100%;
											stroke: $grey;
										}
									}

p{
										color: $grey;
										padding: 0;
										margin: 0;
										font-size: 13px;
										line-height: 18px;
										margin-right: 15px;

a{
											color: $grey;
											font-weight: 600;

&:hover, &:active{
												color: $link;
											}
										}
									}
								}
							}
						}
					}

div.modals-container{
						display: block;
						width: 100%;
					}
				}
			}

div.spa-preloader{
				position: absolute;
				display: block;
				left: 0;
				top: 65px;
				bottom: 0;
				right: 0;
				width: 100%;
				background: #fff;
				z-index: 10;

&.d-none{
					display: none;
					opacity: 0;
					visibility: hidden;
				}

div.spa-preloader-inner{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: center;
					padding: 100px 50px;

span.spinner-icon{
						width: 40px;
						height: 40px;
						overflow: hidden;

svg{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

div.left-sb-container{
			width: 220px;
			min-width: 220px;
			flex-basis: 220px;
			background: #fff;
			-moz-transition: left 0.5s;
		    -o-transition: left 0.5s;
		    -webkit-transition: left 0.5s;
		    transition: left 0.5s;
		    z-index: 1000;

div.sidebar__inner{
				width: 100%;
				padding: 15px 20px 10px 0px;
				display: block;

div.guest-welcome{
					width: 100%;
					overflow: hidden;
					display: block;
					margin-bottom: 20px;
					line-height: 0px;
					padding: 20px;
					border: 1px solid $border;
					border-radius: $border_rad1;

div.form-group{
						label{
							font-size: 11px;
						}

input{
							height: 40px;
							font-size: 11px;

&::placeholder{
								font-size: 11px;
							}
						}
					}

div.login-form{
						width: 100%;
						display: block;
						line-height: 0px;

div.login-or-signup{
							line-height: 0;
							text-align: center;
							margin: 10px 0px;

small{
								font-size: 11px;
								line-height: 11px;
								color: $grey;
								text-transform: uppercase;
							}
						}
					}

div.oauth-login-providers{
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: center;

a.social-login-btn{	
							border: none;
							box-shadow: $btn_shadow;
							background: none;
							color: #fff;
							padding: 0;
							line-height: 0;
							outline: 0;
							overflow: hidden;
							border-radius: 5em;
							margin: 0px 5px;
							height: 34px;
							width: 34px;
							position: relative;

span.icon{
								width: 15px;
								height: 15px;
								line-height: 0px;
								overflow: hidden;
								position: absolute;
								left: 0;
								top: 0;
								bottom: 0;
								right: 0;
								margin: auto;
								svg{
									width: 15px;
									height: 15px;
									fill: #fff;
								}
							}

&.twitter{
								background: #64ccf2;
							}

&.facebook{
								background: #507cc0;
							}

&.google{
								background: #df4931;
							}
						}
					}

div.tos-agreement{
						width: 100%;
						display: block;
						line-height: 0px;

div.block-header{
							width: 100%;
							line-height: 0px;
							text-align: center;
							margin-bottom: 20px;

span{
								font-size: 10px;
								line-height: 16px;
								color: $grey;
							}

a{
								font-size: 10px;
								line-height: 16px;
								color: $blue;
								font-weight: 500;
							}
						}

div.block-body{
							width: 100%;
							line-height: 0px;
							text-align: center;
							margin-bottom: 15px;

a{
								font-size: 12px;
								line-height: 16px;
								color: $black;
								font-weight: 500;
								opacity: 0.7;
							}
						}

div.block-footer{
							width: 100%;
							line-height: 0px;
							text-align: center;
							position: relative;
							padding-top: 15px;

&:before{
								content: "";
								position: absolute;
								left: 20%;
								right: 20%;
								top: 0px;
								height: 1px;
								background: $border;
							}

span{
								font-size: 10px;
								line-height: 16px;
								color: $grey;
							}

a{
								font-size: 10px;
								line-height: 16px;
								color: $blue;
								font-weight: 500;
								opacity: 0.7;
							}
						}
					}
				}
				
				div.user-info{
					width: 100%;
					display: inline-flex;
					flex-direction: row;
					flex-wrap: nowrap;
					margin-bottom: 15px;
					align-items: center;

div.avatar{
						min-width: 45px;
						width: 45px;
						height: 45px;
						overflow: hidden;

img{
							width: 100%;
							height: 100%;
							border-radius: 10em;
							object-fit: cover;
							border: 1px solid $border;
						}
					}

div.uname{
						flex-basis: 100%;
						width: 100%;
						line-height: 0px;
						margin-left: 15px;

a{
							display: block;
							text-decoration: none;

h5{
								padding: 0;
								margin: 0;
								font-size: 16px;
								line-height: 16px;
								font-weight: 700;
								color: $blue;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 100%;
							}
						}
					}
				}

div.account-stats{
					width: 100%;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					margin-bottom: 15px;

div.stat-holder{
						line-height: 0px;
						overflow: hidden;
						padding: 0px 3px;
						max-width: 50%;
						display: flex;
						align-items: center;
						flex-wrap: nowrap;

a{
							text-decoration: none;
							line-height: 0;
							display: inline-flex;
							align-items: center;
							overflow: hidden;
							max-width: 100%;
						}

span{
							font-size: 13px;
							line-height: 18px;
							color: $grey;
							overflow: hidden;
							text-overflow: ellipsis;
						}

b{
							font-size: 14px;
							color: $black;
							font-weight: 600;
							line-height: 18px;
							margin-right: 5px;
						}

&:first-child{
							margin-right: 15px;
						}
					}
				}
				
				div.sidebar-v-nav-wrapper{
					display: block;
					width: 100%;
					border-top: 1px solid $border;
					border-bottom: 1px solid $border;
					margin-bottom: 15px;

ul.sidebar-v-nav{
						padding: 5px 0;
						margin: 0;
						list-style-type: none;
						line-height: 0px;

li.sidebar-v-nav-item{
							width: 100%;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							height: 50px;
							align-items: center;

span.icon{
								line-height: 0px;
								padding: 0;
								margin: 0;

svg{
									width: 23px;
									height: 23px;
									transition: all 0.27s ease;
									opacity: 1;
									line-height: 0px;
									stroke-width: 1.5;
									stroke: $black;
								}
							}

span.nav-item-holder{
								line-height: 0px;
								padding: 0;
								margin: 0;
								margin-left: 15px;

& > a{
									font-size: 20px;
									color: $black;
									font-weight: 700;
									text-decoration: none;
									transition: all 0.27s ease;
									line-height: 20px;

&.dropdown-toggle{
										&::after{
											display: none;
										}
									}
								}

&.dropdown{

&.group-ind-active{
										position: relative;

&::after{
											position: absolute;
											content: "";
											width: 10px;
											height: 10px;
											background: $red;
											right: -20px;
											top: 8px;
											border-radius: 10px;
										}
									}

div.dropdown-menu{
										min-width: 220px;

a.dropdown-item{
											b.wallet{
												color: green;
											}

span.info-indicators{
												display: inline-block;
											    background: $red;
											    color: #fff;
											    text-align: center;
											    padding: 0 5px;
											    border-radius: 10px;
											    background-clip: padding-box;
											    font-size: 11px;
											    -webkit-font-smoothing: subpixel-antialiased;
											    line-height: 18px;
											    vertical-align: middle;
											    min-height: 13px;
											    min-width: 20px;
											    font-weight: 400;

&:empty{
											    	display: none;
											    	visibility: hidden;
											    	opacity: 0;
											    }
											}
										}
									}
								}
							}

&:hover,&:active,&.active{
								span.nav-item-holder > a{
									color: $blue;
								}

span.icon svg{

*{
										stroke: $blue;
										stroke-width: 2.2;
									}
								}
							}
						}
					}
				}

div.follow-suggestion{
					width: 100%;
					overflow: hidden;
					display: block;
					margin-bottom: 20px;

div.follow-suggestion__header{
						line-height: 0;
						
						h4{
				 			font-size: 14px;
				 			padding: 0;
				 			margin: 0;
				 			color: $grey;
				 			font-weight: 700;
				 			line-height: 16px;
				 		}
					}

div.follow-suggestion__body{
						width: 100%;
						padding: 20px 0;

div.follow-suggestion__item{
							margin-bottom: 15px;

&:last-child{
								margin-bottom: 0px;
							}
							
							div.flex-cr{
						 		width: 100%;
						 		overflow: hidden;
						 		display: flex;
						 		flex-direction: row;
						 		flex-wrap: nowrap;

div.avatar{
						 			width: 45px;
						 			height: 45px;
						 			flex-basis: 45px;
						 			min-width: 45px;
						 			overflow: hidden;

img{
						 				width: 100%;
						 				overflow: hidden;
						 				height: 100%;
						 				border-radius: 10em;
						 			}
						 		}

div.user-info-holder{
						 			flex: 1;
						 			padding: 0 0 0 10px;
						 			line-height: 0px;

h4{
						 				font-size: 14px;
						 				line-height: 18px;
						 				padding: 0;
						 				margin: 0;
						 				font-weight: 700;
						 				color: $black;
						 				margin-top: 5px;
						 				white-space: nowrap;
						 			}

a{
						 				display: block;
						 				text-decoration: none;
						 				color: $grey;
						 				font-size: 13px;
						 				line-height: 20px;
						 				overflow: hidden;
						 				white-space: nowrap;
						 				text-overflow: ellipsis;
						 				max-width: 140px;
						 			}
						 		}
						 	}
						}
					}

div.follow-suggestion__placeholder{
						font-size: 13px;
			 			line-height: 18px;
			 			color: lighten($grey,5);
			 			padding: 20px 0 0 0;
			 			margin: 0;
			 			font-weight: normal;
			 			font-style: normal;
					}

div.follow-suggestion__footer{
						line-height: 0;

a{
				 			font-size: 11px;
				 			line-height: 14px;
				 			font-weight: 700;
				 			color: $blue;
				 			text-transform: none;
				 			text-decoration: none;
				 			text-transform: uppercase;
				 		}
					}
				}

div.mobile-sb-footer{
					width: 100%;
					display: block;
					line-height: 0;
					display: none;
					visibility: hidden;
					opacity: 0;

div.main-footer{
						width: 100%;
						display: block;
						margin-bottom: 0px;

ul.footer-nav{
							width: 100%;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							padding: 0;
							margin: 0;
							line-height: 0px;
							list-style-type: none;

li.footer-nav-item{
								line-height: 0px;
								margin-right: 10px;

& > a{
									font-size: 11px;
									color: $grey;
									line-height: 20px;
								}

&.dropdown{
									a.dropdown-toggle{
										text-decoration: none;

span.language-banner{
											line-height: 11px;
											margin-right: 5px;
											overflow: hidden;
											border-radius: 2px;

svg{
												width: 15px;
											}
										}

span.language-name{
											line-height: 11px;
										}
									}
									
									a.dropdown-item{
										text-decoration: none;
									}
								}
							}
						}
					}
				}

div.publish-post-btn{
					width: 100%;
					border-top: 1px solid $border;
					padding-top: 20px;
					margin-bottom: 20px;

button{
						max-width: 220px;

span.btn-icon{
							width: 20px;
							height: 20px;
							margin-right: 10px;

svg{
								width: 100%;
								height: 100%;
								stroke: #fff;
							}
						}
					}
				}
			}
		}

div.right-sb-container{
			flex: 1;
			background: #fff;
			min-width: 300px;
			max-width: 320px;
			-moz-transition: right 0.5s;
		    -o-transition: right 0.5s;
		    -webkit-transition: right 0.5s;
		    transition: right 0.5s;

div.sidebar__inner{
				width: 100%;
				display: block;
				padding: 15px 0px 10px 20px;

div.main-search-bar-container{
					width: 100%;
					line-height: 0;
					margin-bottom: 20px;

form{
						width: 100%;
						line-height: 0;
						display: block;
						position: relative;

div.input-holder{
							width: 100%;
							overflow: hidden;
							display: block;
							line-height: 0;
							position: relative;

input{
								border: 1px solid $border;
								background: rgb(230, 236, 240);
								border-radius: 10em;
								padding: 0 0 3px 50px;
								height: 40px;
								font-size: 13px;
								color: $black;

&::placeholder{
									color: $pl_holder;
									font-size: 13px;
								}

&:active,&:hover,&:focus{
									box-shadow: none;
									outline: none;
									background: #fff;
									border: 2px solid $blue;

&  + a svg{
										stroke: $blue;
										opacity: 1;
									}
								}
							}

a{
								position: absolute;
								left: 15px;
								top: 10px;
								text-decoration: none;
								line-height: 0px;
								z-index: 2;
								width: 22px;
								height: 22px;

svg{
									width: 100%;
									height: 100%;
									stroke: $grey;
									opacity: 0.8;
								}
							}

span.spinner-icon{
								position: absolute;
								right: 15px;
								top: 7px;
								text-decoration: none;
								line-height: 0px;
								z-index: 2;
								width: 22px;
								height: 22px;

svg{
									width: 100%;
									height: 100%;
								}
							}

span.clear-result{
								position: absolute;
								right: 15px;
								top: 7px;
								text-decoration: none;
								line-height: 0px;
								z-index: 2;
								width: 22px;
								height: 22px;
								cursor: pointer;

svg{
									width: 100%;
									height: 100%;
									stroke: $blue;
								}
							}
						}

div.search-result-holder{
							width: 100%;
							border-radius: $border_rad1 !important;
							box-shadow: $btn_shadow;
							padding: 0;
							position: absolute;
							left: 0;
							top: 40px;
							right: 0;
							z-index: 10;
							background: #fff;
							overflow: hidden;

div.search-result-body{
								width: 100%;
								display: block;
								line-height: 0;
							
								ul.result-list{
									width: 100%;
									padding: 0;
									margin: 0;
									overflow-x: hidden;
									overflow-y: auto;
									max-height: 250px;

li.htag-list-item{
										width: 100%;
										line-height: 0;
										padding: 10px 15px;
										border-bottom: 1px solid $border;

&:last-child{
											border-bottom: none;
										}

&.htag{
											a{
												width: 100%;
												line-height: 0;
												display: flex;
												flex-direction: row;
												flex-wrap: nowrap;
												align-items: center;
												text-decoration: none;

span.hash{
													width: 30px;
												    height: 30px;
												    padding: 0;
												    margin: 0;
												    line-height: 28px;
												    text-align: center;
												    color: $grey;
												    border: 1px solid $border;
												    border-radius: 10em;
												    font-size: 13px;
												}

span.hashtag-info{
													flex: 1;
												    line-height: 0;
												    padding: 0px 15px;
												    overflow: hidden;

b.tag{
												    	font-size: 13px;
													    line-height: 16px;
													    font-weight: 400;
													    color: $black;
													    display: block;
													    text-overflow: ellipsis;
													    overflow: hidden;
													    white-space: nowrap;
													    max-width: 60%;
												    }

span.total{
												    	font-size: 11px;
													    line-height: 16px;
													    font-weight: 300;
													    color: $grey;
													    display: block;
												    }
												}
											}
										}

&.user{
											a{
												width: 100%;
												line-height: 0;
												display: flex;
												flex-direction: row;
												flex-wrap: nowrap;
												align-items: center;
												text-decoration: none;

div.avatar{
													width: 35px;
												    height: 35px;
												    overflow: hidden;
												    min-width: 35px;
												    max-width: 35px;
												    border-radius: 10em;
												    background-color: white;

img{
												    	width: 100%;
													    height: 100%;
													    object-fit: cover;
												    }
												}

div.user-info{
													flex: 1;
												    padding: 0 0 0 10px;
												    line-height: 0px;

div.uname{
												    	width: 100%;
												    	display: block;
												    	line-height: 0;
												    	white-space: nowrap;
												    	overflow: hidden;
												    	text-overflow: ellipsis;
												    	max-width: 60%;

b.name{
												    		font-size: 13px;
												    		line-height: 13px;
												    		color: $black;
												    		display: block;
												    		width: 100%;
												    	}

span.username{
												    		font-size: 12px;
												    		line-height: 18px;
												    		color: $grey;
												    		display: block;
												    		width: 100%;
												    	}
												    }
												}
											}
										}

&:hover, &:active{
											background: $el_hovbg;
										}
									}
								}
							}

div.search-result-footer{
								width: 100%;
								display: block;
								text-align: center;
								border-top: 1px solid $border;
								padding: 10px 20px;
								background: $blue;

a{
									color: #fff;
									font-size: 11px;
									line-height: 11px;
									text-transform: uppercase;
									font-weight: 500;
								}

&.disabled{
									opacity: 0.6;
									cursor: not-allowed;
							
									a{
										cursor: default;
										text-decoration: none;
									}
								}
							}
						}
					}
				}

div.topical-posts{
					width: 100%;
					overflow: hidden;
					display: block;
					margin-bottom: 20px;
					padding-bottom: 20px;
					border-bottom: 1px solid $border;

div.topical-posts__header{
						line-height: 0;
						
						h4{
				 			font-size: 14px;
				 			padding: 0;
				 			margin: 0;
				 			color: $grey;
				 			font-weight: 700;
				 			line-height: 1.4;
				 		}
					}

div.topical-posts__body{
						width: 100%;
						display: block;
						margin: 20px 0;

div.topical-posts__item{
							width: 100%;
							margin-bottom: 15px;
							line-height: 0;

a.htag{
								display: inline-flex;
								flex-wrap: nowrap;
								align-items: center;
								border: 1px solid darken($border, 5);
								padding: 3px 10px;
								border-radius: 5em;
								text-decoration: none;

b{
									color: $black;
									font-size: 16px;
									line-height: 20px;
									margin-right: 7px;
									font-weight: normal;	
								}

strong{
									font-size: 14px;
									color: $black;
									line-height: 15px;
									font-weight: normal;
								}

span{
									font-size: 13px;
									color: $grey;
									line-height: 13px;
									margin-left: 15px;
									text-transform: lowercase;
								}

&:hover, &:active{
									background: $el_hovbg;
									cursor: pointer;
								}
							}

&:last-child{
								margin-bottom: 0px;
							}
						}
					}

div.topical-posts__placeholder{
						font-size: 13px;
			 			line-height: 18px;
			 			color: lighten($grey,5);
			 			padding: 20px 0 0 0;
			 			margin: 0;
			 			font-weight: normal;
			 			font-style: normal;
					}

div.topical-posts__footer{
						line-height: 0;

div.main-footer{
					width: 100%;
					display: block;
					margin-bottom: 0px;

ul.footer-nav{
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						padding: 0;
						margin: 0;
						line-height: 0px;
						list-style-type: none;

li.footer-nav-item{
							line-height: 0px;
							margin-right: 10px;

& > a{
								font-size: 11px;
								color: $grey;
								line-height: 20px;
							}

&.dropdown{
								a.dropdown-toggle{
									text-decoration: none;

span.language-banner{
										line-height: 11px;
										margin-right: 5px;
										overflow: hidden;
										border-radius: 2px;

svg{
											width: 15px;
										}
									}

span.language-name{
										line-height: 11px;
									}
								}
								
								a.dropdown-item{
									text-decoration: none;
								}
							}
						}
					}
				}
			}
		}
	}

&.guest-mode div.main-content-container-inner{
		div.left-sb-container{
			flex: 1;

div.sidebar__inner{
				padding-left: 30px !important;
			}
		}
	}
}

div.mobile-bottom-navbar{
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	border-top: 1px solid $border;
	background: #fcfcfc;
	z-index: 100;
	height: 50px;
	display: none;

div.mobile-bottom-navbar-inner{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		height: 100%;

button.navbar-ctrl{
			margin: 0;
			line-height: 0;
			background: transparent;
			border: none;
			box-shadow: none;
			outline: 0;
			cursor: pointer;
			padding: 0 15px;
			position: relative;

svg{
				width: 22px;
				height: 22px;
				stroke: $grey;
			}

span.info-indicators{
                position: absolute;
                top: -5px;
                right: 5px;
                background: $blue;
                color: #fff;
                text-align: center;
                padding: 4px;
                border-radius: 10em;
                z-index: 10;
                background-clip: padding-box;
                display: inline-block;
                font-size: 9px;
                -webkit-font-smoothing: subpixel-antialiased;
                line-height: 1.3;
                min-height: 13px;
                min-width: 20px;

&:empty{
                    display: none;
                    visibility: hidden;
                    opacity: 0;
                }
            }  
		}
	}
}

div.timeline-pubbox-container{
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	height: auto;

& > div.lp{
		flex-basis: 45px;
		width: 45px;
		min-width: 45px;

div.avatar{
			width: 100%;
			overflow: hidden;
			line-height: 0;

img{
				width: 100%;
				height: 100%;
				border-radius: 10em;
				object-fit: cover;
			}
		}
	}

& > div.rp{
		flex: 1;
		padding-left: 20px;
		max-width: calc(100% - 35px);

form{
			width: 100%;
			max-width:  100%;

div.input-holder{
				width: 100%;
				margin-bottom: 10px;
				max-width: 100%;

textarea{
					display: block;
					width: 100%;
					min-height: 40px;
					max-height: 400px;
					resize: none;
					font-size: 16px;
					color: $black;
					line-height: 20px;
					border: none;
					border-radius: 0px;
					outline: 0;

&::placeholder{
						color: $pl_holder;
						font-size: 17px;
						font-weight: normal;
					}
				}
			}

div.cl-emoticons{
				display: block;
				width: 100%;
				border: 1px solid $border;
				margin-bottom: 20px;
				border-radius: $border_rad1;
				overflow: hidden;

div.emoticons-group-nav{
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					border-bottom: 1px solid $border;
					background: #fafafa;
					overflow: hidden;
					padding: 0px 15px;

span.emoticons-group-nav-item{
						height: 45px;
						width: 45px;
						min-width: 15px;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;

span.emoji_group_icon{
							font-size: 15px;
							line-height: 15px;

svg{
								width: 22px;
								height: 22px;
								filter: grayscale(100%);
								opacity: 0.5;
							}
						}

&.active{
							border-bottom: 2px solid $blue;
							border-bottom-style: inset;

span.emoji_group_icon svg{
								filter: unset;
								opacity: 1;
							}
						}

&.ml-auto{
							width: 22px;

span.emoji_group_icon{
								line-height: 0;

svg{
									stroke: $blue;
									filter: unset;
									opacity: 1;
								}
							}
						}
					}
				}

div.emoticons-group-ls{
					max-height: 300px;
					overflow-x: hidden;
					overflow-y: auto;

div.emoticons-group{
						width: 100%;
						display: block;
						line-height: 20px;
						border-bottom: 1px solid $border;
						padding: 15px;

span{
							display: inline-block;
							width: 30px;
							height: 30px;
							font-size: 22px;
							cursor: pointer;
							-webkit-user-select: none;
						    -khtml-user-select: none;
						    -moz-user-select: -moz-none;
						    -o-user-select: none;
						    user-select: none;
						}

&:last-child{
							border-bottom: none;
						}
					}

&::-webkit-scrollbar-track{
						background-color: #e6ecf0;
					}

&::-webkit-scrollbar{
						width: 5px;
						background-color: #e6ecf0;

}

&::-webkit-scrollbar-thumb{
						background-color: #d1d1d1;
						border: 0px;
						border-radius: 0px;
					}
				}
			}

div.input-autocomplete{
				display: block;
				line-height: 0;
				margin-bottom: 20px;
				position: relative;

div.input-autocomplete__usernames{
					width: 300px;
					border-radius: $border_rad2;
					box-shadow: $btn_shadow;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 10;
					background: #fff;
					overflow: hidden;

div.input-autocomplete__username-list{
						width: 100%;
						display: block;
						max-height: 300px;
						overflow-x: hidden;
						overflow-y: auto;

div.username-list-item{
							display: block;
							width: 100%;
							border-bottom: 1px solid $border;
							padding: 10px 15px;
							cursor: pointer;

div.avatar{
								width: 38px;
								height: 38px;
								overflow: hidden;
								border-radius: 10em;
								border: 1px solid $border;

img{
									width: 100%;
									height: 100%;
								}
							}

div.username{
								display: block;
								padding-left: 10px;
								line-height: 18px;
								font-weight: 600;
								font-size: 14px;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: calc(100% - 20px);
								color: $black;

span{
									&:first-child{
										width: 100%;
									}

&:last-child{
										color: $grey;
										display: block;
										font-weight: 400;
										font-size: 14px;
									}
								}
							}

&:last-child{
								border-bottom: none;
							}

&:hover, &:focus{
								background: $el_hovbg;
							}
						}
					}
				}

div.input-autocomplete__hashtags{
					width: 300px;
					border-radius: $border_rad2;
					box-shadow: $btn_shadow;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 10;
					background: #fff;
					overflow: hidden;

div.input-autocomplete__hashtags-list{
						width: 100%;
						display: block;
						max-height: 300px;
						overflow-x: hidden;
						overflow-y: auto;

div.hashtag-list-item{
							display: block;
							width: 100%;
							border-bottom: 1px solid $border;
							padding: 10px 15px;
							cursor: pointer;
				
							p{
								font-size: 15px;
								line-height: 18px;
								color: $black;
								font-weight: 500;
								padding: 0;
								margin: 0;

span{
									color: $grey;
									font-weight: normal;
								}
							}

&:last-child{
								border-bottom: none;
							}

&:hover, &:focus{
								background: $el_hovbg;
							}
						}
					}
				}
			}

div.preview-og-holder{
				width: 100%;
				display: block;
				line-height: 0;
				margin-bottom: 10px;
				overflow: hidden;
				background: #fff;
				border-radius: $border_rad1;
				border: 1px solid $border;
				position: relative;

div.preview-og-holder-inner{
					width: 100%;
					display: block;

div.og-image{
						width: 100%;
						overflow: hidden;
						border-right: 1px solid $border;
						background: $el_hovbg;

div.og-image-holder{
							width: 100%;
							
							img{
								width: 100%;
								display: block;
							}
						}
					}

div.og-url-data{
						display: block;
						width: 100%;
						padding: 15px;
						overflow: hidden;

h5, p, a{
							width: 100%;
							display: block;
							
						}

h5{
							padding: 0;
							margin: 0 0 5px 0;
							font-size: 16px;
							line-height: 20px;
							color: $black;
							word-wrap: break-word;
						}

p{
							font-size: 11px;
							color: $grey;
							line-height: 18px;
							padding: 0;
							margin: 0 0 5px 0;
							word-wrap: break-word;
						}

a{
							font-size: 13px;
							line-height: 18px;
							color: $blue;
							padding: 0;
							margin: 0;
							word-wrap: break-word;
						}
					}
				}

button.delete-preview-og{
					margin: 0;
					padding: 0;
					line-height: 0;
					position: absolute;
					top: 5px;
					right: 5px;
					width: 25px;
					height: 25px;
					border-radius: 10em;
					cursor: pointer;
					transition: visibility 0.1s linear,opacity 0.1s linear;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					background-color: $blue;
					border: none;
					box-shadow: none;
					outline: 0;

&:disabled{
						cursor: wait !important;
					}

svg{
						width: 17px;
						height: 17px;

*{
							stroke: #fff;
						}
					}
				}
			}

div.preview-images-holder{
				width: 100%;
				display: block;
				line-height: 0;
				margin-bottom: 10px;

div.preview-images-list{
					line-height: 0;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					overflow: hidden;
					margin-left: -5px;
					margin-right: -5px;

div.preview-images-list-item{
						width: 25%;
						max-width: 25%;
						min-width: 25%;
						flex-basis: 25%;
						padding: 5px;

div.li-inner-content{
							border-radius: $border_rad2;
							border: 1px solid $border;
							overflow: hidden;
							position: relative;
							background: #e6ecf0;
							height: 100%;
							width: 100%;

img{
								width: 100%;
								object-fit: cover;
								height: 100%;
							}

button.delete-preview-image{
								position: absolute;
								padding: 0;
								margin: 0;
								line-height: 0;
								top: 5px;
								right: 5px;
								width: 25px;
								height: 25px;
								border-radius: 10em;
								cursor: pointer;
								transition: visibility 0.1s linear,opacity 0.1s linear;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								background-color: $blue;
								border: none;
								box-shadow: none;
								outline: 0;

&:disabled{
									cursor: wait !important;
								}

svg{
									width: 17px;
									height: 17px;
									*{
										stroke: #fff;
									}
								}
							}
						}
					}
				}
			}

div.preview-gifs-holder{
				display: block;
				width: 100%;
				line-height: 0;
				overflow: hidden;

div.preview-gifs-loader{
					width: 100%;
					display: block;
					line-height: 0;
					margin-bottom: 10px;
					overflow: hidden;
					background: #fff;
					border-radius: $border_rad1;
					border: 1px solid $border;

div.search-bar-holder{
						width: 100%;
						overflow: hidden;
						display: block;
						line-height: 0;
						border-bottom: 1px solid $border;
						padding: 10px 50px 10px 15px;
						line-height: 0;
						position: relative;
						margin-bottom: 4px;

input{
							border: 1px solid $blue;
							background: #fff;
							border-radius: 5em;
							padding: 0 0 3px 40px;
							height: 38px;
							font-size: 13px;
							color: $black;
							padding: 0px 40px;

&::placeholder{
								color: $pl_holder;
								font-size: 13px;
							}

&:active,&:hover,&:focus{
								box-shadow: none;
								outline: none;
								background: none;
								border: 1px solid $blue;
							}
						}

a{
							position: absolute;
							left: 15px;
							top: 10px;
							text-decoration: none;
							line-height: 0px;
							z-index: 2;
							width: 40px;
							height: 40px;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							padding: 0;
							margin: 0;
							
							svg{
								width: 22px;
								height: 22px;
								stroke: $blue;
							}
						}

button{
							position: absolute;
							right: 5px;
							top: 0px;
							width: 40px;
							height: 100%;
							border-radius: 10em;
							cursor: pointer;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							border: none;
							box-shadow: none;
							outline: 0;
							padding: 0;
							background: transparent;
							padding: 0;
							margin: 0;
							line-height: 0;
							
							svg{
								width: 25px;
								height: 25px;
								stroke: $blue;
							}
						}
					}

div.preview-gifs-list{
						line-height: 0;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						min-height: 100px;
						max-height: 300px;
						width: 100%;
						overflow-x: hidden;
						overflow-y: auto;

div.row-column{
							width: 50%;
							min-width: 50%;
							max-width: 50%;
							flex-basis: 50%;
						
							div.preview-gifs-list-item{
								width: 100%;
								div.li-inner-content{
									border-bottom: 4px solid #fff;
									overflow: hidden;
									position: relative;
									background: #fff;
									width: 100%;
									z-index: 5;

&.loading{
										height: 150px;
									}
									
									img{
										width: 100%;
										object-fit: cover;
										height: 100%;
										border-radius: 1px;
										cursor: pointer;
									}

div.gif-preloader{
										position: absolute;
										left: 0px;
										top: 0px;
										bottom: 0px;
										right: 0px;
										background: #fff;
										display: flex;
										flex-direction: row;
										flex-wrap: nowrap;
										justify-content: center;
										align-items: center;
										border: 1px solid $border;
										border-radius: 0px;
										z-index: 10;

svg{
											width: 30px;
											height: 30px;
										}
									}
								}
							}

&.row-1{
								div.preview-gifs-list-item {
									div.li-inner-content{
										border-right: 2px solid #fff;
										border-left: 4px solid #fff;
									}
								}
							}

&.row-2{
								div.preview-gifs-list-item {
									div.li-inner-content{
										border-left: 2px solid #fff;
										border-right: 4px solid #fff;
									}
								}
							}
						}

&::-webkit-scrollbar-track{
							background-color: #e6ecf0;
						}

&::-webkit-scrollbar{
							width: 5px;
							background-color: #e6ecf0;

}

&::-webkit-scrollbar-thumb{
							background-color: #d1d1d1;
							border: 0px;
							border-radius: 0px;
						}
					}
				}

div.preview-original-gif{
					width: 100%;
					display: block;
					line-height: 0px;
					position: relative;
					border-radius: $border_rad1;
					border: 1px solid $border;
					overflow: hidden;
					margin-bottom: 10px;

img{
						width: 100%;
						object-fit: cover;
					}

button.delete-preview-gif{
						position: absolute;
						top: 5px;
						right: 5px;
						width: 25px;
						height: 25px;
						border-radius: 10em;
						cursor: pointer;
						transition: visibility 0.1s linear,opacity 0.1s linear;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						background-color: $blue;
						border: none;
						box-shadow: none;
						outline: 0;
						padding: 0;
						margin: 0;
						line-height: 0;

&:disabled{
							cursor: wait !important;
						}

svg{
							width: 17px;
							height: 17px;
							*{
								stroke: #fff;
							}
						}
					}

div.gif-preloader{
						position: absolute;
						left: 0px;
						top: 0px;
						bottom: 0px;
						right: 0px;
						background: #fff;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						border-radius: $border_rad1;
						z-index: 10;

svg{
							width: 35px;
							height: 35px;
						}
					}

&.loading{
						height: 150px;
						img{
							padding: 20px;
						}
					}
				}
			}

div.preview-video-holder{
				width: 100%;
				display: block;
				line-height: 0;
				margin-bottom: 10px;
				position: relative;

button.delete-preview-video{
					position: absolute;
					padding: 0;
					margin: 0;
					line-height: 0;
					top: 5px;
					right: 5px;
					width: 25px;
					height: 25px;
					border-radius: 10em;
					cursor: pointer;
					transition: visibility 0.1s linear,opacity 0.1s linear;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					background-color: $blue;
					border: none;
					box-shadow: none;
					outline: 0;

&:disabled{
						cursor: wait !important;
					}

svg{
						width: 17px;
						height: 17px;
						*{
							stroke: #fff;
						}
					}
				}

div.video-player{
					width: 100%;
					display: block;
					max-height: 50%;
					background: #e6ecf0;
					border-radius: $border_rad1;
					border: 1px solid $border;
					overflow: hidden;
					
					a{
						display: block;
						line-height: 0;
						text-decoration: none;
						position: relative;

img{
							width: 100%;
						}
					
						div.video-icon{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							cursor: pointer;

span{
								width: 55px;
								height: 55px;
								background: rgba(0, 0, 0, 0.60);
								border-radius: 10em;
								padding: 15px;
								box-shadow: $btn_shadow;

svg{
									width: 100%;
									height: 100%;
									fill: #fff;
								}
							}
						}
					}
				}
			}

div.preview-audio-holder{
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				line-height: 0;
				margin-bottom: 10px;
				overflow: hidden;

button.delete-preview-audio{
					padding: 0;
					margin: 0;
					line-height: 0;
					width: 25px;
					height: 25px;
					border-radius: 10em;
					cursor: pointer;
					transition: visibility 0.1s linear,opacity 0.1s linear;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					background-color: $blue;
					border: none;
					box-shadow: none;
					outline: 0;

&:disabled{
						cursor: wait !important;
					}

svg{
						width: 17px;
						height: 17px;
						*{
							stroke: #fff;
						}
					}
				}

div.preview-audio{
					flex: 1;
					overflow: hidden;
					margin-right: 15px;

audio{
						width: 100%;
					}
				}
			}

div.preview-poll-holder{
				width: 100%;
				display: block;
				line-height: 0;
				margin-bottom: 10px;
				overflow: hidden;
				background: #fff;
				border-radius: $border_rad1;
				border: 1px solid $border;

div.poll-data-inputs{
					width: 100%;
					display: block;
					line-height: 0;
					padding: 15px;
					border-top: 1px solid $border;
					border-bottom: 1px solid $border;
					
					div.data-input-item{
						width: 100%;
						display: block;
						line-height: 0;
						margin-bottom: 20px;
						position: relative;

input{
							width: 100%;
							height: 46px;
							border: none;
							border-radius: 0px;
							background: $el_hovbg;
							border-bottom: 2px solid $border;
							box-shadow: none;
							outline: 0;
							font-size: 13px;
							color: #004874;
							padding-left: 15px;
							padding-right: 50px;

&::placeholder{
								font-size: 13px;
								color: $grey;
							}

&:hover,&:focus,&:active{
								border-bottom: 2px solid $blue;
								background: #eff3f6;

& + small{
									display: inline-block;
								}
							}
						}

small{
							position: absolute;
							top: 0px;
							right: 10px;
							bottom: 0px;
							color: $grey;
							font-size: 11px;
							text-transform: uppercase;
							line-height: 46px;
							display: none;
							letter-spacing: 1px;

&:hover, &:active{
								display: inline-block;
							}
						}

&:last-child{
							margin-bottom: 0px;
						}
					}
				}

div.poll-data-title{
					width: 100%;
					display: block;
					overflow: hidden;
					line-height: 0;
					padding: 15px;

h5{
						padding: 0;
						margin: 0;
						font-size: 13px;
						color: $blue;
						line-height: 13px;
						text-transform: uppercase;
						white-space: nowrap;
						max-width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 700;
					}

button.cancel-poll{
						width: 20px;
						height: 20px;
						border-radius: 10em;
						cursor: pointer;
						display: inline-block;
						border: none;
						box-shadow: none;
						outline: 0;
						padding: 0;
						background: transparent;
						padding: 0;
						margin: 0;
						line-height: 0;
						
						svg{
							width: 20px;
							height: 20px;
							*{
								stroke: $blue;
							}
						}
					}
				}

div.poll-data-ctrls{
					width: 100%;
					display: block;
					overflow: hidden;
					line-height: 0;
					padding: 15px;

&:disabled{
						cursor: not-allowed;
						opacity: 0.5;
					}
				}
			}

div.post-ctrls-holder{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				margin-bottom: 10px;
				
				button.ctrl-item{
					background: transparent;
					border: none;
					outline: none;
					padding: 0px;
					margin: 0 3px 0 0;
					box-shadow: none;
					line-height: 0px;
					width: 35px;
					height: 35px;
					border-radius: 10em;
					position: relative;
					cursor: pointer;
					transition: all 0.10s ease-in-out;

svg{
						width: 22px;
						height: 22px;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						margin: auto;
						stroke: $blue;
					}

&:hover,&:active,&:focus{
						&::after{
							width: 35px;
							height: 35px;
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
							background: #0074b01f;
							content: "";
							border-radius: 5em;
						}
					}

&.text-length{
						text-align: center;
						border: none;
						padding: 0px;
						width: auto;
						margin-right: 0;

&:hover,&:active,&:focus{
							background: transparent;
							&:after{
								display: none;
							}
						}

small {
							color: $grey;
							font-weight: normal;
							font-size: 13px;
							line-height: 35px;
							vertical-align: middle;

&.len-error{
								color: $red;
								font-weight: bold;
							}
						}
					}

&:disabled{
						cursor: not-allowed;
						opacity: 0.5;
					}

&.audio-recording{
						position: relative;

svg{
							fill: $red;
							stroke: $red;
						}
						
						&::before{
							width: 35px;
							height: 35px;
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
							background: transparent;
							content: "";
							border-radius: 5em;
							box-shadow: 0 0 0 0 lighten($red, 5);
							transform: scale(1);
							animation: pulse 3s infinite;
						}

span.record-timer{
							width: 50px;
							position: absolute;
							top: -18px;
							left: calc(50% - 25px);
							color: #fff;
							background: $blue;
							font-size: 13px;
							border-radius: 15px;
							padding: 3px 5px;
							line-height: 13px;
							box-shadow: $btn_shadow;

&:after{
								content:'';
							    display:block;
							    width: 0;
							    height: 0;
							    position:absolute;
							    border-color: $blue transparent transparent transparent;
								border-style: solid;
								border-width: 6px;
							    left: calc(50% - 6px);
							    top: 100%;
							}
						}
					}
				}
			}

div.post-privacy-holder{
				width: 100%;
				display: block;
				border-top: 1px solid $border;
				padding-top: 15px;

button.privacy-settings{
					background: none;
					padding: 0;
					margin: 0;
					line-height: 0;
					border: none;

a.dropdown-toggle{
						display: block;
						line-height: 0;
						padding: 0;
						margin: 0;
						text-decoration: none;
					
						&:after, &:before{
							display: none;
						}

span.d-inline-flex{
							height: 30px;

span.flex-item.icon{
								svg{
									width: 16px;
									height: 16px;
									stroke: $blue;
									stroke-width: 2;
								}
							}

span.flex-item.label{
								font-size: 13px;
								line-height: 13px;
								color: $blue;
								margin-left: 8px;
								font-weight: 600;
							}
						}
					}

&:hover, &:active{
						background: none;
					}
				}

button.post-pub-btn{
					cursor: pointer;
					height: 30px;

&:disabled{
						opacity: 0.6;
						cursor: default;
					}
				}
			}
		}
	}
}

button.btn-custom{
	text-transform: uppercase;
	border-radius: 10em;

&.main-inline{
		color: #fff;
		background: $blue;
		box-shadow: $btn_shadow;
		border: 1px solid $blue;
		outline: 0;

&:not([disabled]){
			&:hover,&:active,&:focus{
				background: darken($blue, 5);
				background: darken($blue, 5);
			}
		}
	}

&.main-outline{
		color: $blue;
		background: transparent;
		font-weight: 500;
		box-shadow: none;
		border: 1px solid $blue;
		outline: 0;
		
		&:not([disabled]){
			&:hover,&:active,&:focus{
				background: darken($blue, 5);
				background: darken($blue, 5);
				color: #fff;
			}
		}
	}

&.lg{
		padding: 10px 15px;
		font-size: 11px;
		line-height: 13px;
		font-weight: 500;
	}

&.md{
		padding: 7px 15px;
		font-size: 11px;
		line-height: 13px;
		font-weight: 500;
	}

&.sm{
		padding: 6px 15px;
		font-size: 11px;
		line-height: 13px;
		font-weight: 500;
	}

&.main-red{
		color: #fff;
		background: $red;
		box-shadow: $btn_shadow;
		border: 1px solid $red;
		outline: 0;
	}

&.main-grey{
		color: #14171aab;
		background-color: #e6ecf0;
		box-shadow: none;
		border: 1px solid #e6ecf0;
		outline: 0;
	}

&.btn-block{
		width: 100%;
	}
}

button.fixed-bottom-right{
	position: fixed;
	right: 40px;
	bottom: 40px;
	border: 1px solid $blue;
	background: $blue;
	box-shadow: $btn_shadow;
	padding: 0px;
	margin: 0px;
	border-radius: 10em;
	z-index: 1000;
	outline: 0;
	cursor: pointer;

span.btn-inner{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		position: relative;
		line-height: 0;

svg{
			width: 25px;
			height: 25px;
			vertical-align: middle;
			display: inline-block;
			fill: #fff;
		}
	}
}

.dropdown, .dropleft, .dropright, .dropup{

div.dropdown-menu{
		border: none;
		box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;
		padding: 0px 0px;
		z-index: 1600;
		position: absolute;
		min-width: 185px;
		border-radius: $border_rad2;
		
		a.dropdown-item{
			font-size: 13px;
			line-height: 32px;
			color: $black;
			font-weight: 400;
			padding: 5px 20px;

&:hover, &:active, &.active{
				background: $el_hovbg !important;
			}
		}

div.dropdown-divider{
			padding: 0;
			margin: 0;
			border-color: $border;
		}

&.dropdown-icons{
			a.dropdown-item{
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;

span.flex-item{

&:not(.dropdown-item-icon){
						flex: 1;
					}

&.dropdown-item-icon{
						width: 18px;
						height: 18px;
						min-width: 18px;
						min-height: 18px;
						line-height: 0;
						margin-right: 12px;

svg{
							stroke: #5b7083;
							stroke-width: 1.8;
							width: 100%;
							height: 100%;
						}
					}
				}

&.col-red{
					span.flex-item{
						color: $red;

&.dropdown-item-icon{
							svg{
								stroke: $red;
							}
						}
					}
				}
			}
		}
	}
}

div.modal {
	&.vh-center.show{
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;

div.modal-dialog{
			flex: 1;
		}
	}
	
	div.modal-content{
		border: none;
		box-shadow: $btn_shadow;
		border-radius: $border_rad1;

div.modal-header{
			padding: 15px;
			border-bottom: 1px solid $border;

div.main---mh--block{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				
				h5{
					font-size: 14px;
					line-height: 14px;
					color: $black;
					font-weight: 700;
				}

span.dismiss-modal{
					margin-left: auto;
					line-height: 0px;
					vertical-align: middle;
					cursor: pointer;
					opacity: 0.8;

svg{
						width: 20px;
						height: 20px;
						vertical-align: middle;
						stroke: $blue;
					}

&:hover,&:active,&:focus{
						opacity: 1;
					}
				}
			}
		}

div.modal-body{
			width: 100%;
			padding: 15px;

div.popup-modal-form{
				width: 100%;
				display: block;
			}
		}

div.modal-footer{
			border-top: 1px solid $border;
			padding: 15px;

button{
				&:first-child{
					margin: 0px;
				}

&:last-child{
					margin-left: 10px;
				}
			}
		}
	}

div.auth-modal-window{
		padding: 20px;

div.form-title{
			width: 100%;
			display: block;
			line-height: 0;
			text-align: center;
			margin-bottom: 25px;

div.logo{
				width: 100%;
				display: block;
				text-align: center;
				margin-bottom: 10px;

a{
					text-decoration: none;
					line-height: 0;
					img{
						width: 50px;
						height: 50px;
					}
				}
			}

h4{
				color: $black;
				font-size: 20px;
				line-height: 20px;
				font-weight: 700;
				margin: 0 0 10px 0;
				padding: 0;
				text-align: center;
			}

p{
				font-size: 12px;
				color: $grey;
				padding: 0;
				margin: 0;
				line-height: 20px;
				text-align: center;
			}
		}

label.tos-agree{
			span{
				font-size: 11px;
				color: $grey;
				line-height: 16px;
			}

a{
				font-size: 11px;
				color: $blue;
				line-height: 16px;
			}
		}

div.form-group{
			div.cell-row{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;

div.cell-50{
					max-width: calc(50% - 10px);
					min-width: calc(50% - 10px);
					width: calc(50% - 10px);
					flex-basis: calc(50% - 10px);
				}
			}
		}
	}

&.confirm-actions-modal{
		div.modal-dialog{
			max-width: 320px;

div.modal-body{
				padding: 20px !important;

h4{
					font-size: 18px;
					font-weight: 700;
					line-height: 26px;
					padding: 0;
					margin: 0 0 10px 0;
					color: $black;
					text-align: center;
				}

p{
					font-size: 14px;
					line-height: 20px;
					color: $grey;
					padding: 0;
					margin: 0;
					text-align: center;
				}
			}

div.modal-footer{
				justify-content: center;
				border-top: none !important;
				padding: 0px 20px 20px 20px !important;
			}
		}
	}

&.info-popup-modal{
		div.modal-body{
			padding: 20px !important;
			h4{
				font-size: 16px;
				font-weight: 600;
				line-height: 26px;
				padding: 0;
				margin: 0 0 10px 0;
				color: $black;
				text-align: center;
			}

p{
				font-size: 13px;
				line-height: 20px;
				color: $grey;
				padding: 0;
				margin: 0;
				text-align: center;
			}
		}

div.modal-footer{
			justify-content: center;
			border-top: none !important;
			padding: 0px 20px 20px 20px !important;
		}
	}

&.share-post-modal{
		div.social-media-links{
			display: flex;
			width: 100%;
			overflow: hidden;
			line-height: 0;
			align-items: center;
			justify-content: center;

a.link-item{
				position: relative;
			    width: 50px;
			    height: 50px;
			    border-radius: 10em;
			    border: 1px solid $border;
			    margin: 0px 5px;

svg{
			    	position: absolute;
				    left: 0;
				    top: 0;
				    bottom: 0;
				    right: 0;
				    margin: auto;
				    width: 25px;
				    height: 25px;
			    }

&.twitter{
			    	svg{
			    		fill: $blue;
			    		*{
			    			stroke: $blue;
			    		}
			    	}
			    }

&.facebook{
			    	svg{
			    		fill: #3b5899;
			    		*{
			    			stroke: #3b5899;
			    		}
			    	}
			    }
			    
			    &.linkedin{
			    	svg{
			    		fill: #2770af;
			    		*{
			    			stroke: #2770af;
			    		}
			    	}
			    }
			    
			    &.pinterest{
			    	svg{
			    		fill: #c62327;
			    		*{
			    			stroke: #c62327;
			    		}
			    	}
			    }
			    
			    &.reddit{
			    	svg{
			    		fill: $grey;
			    		*{
			    			stroke: $grey;
			    		}
			    	}
			    }
			}
		}

div.raw-link{
			width: 100%;
			display: block;
			line-height: 0;
			padding-top: 15px;
			padding-bottom: 15px;

p{
				font-size: 13px;
				color: $grey;
				line-height: 13px;
				text-align: center;
				padding: 0;
				margin: 0 0 15px 0;
			}

div.link-input{
				display: block;
				width: 100%;
				position: relative;

input{
					width: 100%;
					height: 36px;
					border: none;
					border-radius: 5em;
					background: $el_hovbg;
					border: 2px solid $blue;
					box-shadow: none;
					outline: 0;
					font-size: 13px;
					color: #004874;
					padding: 0px 20px;

&::placeholder{
						font-size: 13px;
						color: $grey;
					}

&:hover,&:focus,&:active{
						border-bottom: 2px solid $blue;
						background: #eff3f6;
					}
				}

button.clip-board-copy{
					position: absolute;
					top: 0;
					right: 0;
					height: 36px;
					border: none;
					outline: 0;
					background: $blue;
					padding: 0 18px;
					margin: 0;
					line-height: 0;
					box-shadow: none;
					border-radius: 5em;
					cursor: pointer;

svg{
						width: 16px;
						height: 16px;
						stroke: #fff;
						vertical-align: middle;
					}
				}
			}
		}
	}

&.modal-pubbox{
		&.vis-hidden{
			visibility: hidden !important;

*{
				visibility: hidden !important;
			}
		}
	}

&.report-modal{
		div.modal-content{
			div.modal-body{
				div.form-group{

label.form-label{
						margin-bottom: 15px;
					}

div.radio-box-holder{
						width: 100%;
						display: block;

div.radio-box{
							display: flex;
							width: 100%;
							flex-direction: row;
							flex-wrap: nowrap;
							align-items: center;
							margin-bottom: 10px;
							cursor: pointer;

&:last-child{
								margin-bottom: 0px;
							}

div.lp{
								div.icon{
									width: 25px;
									height: 25px;
									overflow: hidden;
									line-height: 0;
									
									svg{
										width: 100%;
										height: 100%;
										stroke: $svg_col;
									}

&.selected {
										svg{
											stroke: $svg_col;
										}
									}
								}
							}

div.rp{
								padding: 0px 10px;
								flex: 1;
								overflow: hidden;
								line-height: 0;

span{
									font-size: 13px;
									line-height: 18px;
									color: $black;
								}
							}
						}

&:last-child{
							margin-bottom: 0px;
						}
					}

div.comment-input-holder{
						textarea{
							border: 2px solid $border;
							border-radius: $border_rad2;
							min-height: 90px;

&:hover, &:active, &:focus{
								border-color: $blue;
							}
						}
					}

hr{
						margin-top: 15px;
						margin-bottom: 15px;
					}
				}
			}

div.modal-footer{
				button{
					margin: 0;
				}
			}
		}
	}

}

div.modal-backdrop{
	background-color: lighten($grey, 0.7);
}

form {
	div.form-group{
		width: 100%;
		line-height: 0px;
		margin-bottom: 20px;

&.no-mb{
			margin-bottom: 0px !important;
		}

&.mt-20{
			margin-top: 20px;
		}

label {
			font-size: 13px;
			line-height: 13px;
			color: $black;
			margin-bottom: 7px;
		}

input.form-control{
			height: 46px;
			border: none;
			border-radius: 0px;
			background: $el_hovbg;
			border-bottom: 2px solid $border;
			box-shadow: none;
			outline: 0;
			font-size: 13px;
			color: #004874;

&::placeholder{
				font-size: 13px;
				color: $grey;
			}

&:hover,&:focus,&:active{
				border-bottom: 2px solid $blue;
				background: #eff3f6;
			}

&.is-invalid{
				border-color: $red;
				box-shadow: none;

&::placeholder{
					color: $red;
				}
			}
		}

div.vue-dropdown-select {
			height: 46px;
			border: none;
			border-radius: 0px;
			background: $el_hovbg;
			box-shadow: none;
			outline: 0;

button.dropdown-toggle{
				height: 46px !important;
				border: none !important;
				border-radius: 0px !important;
				border-bottom: 2px solid $border !important;
				outline: 0 !important;
				background: transparent;
				font-size: 13px;
				line-height: 13px;
				color: $grey;
				box-shadow: none !important;
				display: block;
				width: 100%;
				text-align: left;
				position: relative;

&:hover,&:focus,&:active{
					border-bottom: 2px solid $blue !important;
					background: #eff3f6 !important;
					color: $grey;
				}

&:after{
					position: absolute;
					right: 20px;
					top: calc(50% - 3px);
				}
			}

.dropdown-menu{
				width: 100%;
				max-height: 250px;
				overflow-y: auto;

a.dropdown-item{
					b.select-check-mark{
						font-size: 16px;
						font-weight: 700;
						color: $blue;
						line-height: 16px;
						display: inline-block;
					}
				}
			}
		}

textarea.form-control{
			resize: vertical;
			border: none;
			border-radius: 0px;
			background: $el_hovbg;
			border-bottom: 2px solid $border;
			box-shadow: none;
			outline: 0;
			font-size: 13px;
			color: #004874;

&::placeholder{
				font-size: 13px;
				color: $grey;
			}

&:hover,&:focus,&:active{
				border-bottom: 2px solid $blue;
				background: #eff3f6;
			}
		}

div.checkbox-input{
			display: block;
			width: 100%;

label{
				margin-bottom: 0px;
				height: 20px;
				line-height: 20px;
			}
		}

p.form-info-label{
			font-size: 12px;
			color: $blue;
			line-height: 18px;
			padding: 0;
			margin: 0;
		}
	}

div.invalid-main-feedback{
		width: 100%;
		display: block;
		margin-bottom: 0px;
		font-size: 11px;
		color: $red;
		line-height: 16px;
		margin-top: 5px;

&.bordered{
			border-radius: 5px;
			padding: 15px;
			border: 1px solid $red;
		}

&.mb-20{
			margin-bottom: 20px;
		}
	}

div.valid-main-feedback{
		width: 100%;
		display: block;
		margin-bottom: 0px;
		font-size: 11px;
		color: $blue;
		line-height: 16px;
		margin-top: 5px;

&.bordered{
			border-radius: 5px;
			padding: 15px;
			border: 1px solid $blue;
		}

&.mb-20{
			margin-bottom: 20px;
		}
	}

div.form-group-set{
		width: 100%;
		display: block;
	}
}

/*Common helper classes*/

.col-red{
	color: $red !important;
}

.col-grey{
	color: $grey !important;
}

.col-blue{
	color: $blue !important;
}

span.query-match {
	line-height: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-block !important;
	color: $black !important;
	background: yellow !important;
}

a.inline-link{
	font-size: inherit !important;
	line-height: inherit !important;
	color: $link !important;
}

div.main-modalnotif-container{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999999;
	width: 100%;

span{
		display: block;
		width: 100%;
		padding: 15px 25px;
		line-height: 22px;
		color: #fff;
		font-size: 14px;
		border-radius: 0px;
		text-align: center;
		box-shadow: rgba(0, 0, 0, 15%) 3px -3px 20px 5px;
		animation-duration: 0.5s;
	}

&.primary{
		span{
			background-color: $blue;
		}
	}

&.danger{
		span{
			background-color: $red;
		}
	}
}

div.modal{
	div.post-likes-container{
		display: block;
		width: 100%;
		line-height: 0px;
		overflow: hidden;

div.modal-body{
			padding: 0px;
		}

div.post-likes-ls{
			width: 100%;
			line-height: 0px;
			display: block;
			padding: 0;
			max-height: 500px;
			overflow-x: hidden;
			overflow-y: auto;

div.post-likes-list-item{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				line-height: 0px;
				border-bottom: 1px solid $border;
				padding: 10px 15px;

&:first-child{
					padding-top: 20px;
				}

div.avatar{
					width: 40px;
					height: 40px;
					overflow: hidden;
					min-width: 40px;
					max-width: 40px;
					border-radius: 10em;

img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

div.user-info-holder{
		 			flex: 1;
		 			padding: 0 0 0 10px;
		 			line-height: 0px;
		 			position: relative;

h4{
		 				font-size: 13px;
		 				padding: 0;
		 				margin: 0;
		 				line-height: 13px;
		 				font-weight: 700;
		 				color: $black;
		 				white-space: nowrap;
		 			}

a{
		 				display: block;
		 				text-decoration: none;
		 				color: $grey;
		 				font-size: 13px;
		 				line-height: 20px;
		 				overflow: hidden;
		 				white-space: nowrap;
		 				text-overflow: ellipsis;
		 				max-width: 140px;
		 			}

p{
		 				font-size: 13px;
		 				line-height: 18px;
		 				padding: 0;
		 				margin: 5px 0 0 0;
		 				padding-right: 40px;
		 			}

button{
		 				position: absolute;
		 				right: 0;
		 				top: 0;
		 			}
		 		}

&:hover,&:active{
		 			background: $el_hovbg;
		 		}

&:last-child{
		 			border-bottom: none;
		 		}
			}

&::-webkit-scrollbar-track{
				background-color: #e6ecf0;
			}

&::-webkit-scrollbar{
				width: 5px;
				background-color: #e6ecf0;

}

&::-webkit-scrollbar-thumb{
				background-color: #d1d1d1;
				border: 0px;
				border-radius: 0px;
			}
		}

div.post-likes-ls-empty{
			width: 100%;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			line-height: 0px;
			padding: 50px;
			height: 250px;
			overflow: hidden;

div.icon{
	 			line-height: 0px;
				margin-bottom: 15px;
				width: 100%;
				text-align: center;

svg{
		 			width: 50px;
		 			height: 50px;
		 			stroke: $blue;
		 		}
	 		}

div.pl-message{
				line-height: 0px;
				width: 100%;
				margin-bottom: 50px;

h4{
					font-size: 18px;
					padding: 0;
					margin: 0 0 15px 0;
					line-height: 18px;
					color: $black;
					font-weight: 700;
					text-align: center;
				}

p{
					font-size: 13px;
					line-height: 19px;
					padding: 0;
					margin: 0;
					color: $grey;
					text-align: center;
					overflow-wrap: break-word;

span{
						display: inline-block;
						line-height: 0;
						vertical-align: middle;
						line-height: 16px;
						svg{
							width: 20px;
							height: 20px;
							stroke: $blue;
							vertical-align: middle;
						}
					}

a{
						color: $link;
						text-decoration: underline;
						font-weight: 500;
					}
				}
			}
		}

div.load-more{
			width: 100%;
			display: block;
			line-height: 0;
			padding: 20px;
			text-align: center;

button{
				padding-left: 30px;
				padding-right: 30px;
			}
		}
	}
}

.of-hide{
	overflow: hidden;
}

div.row{
    margin-left: -10px !important;
    margin-right: -10px !important;
}

div.col-lg-1,
div.col-lg-2,
div.col-lg-3,
div.col-lg-4,
div.col-lg-5,
div.col-lg-6,
div.col-lg-7,
div.col-lg-8,
div.col-lg-9,
div.col-lg-10,
div.col-lg-11,
div.col-lg-12 {
    padding: 0px 10px;
}

div.col-md-1,
div.col-md-2,
div.col-md-3,
div.col-md-4,
div.col-md-5,
div.col-md-6,
div.col-md-7,
div.col-md-8,
div.col-md-9,
div.col-md-10,
div.col-md-11,
div.col-md-12 {
    padding: 0px 10px;
}

div.col-sm-1,
div.col-sm-2,
div.col-sm-3,
div.col-sm-4,
div.col-sm-5,
div.col-sm-6,
div.col-sm-7,
div.col-sm-8,
div.col-sm-9,
div.col-sm-10,
div.col-sm-11,
div.col-sm-12 {
    padding: 0px 10px;
}

div.col-xs-1,
div.col-xs-2,
div.col-xs-3,
div.col-xs-4,
div.col-xs-5,
div.col-xs-6,
div.col-xs-7,
div.col-xs-8,
div.col-xs-9,
div.col-xs-10,
div.col-xs-11,
div.col-xs-12 {
    padding: 0px 10px;
}

span.user-name-holder.verified-badge{
	font-size: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
	display: inline-block !important;
	position: relative !important;
	margin-right: 15px !important;
	width: auto !important;
	font-weight: inherit !important;

&:after{
		color: $blue;
		content: url("data:image/svg+xml; utf8, <svg style='vertical-align: middle;'  xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'><path fill='dodgerblue' d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z'></path></svg>");
		position: absolute;
		top: calc(50% - 7px);
		right: -17px;
		width: 15px;
		height: 15px;
		padding: 0;
		margin: 0;
		display: inline-block;
		line-height: 0px;
	}
}

a.image-wrapper.fbox-media{
	display: inherit !important;
	line-height: 0;
	text-decoration: none;
}

ul.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] {
	z-index: 1500 !important;
}

.d-flex{
	width: 100%;

.flex-nw, .flex-wn{
		flex-wrap: nowrap;
	}

.flex-grow-1{
		flex: 1;
	}
}

div.cl-google-ads{
	margin-bottom: 15px;
	margin-top: 15px;

&.centered{
		display: flex;
		flex-direction: row;
		justify-content: center;
		overflow: hidden;
		margin-left: 15px;
		margin-right: 15px;
	}
}

[data-href]{
	cursor: pointer;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 lighten($red, 9);
	}

70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

[-] style.master.scss [edit]
[+] ..
[-] run4 [edit]
[-] run1 [edit]
[+] .sass-cache
[-] style.mq.scss [edit]
[-] style.dark.scss [edit]
[-] run3 [edit]
[-] style.custom.scss [edit]
[-] run2 [edit]