/* =============================================================================
 * ce_slide_in
 * ========================================================================== */

.ce_slide_in_toggler[data-style="style3"] button,
.ce_slide_in_toggler[data-style="style5"] button {
	border-radius: var(--shape-action-radius, 0px);
}

.ce_slide_in {
  overflow: hidden;
  position: relative;
}

.ce_slide_in button {
	cursor: pointer;
}

/* slide_in_wrapper */
.ce_slide_in .slide_in_wrapper {
  display: flex;
  width: 150%; 
  transition: transform 0.8s ease;
}

.ce_slide_in .slide_in_wrapper.init {
	transition:none;
}

.ce_slide_in [data-width="w33"] .slide_in_wrapper {
	width: 133%;
}

.ce_slide_in [data-width="w50"] .slide_in_wrapper {
	width: 150%;
}

.ce_slide_in [data-width="w75"] .slide_in_wrapper {
	width: 175%;
}

.ce_slide_in [data-width="w100"] .slide_in_wrapper {
	width: 200%;
}

/* visible_content */
.ce_slide_in .visible_content {
  width: 100%;
/*   transition: transform 0.2s ease; */
}

.ce_slide_in [data-direction="left"] .visible_content {
	order: 2;
}

.ce_slide_in [data-direction="left"] .visible_content {
	transition: padding 0.8s ease;
}

.ce_slide_in [data-direction="left"].open .slide_in_wrapper {
	gap: 20px;
}

.ce_slide_in .visible_content .content {
	margin-left: auto;
	margin-right: auto;
}

/* slide_in_content */
.ce_slide_in .slide_in_content {
  width: 50%;
  display: flex;
  align-items: center;
}

.ce_slide_in .slide_in_content .content {
	width: 100%;
}
	
.ce_slide_in [data-width="w33"] .slide_in_content {
	width: 33%;
}

.ce_slide_in [data-width="w50"] .slide_in_content {
	width: 50%;
}

.ce_slide_in [data-width="w75"] .slide_in_content {
	width: 75%;
}

.ce_slide_in [data-width="w100"] .slide_in_content {
	width: 100%;
}


/* data-color */
.ce_slide_in .slide_in_content[data-bgcolor="accent-color"] {
  background-color: var(--accentColor);
}

.ce_slide_in .slide_in_content[data-bgcolor="second-color"] {
  background-color: var(--secondColor);
}

.ce_slide_in .slide_in_content[data-bgcolor="white"] {
  background-color: #ffffff;
}

.ce_slide_in .slide_in_content[data-bgcolor="black"] {
  background-color: #000000;
}

.ce_slide_in .slide_in_content[data-bgcolor="light-gray"] {
  background-color: #f8f8f8;
}

.ce_slide_in .slide_in_content[data-bgcolor="dark-gray"] {
  background-color: #555555;
}

.ce_slide_in .slide_in_content[data-bgcolor="custom1"] {
  background-color: var(--customColor1);
}

.ce_slide_in .slide_in_content[data-bgcolor="custom2"] {
  background-color: var(--customColor2);
}

.ce_slide_in .slide_in_content[data-bgcolor="gradient"] {
  background-image: var(--globalGradient, linear-gradient(135deg, var(--accentColor), var(--secondColor)));
}

.ce_slide_in .slide_in_content[data-bgcolor="gradient2"] {
  background-image: var(--globalGradient2, linear-gradient(135deg, var(--secondColor), var(--accentColor)));
}

/* closed */


.ce_slide_in .slide-in-container[data-direction="left"].open .slide_in_wrapper {
  transform: translateX(0px) !important;
}

.ce_slide_in .slide-in-container[data-direction="right"]:not(.open) .slide_in_wrapper {
  transform: translateX(0px) !important;
}

/* panel fades while it slides out */
.ce_slide_in .slide_in_content {
	transition: opacity 0.5s ease;
}

.ce_slide_in .slide-in-container:not(.open) .slide_in_content {
	opacity: 0;
	transition: opacity 0.8s ease;
}

/* panel as high as the visible content, scrolls */
@media only screen and (min-width: 768px) {
	.ce_slide_in .slide_in_content {
		contain: size;
		overflow-y: auto;
		/* top aligned when taller */
		align-items: flex-start;
		align-items: safe center;
	}
}

/* closed panel adds no height */
@media only screen and (max-width: 767px) {
	.ce_slide_in .slide_in_content {
		max-height: 99999px;
	}

	.ce_slide_in .slide-in-container:not(.open) .slide_in_content {
		max-height: 0;
		overflow: hidden;
		transition: opacity 0.8s ease, max-height 0s 0.8s;
	}
}

/* ce_slide_in_toggler */

.ce_slide_in_toggler button.close {
	display: none;
}

.slide-in-container.open .ce_slide_in_toggler button.close {
	display: inline-block;
}

.slide-in-container.open .ce_slide_in_toggler button.open {
	display: none;
}

/* keeps its space, the content does not jump */
.slide-in-container.open .ce_slide_in_toggler:not(:has(button.close)) button.open {
	display: inline-block;
	visibility: hidden;
}

/* close button keeps its place while sliding out */
.slide-in-container:not(.open) .ce_slide_in_toggler:not(:has(button.open)) button.close {
	display: inline-block;
	visibility: hidden;
	transition: visibility 0s 0.8s;
}

.ce_slide_in_toggler button {
	background: none;
	border: none;
	font-family: inherit;
}

/* beats the global form hover border in styles.css */
.ce_slide_in_toggler button:hover:not([type="submit"]) {
	border: none;
}

/* styles */
.ce_slide_in_toggler[data-style="style1"] button {
	text-decoration: underline;
	color: var(--accentColor);
}

.ce_slide_in_toggler[data-style="style2"] button {
	text-decoration: underline;
	color: #fff;
}

.ce_slide_in_toggler[data-style="style3"] button {
	padding: 15px 40px;
	line-height: 1.3;
	background: var(--accentColor);
	color: #fff;
}

.ce_slide_in_toggler[data-style="style4"] button {
	padding: 15px 40px;
	line-height: 1.3;
	background: var(--accentColor);
	color: #fff;
	border-radius: var(--shape-action-radius, 100px);
}

.ce_slide_in_toggler[data-style="style5"] button {
	padding: 15px 40px;
	line-height: 1.3;
	background: #fff;
	color: var(--accentColor);
}

.ce_slide_in_toggler[data-style="style6"] button {
	padding: 15px 40px;
	line-height: 1.3;
	background: #fff;
	color: var(--accentColor);
	border-radius: var(--shape-action-radius, 100px);
}

/* size */
.ce_slide_in_toggler[data-size="default"] button {
	font-size: 1rem;
}

.ce_slide_in_toggler[data-size="small"] button {
	font-size: 0.9rem;
	padding: 7px 22px;
}

.ce_slide_in_toggler[data-size="medium"] button {
	font-size: 1.1rem;
}

.ce_slide_in_toggler[data-size="large"] button {
	font-size: 1.25rem;
}

/* align */
.ce_slide_in_toggler[data-align="center"] {
	text-align: center;
}

.ce_slide_in_toggler[data-align="right"] {
	text-align: right;
}

/* =============================================================================
* smart phones  (s / small screens)
* ========================================================================== */
@media only screen and (max-width: 767px) {
	.slide_in_wrapper {
		width: 200%!important;
	}
	
	.slide_in_content {
		width: 100%!important;
	}
	
	.ce_slide_in .slide-in-container.open .slide_in_wrapper {
		transform: translateX(-50%)!important;
	}
}
.ce_slide_in_toggler:where([data-style="style3"], [data-style="style4"], [data-style="style5"], [data-style="style6"]):not([data-size="small"]):not([data-size="medium"]):not([data-size="large"]) button {
	padding: var(--button-system-padding-top, 15px) var(--button-system-padding-right, 40px) var(--button-system-padding-bottom, 15px) var(--button-system-padding-left, 40px);
	font-size: var(--button-system-font-size, 1rem);
	line-height: var(--button-system-line-height, 1.3);
	font-weight: var(--button-system-font-weight, inherit);
	min-width: var(--button-system-min-width, 0px);
	border: var(--button-system-border-width, 0px) solid currentColor;
}