body:not(.ct-loading) {
	[data-behaviour*='side'] {
		transition: opacity 0.25s ease-in-out, 
					transform 0.25s ease-in-out,
					visibility 0.25s ease-in-out;
	}
}

// [data-panel*='in'],
// [data-panel*='out'] {
// 	#main-container {
// 		transition: transform 0.25s ease-in-out,
// 					left 0.25s ease-in-out;
// 	}
// }

// [data-panel*='right'] {
// 	#main-container {
// 		transform: translate3d(-70px, 0, 0);
// 		// left: -70px;
// 	}
// }

// [data-panel*='left'] {
// 	#main-container {
// 		transform: translate3d(70px, 0, 0);
// 	}
// }

// panel
[data-behaviour*='side'] {
	box-shadow: var(--boxShadow);

	&.active {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}
}

[data-behaviour*='side'] {
	@include media-breakpoint-down(sm) {
		--width: 90vw;
	}

	@include media-breakpoint-up(md) {
		--width: 65vw;
	}

	width: var(--width);
	position: fixed;
	z-index: 10;
	top: var(--frame-size, 0px);
	bottom: var(--frame-size, 0px);
	opacity: 0;
	visibility: hidden;

	&.ct-no-transition {
		transition: none !important;
	}
}

[data-behaviour*='right-side'] {
	right: var(--frame-size, 0px);
	transform: translate3d(20%, 0, 0);
}

[data-behaviour*='left-side'] {
	left: var(--frame-size, 0px);
	transform: translate3d(-20%, 0, 0);
}