/* Z-Indices
3:.feelingReactorsWrapper
5:.flixWrapper > .flixTopBar
5:.SBM__MainWrapper (shopping bottom menu)
6:#btnPostCreation (btn for postcreation)
8:.popUpMenu>ul.list
8:.bottomWhiter
11:JCRT_F
11:PostCreatingButtons
13:poppedOut
14:groupPostsWrapper > .navs
14:#JCRT_F
14:flixWrapper
16:.JC_callWrapper
18:PM_F
19:PB__Wrapper //to overlap postMaker
19:#konvaEditingContainer
20:#msgMediaVeiwer //to overlap PB_Wrapper like reactionsBox
20:.componentLoaderWrapper
22:.loadingBar 

*/
:root {
	--insetTop : 0px;
	--insetBottom : 0px;
	--bgColor: #fafafa;
	--bgTopHeader: #ffffff;
	--bgLighter: #f7f7f7;
	--notificationLabelColor: #f90000;
	--gridItemMargin: 5px;
	--mainMenuHeight: 50px;
	--menuMaxWidth: 100%;
	--fontGlobal : 14px;
	--boxHeadingsBG: #fff;
	--boxHeadingColor: #000;
	--ms-overflow-style: 'auto';
	--scrollbar-width: 'auto';
	--textColor : #141414;
	--lightBlack : #5d5d5d;
	--borderRadiusHigh : 16px;
	--borderRadiusMedium : 8px;
	--borderRadiusLow : 5px;
	--orange: #ffa500;
	--yellow: #ffff00;
	--green: #0bda0b;
	--black: #000000;
	--white: #FFFFFF;
	--red: #FF0000;
	--blue: #0000FF;
	--green: #008000;
	--yellow: #FFFF00;
	--orange: #FFA500;
	--purple: #800080;
	--pink:#ff3760;
	--baby-pink: #FFC0CB;
	--brown: #A52A2A;
	--cyan: #00FFFF;
	--magenta: #FF00FF;
	--teal: #008080;
	--beige: #F5F5DC;
	--maroon: #800000;
	--navy: #000080;
	--olive: #808000;
	--peach: #FFE5B4;
	--lavender: #E6E6FA;
	--turquoise: #40E0D0;
	--indigo: #4B0082;
	--gold: #FFD700;
	--silver: #C0C0C0;
	--charcoal: #36454F;
	--ivory: #FFFFF0;
	--rust: #B7410E;
	--plum: #8E4585;
	--sky-blue: #87CEEB;
	--coral: #FF7F50;
	--moss: #8A9A5B;
}
body:not(.isMobile){
	--menuMaxWidth: 300px;
}
body{
	--standardBoxShadow: 0 1px 2px rgba(0, 0, 0, 0.10);
	--themeBoxShadow: 0px 0px 7px 0px var(--themeLightShade);
	--linearBG : linear-gradient(to right, var(--themeMainColor) 0%, var(--themeGradientBottomSec) 100%);
	--linearBGButton : linear-gradient(to top, var(--themeGradientTopSec) 0%, var(--themeMainColor) 100%);
	background: var(--bgColor);
}
body[data-theme="default"] {
	--themeBorderColor: hsl(196, 85.5%, 56.9%);
	--themeBorderColorLight: hsl(0, 0%, 89%);
	--themeGradientTop: hsl(209.4, 79.3%, 60.2%);
	--themeGradientTopSec: #754bad; /*themeGradientTop*/
	--themeMainColor: #4b66dd; /*themeDarkMainMiddleGr*/
	--themeGradientBottom: hsl(212, 79.1%, 51.2%);
	--themeGradientBottomSec: #03c3cb; /*themeDarkMainBottomGr*/
	--themeDarker: #3b52b5; /*themeDarker*/
	--themeActiveLink: hsl(199.3, 100%, 42.7%);
	--themeHoverLinks: hsl(216, 100%, 50%);
	--themeTemplatePageHeaderBG: hsl(199.3, 100%, 42.7%);
	--themeDarkerLight: hsl(201.7, 68.8%, 46.5%);
	--themeHoverBackground: #eef5fc;
	--themeActiveBackground: #f5f0fe;
	--themeMainColorOpac: hsl(204deg 87% 51% / 30%);
	--themeMsgBGOne: rgb(0 99 223 / 79%);
	--themeMsgBGSecond: rgb(0 198 255 / 33%);
	--themeLightShade : rgb(140, 168, 201);
	--themeLightColor: #d7efff;
    --themeLighterBG : hsla(209, 100%, 36%, 0.1);
    --loadingBG : #1D83E8;
}
body:not([data-theme="default"]){
    --loadingBG : var(--linearBGButton);
}
body.isMobile .scrollable {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    overflow: auto;
	transition: --var1 .5s;
}
body:not(.isMobile) .scrollable.roundCornors:hover{
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
body:not(.isMobile) .scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body:not(.isMobile) .scrollable.roundCornors::-webkit-scrollbar-track{
	background-color: transparent !important;
}
body:not(.isMobile) .scrollable::-webkit-scrollbar-track {
    background-color: #fff;
}
body:not(.isMobile) .scrollable::-webkit-scrollbar-thumb {
    background-color: #fff; /* Hidden initially */
    border-radius: 3px;
    transition: background-color 0.3s ease-in-out;
}
body:not(.isMobile) .scrollable:hover::-webkit-scrollbar-thumb {
    background-color: var(--themeMainColor); /* Gradual fade-in */
}
body:not(.isMobile) .scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--themeDarker);
}

html {
	font-size: 16px;
}

.black {
background-color: var(--black);
color: var(--black);
border-color: var(--black);
}

.white {
background-color: var(--white);
color: var(--white);
border-color: var(--white);
}

.red {
background-color: var(--red);
color: var(--red);
border-color: var(--red);
}

.blue {
background-color: var(--blue);
color: var(--blue);
border-color: var(--blue);
}

.green {
background-color: var(--green);
color: var(--green);
border-color: var(--green);
}

.yellow {
background-color: var(--yellow);
color: var(--yellow);
border-color: var(--yellow);
}

.orange {
background-color: var(--orange);
color: var(--orange);
border-color: var(--orange);
}

.purple {
background-color: var(--purple);
color: var(--purple);
border-color: var(--purple);
}

.pink {
background-color: var(--pink);
color: var(--pink);
border-color: var(--pink);
}

.baby-pink {
background-color: var(--baby-pink);
color: var(--baby-pink);
border-color: var(--baby-pink);
}

.brown {
background-color: var(--brown);
color: var(--brown);
border-color: var(--brown);
}

.cyan {
background-color: var(--cyan);
color: var(--cyan);
border-color: var(--cyan);
}

.magenta {
background-color: var(--magenta);
color: var(--magenta);
border-color: var(--magenta);
}

.teal {
background-color: var(--teal);
color: var(--teal);
border-color: var(--teal);
}

.beige {
background-color: var(--beige);
color: var(--beige);
border-color: var(--beige);
}

.maroon {
background-color: var(--maroon);
color: var(--maroon);
border-color: var(--maroon);
}

.navy {
background-color: var(--navy);
color: var(--navy);
border-color: var(--navy);
}

.olive {
background-color: var(--olive);
color: var(--olive);
border-color: var(--olive);
}

.peach {
background-color: var(--peach);
color: var(--peach);
border-color: var(--peach);
}

.lavender {
background-color: var(--lavender);
color: var(--lavender);
border-color: var(--lavender);
}

.turquoise {
background-color: var(--turquoise);
color: var(--turquoise);
border-color: var(--turquoise);
}

.indigo {
background-color: var(--indigo);
color: var(--indigo);
border-color: var(--indigo);
}

.gold {
background-color: var(--gold);
color: var(--gold);
border-color: var(--gold);
}

.silver {
background-color: var(--silver);
color: var(--silver);
border-color: var(--silver);
}

.charcoal {
background-color: var(--charcoal);
color: var(--charcoal);
border-color: var(--charcoal);
}

.ivory {
background-color: var(--ivory);
color: var(--ivory);
border-color: var(--ivory);
}

.rust {
background-color: var(--rust);
color: var(--rust);
border-color: var(--rust);
}

.plum {
background-color: var(--plum);
color: var(--plum);
border-color: var(--plum);
}

.sky-blue {
background-color: var(--sky-blue);
color: var(--sky-blue);
border-color: var(--sky-blue);
}

.coral {
background-color: var(--coral);
color: var(--coral);
border-color: var(--coral);
}

.moss {
background-color: var(--moss);
color: var(--moss);
border-color: var(--moss);
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/* make transparent link selection, adjust last value opacity 0 to 1.0 */
	padding: 0px;
	margin: 0px;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden !important;
	padding-bottom: var(--insetBottom);
    box-sizing: border-box;
	background-color: #fff;
}

body {
	overflow: hidden;
	-webkit-touch-callout: none;
	/* prevent callout to copy image, etc when tap to hold */
	-webkit-text-size-adjust: none;
	/* prevent webkit from resizing text to fit */
	-webkit-user-select: text;
	/* prevent copy paste, to allow, change 'none' to 'text' */
	/* Padding to avoid the "unsafe" areas behind notches in the screen */
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
	user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
}
body.disableScrolling{
	touch-action: none;
}
body.disableScrolling > #viewHolder > #discoverWrapper, 
body.disableScrolling > #viewHolder > #messengerWrapper > .chatsList > li > .messagesList,
body.disableScrolling > #popupCreationBox > .PB__Box > .PB__BodyWrapper{
	overflow: hidden !important;
}
h1,
h2,
h3,
h4,
h5,
h6{
	font-family: 'RalewayMedium', sans-serif;
	color:var(--textColor);
}
input[type="button"],
button,
.btnCommon,
.btnCommon > .text,
.bold{
	font-family: 'RobotoMedium', sans-serif;
}
a,
p,
span,
li,
div,
input{
	font-family: 'RobotoRegular', sans-serif;
	font-weight: normal;
}

input,
a,
div {
	outline: none;
}

a {
	text-decoration: none;
	/* no underline */
	cursor: pointer;
}
.headingGlobal{
	padding: 0px 10px;
	position: relative;
	margin-top: 5px;
}
li {
	display: inline-block;
	list-style: none;
}
  
textarea{
	font-family: inherit;
	font-size: 13px;
}
video {
	transform: scale3d(1,1,1);
	will-change: transform;
	backface-visibility: hidden;
}

.dNone {
	display: none !important;
}
.btnWithIcon{
	display: flex;
	column-gap: 5px;
}
.btnWithIcon > .icon{
	font-size: 18px;
}
.btnWithIcon > .text{
	font-size: 14px;
}
.btnCommon {
	border: none;
	cursor: pointer;
	font-size: 13px;
	color: #ffffff;
	padding: 10px 15px;
	box-sizing: border-box;
	height: 34px; /*otherwise with/without fonts have different heights*/
	border-radius: var(--borderRadiusLow);
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
    column-gap: 3px;
	flex-direction: row;
	min-width: 80px;
}
.btnSmall{
    padding: 7px;
	height: 28px;
}
.btnCommon:active {
	opacity: 1 !important;
	box-shadow: inset 0px 0px 10px 0px rgb(0 0 0 / 17%);
}
.btnCommon > .icon{
	font-size: 14px;
}
.defaultTheme .btnOK {
	color: #fff;
	background-color: var(--themeMainColor);
}

.defaultTheme .btnOK:hover {
	background-color: var(--themeDarker);
}

.defaultTheme .btnRed {
	background-color: #ef3333;
}

.btnWhite {
	color: var(--textColor);
	background-color: #f9f9f9;
	border: 1px solid #ebebeb;
}

.btnWhite:hover {
	background-color: #f7f7f7cc;
}

.btnGreen {
	background-color: #63c90f;
}
.btnShowMoreLess{
	color: var(--themeActiveLink);
    font-size: 12px;
    margin-left: 5px;
    cursor: pointer;
    margin-top: -5px;
    display: block;
    margin-bottom: 3px;
}
.disabled,
.disabled * {
	/* color: rgb(187, 187, 187) !important;
	filter: grayscale(100%); */
}

.disabled .iconSheet,
.disabled .startupsIconSheet{
	opacity: 0.65;
}

.loginDisables {
	transition: 0.5s color ease-in-out, 0.5s filter ease-in-out;
}

.standardBoxShadow {
	box-shadow: var(--standardBoxShadow);
}
.standardBoxShadowHover:hover {
	box-shadow: var(--standardBoxShadow);
}
.themeBoxShadow {
	box-shadow: var(--themeBoxShadow);
}
.standardThemeBoxShadowHover:hover {
	box-shadow: var(--themeBoxShadow);
}

.collapser{
	background-color: var(--themeBorderColorLight);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textColor);
	cursor: pointer;
	transition: transform 0.2s ease;
	box-sizing: border-box;
	transform: rotate(-90deg);
}
.collapser:hover{
	background-color: var(--bgLighter);
}
.collapser.collapsed{
	transform: rotate(0deg);
}

.JT__Wrapper {
	background-color: var(--themeBorderColor) !important;
}

.JT__Wrapper+.JT__arrow {
	border-color: var(--themeBorderColor) transparent transparent transparent !important;
}

.JTM__MainWrapper .box > li{
	color: var(--textColor);
}
.boxesWrapper.scrolling{
	background-color: var(--themeActiveLink);
}

.numberCounter > .countersWrapper{
	position: relative;
}
.numberCounter > .countersWrapper > li{
	position: absolute;
}

#header {
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	z-index: 13;
	position: fixed;
	width: 100%;
	top: 0px;
	padding-top: var(--insetTop);
	left: 0px;
	border-bottom: 1px solid var(--themeBorderColorLight);
	color: #fff;
}

#header>.dashboard {
	color: #fff;
	font-size: 30px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	height: var(--mainMenuHeight);
}

#showSideMenu {
	display: flex;
	width: 60px;
	height: var(--mainMenuHeight);
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

#friendhashLogo{
	margin-left: 15px;
}
#friendhashLogo > img{
	width:130px;
}

#mainMenu{
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	justify-content: space-between;
	min-height: var(--mainMenuHeight);
	max-height: var(--mainMenuHeight);
	transition: 0.5s width ease-in-out, 0.5s margin-left ease-in-out;
	/*Desktop View*/
	position: relative;
	max-width: 500px;
	margin: 0px 15px 0px 15px;
	border-radius: 30px;
	column-gap: 5px;
    padding: 10px 20px;
	background: linear-gradient(-90deg, var(--themeGradientBottomSec) 0%, var(--themeMainColor) 50%, var(--themeGradientTopSec) 100%);
	box-sizing: border-box;
	align-items: center;
}
#mainMenu>a.active {
	color: var(--themeDarker);
}
#mainMenu>a{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 4px;
	flex-grow:1;
	/*Desktop View*/
	color: #fff;
	margin: 8px 0px;
	padding: 7px 10px;
	z-index: 2;
	height: 20px;
}
#mainMenu>a>span.text{
	font-size: 14px;
}
#mainMenu>a.active>span.icon{
	background-image: linear-gradient(var(--themeMainColor), var(--themeGradientTop));
    color: transparent;
    background-clip: text;
}
#mainMenu>a.dashboard>span.icon {
	font-size: 24px;
}
#mainMenu>a.discover>span.icon {
	font-size: 24px;
}
#mainMenu>a.messenger>span.icon {
	font-size: 22px;
}
#mainMenu>a>span.counter {
	background-color: #ed0000;
    border-radius: 17px;
    min-width: 17px;
    text-align: center;
    margin-left: 5px;
    min-height: 17px;
    color: #fff !important;
    display: none;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
}
#mainMenu>a.flix>span.icon {
	font-size: 28px;
}

.fullCoverBG{
	position: fixed;
	opacity:0;
	transition: 0.25s opacity ease;
    width: 100%;
    height: calc(100% - var(--insetBottom));
    top: 0px;
    left: 0px;
	z-index: 7;
	background-color: rgb(0 0 0 / 50%);
	visibility: hidden;
}


#header>.quickButtonsBox {
	display: flex;
	flex-direction: row;
	padding: 0px 20px 0px 0px;
	align-items: center;
}

#header>.quickButtonsBox>.topQuickButtons {
	display: flex;
	flex-direction: row;
}

#header>.quickButtonsBox>.topQuickButtons>li {
	margin-right: 5px;
	display: flex;
	align-items: center;
	color: var(--textColor);
}

#header>.quickButtonsBox>.topQuickButtons>li:hover {
	color: var(--themeActiveLink);
}

#header>.quickButtonsBox>.topQuickButtons>li:last-child {
	margin-right: 0px;
}

#header>.quickButtonsBox>.topQuickButtons>li>span.icon {
	width: 50px;
	height: 50px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header>.quickButtonsBox>.topQuickButtons>li.search>div {
	width: 200px;
}
#header>.quickButtonsBox>.topQuickButtons>li>span.btnSearch {
	font-size: 27px;
	display: none;
}
#header>.quickButtonsBox>.topQuickButtons>li>span.Notifications {
	font-size: 19px;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList{
	min-width: 250px;
	max-height: 400px;
    overflow: auto;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li{
    font-size: 12px;
	display: flex;
	align-items: center;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li.heading > h2{
	color: var(--themeActiveLink);
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li.noNotification{
	font-size: 14px;
    color: var(--themeLightShade);
    justify-content: center;
    text-align: center;
    width: 100%;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li > .details{
	display: flex;
    flex-direction: column;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li > .thumb{
	position: relative;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li > .thumb > .reactionIcon{
	position: absolute;
	bottom: -7px;
    left: -7px;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li > .thumb a{
	display: flex;
	align-items: center;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li > .thumb a .verifiedBadge{
	position: absolute;
    right: -5px;
    bottom: -10px;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li > .thumb a > .exploredImgBgThumb{
	width: 40px;
	height: 40px;
	border-radius: 10px;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li .who{
	display: flex;
    align-items: center;
    column-gap: 5px;
}
#header>.quickButtonsBox>.topQuickButtons>li>.notificationsList > li .timer{
	font-size: 10px;
	color: var(--textColor);
	margin-top: 3px;
}
#header>.quickButtonsBox>.topQuickButtons>li>span.QRC_F {
	font-size: 20px;
}
#headerAccountIcon{
	position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
#headerAccountIcon>span.icon {
	border-radius: 100%;
	overflow: hidden;
	border: 2px solid #fff;
}

#headerAccountIcon>span.icon>img {
	width: 40px;
}
#viewHolder {
	overflow: hidden !important;
	height: 100vh;
	transition-property: width, margin-left, background-image;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	justify-content: center;
	display: flex;
	margin-left: var(--menuWidth);
	width: calc(100% - var(--menuWidth));
}
body.isMobile #viewHolder {
	margin-left: 0px;
	width: 100%;
}

#viewHolder > *:not(.postWrapper) {
	display: none;
}
#viewHolder > .activeView, #viewHolder > .upComingPage {
	padding-top: var(--mainMenuHeight);
	display: flex !important;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
    -ms-overflow-style: var(--ms-overflow-style);
    scrollbar-width: var(--scrollbar-width);
	left:0%;
}
#viewHolder > .activeView{
	z-index: 2;
}
#viewHolder > .activeView.slowActiveViewSet{
	transition: 0.5s left ease;
}
#viewHolder > .upComingPage{
	z-index: 1;
	-webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
	position: absolute;
	transition: filter 0.3s ease;
}
#viewHolder > .upComingPage.activatingView{
	-webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
.loadingLogo{
	transition-property: opacity; 
	transition-duration: 0.5s; 
	transition-timing-function: ease-in-out;
	background: var(--loadingBG) !important;
}

.loadingBar {
	display: none;
	width: 100%;
	height: 8px;
	overflow: hidden;
	position: fixed;
	bottom: calc(0px + var(--insetBottom));
	z-index: 22;
}

.loadingBar>.progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
	background-size: 300% 100%;
	animation: progress-animation 2s linear infinite;
}
.componentLoaderWrapper {
	display: none;
	width: 44px;
	height: 44px;
	border: 3px solid var(--themeMainColorOpac);
	border-radius: 50%;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	animation: componentLoaderRotation 1s linear infinite;
	z-index: 20;
    position: fixed;
    bottom: calc(10px + var(--insetBottom));
    left: 10px;
}
.componentLoaderWrapper::after {
	content: '';  
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-bottom-color: var(--themeMainColor);
}
	  
@keyframes componentLoaderRotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
} 

@keyframes progress-animation {
	0% {
		background-position: 100%
	}

	100% {
		background-position: 0
	}
}

.topBar{
    background: var(--linearBG);
    margin: 3px;
    border-radius: var(--borderRadiusHigh);
}
.topBar > .active{
	background-color: var(--themeGradientTopSec);
    margin: 3px;
    border-radius: var(--borderRadiusHigh);
}
#shortMessagesList {
	position: fixed;
	bottom: calc(0px + var(--insetBottom));
	padding: 10px;
	display: flex;
	flex-direction: column;
	max-width: 380px;
	box-sizing: border-box;
	z-index: 50; /*used in UM_F.js*/
	align-items: start;
}
body.isMobile #shortMessagesList {
	bottom: calc(0px + var(--insetBottom) + var(--mainMenuHeight));
}

@keyframes shortMessageShow {
	0% {
		margin-bottom: -80px;
	}

	100% {
		margin-bottom: 10px;
	}
}

#shortMessagesList>li {
	max-width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: 5px;
	border-radius: var(--borderRadiusMedium);
	color: #fff;
	margin-bottom: -80px;
	background-color: var(--textColor);
	box-sizing: border-box;
	overflow: hidden;
	padding: 3px;
	animation: shortMessageShow 0.8s ease forwards;
}

#shortMessagesList>li>.icon {
	width: 30px;
	font-size: 22px;
	text-align: center;
}

#shortMessagesList>li>.headingAndMsg {
	overflow: hidden;
}

#shortMessagesList>li>.headingAndMsg>.msg {
	color: #fff;
    font-size: 12px;
    margin-top: 3px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-rendering: geometricPrecision;
    white-space: nowrap;
    column-gap: 5px;
}

#shortMessagesList>li>.icon-close {
	width: 35px;
	height: 35px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	cursor: pointer;
	color: #bfbfbf;
}

#shortMessagesList>li.permanent {
	max-width: 100%;
	padding-right: 20px !important;
}

#shortMessagesList>li.permanent>.icon-close {
	display: none !important;
}

#shortMessagesList>li.success:not(.noBorder) {
	border-left: 3px solid #20a300;
}

#shortMessagesList>li.success>.icon.indicate,
#shortMessagesList>li.success>.headingAndMsg>.heading {
	color: #20a300;
}

#shortMessagesList>li.info:not(.noBorder) {
	border-left: 3px solid #00b4df;
}

#shortMessagesList>li.info>.icon.indicate,
#shortMessagesList>li.info>.headingAndMsg>.heading {
	color: #008aab;
}
#shortMessagesList>li.info>.icon.indicate{
	font-size: 20px;
}

#shortMessagesList>li.warning:not(.noBorder) {
	border-left: 3px solid #d59e00;
}

#shortMessagesList>li.warning>.icon.indicate,
#shortMessagesList>li.warning>.headingAndMsg>.heading {
	color: #d59e00;
}

#shortMessagesList>li.warning>.icon.indicate{
	font-size: 23px;
}

#shortMessagesList>li.error:not(.noBorder) {
	border-left: 3px solid #f90000;
}

#shortMessagesList>li.error>.icon.indicate,
#shortMessagesList>li.error>.headingAndMsg>.heading {
	color: #f90000;
}

#shortMessagesList>li.error>.icon.indicate{
	font-size: 23px;
}

.sideBarHidden {
	--menuWidth: 0px;
}
.sideBarHidden > #sideMenu{
	transform: translateX(-100%);
	box-shadow: none;
}
.sideBarHidden > #sideMenu.noTransition{
	transition: unset;
	box-shadow: 5px 0px 13px -6px rgba(0, 0, 0, 0.68);
}

.sideBarFull {
	--menuWidth: var(--menuMaxWidth);
}
.sideBarFull > #sideMenu{
	transform: translateX(0%) !important;
}

#sideMenu {
	width: var(--menuMaxWidth);
	background-color: #ffffff;
	position: fixed;
	top: calc(var(--mainMenuHeight) + var(--insetTop));
	z-index: 10;
	height: calc(100% - var(--mainMenuHeight));
	box-shadow: 5px 0px 13px -6px rgba(0, 0, 0, 0.68);
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	scrollbar-width: var(--scrollbar-width);
	-ms-overflow-style: var(--ms-overflow-style);
}
body:not(.isMobile) > #sideMenu{
	transition: 0.4s transform ease-in-out; /*also checked in FL_F reseting*/	
}
#sideMenu>.menus{
	display: flex;
    flex-wrap: wrap;
    gap: 5px;
	padding: 10px;
}
#sideMenu>.menus > li{
	width: calc(33% - 5px);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadiusMedium);
}
#sideMenu>.menus > li > a {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#sideMenu>.menus > li > a>.comingSoonOrPinned{
	position: relative;
    top: 50%;
	font-size: 22px;
    transform: translateY(-50%);
	color: var(--textColor);
	margin-left: auto;
}
#sideMenu>.menus > li[data-name="sellercenter"]{
	background-color: #ffeed5;
}
#sideMenu > ul:not(.menus) a.active{
	background-color: var(--themeMainColorOpac);
}
#sideMenu a.active>.iconSheet,
#sideMenu a.active>.text,
#sideMenu a.active>.comingSoonOrPinned {
	color: var(--themeDarker) !important;
}
#sideMenu a:hover:not(.active, .optionsList a)>.text,
#sideMenu a:hover:not(.active)>.comingSoonOrPinned {
	color: var(--themeHoverLinks) !important;
}

#sideMenu>.menus > li > a>span:first-child {
	display: inline-block;
	font-size: 22px;
	margin-left: 0px;
	transition: 0.5s margin ease-in-out;
	width: 35px;
	height: 35px;
}
#sideMenu>.menus > li > a>span.text{
	width: 100%;
	color: var(--textColor);
	transition: 0.5s width ease-in-out;
	text-align: center;
}
#sideMenu>.menus > li > a>span.text,
#sideMenu > .optionsList > li > .text,
#sideMenu > .optionsList > li > a > .text,
#sideMenu > .otherLinks > li > a {
	font-size: 13px;
}

#sideMenu>.menus > li > a>span:first-child.sellerCenter {
	background-position: -64px -336px;
}
#sideMenu>.menus > li > a>span:first-child.followers {
	background-position: 0px -125px;
}

#sideMenu>.menus > li > a>span:first-child.space {
	background-position: 0px -160px;
}

#sideMenu>.menus > li > a>span:first-child.ride {
    background-position: 0px -475px;
}

#sideMenu>.menus > li > a>span:first-child.news {
	background-position: 0px -370px;
}

#sideMenu>.menus > li > a>span:first-child.communities {
	background-position: 0px -265px;
}

#sideMenu>.menus > li > a>span:first-child.shops {
	background-position: 0px -478px;
}

#sideMenu>.menus > li > a>span:first-child.orders {
	background-position: 0px -335px;
}
#sideMenu>.menus > li > a>span:first-child.tracking {
	background-position: 0px -159px;
}
#sideMenu>.menus > li > a>span:first-child.wishlist {
	background-position: -64px -369px;
}

#sideMenu>.menus > li > a>span:first-child.pages {
	background-position: 0px -230px;
}

#sideMenu>.menus > li > a>span:first-child.events {
	background-position: 0px -300px;
}

#sideMenu>.menus > li > a>span:first-child.creativePartnershipProgram {
	background-position: 0px -585px;
}

#sideMenu>.menus > li > a>span:first-child.personalize {
	background-position: 0px -405px;
}

#sideMenu>.menus > li > a>span:first-child.activity {
	background-position: 0px -55px;
}

#sideMenu>.menus > li > a>span:first-child.settings {
	background-position: 0px -440px;
}

#sideMenu > .optionsList{
	background-color: var(--bgColor);
}
.popUpMenu {
	position: relative;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.popUpMenu:not(.popUpMenuCStyles)>span.icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popUpMenu>ul.list {
	position: absolute;
	display: none;
	justify-content: left;
	flex-direction: column;
	padding: 5px;
	border-radius: var(--borderRadiusHigh);
	transition: 0.15s height ease-in-out;
	min-width: 170px;
	z-index: 8; /*to keep above .mobileListBG*/
	align-items: flex-end;
	box-sizing: border-box;
	border: 1px solid #f6f6f6;
}

.popUpMenu:not(.popUpMenuCStyles)>ul.list {
	background-color: #fff;
	min-width: auto;
}

.popUpMenu:not(.popUpMenuCStyles)>ul.list>li, #sideMenu > .optionsList > li {
	padding: 10px;
	cursor: pointer;
}

.popUpMenu > ul.list > li.innerList {
	display:none;
}
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li, #sideMenu > .optionsList > li ,
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>a, #sideMenu > .optionsList > li > a {
	flex-direction: row;
	align-items: center;
	color: var(--textColor);
	width: 100%;
	box-sizing: border-box;
	border-radius: 5px;
	column-gap: 7px;
}
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li:not(.innerList), #sideMenu > .optionsList > li,
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li:not(.innerList)>a, #sideMenu > .optionsList > li > a  {
	display: flex;
}

.popUpMenu:not(.popUpMenuCStyles)>ul.list>li:not(.selected):hover, #sideMenu > .optionsList > li:hover {
	background-color: var(--bgLighter);
}

.popUpMenu:not(.popUpMenuCStyles, .DE__DropDown)>ul.list>li>span.icon, #sideMenu > .optionsList > li > .icon,
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>a>span.icon, #sideMenu > .optionsList > li > a > .icon {
	width: 25px;
	height: 25px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	line-height: 26px;
	font-size: 18px;
	color: var(--themeDarker);
}

/* .popUpMenu:not(.popUpMenuCStyles)>ul.list>li>span.icon,
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>a>span.icon {
	margin-right: 7px;
} */

.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>span.icon.forward,
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>a>span.icon.forward {
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
}

.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>span.text, #sideMenu > .optionsList > li > .text,
.popUpMenu:not(.popUpMenuCStyles)>ul.list>li>a>span.text, #sideMenu > .optionsList > li > a > .text {
	font-size: 14px;
	white-space: nowrap;
}


.labelNotificationCounter {
	display: none;
    position: absolute;
    background-color: var(--notificationLabelColor);
    border-radius: 15px;
    text-align: center;
    line-height: 16px;
    height: 16px;
    right: 5px;
    bottom: 8px;
    padding: 1px;
    min-width: 16px;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
}

@-webkit-keyframes slideInLeft {
	from {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideInLeft {
	from {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.animate__slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
	from {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideInRight {
	from {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.animate__slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		visibility: hidden;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes slideOutLeft {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		visibility: hidden;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

.animate__slideOutLeft {
	-webkit-animation-name: slideOutLeft;
	animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		visibility: hidden;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

@keyframes slideOutRight {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		visibility: hidden;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}


@keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes fadeOut {
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@keyframes fadeInDown {
	from{
		opacity: 0;
		transform: translateY(-50px);
	}
	to{
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes fadeOutUp {
	from{
		opacity: 1;
		transform: translateY(0);
	}
	to{
		opacity: 0;
		transform: translateY(-50px);
	}
}

.animate__slideOutRight {
	-webkit-animation-name: slideOutRight;
	animation-name: slideOutRight;
}
.PB__MessageText {
	font-size: 14px;
}

.PB__Heading>span.PB__HeadingBtnClose:hover {
	color: var(--themeHoverLinks);
}

.PB__Heading {
	color: var(--themeDarker);
}

.PB__InputBox {
	border: 1px solid var(--themeBorderColor);
}

.pageTemplate {
	width: 100%;
	--pageTemplateHeight : 86px;
	background-color: #fff;
}

.pageTemplate>.header {
	display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 20px;
	padding: 15px;
	box-sizing: border-box;
	background: var(--linearBG);
	height:var(--pageTemplateHeight);
}

.pageTemplate>.header>.headingWithIcon {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 12px;
}

.pageTemplate>.header>.headingWithIcon>.icon {
	display: block;
	width: 55px;
	min-width: 55px;
	height: 55px;
}

.pageTemplate>.header>.headingWithIcon>.iconSheet {
	background-size: 158px 974px;
	border-radius: 100%;
	background-color: #fff;
	box-shadow: inset 0px 0px 14px -3px rgb(0 0 0 / 50%);
}

.pageTemplate>.header>.headingWithIcon>h2 {
	font-size: 22px;
	color: #fff;
}
.pageTemplate>.header>.headingWithIcon>.icon-pin-outline{
	font-size: 26px;
    padding: 6px;
    border-radius: 100%;
    transition: box-shadow 0.1s ease, rotate 0.1s ease;
	color: #fff;
    background-color: var(--themeActiveLink);
    cursor: pointer;
	box-shadow: inset -2px -4px 4px -3px rgb(0 0 0 / 30%);
	transform: rotate(0deg);
}
.pageTemplate>.header>.headingWithIcon>.icon-pin-outline.pinned{
	transform: rotate(-45deg);
	box-shadow: inset 0px 0px 14px -3px rgb(0 0 0 / 30%);
}
.pageTemplate>.header>.otherDetailsWrapper{
	text-align: center;
}

.pageTemplate>.contentWrapper>.quickDetails {
	margin: 20px;
}

.pageTemplate>.contentWrapper>.quickDetails>.count {
	color: #666666;
}

.pageTemplate>.contentWrapper .sectionHeading {
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px 20px;
    color: var(--themeGradientBottom);
    border-radius: 25px;
    background-color: var(--themeBorderColorLight);
}

.pageTemplate>.contentWrapper .sectionHeading > h4{
	flex: 1;
    text-align: center;
}

.noProfilePic {
	background-color: var(--themeGradientTop);
}

.sideBarProfile>a>img{
	border: 2px solid #fff;
}

.userWithStatusWrapper > .profilePictureWrapper > span.status {
	border: 2px solid #fff;
	display: block;
	width: 25%;
	height: 25%;
	max-width: 20px;
	max-height: 20px;
	border-radius: 100%;
	position: absolute;
	box-sizing: border-box;
	bottom: 0px;
    right: 2px; /*optimal for different sizes*/
}

.userWithStatusWrapper >.profilePictureWrapper > span.status.available,
#userStatusWrapper>.btnChangeStatus>.status.available {
	background-color: #34ed00;
}

.userWithStatusWrapper >.profilePictureWrapper > span.status.idle,
#userStatusWrapper>.btnChangeStatus>.status.idle {
	background-color: #ffd900;
}

.userWithStatusWrapper >.profilePictureWrapper > span.status.busy,
#userStatusWrapper>.btnChangeStatus>.status.busy {
	background-color: #ff9189;
}

.userWithStatusWrapper >.profilePictureWrapper > span.status.offline,
#userStatusWrapper>.btnChangeStatus>.status.offline {
	background-color: #a5a5a5;
}

.msgCommentBG {
	background: linear-gradient(to left top, var(--themeMsgBGOne), var(--themeMsgBGSecond));
}

.gridBoxItems {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	padding: 5px;
}

.gridBoxItems>li {
	cursor: pointer;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 15px;
}

.gridBoxItems>li:hover {
	background-color: var(--themeHoverBackground);
}

.gridBoxItems>li:hover>.text {
	color: var(--themeHoverLinks);
}

.gridBoxItems>li>.icon {
	display: block;
	width: 60px;
	height: 60px;
}

.gridBoxItems>li>.text {
	font-size: 14px;
	text-align: center;
}
#LoginBoxDashboard{
	padding: 1rem;
}

.btnPageBack {
	width: 50px;
	height: 50px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
}

.globalUserList>li, .globalUserItem {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	column-gap: 5px;
}

.globalUserList.tabStyle >li{
	background-color: #fff;
    margin: 5px;
    border-radius: 12px;
    border: 1px solid var(--bgColor);
    padding: 3px 3px;
}

.globalUserList>li>.profilePictureWrapper {
	font-size: 0px;
}

.globalUserList a.profilePictureWrapper, .globalUserItem a.profilePictureWrapper{
	position: relative;
	font-size: 0px;
}
.globalUserList .profilePictureWrapper[data-gr-border], .globalUserItem .profilePictureWrapper[data-gr-border]{
    padding: 3px;
    box-sizing: border-box;
    border-radius: 100%;
	background: var(--linearBG);
}
.globalUserList>li {
	cursor: pointer;
}

.globalUserList>li>.detailsWrapper {
	display: flex;
	width: 100%;
}
.globalUserList>li>.detailsWrapper > a{
	width: 100%;
}


.globalUserList .detailsWrapper>a>p.profileTag, .globalUserItem .detailsWrapper>a>p.profileTag{
	font-size: 12px;
	color: var(--textColor);
}

.globalUserList>li.otherText{
	margin-left: 5px;
}
.globalUserList>li:not(.otherText):hover {
	background-color: var(--themeHoverBackground);
}

.globalUserList>li:last-child {
	border-bottom: none;
}
.globalUserList img, .globalUserItem img{
	display: block;
	width: 60px;
	border-radius: 100%;
	overflow: hidden;
	aspect-ratio: 1;
    object-fit: cover;
}
.globalUserList .profilePictureWrapper[data-gr-border] img, .globalUserItem .profilePictureWrapper[data-gr-border] img{
	width: 57px;
}

.globalUserList img.noProfilePic, .globalUserItem img.noProfilePic{
	background-position: 0px -139px;
	background-size: 60px;
}

.globalUserList>li>div,
.globalUserItem>div {
	position: relative;
	font-size: 14px;
	/*flex-grow: 1; causing problem with Chat*/
	display: flex;
    justify-content: center;
	flex-direction: column;
	align-items: flex-start; /*To show Feeling tag not getting whole space*/
}
.globalUserList>li>div.nameInCenter,
.globalUserItem>div.nameInCenter {
	align-items: center;
}

.globalUserList .nameInitials, .globalUserItem .nameInitials{
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	overflow: hidden;
}

.globalUserList .nameInitials>p>.space, .globalUserItem .nameInitials>p>.space{
	display: inline-block;
	width: 1px;
	height: 1px;
}
.globalUserList>li>div>a>p.name,
.globalUserItem>div>a>p.name {
	font-size: 15px;
    display: flex;
    align-items: center;
	color:var(--textColor);
	justify-content: flex-start;
}
.globalUserList>li>div.nameInCentera>p.name,
.globalUserItem>div.nameInCenter>a>p.name {
	align-items: center;
}
.globalUserList>li>div>a>p.name > span.text,
.globalUserItem>div>a>p.name > span.text {

}
.globalUserList>li .verifiedBadge, .globalUserItem .verifiedBadge{
    color: #00a9ff;
    font-size: 18px;
    position: relative;
}
.globalUserList>li .verifiedBadge > .badgeCheck, .globalUserItem .verifiedBadge > .badgeCheck{
	position: absolute;
    font-size: 12px;
    left: 50%;
    top: 50%; /*Because otherwise Firefox and Chrome adjust different*/
    color: #fff;
    display: block;
    transform: translate(-50%, -50%);
}
.globalUserList>li .verifiedBadge.shopBadge, .globalUserItem .verifiedBadge.shopBadge{
    color: #fff;
    background-color: var(--themeGradientBottom);
	font-size: 14px;
    height: 16px;
    width: 16px;
    z-index: 1;
    border-radius: 7px;
    padding: 1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	border: 2px solid #fff;
}
.globalUserItem>.nameInitials>p {
	color: #fff;
}

.globalUserList>li>div>p.tag,
.globalUserItem>p.tag {
	font-size: 14px;
}
.commonFriends{
	display: flex;
    flex-direction: row;
	column-gap: 3px;
}
.commonFriends>li .verifiedBadge{
	position: absolute;
    right: 0px;
    bottom: -4px;
}
.commonFriends>li.otherText, .commonFriendsWrapper>h4{
	font-size: 14px;
    color: var(--textColor);
    text-align: center;
}
.userPreviewBox {
	position: fixed !important;
	width: 330px;
	display:flex !important;
	z-index: 10;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0px 0px 11px 0px var(--themeMsgBGSecond);
}

.hashTag {
	font-weight: bold;
}

.innerLoaderWrapper {
	width: 100%;
	height: 100%;
	display: none;
}

.innerLoaderWrapper.show {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.innerLoaderWrapper>.loader {
	width: 52px;
	height: 52px;
	position: relative;
	background-color: transparent;
}

.newBtnLefter {
	display: flex;
	flex-direction: row;
	justify-content: right;
	padding: 10px;
	column-gap: 10px;
}
#btnPostCreation{
	position: fixed;
	bottom: calc(12px + var(--insetBottom)); /*used in .lowered below*/
	right: 5%;
	display: flex;
	flex-direction: column;
	z-index: 6; /*Above Bottom Menu bar of Shopping*/
	transition: 0.25s bottom ease-in-out;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background: var(--linearBG);
	color: #fff;
	border-radius: 100%;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 14px -3px rgba(0, 0, 0, 0.75);
}
#btnPostCreation.lowered{
	bottom:calc(12px + var(--insetBottom)) !important;
}
#btnPostCreation.hidden{
	display:none;
}
#btnPostCreation > .uploadProgressCircle{
	display:none;
}
#btnPostCreation.create>.subOptions{
	row-gap: 10px;
	border: none;
}
#btnPostCreation.create>.subOptions>li {
	background-color: var(--themeMainColor);
	color: #fff;
	padding: 10px 15px;
	border-radius: 30px;
	box-shadow: 0px 0px 14px -3px rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	row-gap: 10px;
	position: relative;
}
#btnPostCreation.create>.subOptions>li:hover {
	background-color: var(--themeDarker);
}
#btnPostCreation.create>.subOptions>li>.text {
	font-size: 14px;
	white-space: nowrap;
}
#btnPostCreation.create>.subOptions>li>.icon {
	font-size: 20px;
	margin-right: 5px;
}
#btnPostCreation.create>.subOptions>li.newPost>.icon{
	font-size: 16px;
}
#btnPostCreation.create>.subOptions>li.productFlix>.icon-shopping-bag{
	margin-right: 15px;
}
#btnPostCreation.create>.subOptions>li.productFlix>.icon-play_circle_outline{
	position: absolute;
    top: 16px;
    left: 27px;
}
#btnPostCreation.create>.subOptions>li>.icon.storefront {
	font-size: 22px;
}
#btnPostCreation.filter {
	background-color: #ff1493;
}
#btnPostCreation.create>span {
	position: absolute;
	transition: 0.25s left ease-in-out;
}
#btnPostCreation>span.icon-feather {
	font-size: 28px;
	left: 19px;
	top: 15px;
}
#btnPostCreation>span.icon-plus {
	font-size: 24px;
	left: 4px;
	top: 6px;
}
#btnPostCreation.filter>span.icon-filter {
	font-size: 18px;
}
#btnPostCreation.creationProgress{
	width: 40px;
	height: 40px;
	background-color: #fff;
	overflow: hidden;
}
#btnPostCreation.creationProgress > .uploadProgressCircle{
	display:flex;
}
#btnPostCreation.creationProgress>span.icon-feather {
	left: 50px;
}
#btnPostCreation.creationProgress>span.icon-plus {
	left: -25px;
}

@keyframes spin {
	from {
		transform: rotate(0deg) translate(-50%, -50%);
	}

	to {
		transform: rotate(360deg) translate(-50%, -50%);
	}
}

.innerLoaderWrapper>.loader::after {
	content: "";
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	border-radius: 50%;
	border: 6px solid #fff;
	border-color: var(--themeBorderColor) transparent var(--themeBorderColor) transparent;
	animation: spin 0.8s linear infinite;
}
.limitText {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.limitedTextBody{
	text-overflow: ellipsis;
	overflow: hidden !important; /*otherwise .glbTextContent will override*/
   	display: -webkit-box !important; /*otherwise .glbTextContent will override*/
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   /* autoprefixer: ignore next */ -webkit-box-orient: vertical;
}
.glbTextContent {
	font-size: 15px;
	white-space: pre-line;
    word-wrap: break-word;
    max-height: 300px;
    overflow: auto;
    /*previously working good with "display: inline-block" but this could not vertically align text as needed for Text Style*/;
	/* display: table; //though it was pointed that don't set to flex, though you can set as table or inline-block*/
	display: inline-block; /*display:flex; causes problems*/
    width: 100%;
    box-sizing: border-box;
}
.glbTextContent.hidden{
	display:none !important;
}
.glbTextContent a{
	color:#6767ff
}
.glbTextContent.styled{
    background-position: center center;
    background-size: cover;
    max-height: 250px;
    min-height: 200px !important;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    justify-content: center;
	border-radius: 15px;
	display: table-cell;
    vertical-align: middle;
}
.glbTextContent div{
    /* To show cursor/caret when there is nothing typed and also "enter" works with it in IBWrapper*/
	/*display: inline-block;inline-block also causing problem when limitedText /flex/inline-flex is causing problem with multilines with hashtags and before that block but it is causing problem with taggedperson*/
    font-family: inherit;
    font-weight: inherit;
    white-space: normal;
	vertical-align: middle;
}
.userInputTextBox div{
	display: block !important;
}
.glbTextContent div.globalUserItem{
	margin-left: 5px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
.msgWrap .glbTextContent a{
	color: #fff !important;
}
/*
Will hide scrollBars in Desktop too so, someone without scroller in mouse won't be able to see whole content. And mobile devices hides scrollbars by default
.glbTextContent {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.glbTextContent::-webkit-scrollbar { 
    display: none;
}
*/
.postsEnd{
	margin: 20px;
    font-size: 16px;
    color: var(--textColor);
	text-align: center; /*Posts on Profile Page*/
}
.noMoreMedia{
	text-align: center;
	color: var(--textColor);
	font-size: 18px;
	padding: 5px;
}
.pagesWrapper {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.pagesWrapper > .page {
	display: none;
	background-color: #fff;
	width: 100%;
	flex-grow: 1;
}
.pagesWrapper > .page.show {
	display: flex !important;
}
.pagesWrapper > .page{
    flex-direction: column;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: var(--ms-overflow-style);
    scrollbar-width: var(--scrollbar-width);
}
.pagesWrapper>.sideMenuMainWrapper {
    border: none;
    padding: 0px !important;
}
.zoomable .TC__Img > img{
    touch-action: pinch-zoom;
    user-select: none;
    cursor: zoom-in;
	cursor: -webkit-zoom-in;
	transition: 0.25s transform ease;
}
.metaTagsWrapper{
	display: flex;
    flex-direction: column;
    margin: 5px;
    border: 1px solid var(--themeBorderColorLight);
    border-radius: 10px;
    overflow: hidden;
}
.metaTagsWrapper.smallPrev{
	flex-direction: row !important;
}
.metaTagsWrapper > .img{
	width: 100%;
    max-width: 1000px;
    margin: 0 auto;
	background-size: cover;
    background-position: center center;
}
.metaTagsWrapper.smallPrev > .img{
	max-width: 85px;
}
.metaTagsWrapper > .details{
	display: flex;
    flex-grow: 1;
    flex-direction: column;
    background-color: hsl(0deg 0% 97.79%);
    border-radius: 5px;
    padding: 5px;
}
.metaTagsWrapper > .details > h3{
	margin-bottom: 3px;
}
.metaTagsWrapper > .details > p{
	color: var(--textColor);
}
.metaTagsWrapper > .details > h3, .metaTagsWrapper > .details > p{
	font-size: 14px;
	max-height: 46px;
    overflow: hidden;
}
#sideMenu > .otherLinks{
    margin: 8px 0px;
}
#sideMenu > .otherLinks > li{
	display: block;
}
#sideMenu > .otherLinks > li > a{
	color: var(--textColor);
    padding: 7px;
    display: block;
    padding-left: 14px;
}
.rightsReserved{
	font-size: 0.75rem;
    text-align: center;
    color: var(--textColor);
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
}
.exploredImgBgThumb{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.reactionIcon{
	width: 18px;
	height: 18px;
	display: block;
	background-size: 115px 635px !important;
	bottom: 0px;
	left: 0px;
}
.reactionIcon.bordered{
	background-color: #fff;
	border-radius: 100%;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
	border: 1px solid var(--themeBorderColorLight);
}
.reactionIcon.comment{
	background-position: -75px -231px;
}
.reactionIcon.share{
	background-position: -92px -232px;
}
.reactionIcon.up{
	background-position: -74px -250px;
}
.reactionIcon.down{
	background-position: -92px -248px;
}
.reactionIcon.heart{
	background-position: -75px -268px;
}
.reactionIcon.laugh{
	background-position: -92px -268px;
}
.reactionIcon.amazed{
	background-position: -75px -286px;
}
.reactionIcon.cry{
	background-position: -92px -286px;
}
.reactionIcon.care{
	background-position: -92px -305px;
}
.reactionIcon.angry{
	background-position: -75px -304px;
}
.reactionIcon.following{
    background-position: -75px -485px;
}
.skeletonLoader {
	position: relative;
	overflow: hidden;
	background-color: #eee;
}
.skeletonLoader::after {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 100%;
	height: 100%;
	animation: skeletonShimmer 1.2s infinite;
	background-image: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, rgba(200, 200, 200, 0.6) 50%, rgba(238, 238, 238, 0) 100%);
}
.skeletonGroup{
    width: 100%;
    max-width: 570px;
    display: flex;
    gap: 10px;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
}
.skeletonFlixGroup{
    border: 1px solid var(--themeBorderColorLight);
    border-radius: var(--borderRadiusMedium);
}
.skeletonProducts{
    flex-wrap: wrap;
}
.skeletonGroup > li{
    border-radius: var(--borderRadiusMedium);
    overflow: hidden;
    position: relative;
}
.skeletonFlixGroup > li{
	min-width: 185px;
    height: 329px;
}
.skeletonProducts > li{
	width: calc(50% - 5px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--themeBorderColorLight);
    box-sizing: border-box;
}
.skeletonGroup > li > .thumb{
    display: block;
}
.skeletonFlixGroup > li > .thumb{
	width: 100%;
    height: 100%;
    position: absolute;
}
.skeletonProducts > li > .thumb{
	width: calc(100% - 20px);
    padding-bottom: 100%;
    border-radius: var(--borderRadiusHigh);
    margin: 0 auto;
    margin-top: 10px;
}
.skeletonGroup > li > .user{
    display: flex;
    align-items: center;
    column-gap: 5px;
}
.skeletonFlixGroup > li > .user{
	position: absolute;
    bottom: 30px;
    left: 10px;
}
.skeletonProducts > li > .user{
	margin: 5px 0px 5px 10px;
}
.skeletonGroup > li > .user > .pic{
	width: 40px;
    display: block;
    height: 40px;
    border-radius: 100%;
    border: 2px solid #fff;
}
.skeletonGroup > li > .user > .name{
	width: 100px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: var(--borderRadiusHigh);
    background-color: #cfcfcf;
}
.skeletonGroup > li > .desc{
	width: 120px;
    height: 15px;
    display: block;
    border: 2px solid #fff;
    border-radius: var(--borderRadiusHigh);
    left: 10px;
    background-color: #cfcfcf;
}
.skeletonFlixGroup > li > .desc{
    position: absolute;
    bottom: 5px;
}
.skeletonProducts > li > .desc{
	margin-bottom: 5px;
}
@keyframes skeletonShimmer{
	100% {
		left: 100%;
	}
}
@media screen and (max-width: 450px) {
	#header>.quickButtonsBox {
		padding-right: 10px;
	}
	@keyframes mobilePopUpShow{
		from{
			transform: translateY(100%);
		}
		to{
			transform: translateY(0%);
		}
	}
	@keyframes mobilePopUpHide{
		from{
			transform: translateY(0%);
		}
		to{
			transform: translateY(100%);
		}
	}
	.popUpMenu>ul.list.mobileView {
		position: fixed !important;
		top: unset !important;
		bottom: 0px;
		left: 0px !important;
		width: 100%;
		max-width: 100% !important;
		align-items: center;
		animation-name: mobilePopUpShow;
		animation-duration: 0.25s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
		transform: translateY(100%);
		border-radius: 15px 15px 0px 0px; /*following popupbox*/
		padding-bottom: calc(var(--mainMenuHeight) + var(--insetBottom)); /*to show last item above mainMenu & auto fill option in mobile*/
	}
	.popUpMenu>ul.list.mobileView.fullScreen {
		height: 100%;
		max-height: 100% !important;
		border-radius: 0px !important;
		padding-top: var(--insetTop);
	}
	.popUpMenu>ul.list.mobileView.hide {
		animation-name: mobilePopUpHide;
	}
}
@media screen and (min-width:700px) {
	.pageTemplate>.header>.otherDetailsWrapper{
		text-align: right;
	}
}

@media screen and (max-width:750px) {
	#header>.quickButtonsBox>.topQuickButtons>li.search>div {
		display: none;
	}

	#header>.quickButtonsBox>.topQuickButtons>li.search>.btnSearch {
		display: flex;
	}
}

@media screen and (max-width: 600px) {
	#mainMenu{
		margin-left: 0 !important;
		width: 100% !important;
	}
	#mainMenu>a>span.text{
		display: none;
	}
	#viewHolder {
		margin-left: 0px;
		width: 100%;
	}
	.fullCoverBG.show{
		opacity:1;
		visibility: unset;
	}
	#sideMenu{
		height: calc(100vh - var(--mainMenuHeight) - var(--mainMenuHeight) - var(--insetTop) - var(--insetBottom));
	}
}
@media screen and (max-width: 900px) {
	:root {
		--mainMenuHeight: 45px !important;
	}
	#viewHolder{
		height: calc(100vh - var(--mainMenuHeight) - var(--insetBottom) - var(--insetTop));
	}
	#mainMenu {
		max-width: unset;
		margin:unset;
		border-radius: unset;
		background: #fff;
		bottom: calc(0px + var(--insetBottom));
		z-index: 4;
		position: fixed;
		padding: 0px 5px;
		width: 100%;
		border-top: 1px solid var(--themeBorderColorLight);
	}
	.bottomWhiter{
		display: block;
		position: fixed;
		background-color: #fff;
		width: 100%;
		height: var(--insetBottom);
		bottom: 0px;
		z-index: 8;
	}
	#mainMenu>a>span.icon{
		color:var(--textColor);
	}
	#mainMenu>a {
		color: var(--textColor);
		margin: unset;
		padding: unset;
		z-index: unset;
		height: unset;
	}
	#mainMenu > .PMH__ActiveMenuHighlighter{
		opacity: 0 !important;
	}
	#btnPostCreation {
		bottom: calc(55px + var(--insetBottom));
	}
	body:not(.isMobile) #mainMenu{
		margin-left: var(--menuWidth);
		width: calc(100% - var(--menuWidth));
	}
	body:not(.isMobile) #mainMenu>a>span.text{
		display: none;
	}
	#header>.dashboard {
		flex-grow: 1;
	}
	#header>.quickButtonsBox>.topQuickButtons>li>span.icon {
		width: 45px !important;
		height: 45px !important;
	}
	.pageTemplate>.header>.headingWithIcon>p {
		font-size: 24px;
	}
}

@media screen and (max-width: 1000px) {
	#mainMenu {
		justify-content: space-around;
	}
	#btnPostCreation {
		right: 15px;
	}
}
@media screen and (min-width: 530px) and (max-width: 900px) {
	#header>.quickButtonsBox>.topQuickButtons>li.search>div {
		display: flex;
	}

	#header>.quickButtonsBox>.topQuickButtons>li.search>.btnSearch {
		display: none;
	}
}
@media screen and (min-width: 900px)  and (max-width: 1250px) {
	#header>.quickButtonsBox>.topQuickButtons>li.search>div {
		display: none;
	}

	#header>.quickButtonsBox>.topQuickButtons>li.search>.btnSearch {
		display: flex;
	}
}