/*============================ Links ===============================*/

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
  color: inherit;
  text-decoration: none;
    font-weight: inherit; 
}

.link-unstyled2, .link-unstyled2:link, .link-unstyled2:hover {
  color: inherit;
  text-decoration: underline;
    font-weight: inherit; 
}


.link-unstyled3, .link-unstyled3:link, .link-unstyled3:hover {
  color: inherit;
  //text-decoration: underline;
    font-weight: inherit; 
}

.link-unstyled3:hover {
  color: inherit;
  text-decoration: underline;
  font-weight: inherit;
  //background-color: red;
}

.nopointer {
	cursor: default;
}


/*============================ Avatars ===============================*/

/*
.mavatar-wrapper {
	width: 100%;
	height: auto;
	position: relative;
	//background-color: red;
}

.mavatar-wrapper .mavatar {
	z-index: 3;
	border: solid 3px white;
	border-radius:50%;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	color: white;
	text-align: center;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: center;
	background-size: cover;
	padding-bottom: 100.00%;
}

.mavatar-wrapper .mavoverlay {
	border: solid 3px white;
	border-radius:50%;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	color: white;
	text-align: center;
	background-color: rgba(0,0,0,0);
	background-size: cover;
	padding-bottom: 100.00%;
}

.mavatar-wrapper > .mavoverlay:hover {

	background: rgba(0,0,0,0.2);
	cursor: pointer;
}

.userStatus {
	z-index: 5;
    position:absolute;
	//top: 140px;
	//left: 20px;
	margin-left: 10%;
	margin-top: 10%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color:red;
}

*/

.card-body .mavatar-outerwrapper {
	position: relative;
	display: inline;
	margin: auto;
	margin-top: -2.5%;
	height: 60px;
	width: 60px;
	text-align: center;
}

.card-body .userStatus {
	z-index: 5;
	position:absolute;
	//bottom: calc(20% - 8px);
	//right: calc(35% - 8px);
	bottom: 4px;
	right: 4px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
	margin: 0px;
}

.card-body .userStatus.active {
	border: 2px solid #fff;
	background-color: #69cf19;
	//background-color: blue;
}


.mavatar-wrapper2 .mavatar:before {
  content:'';
  position: relative;
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}

.mavatar-wrapper2 .mavatar {
	position: relative;
	min-width: 60px;
	max-width:100px;
	text-decoration: none;
	display: inline-block;
	outline: none;
	cursor: pointer;
	border: solid 2px white;
	color: white;
	background-color: #ccc;
	border-radius: 100%;
	overflow: none;
	text-align: center;
	padding:0;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: center;
	background-size: cover;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.userStatus {
	z-index: 5;
	position:absolute;
	//bottom: calc(20% - 8px);
	//right: calc(35% - 8px);
	bottom: 8px;
	right: 12px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
	margin: 0px;
}

.userStatus.active {
	border: 2px solid #fff;
	//background-color: #69cf19;
	background-color: red;
	
}

.modal .mavatar-wrapper2 .mavatar {
	cursor: default;
}

.iconsocial-outerwrapper {
	position: relative;
	margin: auto;
	height: 72px;
	width: 72px;
}


.iconsocial-wrapper .iconsocial:before {
  content:'';
  position: relative;
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}

.iconsocial-wrapper .iconsocial {
	position: relative;
	min-width: 72px;
	max-width: 72px;
	text-decoration: none;
	display: inline-block;
	outline: none;
	cursor: pointer;
	//border: solid 2px white;
	//color: white;
	//background-color: #ccc;
	border-radius: 25%;
	overflow: none;
	text-align: center;
	padding:0;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: center;
	background-size: cover;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}


/*============================ Channel Header ===============================*/

#headerContainer  .mavatar-outerwrapper {
	position: relative;
	display: inline;
	margin: auto;
	margin-top: -2.5%;
	height: 200px;
	width: 200px;
	text-align: center;
}

#headerContainer .mavatar-wrapper2 .mavatar{
	cursor: auto;
	min-width: 90%;
	margin: auto;
	border: 3px solid #fff;
}

#headerContainer .mavatar-outerwrapper .userStatus {
	z-index: 5;
    position:absolute;
	bottom: calc(20% - 8px);
	right: calc(25% - 8px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
}

#headerContainer  .mavatar-outerwrapper .userStatus.active {
	border: 2px solid #fff;
	background-color: #69cf19;
}




/*============================ Modal ===============================*/

.modal .mavatar-wrapper2 .mavatar {
	min-width: 100px;
}

.modal .mavatar-outerwrapper {
	position: relative;
	margin: auto;
	height: 100px;
	width: 100px;
	//background-color:magenta;
}

.modal .mavatar-outerwrapper .userStatus {
	z-index: 5;
    position:absolute;
	bottom: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
}

.modal .mavatar-outerwrapper .userStatus.active {
	border: 2px solid #fff;
	background-color: #69cf19;
}


/*============================ Profile Settings ===============================*/
#avatarCustomImage .mavatar-outerwrapper {
	position: relative;
	margin: auto;
	height: 180px;
	width: 180px;
}

#avatarCustomImage .mavatar-wrapper2 .mavatar {
	position: relative;
	min-width: 180px;
	max-width: 300px;
}


/*============================ Email ===============================*/
.emaillist .mavatar-wrapper2 .mavatar, #emaildetailHeader .mavatar-wrapper2 .mavatar{
	min-width: 60px;
}

.emaillist .mavatar-outerwrapper, #emaildetailHeader .mavatar-outerwrapper {
	position: relative;
	margin: auto;
	height: 60px;
	width: 60px;
}

.emaillist .userStatus, #emaildetailHeader .userStatus {
	z-index: 5;
    position:absolute;
	bottom: 3px;
	right: 3px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
}

.emaillist .userStatus.active, #emaildetailHeader .userStatus.active {
	z-index: 5;
    position:absolute;
	bottom: 3px;
	right: 3px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #69cf19;
}

#emailDiv .mavatar-wrapper2 .mavatar {
	min-width: 42px;
}

#emailDiv .mavatar-outerwrapper {
	position: relative;
	margin: auto;
	height: 42px;
	width: 42px;
}

.modal-body .emoji-wysiwyg-editor {
    padding: 8px;
    padding-right: 35px;
    margin-bottom: 0px;
    min-height: 85px;
    height: 80px;
    overflow: auto;
    line-height: 20px;
    border: solid 1px #ebebeb;
    border-radius: 6px;
}

.emaillist-wrapper {
	//background: green;
	margin: 0px;
	padding: 0px 10px 0px 10px;
}

.emaillist-wrapper .emaillist-body {
	padding: 8px 8px 0px 0px;
	border-radius: 6px;
	transition: background-color 0.3s ease;
  	cursor: pointer;
  	//background: cyan;
}

.emaillist-wrapper .emaillist-body.active {
	background-color: #EAEDF2;
	border-radius: 6px;
}

.emaillist-wrapper .name, #emaildetailHeader .name  {
	display: inline;
	margin-left: 0px;
	margin-right: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: black;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	text-align: bottom;
	//background-color: red;
}

.emaillist-wrapper .name.read {
	color: #555A64;
}

.emaillist-wrapper .handle, #emaildetailHeader .handle {
	display: inline;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 12px;
	line-height: 22px;
	text-align: bottom;
	//background-color: red;
}

.emaillist-wrapper .title{
	display: inline;
	margin-left: 0px;
	margin-right: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 16px;
	line-height: 22px;
	text-align: bottom;
	//background-color: red;
}

.emaillist-wrapper .close {
	display: inline;
	margin-top: 3px;
	margin-left: 3px;
	font-size: 13px;
}

.emaillist-wrapper .time {
	display: inline;
	margin-left: 0px;
	font-size: 12px;
	min-width: 44px;
	text-align:right;
}

.emaillist-wrapper .hasRead {
	background-color:red;
	display: inline;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 3px;
	padding: 0px;
	font-size: 12px;
	color: #ff6c0c;
	//color: #3A6FF5;
}

.emaillist {
	//background-color: red;
	padding: 10px 20px 10px 10px;
	height: 680px;
	overflow-x: hidden;
	overflow-y: scroll;
}


#emailoptions-wrapper {
    height: 0px;
    opacity: 1.0;
    overflow: hidden;
    //background: red;
    padding: 0px;
    border: solid 1px #ebebeb;
    //border-right: solid 1px #ebebeb;
    //border-bottom: solid 1px #ebebeb;
}

#emailoptions {
	width: 100%;
	height: auto;
	padding: 10px;
	//background-color: green;
}

.emaillist .inbox {
	//background-color: red;
}

.emaillist .outbox {
	//background-color: green;
}


#emaildetailHeader {
	position: relative;
	//background-color: green;
	padding: 5px 0px 0px 10px;
	//padding: 0px;
	height: 70px;
	border-bottom: solid 1px #ebebeb;
	margin: 0px;
}

#emaildetailHeader .headerTitle {
	//background-color: green;
}


#emaildetail {
	position: relative;
	//background-color: yellow;
	padding: 0px 0px 0px 0px;
	//padding: 0px;
	height: 750px;
	margin: 0px;
	
}

#emailDiv {
	//background-color: cyan;
	padding: 0px 10px 0px 10px;
	height: 530px;
	margin: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
}

#emailcompose {
	position: absolute;
	bottom: 0px;
	padding: 10px 10px 10px 20px;
	//background-color: green;
	height: 150px;
	width: 100%;
	margin: 0px;
	border-top: solid 1px #ebebeb;
	//overflow: hidden;
}

.emailReceived {
	background-color: #EAEDF2;
	//background-color: green;
	padding: 10px;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: auto;
	border-radius: 0px 6px 6px 0px;
	text-align: right;
}

.emailSent {
	background-color: #EAEDF2;
	//background-color: red;
	padding: 10px;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: auto;
	border-radius: 6px 0px 0px 6px;
	text-align: left;
}

.emailDate {
	min-width: 30px;
	margin-top: 3px;
	font-size: 12px;
}

#emailcompose .form-control {

background-color: #EAEDF2 !important;
font-size: 100%;
padding: 3px;
}

#emailcompose .form-control:focus {
color: #555A64;
border-color: transparent;
outline: 0;}




/*============================ Icons ===============================*/
.smiconwrapper {
display:block;
text-align: center;
padding: 0 10 0 10;
margin-left: 5px;
margin-right: 5px;
margin-top: 4px;
margin-bottom: 0px;
}

.smicon {
display:block;
text-align: center;
margin: auto auto;
height: 30px;
opacity: 60%;
padding: 3px;
}

.smicon2 {
	display:block;
	text-align: center;
	margin: auto auto;
	height: 30px;
	opacity: 60%;
	padding: 0px;
}


.smiconwrapper .caption {
	font-size: 12px;
    display: block;
    text-align: center;
   // background-color: cyan;
    margin: auto 0;
}

.smiconspan {
margin-right: 5px;
vertical-align: middle;
display: inline-block;
}

#headerContainer .smiconspan {
padding-top: 5px;
padding-right: 0px;
margin-right: 2px;
}


.messagePost .smiconwrapper {
display:block;
text-align: center;
//background-color: green;
padding: 0 10 0 10;
margin-left: 5px;
margin-right: 5px;
margin-top: 22px;
margin-bottom: 0px;
}

.messagePost .smicon {
display:block;
text-align: center;
margin: auto auto;
height: 30px;
opacity: 60%;
padding: 3px;
}

/*============================ Biocard ===============================*/
div.biocard-wrapper {
	width: 100%;
	padding-bottom: 66.66%;
	position: relative;
	margin-bottom: 20px;
	
/* Other aspect ratios to try:
 * 100% 1:1
 * 56.25% = 16:9
 * 75% = 4:3
 * 66.66% = 3:2
 * 62.5% = 8:5
 */	
}

div.biocard-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	color: #777;
	font-size: 24px;
	text-align: center;
	border-radius: 12px;
	//background: url('/imglib/3606323_o.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: center;
	background-position-x: center;
	padding: 12px;
	border: solid 1px #ededed;
}

.biocard-wrapper .mavatar-outerwrapper, .subscriber .mavatar-outerwrapper {
	position: relative;
	margin: auto;
}

.biocard-wrapper .mavatar-wrapper2 .mavatar, .subscriber .mavatar-wrapper2 .mavatar {
	min-width: 40%;
}

.biocard-wrapper .mavatar-outerwrapper .userStatus, .subscriber .mavatar-outerwrapper .userStatus {
	z-index: 5;
    position:absolute;
	bottom: calc(20% - 8px);
	right: calc(35% - 8px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
}

.biocard-wrapper .mavatar-outerwrapper .userStatus.active, .subscriber .mavatar-outerwrapper .userStatus.active {
	border: 2px solid #fff;
	background-color: #69cf19;
}
	
.biocard-wrapper .title .name {
	font-size: 1.8vh;
}

.biocard-wrapper .title .handle {
	font-size: 1.5vh;
}


.biocard-img-top {
width: 100% ! important;
height: 120px;
object-fit: cover;
border-radius: 6px 6px 0px 0px;
}

.cardstore {
border-radius: 6px;
background-color:white;
border: solid 1px #ededed;
}

.biocard-wrapper3 .mavatar-outerwrapper{
	position: relative;
	margin: auto;
}

.biocard-wrapper3 .mavatar-wrapper2 .mavatar{
	position: absolute;
	min-width: 30%;
	max-width: 50px;
	margin-left: 10px;
	margin-top: -10%;
}

.biocard-wrapper3 .mavatar-outerwrapper .userStatus{
	z-index: 5;
    position:absolute;
	bottom: calc(20% - 8px);
	left: calc(28% - 2px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
}

.biocard-wrapper3 .mavatar-outerwrapper .userStatus.active{
	border: 2px solid #fff;
	background-color: #69cf19;
}
	
.biocard-wrapper3 .title {
	//margin-left: 35%;
	margin-top: 10px;
}

.biocard-wrapper3 .title .name {
	//font-size: 1.8vh;
}

.biocard-wrapper3 .title .handle {
	font-size: 80%;
}


/*============================ Header Container ===============================*/
#headerContainer {
z-index: 2;
padding-top: 6px;
padding-bottom: 0px;
}

/*
#headerContainer .mavatar-wrapper {
	width: 15%;
	position: absolute;
	top: -20px;
}

#headerContainer .mavatar-wrapper .mavatar {
	border: solid 3px white;
}

#headerContainer .mavatar-wrapper .mavoverlay {
	border: solid 3px white;
}

#headerContainer .mavatar-wrapper > .mavoverlay:hover {
	background: rgba(0,0,0,0.0);
	cursor: auto;
}
*/

#headerContainer .titlediv {
  margin: 0px;
  padding-top: 8px;
  padding-bottom: 0px;
  width: 100%;
}

#headerContainer .handlediv {
  margin: 0px;
  //padding-bottom: 5px;
  width: 100%;
}


/*============================ Post Card ===============================*/

/*
#postsDiv .mavatar-wrapper {
	background-color: red;
	width: 13%;
	position: absolute;
	top: 15px;
	left: 15px;
}

#postsDiv .mavatar-wrapper .mavatar {
	border: solid 3px white;
}

#postsDiv .mavatar-wrapper .mavoverlay {
	border: solid 3px white;
}
*/


.cardHeader .mavatar-outerwrapper{
	position: relative;
	display: inline;
	margin: auto;
	height: 100px;
	width: 100px;
}

.cardHeader .mavatar-wrapper2 .mavatar{
	min-width: 100px;
	background-color: green;
}

.cardHeader .userStatus{
	z-index: 5;
    position:absolute;
	bottom: 8px;
	right: 8px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
}

.cardHeader .userStatus.active{
	z-index: 5;
    position:absolute;
	bottom: 8px;
	right: 8px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #69cf19;
}



.postcard-img-top {
width: 100% ! important;
object-fit: cover;
}

.postText {
background-color: #EAEDF2;
//color: white;
padding: 1em;
font-size: 28px;
}

.postButton {
}

.postButton:hover {
	background-color: #EAEDF2;
	//color: white;
}

i.isLiked {
	color: #FF6C0C;
}


/*============================ Subnav ===============================*/
#submenuTopContainer {
width: 100%;
z-index: 1005;
}

#submenuContainer {
width: 100%;
z-index: 2;
}

#submenuTopSection {
z-index: 500;
}

#submenuTopSection .mavatar-wrapper {
	z-index: 550;
	width: 50%;
	position: relative;
	//background-color: green;
	opacity: 1.0;
	margin-top: -20px;
}


/*
#submenuTopContainer .mavatar-wrapper > .mavoverlay:hover {
	z-index: 10000;
	background: rgba(0,0,0,0.2);
	cursor: pointer;
}
*/

.stickit {
position: fixed;
top: 112px;
background-color: white;
}


/*======================= Post Carousel =========================*/

.postCarousel .banner {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(0,0,0,0.3);
  z-index: 1;
  padding: 4px 16px;
  font-size: 14px;
  color: white;
  pointer-events: none;
  border-radius: 5%;
}

.postCarousel .flickity-BigButton {
  position: absolute;
  display:block;
  top: 0px;
  height: 100%;
  width: 80px;
  background: transparent;
  z-index: 1;
  padding: 0px 0px;
}

.postCarousel .flickity-BigButton.previous {
  left: 0px;
}

.postCarousel .flickity-BigButton.next {
  right: 0px;
}

.postCarousel .flickity-button {
  background: transparent;
}

.postCarousel .flickity-prev-next-button {
  //padding: 5px;
  width: 50px;
  height: 30px;
  border-radius: 5%;
  border: none;
  //background: rgba(0,0,0,0.2);
  z-index: 5;
}

.postCarousel .flickity-button-icon {
  fill: white;
}

.postCarousel .flickity-button:disabled {
  display: none;
}

.postCarousel .flickity-prev-next-button:hover {
    box-shadow: none;
    //background: rgba(0,0,0,0.1);
    border: none;}

.postCarousel .flickity-prev-next-button.previous {
  left: 10px;
}
.postCarousel .flickity-prev-next-button.next {
  right: 10px;
}

.postCarousel .flickity-page-dots {
  bottom: 10px;
}

.postCarousel .flickity-page-dots .dot {
  width: 6px;
  height: 6px;
  opacity: 1;
  background: transparent;
  border: 1px solid white;
}

.postCarousel .flickity-page-dots .dot.is-selected {
  background: white;
}

.postGalleryThumbs {
	//background-color: red;
	padding-top: 6px;
	padding-bottom: 0px;
}

.postGalleryThumbs .galleryCarousel-cell {
  display: block;
  height: 100px;
  //width: auto;
  /* set min-width,
     allow images to determine cell width */
  min-width: 100px;
  max-width: 100%;
  margin-right: 0px;
  margin-left: 0px;
  /* vertically center */
  top: 50%;
  transform: translateY(-50%)
}

.postGalleryThumbs .galleryCarousel-cell img {
  object-fit: cover;       /* Scale the image so it covers whole area, thus will likely crop */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}


#ermellipsis {
    box-sizing: border-box
} 

#ermellipsis .container {
	z-index: 1000;
	align-center;
	vertical-align:middle;
	text-align: left;
    padding: 0px;
    max-width: 100px;
}

#ermellipsis a.menuButton {
    color: transparent;
    //background-color: yellow;
    font-weight: 100; 
    display: block;
    margin: 0;
    padding: 10 10 10 0;
    width: 100%;
}

#ermellipsis a.menuButton:hover{
  font-weight: 100;
  color:black;
}

.commentText:hover + #ermellipsis a {color: black; }	
    	
.card-header a {
color: #444;
}

.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}

	
    
.tableheader a.selected {
color: #ff6c0c;
}

.tableheader a {
color: white;
}


.myroundedcorner {
  border-radius: 1.5rem !important; 
}

.ERMTextArea {
background: #EAEDF2;
color: rgba(85, 90, 100, 0.45);
}


.fadeout {
	position: relative;
}

 .fadeout::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
	background: -webkit-linear-gradient(
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 1) 100%
	);
	background-image: -moz-linear-gradient(
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 1) 100%
	);
	background-image: -o-linear-gradient(
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 1) 100%
	);
	background-image: linear-gradient(
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 1) 100%
	);
	background-image: -ms-linear-gradient(
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 1) 100%
	);
}


div.circle-avatar{
width: 9rem;
height: 9rem;
display:block;
border-radius:50%;
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #ffffff;
}


div.circle-avatar2{
/* make it responsive */
//max-width: 100%;
width: 6rem;
height: 6rem;
display:block;
/* div height to be the same as width*/
//padding-top:100%;

/* make it a circle */
border-radius:50%;

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;

}




.lione {

//border-bottom: 3px solid #ff6c0c;
margin: 0px 10px 0px 10px;
padding-bottom: 5px;
}

.lione.active {

border-bottom: 3px solid #ff6c0c;
margin: 0px 10px 0px 10px;
padding-bottom: 5px;
}


.test1 {

position: relative;
top: -20px;

//border: 3px solid #ffffff;

}

.test2 {

border: 5px solid #ffffff;

}

.emoji-menu {

bottom: 60px!important; 
//z-index: 11000;

}


.container_bgimage {
padding: 0px;

background:rgba(255,255,255,1.0);
//opacity: 0.8; /* css standard */
//filter: alpha(opacity=80); /* internet explorer */

position: relative;
display: inline-block;
z-index: 1;
height: 100%;
}

.container_bgimage:hover {
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}

.container_bgimage .overlay{
    //background:rgba(0,0,255,0.2);
    color: #ffffff;
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0px;
    text-align: center;
    
  }

.container_bgimage .overlay img {
margin-left: auto;
margin-right: auto;
display: block;
}



/* important backup
.container_gallerybgimage video {
width: 100%    !important;
object-fit: cover;
//width: 177.77777778vh;
min-height: 56.25vw;
min-width: 100%;
display:block;
}

.container_gallerybgimage.fitted video {
width: 100%    !important;
object-fit: fit;
min-height: 0;
min-width: 0;
}

.container_gallerybgimage.fitPost video {
width: 100%    !important;
object-fit: fit;
min-height: 0;
min-width: 0;
}
*/

.container_gallerybgimage {

position: relative;
display: block;
z-index: 1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container_gallerybgimage.fitted video {
position: relative;
display: block;
width: 100%    !important;
object-fit: fit;
min-height: 0;
min-width: 0;
}

.container_gallerybgimage.cover video {
width: 100%    !important;
object-fit: cover;
//width: 177.77777778vh;
min-height: 56.25vw;
min-width: 100%;
display:block;
}

.container_gallerybgimage {
//background-color: cyan;
}

.container_gallerybgimageWrapper {
width: 50%;
height:auto;
min-width: 45vh;
margin: auto auto;
}

.container_gallerybgimageWrapper {
width: 100%;
height:auto;
min-width: 0;
margin: auto auto;
}

.container_gallerybgimageWrapper.portrait {
width: 40%;
height:auto;
min-width: 38vh;
margin: auto auto;
}

.container_gallerybgimageWrapper video {
display:block;
object-fit: fit;
min-height: 0;
min-width: 0;
//left: 50%;
//transform: translateX(-50%);
}


.container_gallerybgimage.fitPost {
//background-color: green;
height: 50vh;

}


.container_gallerybgimage.fitPost video {
position: relative;
width: auto;
height: 100%;
object-fit: fit;
min-height: 0;
min-width: 0;
left: 50%;
transform: translateX(-50%);
  
}


.container_gallerybgimage:hover {
opacity: 1;
filter: alpha(opacity=100);
}

.container_gallerybgimage .overlay{
    background: transparent;
    color: #ffffff;
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0px;
    //text-align: center;
}

.container_gallerybgimage .overlay .buttonWrapper {
width: 50%;
height: 50%;
border: 0;
padding: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; 

}

.container_gallerybgimage .overlay .playButton {
color: white;
background-color: #EAEDF2;
height: 60px;
width: 60px;
border: 0;
border-radius: 100%;
padding: 0px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; 
}

.container_gallerybgimage .overlay .playButton:hover {
cursor: pointer;
background-color: #FF6C0C;
}

.container_gallerybgimage .overlay .playButton svg {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container_gallerybgimage .playButton svg path {
    fill: #333;
}

.container_gallerybgimage .playButton:hover svg *,
.container_gallerybgimage .playButton:hover {
  fill: #FFFFFF;
}


.galleryWrapper {
background-color: white;
padding: 0.5rem;
}

.grid {
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item-width2 {
  width: 100%;
}

.grid-item {
  float: left;
  padding: 0.25rem;
}

.grid-item img {
  display: block;
  max-width: 100%;
  margin: auto;
}

@media (max-width: 800px) {
	.grid-sizer,
	.grid-item {
	width: 100%;
	}
}

/*============================ Z-Index ===============================*/
.backgroundit {
z-index: 0;
}

.foregroundit {
z-index: 1000;
}


div.circle-avatar3{
background-color: red;
width: 5rem;
height: 5rem;
display:block;
border-radius:50%;
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
background-size: cover;
}


/*============================ Gallery Edit ===============================*/

.imageWrapper {
position:relative;
border-radius: 0.3125rem !important;
}

.imageWrapper:hover .overlay {
   background:rgba(0,0,0,0.2);
	border-radius: 0.3125rem !important;
}


.round-button svg {
position: relative;
padding: 0px;
width: 40px;
height: 100%;
pointer-events: none;
margin: auto 0;
fill: #333;
}

.round-button{
  min-width: 60px;
  max-width:120px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  background-color: rgba(255,255,255,0.6);
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding:0;
  margin: 0 auto;
}

.round-button:hover{
  background-color: #FF6C0C;;
}

.round-button:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}

.round-button:hover svg *,
.round-button:hover {
  fill: #FFFFFF;
}


/*============================ Gallery Summary for Images/Video ===============================*/

.activeButton {
	text-decoration: underline;
}

.stamp.center-cropped {
  object-fit: cover;       /* Scale the image so it covers whole area, thus will likely crop */
  object-position: center; /* Center the image within the element */
  height: 80px;
  width: 80px;
}

.imagesDivWrapper .center-cropped {
  object-fit: cover;       /* Scale the image so it covers whole area, thus will likely crop */
  object-position: center; /* Center the image within the element */
  height: 360px;
  width: 360px;
}

.imagesDivWrapper .overlay {
    pointer-events:none;        
}

.imagesDivWrapper .subscribeButton {
    pointer-events:auto;
}

.imagesDivWrapper .unlockButton {
    pointer-events:auto;
}

.videoicon {
position: absolute;
top: 14px;
left: 14px;
margin: auto;
color: white;
}

.videoduration {
background-color: rgba(0,0,0,0.2);
font-size: 14px;
position: absolute;
top: 14px;
right: 14px;
margin: auto;
color: white;
padding: 5px;
border-radius: 3px;
}

.filter-white {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(105%) contrast(101%);
}

.galleryicon1 {
position: absolute;
top: 10px;
left: 10px;
margin: auto;
color: white;
}

.galleryicon2 {
position: absolute;
top: 10px;
right: 10px;
margin: auto;
color: white;
}

.noroundedcorner {
  border-radius: 0rem !important; 
}

.myroundedcorner2 {
  border-radius: 0.5rem !important; 
}


.liked {
border: solid 1px #999;
}

.favorited {
border: solid 1px #999;
}

.followed {
border: solid 1px #999;
}

#headerContainer .storeblock {
	margin-left: auto !important;
	margin-right: auto !important;
	//text-align: center;
        text-align: left;
}

@media screen and (min-width: 32em){
    #headerContainer .storeblock {
        text-align: left;
}
}

#headerContainer .userblock {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: left;
}

.emoji-wysiwyg-editor.form-control {
background-color: #EAEDF2 !important;
font-size: 100%;
padding: 3px;
}

.emoji-wysiwyg-editor.form-control:focus {
color: #555A64;
border-color: transparent;
outline: 0;}


.stVars {
background-color: #999;
color: #fff;
}

.stVars span {
margin-right: 10px;
}

.commentsMore {
padding: 10px 10px 0px 30px;
}

a.commentsMore {
text-decoration: underline;
}

.loadMoreRepliesDiv {
//background-color: red;
text-align: right;
padding-right: 20px;
font-size: 90%;
}

.progress {
    //position: relative;
	height: 40px;
	
  background-color: #EAEDF2;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.progress-bar {
	height: 40px;
}

.progressVote.progress:hover {
	background-color:#ff6C0C;
	color: white;
	cursor: pointer;
}

.progressVote.progress:hover .voteNow a {
	color:white;
}

.progress-answer {
right: 10px;
margin-top: auto;
margin-bottom: auto;
text-align:right;
}

.progress-votes {
right: 10px;
margin-top: auto;
margin-bottom: auto;
text-align:right;
}

.voteNow {
text-align: center;
width: 100%;
margin-top: auto;
margin-bottom: auto;
font-size: 16px;
}

.myvote {
color: #ff6C0C;
font-weight: bold;
}

.container_poll {
padding: 0px;
position: relative;
display: block;
z-index: 1;
height: 100%;
}

.pollOverlay{
	display: none; ! important;
    background:rgba(255,255,255,0.8);
    //color: #ffffff;
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0px;
    text-align: center;
  }

.container_poll .pollOverlay img {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 20% auto;
}

.rarity1 {
background-color: #cccccc;
color: white;
}

.collected .rarity1 {
background-color: #6991db;
color: white;
}

.rarity2 {
background-color: #cccccc;
color: white;
}

.collected .rarity2 {
background-color: #4eac59;
color: white;
}

.rarity3 {
background-color: #cccccc;
color: white;
}

.collected .rarity3 {
background-color: #b08d57;
color: white;
}

.rarity4 {
background-color: #cccccc;
color: white;
}

.collected .rarity4 {
background-color: #BCC6CC;
color: white;
}

.rarity5 {
background-color: #cccccc;
color: white;
}

.collected .rarity5 {
background-color: #d4af37;
color: white;
}

.collected .rarity0 {
background-color: #cccccc;
color: white;
}

.collectibleCard img{
	opacity: 0.5;
}

.collectibleCard.collected img{
	opacity: 1.0;
}

.collectibleCard img.thumb{
	display:none;
}

.collectibleCard.collected img.thumb{
	display:block;
}

.collectibleCard img.placeholder{
	display:block;
}

.collectibleCard.collected img.placeholder{
	display:none;
}

.unpack {
		cursor: pointer;
	}
	
.cardsWrapper {
	width: 372px;
}

.newCollectiblesWrapper {
	width: 372px;
}