/*
  Author      : Ultimate Member
  Plugin      : Ultimate Member pro
  Description : Frontend styles of the UM Wall library
*/

/**********/
/* Common */
/**********/

/* variables */
.um-wall {
	--um-wall-color-light: var(--um-gray-25, #fcfcfd);
	--um-wall-color-light-medium: var(--um-gray-300, #d0d5dd);
	--um-wall-color-medium: var(--um-gray-400, #98a2b3);
	--um-wall-color-dark-medium: var(--um-gray-600, #475467);
	--um-wall-color-dark: var(--um-gray-900, #101828);
	--um-wall-color-btn-bg: var(--um-blocks-button-bg-color, #7856ff);
	--um-wall-color-btn-bg-hover: var(--um-blocks-button-bg-hover-color, #6c4de6);
	--um-wall-color-btn-text: var(--um-blocks-button-fg-color, #ffffff);
	--um-wall-font-size: 16px;
	--um-wall-gap: 13px;
	--um-wall-gap-small: 8px;
	--um-wall-height-btn: 40px;
	--um-wall-radius: 10px;
	--um-wall-radius-btn: 8px;
	--um-wall-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* font */
.um-wall {
  color: var(--um-wall-color-dark-medium);
	font-family: inherit;
	font-size: var(--um-wall-font-size);
}

/* access and visibility */
.um-wall .um-wall-hidden{
	display: none;
}
.um-wall .um-wall-invisible{
	border: none;
	display: block;
	height: 0;
	margin: 0;
	width: 0;
	overflow: hidden;
	outline: none;
}
.um-wall .um-disabled {
	cursor: no-drop;
}
.um-wall .um-wait {
	cursor: wait;
	opacity: 0.6;
}

/* links */
.um-wall a,
.um-wall .um-link,
.um-wall [data-um-action] {
	color: inherit;
  cursor: pointer;
	text-decoration: none;
}
.um-wall .active.um-link,
.um-wall .active[data-um-action],
.um-wall .um-link:hover,
.um-wall [data-um-action]:hover {
	color: var(--um-wall-color-btn-bg);
}

/* images */
.um-wall .um-wall-avatar img {
	border-radius: 50%;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* button */
.um-wall button.um-wall-btn{
  background-color: var(--um-wall-color-btn-bg);
	border: none;
	border-radius: var(--um-wall-radius-btn);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	color: var(--um-wall-color-btn-text);
	font-family: inherit;
	font-size: calc(var(--um-wall-font-size)*0.9);
	height: var(--um-wall-height-btn);
	line-height: var(--um-wall-height-btn);
	outline: none;
	margin: 0px;
	min-width: calc(var(--um-wall-height-btn)*2);
  padding: 0 1em;
}
.um-wall button.um-wall-btn:not(.um-disabled):not(.um-wait):hover {
  background-color: var(--um-wall-color-btn-bg-hover);
	color: var(--um-wall-color-btn-text);
	cursor: pointer;
}
.um-wall button.um-wall-btn.um-disabled {
	cursor: no-drop;
	background: var(--um-wall-color-medium);
}

/* button-icon */
.um-wall um-wall-btn-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.um-wall .um-wall-btn-group .um-wall-btnicon {
	width: calc(var(--um-wall-height-btn)*0.8);
}
.um-wall button.um-wall-btnicon {
	background: none;
  border: none;
  color: var(--um-wall-color-dark-medium);
	font-size: 20px;
	height: var(--um-wall-height-btn);
	line-height: var(--um-wall-height-btn);
	margin: 0;
	outline: none;
  padding: 0;
	text-align: center;
}
.um-wall button.um-wall-btnicon:hover {
	background: none;
  color: var(--um-wall-color-btn-bg-hover);
}
.um-wall button.um-wall-btnicon.active {
	background: none;
  color: var(--um-wall-color-btn-bg);
}
.um-wall button.um-wall-btnicon.um-disabled {
  color: var(--um-wall-color-medium);
	cursor: no-drop;
}
.um-wall button.um-wall-btnicon i {
	color: inherit;
	height: 20px;
	margin: 0;
	width: 20px;
}

/* inputs - checkbox and radio */
.um-wall label.um-wall-input{
	cursor: pointer;
	font-size: inherit;
	margin: 0;
}
.um-wall .um-wall-input input[type="checkbox"],
.um-wall .um-wall-input input[type="radio"] {
	opacity: 0;
	position: absolute;
	z-index: -1;
}
.um-wall .um-wall-input input[type="checkbox"] + *:before,
.um-wall .um-wall-input input[type="radio"] + *:before{
	font-family: 'Font Awesome 5 Free';
	margin-right: 0.3em;
}
.um-wall .um-wall-input input[type="checkbox"] + *:before{
	content: "\f0c8";
}
.um-wall .um-wall-input input[type="checkbox"]:checked + *:before{
	content: "\f14a";
}
.um-wall .um-wall-input input[type="radio"] + *:before{
	content: "\f111";
}
.um-wall .um-wall-input input[type="radio"]:checked + *:before{
	content: "\f058";
}

/* inputs - text and selects */
.um-wall select,
.um-wall input[type="date"],
.um-wall input[type="text"],
.um-wall input[type="time"] {
	background: none;
	border: 1px solid var(--um-wall-color-light-medium);
	border-radius: var(--um-wall-radius-btn);
	box-sizing: border-box;
  box-shadow: none;
	color: var(--um-wall-color-medium);
	display: block;
	font-size: inherit;
	font-family: inherit;
	height: var(--um-wall-height-btn);
	line-height: var(--um-wall-height-btn);
	margin: 0;
	outline: none;
	padding: 0 1em;
	width: 100%;
}
.um-wall select:hover,
.um-wall select:focus,
.um-wall select:focus-visible,
.um-wall input[type="date"]:hover,
.um-wall input[type="date"]:focus,
.um-wall input[type="date"]:focus-visible,
.um-wall input[type="text"]:hover,
.um-wall input[type="text"]:focus,
.um-wall input[type="text"]:focus-visible,
.um-wall input[type="time"]:hover,
.um-wall input[type="time"]:focus,
.um-wall input[type="time"]:focus-visible {
	border: 1px solid var(--um-wall-color-medium);
	color: var(--um-wall-color-dark-medium);
}

/* input with icon */
.um-wall .um-wall-field,
.um-wall .um-wall-field input,
.um-wall .um-wall-field select {
	box-sizing: border-box;
	margin: 0;
	position: relative;
	width: 100%;
}
.um-wall .um-wall-field + .um-wall-field {
	margin-top: 0.5em;
}
.um-wall .um-wall-field i,
.um-wall .um-wall-field input,
.um-wall .um-wall-field select{
	height: var(--um-wall-height-btn);
	line-height: var(--um-wall-height-btn);
}
.um-wall .um-wall-field > i {
	text-align: center;
	height: var(--um-wall-height-btn);
	width: var(--um-wall-height-btn);
}
.um-wall .um-wall-field > i:first-child {
	position: absolute;
	top: 0;
	left: 0;
}
.um-wall .um-wall-field > i:last-child {
	position: absolute;
	top: 0;
	right: 0;
}
.um-wall .um-wall-field i + input,
.um-wall .um-wall-field i + select {
	padding-left: var(--um-wall-height-btn);
}

/* list */
.um-wall ol,
.um-wall ul,
.um-wall ol li,
.um-wall ul li{
	font-family: inherit;
	font-size: inherit;
}

/* grid */
.um-wall .um-wall-grid{
	display: grid;
	grid-gap: 2px;
	grid-template-columns: repeat(3, 1fr);
	align-content: center;
	align-items: stretch;
	justify-content: center;
	justify-items: stretch;
}
.um-wall .um-wall-grid-col-1 {
	grid-template-columns: repeat(1, 1fr);
}
.um-wall .um-wall-grid-col-2 {
	grid-template-columns: repeat(2, 1fr);
}
.um-wall .um-wall-grid-col-3 {
	grid-template-columns: repeat(3, 1fr);
}
.um-wall .um-wall-grid-col-4 {
	grid-template-columns: repeat(4, 1fr);
}
.um-wall .um-wall-grid-col-5 {
	grid-template-columns: repeat(5, 1fr);
}
.um-wall .um-wall-grid-col-6 {
	grid-template-columns: repeat(6, 1fr);
}

/* flex */
.um-wall .um-wall-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--um-wall-gap);
}
.um-wall .um-wall-flex-grow {
	flex-grow: 1;
}
.um-wall .um-wall-flex-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--um-wall-gap-small);
}
.um-wall .um-wall-flex-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--um-wall-gap-small);
}

/* sidebox */
.um-wall .um-wall-sidebox {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--um-wall-gap-small);
	width: 100%;
}
.um-wall .um-wall-sidebox .um-wall-box {
	flex-grow: 1;
	flex-shrink: 1;
}
.um-wall .um-wall-sidebox .um-wall-side {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: space-between;
	width: 30px;
}
.um-wall .um-wall-sidebox .um-wall-side > * {
	box-sizing: border-box;
	line-height: 30px;
	max-height: 30px;
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* panel: head, body, foot */
.um-wall .um-wall-panel {
  background-color: var(--um-wall-color-light);
  border: 1px solid var(--um-wall-color-light-medium);
	border-radius: var(--um-wall-radius);
	box-shadow: var(--um-wall-shadow);
}
.um-wall .um-wall-panel > div:first-of-type {
	border-radius: var(--um-wall-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.um-wall .um-wall-panel > div:last-of-type {
	border-radius: var(--um-wall-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* panel - head */
.um-wall .um-wall-head {
  border: none;
  padding: var(--um-wall-gap);
}
.um-wall .um-wall-head .um-wall-avatar {
	height: auto;
  width: 40px;
}
.um-wall .um-wall-head .um-wall-avatar a {
	margin: 0px;
	height: auto;
	width: 100%;
}
.um-wall .um-wall-head .um-wall-post-details .um-wall-post-author{
  font-size: var(--um-wall-font-size);
  font-weight: 500;
}
.um-wall .um-wall-head .um-wall-post-details .um-wall-post-details{
  color: var(--um-wall-color-dark-medium);
  font-weight: normal;
  line-height: 1.4em;
	font-size: calc(var(--um-wall-font-size)*0.9);
}

/* panel - body */
.um-wall .um-wall-body {
  background-color: var(--um-wall-color-light);
  border: none;
}
.um-wall .um-wall-body .um-wall-divider {
  background-color: var(--um-wall-color-light-medium);
	border: none;
	height: 1px;
	margin: 0 var(--um-wall-gap);
	padding: 0;
}
.um-wall .um-wall-body .um-wall-oembed iframe {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.um-wall .um-wall-body .um-wall-heading {
	margin: 0;
	padding-bottom: var(--um-wall-gap);
	text-align: center;
}
.um-wall .um-wall-body .um-wall-section {
  padding: var(--um-wall-gap);
  padding-top: 0;
}

/* panel - foot */
.um-wall .um-wall-foot {
  background-color: var(--um-wall-color-light);
  border: none;
	gap: var(--um-wall-gap);
  padding: var(--um-wall-gap);
}
.um-wall .um-wall-foot .um-wall-actions {
	display: flex;
	align-items: center;
	gap: var(--um-wall-gap);
}
.um-wall .um-wall-foot .um-wall-privacy select {
	font-size: calc(var(--um-wall-font-size)*0.9);
	height: 22px;
	line-height: 22px;
	padding: 0px 18px;
}

/************/
/* Postform */
/************/

/* Content section */
.um-wall .um-wall-form .um-wall-content textarea.um-wall-textarea,
.um-wall .um-wall-form .um-wall-content textarea.um-wall-textarea:hover,
.um-wall .um-wall-form .um-wall-content textarea.um-wall-textarea:focus {
	border: none;
	box-sizing: border-box;
	display: block;
	font-family: inherit;
	font-size: var(--um-wall-font-size);
	height: 90px;
	min-height: 90px;
	max-height: 270px;
	margin: 0px;
  outline: none;
  padding: 5px;
	resize: none;
	width: 100%;
}

/* Emoji picker */
.um-wall .um-wall-form .um-wall-emoji-picker {
	display: none;
	position: absolute;
	z-index: 2;
}

/* Photos */
.um-wall .um-wall-form .um-wall-images .um-wall-images-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--um-wall-gap-small);
}
.um-wall .um-wall-form .um-wall-images .um-wall-image {
	max-width: 50%;
	position: relative;
}
.um-wall .um-wall-form .um-wall-images .um-wall-image img {
	max-height: 200px;
	max-width: 100%;
}
.um-wall .um-wall-form .um-wall-images .um-wall-image-remove {
	position: absolute;
	right: 0px;
	top: 0px;
	color: var(--um-wall-color-btn-text);
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.15);
	display: block;
	padding: 6px;
	text-align: center;
}
.um-wall .um-wall-form .um-wall-images .um-wall-image-remove:hover {
	background-color: rgba(0, 0, 0, 0.3);
	text-shadow: 0 1px 2px #ccc;
}
.um-wall .um-wall-form .um-wall-images .um-wall-image-remove i {
	display: block;
	height: 1em;
	line-height: 1em;
	width: 1em;
}

/* Poll */
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-list {
	list-style: none;
	padding: 0;
}
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-list li,
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-add {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--um-wall-gap-small);
}
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-list li {
	margin-bottom: var(--um-wall-gap-small);
}
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-add {
	margin: 0;
}
.um-wall .um-wall-form .um-wall-poll i {
	min-width: 1em;
	text-align: center;
}
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-list li:first-of-type i.fa-angle-up,
.um-wall .um-wall-form .um-wall-poll .um-wall-poll-list li:last-of-type i.fa-angle-down {
	cursor: default;
	opacity: 0.5;
}

/* Location */
.um-wall .um-wall-form .um-wall-map {
	margin-top: 0.4em;
}

/**************/
/* Wall posts */
/**************/

/* post */
.um-wall .um-wall-post {
  margin-top: 1em;
}

/* head */
.um-wall .um-wall-post .um-wall-head .um-wall-post-details span+span::before {
  content: "\00b7";
  margin: 0 4px;
}
.um-wall .um-wall-post .um-wall-head .um-wall-post-dialog {
	align-self: flex-start;
  cursor: pointer;
  position: relative;
}
.um-wall .um-wall-post .um-wall-head .um-wall-post-dialog li > * {
	color: var(--um-wall-color-dark-medium);
	cursor: pointer;
	text-decoration: none;
}
.um-wall .um-wall-post .um-wall-head .um-wall-post-dialog li > *:hover {
	color: var(--um-wall-color-btn-bg);
}

/* text */
.um-wall .um-wall-post .um-wall-text {
  color: var(--um-wall-color-dark-medium);
  line-height: 1.5em;
  word-wrap: break-word;
}

/* photos */
.um-wall .um-wall-post .um-wall-photos {
	padding: 0px;
}

/* oembed */
.um-wall .um-wall-post .um-wall-oembed {
	display: flex;
	padding: 0px;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-iframe {
	min-height: 200px;
	padding-bottom: 56%;
	position: relative;
	width: 100%;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-iframe iframe {
  left: 0;
  top: 0;
  position: absolute;
	width: 100%;
}

.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta {
	padding: 0.5em;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span {
	display: block;
	line-height: var(--um-wall-font-size);
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span.post-image {
	float: left;
	margin-right: 0.5em;
	max-width: 40%;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span.post-image img {
	width: 100%;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span.post-title {
	font-size: var(--um-wall-font-size);
	font-weight: bold;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span.post-excerpt {
	padding: 0.6em 0px;
}
.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span.post-domain {
	font-size: calc(var(--um-wall-font-size)*0.9);
	text-transform: uppercase;
}
@media screen and (max-width: 400px) {
	.um-wall .um-wall-post .um-wall-oembed .um-wall-oembed-meta span.post-image {
		float: none;
		margin-bottom: 0.5em;
		margin-right: 0px;
		max-width: none;
	}
}

/* poll */
.um-wall .um-wall-post .um-wall-poll .um-wall-poll-list {
	list-style: none;
	font-family: inherit;
	margin: 0;
	padding: 0;
}
.um-wall .um-wall-post .um-wall-poll-item {
	margin-bottom: var(--um-wall-gap-small);
}
.um-wall .um-wall-post .um-wall-poll-item > div {
	line-height: 1.2;
}
.um-wall .um-wall-post .um-wall-poll-item .um-wall-poll-item-title,
.um-wall .um-wall-post .um-wall-poll-item .um-wall-poll-percent {
	min-width: 2.5em;
}
.um-wall .um-wall-post .um-wall-poll-item.active i[class*="fa-check"] {
	color: var(--um-wall-color-btn-bg);
}
.um-wall .um-wall-post .um-wall-poll-item .um-wall-poll-bar {
	background-color: var(--um-wall-color-light-medium);
	display: block;
	height: var(--um-wall-gap-small);
	border-radius: 4px;
}
.um-wall .um-wall-post .um-wall-poll-item .um-wall-poll-bar > span {
	background-color: var(--um-wall-color-btn-bg);
	display: block;
	height: inherit;
	border-radius: inherit;
}
.um-wall .um-wall-post .um-wall-poll p {
	margin: 0;
}

/* bar  */
.um-wall .um-wall-post .um-wall-post-bar {
	padding: var(--um-wall-gap-small) var(--um-wall-gap);
}

/* reactions */
.um-wall .um-wall-post .um-wall-reactions {
	line-height: 1;
	display: flex;
	gap: 5px;
}
.um-wall .um-wall-post .um-wall-reaction {
	box-shadow: inset 0 0 1em 1em rgba(0,0,0,0.05);
	border-radius: var(--um-wall-radius);
	cursor: pointer;
	display: flex;
	gap: 4px;
	padding: 4px 8px;
}
.um-wall .um-wall-post .um-wall-reaction.active,
.um-wall .um-wall-post .um-wall-reaction:hover {
	box-shadow: inset 0 0 1em 1em rgba(0,0,0,0.1);
}
.um-wall .um-wall-post .um-wall-reaction .um-wall-reaction-count {
	cursor: pointer;
	font-weight: bold;
}
.um-wall .um-wall-post button.um-wall-button-react i {
	position: relative;
}
.um-wall .um-wall-post button.um-wall-button-react i:after {
	background-color: white;
	content: '+';
	position: absolute;
	bottom: -3px;
	right: -3px;
	font-family: sans-serif;
	font-size: 15px;
	font-weight: bold;
	height: 12px;
	line-height: 12px;
}
.um-wall .um-wall-post .um-wall-reaction-picker {
	display: none;
	position: absolute;
	z-index: 2;
}

/* disp */
.um-wall .um-wall-post .um-wall-post-bar .um-wall-disp {
	font-size: calc(var(--um-wall-font-size)*0.9);
	line-height: 20px;
}
.um-wall .um-wall-post .um-wall-post-bar .um-wall-disp .um-wall-disp-count {
	font-size: var(--um-wall-font-size);
}

/* faces */
.um-wall .um-wall-post .um-wall-faces {
	align-items: center;
	display: flex;
	gap: 5px;
}
.um-wall .um-wall-post .um-wall-faces img {
	border-radius: 50%;
	display: block;
	width: 20px;
	height: auto;
	margin: 0;
	padding: 0;
}

/* comments */
.um-wall .um-wall-comments .um-wall-comments-section {
	margin: 0;
	padding: 0 var(--um-wall-gap);
}
.um-wall .um-wall-comments-section .um-wall-comments-loop {
	margin-bottom: var(--um-wall-gap-small);
	padding: 0;
}
.um-wall .um-wall-comments-section .um-wall-comments-load {
	line-height: 1.4em;
	margin-bottom: var(--um-wall-gap-small);
	padding: 0;
}
.um-wall .um-wall-comments-section .um-wall-comments-load:not(.loading) i.fa-spinner{
	display: none;
}

/* comment */
.um-wall .um-wall-comment {
	align-items: stretch;
	padding-top: 0.5em;
}
.um-wall .um-wall-comment .um-wall-comment-data {
  line-height: 1.2em;
}
.um-wall .um-wall-comment .um-wall-comment-data .um-wall-comment-likes {
  float: right;
}
.um-wall .um-wall-comment .um-wall-comment-data .um-wall-comment-author-link {
  border: none;
  font-weight: bold;
}
.um-wall .um-wall-comment .um-wall-comment-data .um-wall-comment-text {
  color: var(--um-wall-color-dark-medium);
  word-wrap: break-word;
}
.um-wall .um-wall-comment .um-wall-comment-bar {
	font-size: calc(var(--um-wall-font-size)*0.9);
}
.um-wall .um-wall-comment .um-wall-comment-bar span+span::before {
  content: "\00b7";
  margin: 0 4px;
}
.um-wall .um-wall-comment .um-wall-comment-bar a.um-wall-comment-permalink {
  float: right;
	text-decoration: none;
}
.um-wall .um-wall-comment-hidden {
	opacity: 0.7;
}

/* comment form */
.um-wall .um-wall-comment-form {
	gap: var(--um-wall-gap);
	margin-top: var(--um-wall-gap);
	padding: 0 var(--um-wall-gap) var(--um-wall-gap);
}
.um-wall .um-wall-comments-loop .um-wall-comment-form,
.um-wall .um-wall-comment-info > .um-wall-comment-form {
	margin: var(--um-wall-gap-small) 0;
	padding: 0;
}
.um-wall .um-wall-comment-form .um-wall-comment-textarea {
	background: none;
	border: 1px solid var(--um-wall-color-light-medium);
	border-radius: var(--um-wall-radius-btn);
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	height: 3.7em;
	line-height: 1.4em;
	margin: 0px;
	min-height: 60px;
	padding: 0.3em 0.5em;
  resize: none;
	width: auto;
}
.um-wall .um-wall-comment-form .um-wall-comment-textarea:focus,
.um-wall .um-wall-comment-form .um-wall-comment-textarea:focus-visible {
	background: none;
	border: 1px solid var(--um-wall-color-medium);
  box-shadow: none;
	outline: none;
}