.mm-online-wrap {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
}

.mm-online-wrap[data-mm-placement="workshop"] {
	visibility: hidden;
}

.mm-online-wrap[data-mm-placement="workshop"].mm-online-workshop-ready {
	visibility: visible;
}

.mm-online-under-workshop {
	margin: 16px auto 24px;
	padding: 20px 24px;
	border: 1px solid rgba(116, 173, 158, .18);
	border-radius: 22px;
	background: rgba(11, 30, 27, .78);
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.mm-online-workshop-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 13px;
}

.mm-online-kicker {
	display: block;
	margin-bottom: 3px;
	color: #ff7438;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.mm-online-title {
	margin: 0;
	color: #fff;
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.15;
	font-weight: 800;
}

.mm-online-status-dot,
.mm-online-dot {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: #62d26f;
	box-shadow: 0 0 0 4px rgba(98,210,111,.10);
}

.mm-online-under-workshop .mm-online-status-dot {
	width: 10px;
	height: 10px;
	flex-basis: 10px;
	box-shadow: 0 0 0 5px rgba(98,210,111,.09);
}

.mm-online-pill {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 7px;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 999px;
	background: rgba(15,18,22,.72);
	color: rgba(255,255,255,.76);
	font-size: 12px;
	line-height: 1.35;
}

.mm-online-under-workshop .mm-online-pill {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 13px;
	color: rgba(255,255,255,.72);
}

.mm-online-under-workshop .mm-online-pill .mm-online-dot {
	display: none;
}

.mm-online-pill strong {
	color: #fff;
	font-weight: 750;
}

.mm-online-divider {
	width: 1px;
	height: 14px;
	display: inline-block;
	margin: 0 3px;
	background: rgba(255,255,255,.13);
	vertical-align: middle;
}

.mm-online-sep {
	opacity: .42;
}

.mm-online-members {
	margin-top: 9px;
	color: rgba(255,255,255,.62);
	font-size: 12px;
	line-height: 1.5;
}

.mm-online-under-workshop .mm-online-members {
	padding-top: 11px;
	border-top: 1px solid rgba(255,255,255,.07);
}

.mm-online-members-label {
	color: rgba(255,255,255,.55);
}

.mm-online-member-link {
	color: #d9f5ec;
	text-decoration: none;
	border-bottom: 1px dotted rgba(217,245,236,.25);
}

.mm-online-member-link:hover,
.mm-online-member-link:focus {
	color: #fff;
	border-bottom-color: rgba(255,255,255,.65);
	outline: none;
}

.mm-online-name-sep,
.mm-online-more {
	opacity: .62;
}

.mm-online-bots-segment[hidden],
.mm-online-total-segment[hidden],
.mm-online-members[hidden] {
	display: none !important;
}

.mm-online-wrap[data-mm-placement="workshop"].mm-online-placement-missed {
	display: none !important;
}

.mm-online-wrap:not([data-mm-placement="workshop"]) {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: .88;
}

.mm-online-wrap:not([data-mm-placement="workshop"]) .mm-online-members {
	text-align: center;
}

@media (max-width: 640px) {
	.mm-online-under-workshop {
		margin: 12px auto 18px;
		padding: 17px 18px;
		border-radius: 18px;
	}

	.mm-online-workshop-heading {
		margin-bottom: 10px;
	}

	.mm-online-under-workshop .mm-online-pill {
		font-size: 12px;
	}

	.mm-online-under-workshop .mm-online-members {
		font-size: 11.5px;
	}
}

/* Gutenberg editor shell remains selectable/removable. */
.mm-online-editor-shell {
	min-height: 44px;
	position: relative;
}

.mm-online-editor-shell .components-placeholder,
.mm-online-editor-shell .wp-block-server-side-render__spinner {
	min-height: 44px;
}