/* sidebar form wrapper */
div#sidebarUI {
	position: fixed;
	z-index: 200;
	top: 0px;
	width: 900px;
	height: 100vh;
	
	background-color: rgb(225,225,225);
	border-left: 1px solid rgba(0,0,0,.25);
	box-shadow: -5px 0px -10px rgba(0,0,0,.15);
	
	/* prep transition */
	right: -900px;
	opacity: 0;
	transition: opacity 0.15s ease 0s, right 0.25s ease 0s;
	
	overflow-x: hidden;
	overflow-y: auto;
}

	/* apply sidebar transition */
	div#sidebarUI.show {
		right: 0px;
		opacity: 1;
	}
	
		/* activity spinner when sidebar still hidden in transition */
		div#sidebarUI > .activitySpin {
			opacity: 0;
		}
	
		/* loading spinner when sidebar transision complete */
		div#sidebarUI.show > .activitySpin {
			position: fixed;
			width: 200px;
			height: 200px;
			font-size: 200px;
			top: calc( 100vh/2 - 200px/2 );
			right: calc( 900px/2 - 200px/2 );
			
			display: inline-block;
			animation: rotation 1s infinite ease-in-out;
			opacity: 0.035;
			
			transition: opacity 0.35s ease 0.25s;
		}

	/* sidebar header */
	div#sidebarUI > div.CRUD-header {
		position: fixed;
		top: 0px;
		right: 0px;
		width: 900px;
		border-left: 0px;
	}

/* greyout cover for primary container */
#PDCFW3-UI-greyout.sidebarUI {
	display: block;
	position: fixed;
	z-index: 199 !important;
	left: 0px;
	top: 0px;
	width: calc( 100vw - 801px );
	height: 100vw;
	background: rgba(0,0,0,.5) !important;
}