:root {
--poster_avatar_width:52px;
--font_grey_1:#555;
--font_grey_2:#777;
--font_grey_3:#aaa;
--font_black_1:#333;
--react_emoji_size:20px;
}

#dev_container_main {
	
	width:100%;
	min-height: 100vh;
	padding-top: 300px;
	display: flex;
	justify-content: center;
	background-color: #f1f1f1;
	font-family: "Segoe UI", Helvetica, Arial, Helvetica, sans-serif;
	font-size: 13px;
	
}
#dev_container_frame {

	width:1200px; 
	
}

#fb_posts_container {
	width: 100%;
	min-height: 200px;
	max-height: 200px;
	/*height: 200px;*/
	/*background-color: #f1f1f1*/
		/*background-color: #f1f1f1;*/
	/*font-family: "Segoe UI", Helvetica, Arial, Helvetica, sans-serif;*/
	font-size: 13px;
	transition: max-height 1s ease-in-out;



}
#fb_posts_loader {
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	transition: opacity 0.3s ease-in-out;
	/*background-color: transparent;
    background-image: linear-gradient(
320deg, #EBEEF394 0%, #DFE2E67A 95%);*/
    z-index: 2;
    opacity: .7;
/* height: 60px;
    width: 60px;*/
    /*background:url('../images/facebook-loader.svg') center center no-repeat;*/
    /*opacity: 0.5*/
}













/*// SVG styles.*/
#fb_posts_loader svg {
  animation: 2s linear infinite svg-animation;
  max-width: 100px;
}

/*// SVG animation.*/
@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg)
  }
}

/*// Circle styles.*/
#fb_posts_loader circle {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: #D0D5DB;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  stroke-width: 5px;
  transform-origin: 50% 50%;
}

/*// Circle animation.*/
@keyframes circle-animation {
  0%,
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  
  50%,
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}














.fb_frame_link {
width: 100%;
height: 100%;
position: absolute;
transition-duration: 0.3s;
z-index: 2
}

.fb_frame_link:hover  {
	background-color: rgba(255,255,255,0.3);
	
	}
.fb_row {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
		opacity: 0;
	transition: opacity 1s ease-in-out;
}

/*.fb_col {
	width: calc(calc(100% / 4) - 15px);
	position: relative;
	margin-bottom: 20px;
}
.fb_col:not(:nth-child(4n)) {
margin-right: 20px;
	}*/

.fb_post {
	background-color: white;
	border-radius: 10px;
}



.fb_post_header {
	display: flex;
	align-items: center;
	padding: 15px;

}

.fb_post_footer {
	display: flex;
	align-items: center;
	padding: 15px;
}
.fb_poster_infos {
	width: calc(100% - var(--poster_avatar_width));
	display: flex;
	align-items: center;
	flex-wrap: wrap;

}

.fb_poster_avatar {
	width: var(--poster_avatar_width);


}

.fb_poster_avatar img {
  float: left;
  width: 40px;
  height:40px;
  border-radius: 50%;
	border:1px solid #dadde8;
	padding: 1px;
/*  margin-right: 0.8rem;
  
  box-shadow: 0 0.1rem 0.2rem var(--box-shadow);*/
  transition: filter 0.2s ease;
}

.fb_poster_name {
	width: 100%;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--font_black_1);
	margin-bottom: 3px;
}

.fb_post_date {
	width: 100%;
	color: var(--font_grey_3);
	font-weight: 300;
}

.fb_post_image img{
	width: 100%;
	height: 222px;
	object-fit: cover;
}

.fb_post_content {
	padding: 0px 0px 0px 0px;
	line-height: 14px;
	height: 128px;
	position: relative;
	overflow: hidden;
}
.fb_post_message {
	padding: 0 15px;
}
.fb_post_message_masking {
	display: flex;
	align-items: center;
	font-style: italic;
	
	position: absolute;
	bottom: 35px;
	height: 45px;

	width: 100%;
background: rgb(255,255,255);
background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 3%, rgba(255,255,255,0.8785889355742297) 17%, rgba(255,255,255,0.5480567226890756) 47%, rgba(255,255,255,0.427608543417367) 86%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 3%, rgba(255,255,255,0.8785889355742297) 17%, rgba(255,255,255,0.5480567226890756) 47%, rgba(255,255,255,0.427608543417367) 86%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(255,255,255,1) 3%, rgba(255,255,255,0.8785889355742297) 17%, rgba(255,255,255,0.5480567226890756) 47%, rgba(255,255,255,0.427608543417367) 86%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);

}

.fb_post_message_masking_msg {
	border-top: 1px solid #dedede;
	color: var(--e-global-color-2c05780);
	opacity: 1;
	position: absolute;
	bottom: 0;
	height: 35px;
	background-color: white;
	width: calc(100% - 30px);
	display: flex;
	align-items: center;
	margin: 0 15px;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
	box-shadow: 0px 0px 10px white;
	/*z-index: 10*/

	}
.fb_reactions_emoji {
	display: flex;
	align-items: center;
}

.fb_reactions_emoji img:first-child {
z-index: 7
}

.fb_reactions_emoji img:nth-child(0n+2) {
z-index: 6
}
.fb_reactions_emoji img:nth-child(0n+3) {
z-index: 5
}
.fb_reactions_emoji img:nth-child(0n+4) {
z-index: 4
}
.fb_reactions_emoji img:nth-child(0n+5) {
z-index: 3
}
.fb_reactions_emoji img:nth-child(0n+6) {
z-index: 2
}
.fb_reactions_emoji img:nth-child(0n+7) {
z-index: 1
}

.fb_reactions_emoji img {
	height: var(--react_emoji_size);
	width: var(--react_emoji_size);
	border: 2px solid white;
    border-radius: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
  
}
.fb_reactions_emoji img:not(:last-of-type) {
	margin-right: -4px;
}

.fb_reactions_count a {
	color: var(--font_grey_2);
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	padding-left: 2px;
}

.fb_post_footer_reactions {
	width: 25%
}

.fb_post_counter {
	width: 75%;
	font-size: 13.5px;
	font-weight: 400;
	display: flex;
	justify-content: flex-end;
	color: var(--font_grey_2);
}

.fb_share_count {
	margin-left: 10px;
}

.fb_posts_notice {
	width: 100%;
	padding: 16px;
	color: var(--font_grey_1);
	background-color: #f8f9fb;
	border: 1px solid #e3e7ee;
	border-radius: 8px;
	box-sizing: border-box;
	line-height: 1.5;
}