/* Core app, non-framework styles */
#elErrorMessage {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Hovercards */
.ipsHovercard[data-role="advicePopup"] {
    display: none;
	width: 300px;
}
	.ipsHovercard[data-role="advicePopup"] > div {
		min-height: 60px;
	}

.ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem {
	right: 100%;
	top: 15px;
}
	.ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:before {
		right: 1px;
		border-right-color: inherit;
	}
	.ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:after{
		border-right-color: currentColor;
	}
	
.ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem {
	left: 100%;
	top: 15px;
}
	.ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:before {
		left: 1px;
		border-left-color: inherit;
	}
	.ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:after{
		border-left-color: currentColor;
	}
	
.ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem{
	left: 50%;
	margin-left: -1em;
	top: 100%;
}
	.ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:before {
		border-top-color: inherit;
		top: 1px;
	}
	.ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:after{
		border-top-color: currentColor;
	}



/* Share Links */
.ipsShareLinks{
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
}
.ipsShareLink {
	width: 2.4em;
	height: 2.4em;
	border-radius: min(var(--i-design-radius), 6px);
	display: inline-grid;
	place-content: center;
	color: #fff !important;
	font-size: max(15px, 1em);
}

	.ipsShareLink--internal { background: #008b00; }
	.ipsShareLink--deviantart { background: #00e59b; }
	.ipsShareLink--email { background: #444; }
	.ipsShareLink--facebook { background: #1778F2; }
	.ipsShareLink--linkedin { background: #0a66c2; }
	.ipsShareLink--reddit { background: #FF4500; }
	.ipsShareLink--vk { background: #507299; }
	.ipsShareLink--weibo { background: #D32F2F; }
	.ipsShareLink--youtube { background: #ff0000; }
	.ipsShareLink--foursquare { background: #2D5BE3; }
	.ipsShareLink--etsy { background: #F56400; }
	.ipsShareLink--flickr { background: #ff0084; }
	.ipsShareLink--github { background: #24292f; }
	.ipsShareLink--instagram { background: #E13D62; }
	.ipsShareLink--pinterest { background: #BD081C; }
	.ipsShareLink--slack { background: #42C299; }
	.ipsShareLink--xing { background: #B0D400; }
	.ipsShareLink--tumblr { background: #36465D; }
	.ipsShareLink--twitch { background: #772ce8; }
	.ipsShareLink--discord { background: #5865f2; }
	.ipsShareLink--x { background: #000000; }
    .ipsShareLink--bluesky { background: #59baff; }

/* Status update widget */
.ipsWidget .cStatusUpdateWidget .ipsComposeArea_dummy {
	padding: 7px 10px;
	font-size: var(--i-font-size_-1);
}
	
	.ipsWidget .cStatusUpdateWidget .ipsComposeArea_dummy i[class*=" fa-"] {
		margin-inline-end: 5px;
	}

	.ipsWidget .cStatusUpdateWidget [data-role="attachmentArea"] {
		display: none !important;
	}

.cTagPopup .ipsTags {
	margin-top: 10px;
}

#elGuestTerms {
	background: var(--i-background_1);
	border-top: 1px solid color-mix(in srgb, var(--i-color_root) 10%, transparent);
	background-clip: var(--if-light,padding-box) var(--if-dark,border-box);
	position: sticky;
	bottom: 0;
	padding: 1.3em 0;
	z-index: 4000;
}

:where([data-ips-scheme="dark"]) #elGuestTerms {
	background: var(--i-background_3);
}

@media (max-width: 979px){
	#elGuestTerms{
		bottom: var(--i-mobileFooter--he);
	}
}

/* Guest Sign In */
.cGuestTeaser_social {
	width: 250px;
	margin-bottom: 5px;
}

/* Ensure Google captcha logo appears on top of other elements */
.grecaptcha-badge{
	z-index: 10;
}

@media (max-width: 979px){
	/* Move recaptcha badge above mobile footer */
	.grecaptcha-badge{
		bottom: calc(var(--i-mobileFooter--he) + 10px) !important;
	}
}
@media (min-width: 980px){
	.ipsLayout:has(#elGuestTerms) .grecaptcha-badge{
		bottom: 120px !important; /* Magic number */
	}
}

/* Color chooser for Content Item Messages */
.cColorChoices li {
	position: relative;
}
.cColorChoice_chooser {
	background-color: var(--_ba-co);
	width: 42px;
	height: 36px;
	display: block;
	position: relative;
	border-radius: 4px;
}

.cColorChoices [type="radio"] {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	appearance: none;
	cursor: pointer;
}
	.cColorChoices [type="radio"]:checked + .cColorChoice_chooser {
		outline: 2px solid currentColor;
		outline-offset: 1px;
	}

/* Club embeds */
.cClubEmbedHeader {
	position: relative;
	height: 180px;
}

	.cClubEmbedHeader.cClubEmbedHeaderNoPhoto,
	.cClubEmbedHeader.cClubEmbedHeaderNoPhoto span {
		height: 120px;
	}

.cClubEmbedHeader .ipsUserPhoto {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid #fff;
}

/* Notifications Menu Browser Prompt */
.cNotifcationPrompt {
	position: relative;
	background: var(--i-background_dark);
	color: #fff;
}

	.cNotifcationPrompt_title {
		color: inherit;
	}

	.cNotifcationPrompt_text {
		opacity: 0.7;
	}

	.cNotifcationPrompt_icon {
		display: block;
		background-image: url('https://www.networny.com/applications/core/dev/resources/front/notification.svg');
		background-repeat: no-repeat;
		background-size: cover;
		aspect-ratio: 1;
	}

.cNotifcationPrompt_dismiss {
	background: hsl(0 0% 0% / .6);
	width: 16px;
	height: 16px;
	border-radius: 16px;
	line-height: 16px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	position: absolute;
	top: 9px;
	inset-inline-end: 9px;
}

.cContentMessageEditor.cContentMessageEditor--private .ipsEditor{
	border-color: var(--i-color_negative);
	--bo-sh: color-mix(in srgb, var(--i-color_negative) 15%, transparent);
	box-shadow: var(--bo-sh) 0px 0px 0px 6px;
}

.cContentMessageEditor.cContentMessageEditor--public .ipsEditor{
	border-color: var(--i-color_positive);
	--bo-sh: color-mix(in srgb, var(--i-color_positive) 15%, transparent);
	box-shadow: var(--bo-sh) 0px 0px 0px 6px;
}


.cLogin_single{
	max-width: 500px;
	margin: 0 auto;
}


/* Guest terms */
.cGuestTerms{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2em;
}

.cGuestTerms > :first-child{
	flex: 999 1 50%;
}





/* PHONES */
@media screen and (max-width: 767px) {
	.cUserHovercard {
		min-width: 0;
	}

	/* Google MFA */
	#elGoogleAuthenticator .ipsSpanGrid__8 {
		margin-top: 0;
		margin-bottom: 10px;
	}

	/* Guest Sign In */
	.cGuestTeaser_social {
		width: 100%;
	}
	
		.cGuestTeaser_social a {
			margin: 0 auto;
		}

	/* Reset guest teaser on mobile back to normal layout from tablet flex layout */
	.cGuestTeaser .ipsGrid {
		display: block !important;
	}
		.cGuestTeaser .ipsSpanGrid__6 {
			display: block !important;
		}
}

/* BOTH */
@media screen and (max-width: 979px) {

	/* Use flex to ensure positioning in guest teaser for tablet */
	.cGuestTeaser .ipsGrid {
		display: flex;
	}
		.cGuestTeaser .ipsSpanGrid__6 {
			display: flex;
			flex: 1;
			flex-direction: column;
		}
			.cGuestTeaser .ipsSpanGrid__6 a {
				margin-top: auto;
			}
}






/* v5 code */


/* Achievements Widget */
.cAchievementsWidget__badge img{
	max-width: 60px;
	max-height: 35px;
}




/*
	----------------
	- Page builder
	----------------
*/

/*
	Hide empty widget containers if they aren't being managed
	This can happen when widgets have just been saved, since ipsHide isn't applied
	If these are visible, they create extra space due to margins from .ipsLayout__primary-column > *
*/
.cWidgetContainer:not(.cWidgetContainer_managing):empty{
	display: none;
}



/* Main wrapper */
.cWidgetContainer--main{
	--i-block--padding-block: 0;
	--i-block--padding-inline: 0;
	--i-block--margin-top: 0;
	--i-block--gap: 0;
	--i-block--size: 300px;
	--i-block--transform-offset: 20;
	/* Grid allows the widgets/containers to be spaced apart using gap */
	display: grid;
	gap: var(--i-sp_block);
}
	
/* Sidebar Manager */
.ipsApp.cWidgetsManaging {
	--i-manage-widgets-sidebar: clamp(300px, 18vw, 375px);
	margin-inline-start: var(--i-manage-widgets-sidebar);
	position: relative; /* This ensures dropdown menus are positioned correctly. Redundant once [popover] is implemented */
}

.cWidgetContainer_managing:not(.cWidgetContainer .cWidgetContainer_managing) {
    min-height: 100px;
}

.cWidgetContainer{
    position: relative;
}

/*
    ----------------
    - Widget groups/alignment
    ----------------
*/

/* General groups */
.cWidgetContainer--isGroup{
	display: flex;
	flex-wrap: wrap;
	gap: var(--i-block--gap);
	padding-block: calc(1px * var(--i-block--padding-block));
	padding-inline: calc(1px * var(--i-block--padding-inline));
}

	.cWidgetContainer--isWidget{
		flex: 1 1 var(--i-block--size);
	}

/* Carousel */
.cWidgetContainer--carousel {
	gap: 0;
	display: grid;
	grid-auto-flow: row;

	/* Add widget box styles to carousel container */
	background: var(--i-widget--ba-co);
	border-radius: var(--i-widget--bo-ra);
	box-shadow: var(--i-widget--bo-sh);
	border-width: var(--i-widget--bo-wi);
	border-style: var(--i-widget--bo-st);
	border-color: var(--i-widget--bo-co);
	background-clip: padding-box;
	container-type: inline-size;
	overflow: hidden;
}

.cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap{
	display: grid;
	grid-auto-columns: min(var(--i-block--size), 100%);
	overflow: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	gap: 0 1px;
}

/* Remove all styles from widgets inside carousel groups. The :not(#x) selector aims to future-proof any other complex selectors */
.cWidgetContainer--carousel .ipsWidget:not(#x){
	border-width: 0;
	box-shadow: none;
	background: none;
	border-radius: 0;
}

	.cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap::-webkit-scrollbar {
		display: none;
	}		

	.cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap > .cWidgetContainer {
		scroll-snap-align: start;
		grid-row: 1;
	}

	.cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap > .cWidgetContainer:last-of-type {
		scroll-snap-align: end;
	}

	.cWidgetContainer__carousel-buttons {
		/*order: 1;*/
		/*width: 100cqw;*/
		/*position: sticky;*/
		/*inset-inline-start: 0;*/
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
		font-size: .9em;
		font-weight: 500;
		border-top: 1px solid var(--i-background_4);
  		background: var(--i-background_2);
	}

	.cWidgetContainer__carousel-buttons button:dir(rtl) {
		transform: scaleX(-1);
	}
	.cWidgetContainer__carousel-buttons button {
		width: 3em;
		height: 3em;
		text-align: center;
		border-radius: min(var(--i-design-radius), 6px);
		touch-action: manipulation;
	}
	.cWidgetContainer__carousel-buttons button[disabled] {
		opacity: 0.3;
		pointer-events: none;
	}
	@media (any-hover:hover){
		.cWidgetContainer__carousel-buttons button:hover{
			background-color: color-mix(in srgb, currentColor 5%, transparent);
		}
	}

	.cWidgetContainer__carousel-buttons [data-carousel-arrow="prev"] {
		order: -1;
	}

	.cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap > .cWidgetContainer > .ipsWidget__content--wrap > .cSidebarBlock_managing {
		border-radius: 0;
		outline-width: 2px;
	}

/* Grid */
.cWidgetContainer--grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--i-block--size), 100%), 1fr));
}

/* Center */
.cWidgetContainer--center{
	justify-content: center;
}

	.cWidgetContainer--center .cWidgetContainer--isWidget{
		flex-grow: 0;
	}

/* Columns */
.cWidgetContainer--columnLeft > .cWidgetContainer--isWidget:nth-of-type(even),
.cWidgetContainer--columnRight > .cWidgetContainer--isWidget:nth-of-type(odd){
	flex: 999 1 max(calc(100% - var(--i-block--size) - var(--i-block--gap)), 50%);
}

/* Stack */
.cWidgetContainer--stack{
	display: grid;
}


/*
	----------------
	- Managing widgets
	----------------
*/

/* Add a faint, dashed outline around main widget areas (header, main, footer, sidebar) */
.cWidgetContainer_managing.cWidgetContainer--main,
.cWidgetContainer_managing.cWidgetContainer--isGroup{
	outline: 1px dashed var(--i-color_soft);
	outline-offset: 4px;
	border-radius: var(--i-box--bo-ra);
}

.cWidgetContainer_managing.cWidgetContainer--dragInside{
	outline: 2px dashed var(--i-color_hard);
	outline-offset: 5px;
}

/* Widgets */
.cWidgetsManaging .ipsWidget{
	isolation: isolate;
}
.cSidebarBlock_managing{
	outline: 3px solid var(--i-color_soft);
	outline-color: color-mix(in srgb, var(--i-color_soft) 30%, transparent);
	border-radius: var(--i-box--bo-ra);

	position: absolute;
	inset: 2px;
	display: flex;
	gap: .4em;
	align-items: baseline;
	padding: 1em;
	opacity: 0;
}

	.cSidebarBlock_managing__heading {
		opacity: 1;
		transition: opacity 0.1s ease-out;
	}
	/* Hide the title on hover so the contents are visible */
	.cSidebarBlock_managing__heading:hover {
		opacity: 0;
		transition-delay: 0.5s;
	}

	/* Only show manage panel when hovering or active */
	.cWidgetContainer--menu_open .cSidebarBlock_managing,
	.cSidebarBlock_managing:hover{
		opacity: 1;
	}

	/* Hover */
	.cSidebarBlock_managing:where(:hover){
		outline-color: var(--i-color_soft);
	}

	/* Active */
	.cWidgetContainer--menu_open.cWidgetContainer--isWidget .cSidebarBlock_managing{
		outline: 4px solid var(--i-primary);
	}




	/* ipsWidget__content--wrap--editing Is set while the widget is being edited, whether via the dialog or **inline**; in this case we don't want to show the dragging cursor */
	.cSidebarBlock_managing:not(.ipsWidget__content--wrap--editing > .cSidebarBlock_managing) {
		cursor: move;
	}

	.ipsWidget__content--wrap--editing > .cSidebarBlock_managing {
		background: none;
		flex-direction: column;
		gap: calc(4px + .4em);
		left: calc(10px + 100%) !important;
		inset: revert;
		top: 0;
		outline: none;
	}

	.ipsWidget__content--wrap--editing > .cSidebarBlock_managing > * {
		aspect-ratio: 1;
		outline: 3px solid var(--i-secondary);
		box-shadow: var(--i-dropdown--bo-sh);
	}

	.ipsWidgetBlank:not([hidden]) ~ .cSidebarBlock_managing {
		background: none;
	}

	.cSidebarBlock_managing .ipsButton--inherit {
		color: var(--i-color_hard);
		background-color: var(--i-background_4);
	}

	.cSidebarBlock_managing h4 {
		background: #000;
		color: #fff;
		font-weight: 600;
		padding: 0.6em 1em;
		border-radius: 6px;
		margin-inline-end: auto;
	}



.ipsWidget__content--wrap--editing .tiptap.ProseMirror {
	min-height: revert;
	padding: calc(var(--Widget__padding--pa, 1.5em) - 2px) !important; /* We take off 2px to account for the editor outline */
}

/* Menu open on a group */
.cWidgetContainer--isGroup.cWidgetContainer--menu_open{
	outline: 3px solid var(--i-primary);
	outline-offset: 2px;
	border-radius: var(--i-box--bo-ra);
}

/* Apply an outline to groups when a widget is dragged over them */
.cWidgetContainer--dragInside {
	outline: 3px solid var(--i-primary);
	outline-offset: 4px;
	border-radius: var(--i-box--bo-ra);
	transition: scroll-padding-left 0.2s ease-out;
}

:is(.cWidgetContainer--dragLeft,
.cWidgetContainer--dragRight,
.cWidgetContainer--dragBelow,
.cWidgetContainer--dragAbove):not(.ipsScrolling,.ipsScrolling > *) {
	z-index: var(--ips-js-zindex-top);
	transition: transform 0.2s ease-out;
}

.cWidgetContainer--dragLeft:not(.ipsScrolling,.ipsScrolling > *) {
	transform-origin: left;
	transform: translateX(calc(var(--i-block--transform-offset) * -1px));
}

.cWidgetContainer--dragRight:not(.ipsScrolling,.ipsScrolling > *) {
	transform-origin: right;
	transform: translateX(calc(var(--i-block--transform-offset) * 1px));
}

/* For carousel widget groups, because of the scroll, transforming the first scrolling child just moves the scrollable area so it doesn't look "transformed". nth-child(2) because the widget area menu is the first child */
.cWidgetContainer--carousel.cWidgetContainer--dragBeforeFirst {
	scroll-padding-inline-start: calc(var(--i-block--transform-offset) * 1px);
}

:not(:dir(rtl)).cWidgetContainer--carousel.cWidgetContainer--dragAfterLast > .cWidgetContainer__carousel-wrap > .cWidgetContainer {
	transform-origin: left;
	transform: translateX(calc(var(--i-block--transform-offset) * -1px));
}

:dir(rtl).cWidgetContainer--carousel.cWidgetContainer--dragAfterLast > .cWidgetContainer__carousel-wrap > .cWidgetContainer {
	transform-origin: right;
	transform: translateX(calc(var(--i-block--transform-offset) * 1px));
}

.cWidgetContainer--dragAbove:not(.ipsScrolling,.ipsScrolling > *) {
	transform-origin: top;
	transform: translateY(calc(var(--i-block--transform-offset) * 1px));
}

.cWidgetContainer--dragBelow:not(.ipsScrolling,.ipsScrolling > *) {
	transform-origin: bottom;
	transform: translateY(calc(var(--i-block--transform-offset) * -1px));
}


/* Remove .ipsWidget__content--wrap when widgets aren't being edited */
.cWidgetContainer--main:not(.cWidgetContainer_managing) .ipsWidget__content--wrap{
	display: contents;
}

.cWidgetContainer_managing .ipsWidget__content--wrap{
	height: 100%;
}

/* Ensure widgets occupy the full height of other widgets in the widget group. Useful in situations when some widgets have more content than others */
.cWidgetContainer--isWidget .ipsWidget{
	min-height: 100%;
}

/* Ensure empty widgets occupy some height so they don't collapse to 0px */
.cWidgetContainer_managing{
	min-height: 100px !important;
}

.cWidgetContainer > .cWidgetContainer__menu_region {
	position: absolute; /* This must be fixed so that menus for areas inside a scrollable container will show outside the scrollable container */
	z-index: 1;
	background-color: #0000;
	margin: calc(1em + 5px) 5px;
}

.cWidgetContainer.cWidgetContainer--menu_open > .cWidgetContainer__menu_region {
	z-index: 2;
	position: fixed;
	background-color: var(--i-background_1);
}

.cWidgetContainer__menu {
	z-index: 999;
	position: fixed;
	display: flex;
	padding: 5px;
	left: 50%;
	bottom: 26px;
	gap: 5px;
	transform: translateX(-50%);
	color: hsl(0 0% 100%);
	/* This breaks the backdrop filter on the dropout children */
	border-width: 0;
	border-radius: 10px;
	box-shadow: hsl(0 0% 0% / .2) 0px 6px 20px;
	background: hsl(0 0% 0% / .8);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);

	animation-name: cWidgetContainer__menu;
	animation-duration: 0.4s;
}

.cWidgetContainer__menu.ipsMenu {
	top: revert;
}

.cWidgetContainer__menu--empty {
	display: none !important;
}

.cWidgetContainer__menu:not(#x)::before {
	content: none;
}

.cWidgetContainer__menu [disabled] {
	opacity: 0.5;
	filter: grayscale(1);
}

	/* This is an edge case. For the images widget, the dimentions are defined by the widget itself but we still want the carousel option, so we hide them */
	.cWidgetContainer__menu[data-widget-base^="app_cms_pagebuilderupload"] :is([data-role="area-min_size"], [data-role="area-gaps"]) {
		display: none;
	}

@keyframes cWidgetContainer__menu{
	0%, 100%{
		transform: translateX(-50%) scale(1);
	}
	50%{
		transform: translateX(-50%) scale(1.08);
	}
}

.cWidgetContainer__menu_dropout, .cWidgetContainer__menu_item {
	flex: 0 0 auto;
	width: 60px;
	position: relative; /* Ensure dropdowns are positioned correctly */
	display: grid;
	place-content: center;
	aspect-ratio: 1;
	border-radius: 6px;
}

/* This is necessary because the dropout panel is inside the toggle button. If the cursor:pointer applied directly to the toggler then the panel will also have it */
.cWidgetContainer__menu_dropout::after {
	content: "";
	width: 100%;
	opacity: 0;
	height: 100%;
	position: absolute;
	cursor: pointer;
	border-radius: inherit;
}

:is(.cWidgetContainer__menu_dropout, .cWidgetContainer__menu_item):hover, .cWidgetContainer__menu_dropout--open {
	background-color: hsl(0 0% 100% / .15);
}

.cWidgetContainer__menu_item[disabled] {
	pointer-events: none;
}

/* Some icons are wrapped in a button which affects their alignment */
:where(.cWidgetContainer__menu_dropout button){
	display: block;
}

.cBuilderSvg {
	--i-svg--st-wi: 4;
	--i-svg--co: hsl(0 0% 90% / .34);
	--i-svg--st: hsl(0 0% 90%);

	width: auto;
	height: 38px;
	display: block;
	color: var(--i-svg--co);
}

.cBuilderMenuText {
	height: 60px;
	padding: 1em;
	font-weight: bold;
	align-content: center;
}

.cWidgetContainer__menu [type="range"] {
	--i-co: currentColor;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
	width: 220px;
	border: 0;
	height: 1.4em;
	box-shadow: none;
	padding: 0;
	color: var(--i-co);
}

@media (any-hover:hover){
	.cWidgetContainer__menu :hover > [type="range"]{
		--_thumb--sc: 1;
	}
}

.cWidgetContainer__menu [type="range"]::-webkit-slider-runnable-track {
	background: currentColor;
	height: 1px;
	transition: .2s;
}
.cWidgetContainer__menu [type="range"]::-moz-range-track {
	background: currentColor;
	height: 1px;
	transition: .2s;
}

.cWidgetContainer__menu [type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -6px;
	background-color: var(--i-co);
	border: none;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	transform: scale(var(--_thumb--sc, .7));
	transition: .2s;
	outline: 2px solid var(--panel--ba-co);
}
.cWidgetContainer__menu [type="range"]::-moz-range-thumb {
	background-color: var(--i-co);
	border: none;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	transform: scale(var(--_thumb--sc, .7));
	transition: .2s;
	outline: 2px solid var(--panel--ba-co);
}

@media(hover:none){
	.cWidgetContainer__menu [type="range"]::-webkit-slider-thumb {
		width: 40px;
		height: 20px;
		margin-top: -10px;
		border-radius: 6px;
		transform: none;
	}
}

.cWidgetContainer__menu_dropout i.fas.fa-info-circle.ipsTitle--h4{
	display: none;
}

	.cWidgetContainer__menu [data-role="otherChildren"] {
		background: hsl(0 0% 0% / .8);
		color: hsl(0 0% 100%);
		transition: opacity 0.2s, bottom 0.2s;
		position: absolute;
		bottom: calc(100% - 10px);
		left: 0;
		display: flex;
		flex-direction: column;
		width: max-content;
		opacity: 0;
		pointer-events: none;
		border-radius: 10px;
		overflow: hidden; /* Crop the highlight color on hovered buttons */
	}

		/* Hover */
		.cWidgetContainer__menu_dropout--open [data-role="otherChildren"] {
			bottom: calc(100% + 8px);
			opacity: 1;
			pointer-events: auto;
			-webkit-backdrop-filter: blur(20px);
			backdrop-filter: blur(20px);
		}

	.cWidgetContainer__menu-icon--carousel-toggle{
		
	}

	.cWidgetContainer__menu .rangecontainer {
		flex-direction: column;
	}

	/* Pop-up menu options */
	.cWidgetContainer__menu-icon, :where(.cWidgetContainer__menu_dropout [data-role="otherChildren"] > *) {
		align-self: stretch;
		display: flex;
		align-items: center;
		gap: .8em;
		padding: .7em 1em;
		white-space: nowrap;
		color: #fff;
		/* font-weight: 600; */
	}

		.cWidgetContainer__menu-icon:hover{
			background-color: hsl(0 0% 100% / .1);
		}

		.cWidgetContainer__menu-icon[data-active]{
			background-color: hsl(0 0% 100% / .25);
		}

		/* Pseudo checkbox for Carousel option */
		.cWidgetContainer__menu-checkbox{
			width: 1.2em;
			height: 1.2em;
			border-radius: 4px;
			background: hsl(0 0% 100% / .3);
			border: 1px solid hsl(0 0% 100% / .2);
			display: grid;
			place-content: center;
			line-height: 1;
			margin-inline-start: auto;
			font-family: sans-serif; /* Needed to prevent emoji from showing */
		}

		.cWidgetContainer__menu-checkbox[data-checked]::before{
			content: '\2714';
			font-size: .7em;
		}

		/* Mini icons in pop-up menus */
		.cWidgetContainer__menu-icon .cBuilderSvg {
			height: auto;
			width: 22px;
			flex: 0 0 auto;
		}
		.cWidgetContainer__menu-icon--carousel-toggle > input[type="checkbox"] {
			cursor: pointer;
		}

	.cWidgetContainer .cWidgetContainer__menu_dropout:not(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) [data-role="otherChildren"],
	.cWidgetContainer .cWidgetContainer__menu_dropout:not(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) {
		height: 60px;
	}
	.cWidgetContainer .cWidgetContainer__menu_dropout:is(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) [data-role="otherChildren"],
	.cWidgetContainer .cWidgetContainer__menu_dropout:is(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) {
		width: 60px;
	}

	.cWidgetContainer__menu--label {
		cursor: revert;
	}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--down {
			flex-direction: column;
		}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--left {
			flex-direction: row-reverse;
		}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--up {
			flex-direction: column-reverse;
		}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--down [data-role="otherChildren"] {
			flex-direction: column;
			transform-origin: top;
			height: revert;
			width: inherit;
		}
		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--down:not(:hover) [data-role="otherChildren"] {
			transform: scaleX(1) scaleY(0);
		}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--up [data-role="otherChildren"] {
			flex-direction: column-reverse;
			transform-origin: bottom;
			height: revert;
			width: inherit;
		}
		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--up:not(:hover) [data-role="otherChildren"] {
			transform: scaleX(1) scaleY(0);
		}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--left [data-role="otherChildren"] {
			flex-direction: row-reverse;
			transform-origin: right;
		}

		.cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--left:not(:hover) [data-role="otherChildren"] {
			transform: scaleX(0) scaleY(1);
		}

	.ipsWidget__content--wrap--editing {
		z-index: 3;
	}

	.ipsWidget__content--wrap--editing > .ipsWidget {
		display: grid;
	}

	.ipsWidget__content--wrap--editing :is(.ipsComposeArea_editor:not(.ipsComposeArea_minimized) [data-role="mainEditorArea"], .ipsEditor__tiptap-wrap) {
		padding: 0 !important;
		position: relative;
		min-height: fit-content !important;
		grid-template-rows: auto; /* By default, this is auto 1fr so that there is room for the toolbar, but for the inline editor the toolbar is displayed above the content so we just want auto */
	}

	.ipsWidget__content--wrap--editing .ipsEditor__toolbar--main {
		position: absolute;
		bottom: calc(20px + 100%);
		top: revert;
		min-height: fit-content;
		width: 100%;
		margin: 0;
		box-shadow: var(--i-dropdown--bo-sh);
		border-radius: var(--i-box--bo-ra);
		outline: 2px solid var(--i-primary);
	}

	.ipsWidget__content--wrap--editing > .ipsWidget :not(.ipsComposeArea_editor *),
	.ipsWidget__content--wrap--editing :is([data-role="editorComposer"], [data-role="mainEditorArea"], .ipsEditor),
	.ipsWidget__content--wrap--editing [data-role="mainEditorArea"] :not(.ipsEditor__toolbar, .ipsEditor__toolbar *, .tiptap *) {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}

	.ipsWidget__content--wrap--editing .ipsEditor {
		border-radius: var(--i-box--bo-ra);
	}

	.ipsWidget__content--wrap--editing .ipsEditor__tiptap-wrap {
		box-shadow: var(--i-dropdown--bo-sh);
	}

	.ipsWidget__content--wrap--editing > .ipsWidget .ipsComposeArea_editor {
		width: 100%;
		height: 100%;
	}

	.ipsWidget__content--wrap--editing :is(
		.cSidebarBlock_managing,
		.ipsEditor__toolbar--main,
		[data-ipseditor-toollist]
	){
		z-index: calc(var(--ips-js-zindex-top) - 10);
	}

	.ipsWidget__content--wrap--editing .ipsComposeArea_editor [data-ipseditor-toollist] {
		bottom: revert;
		margin: 0;
		outline: 2px solid var(--i-primary);
		width: 100%;
		top: calc(20px + 100%);
		box-shadow: var(--i-dropdown--bo-sh);
		position: absolute;
		border-radius: var(--i-box--bo-ra);
		background-color: var(--i-background_1);
	}
	.ipsWidget__content--wrap--editing .ipsComposeArea_dropZone {
		margin: 0;
	}

.cSidebarBlock_loading {
	min-height: 120px;
}

.ipsWidgetBlank {
	padding: 4.5em 2em 2em;
}

select [value="Arial"] {
	font-family: Arial;
}
select [value="Helvetica"] {
	font-family: Helvetica;
}
select [value="Times new roman"] {
	font-family: "Times new roman";
}
select [value="Courier"] {
	font-family: Courier;
}
select [value="Lato"] {
	font-family: Lato;
}
select [value="Merriweather"] {
	font-family: Merriweather;
}
select [value="Open sans"] {
	font-family: "Open sans";
}
select [value="Raleway"] {
	font-family: Raleway;
}
select [value="Raleway black"] {
	font-family: "Raleway black";
}
select [value="Roboto"] {
	font-family: Roboto;
}
select [value="Roboto black"] {
	font-family: "Roboto black";
}

/* Fade non-editable widgets */
.cWidgetsManaging__faded-root {
	user-select: none;
	filter: grayscale(0.5);
	opacity: 0.35;
	pointer-events: none;
}

.cWidgetsManaging__faded-root--animating {
	transition: opacity 0.25s;
}

	/* Ensure all children inside these faded elements can't be clicked (such as .ipsLinkPanel) */
	.cWidgetsManaging__faded-root * {
		pointer-events: none;
	}

/* "Drag and drop widgets here" message */
[data-pageeditor-empty-message]:empty::after {
	content: attr(data-pageeditor-empty-message);
	white-space: pre-wrap;
	align-content: center;
	text-align: center;
	position: absolute;
	inset :0;
	font-weight: bold;
	font-size: 1.25em;
	font-family: var(--i-font-family), var(--i-font-awesome);
}