/**
 * Side-info module
 *
 * @author SB Development
*/
.side-info {
	--fntsize-sinfo-title: 1.28em;
	--bgcolor-sinfo-fade:rgba(0,0,0,.5);
	--bgcolor-sinfo-inner:whitesmoke;
	--bxshadow-sinfo-inner:0 0 32px -10px #000;

	font-size: 1.4rem;
}
.side-info .wtitle {
	font-size: var(--fntsize-sinfo-title);
}

.side-info>.inner {
	overflow: auto;
	box-sizing: border-box;

	max-width: 100%;
	position: fixed;
	transform: translate(0);

	padding: 10px 15px;
	background-color: var(--bgcolor-sinfo-inner);
	
	opacity: 0;
	visibility: hidden;

	/* transform is essential property open/close Events
	 triggering depends on it */
	transition-property: transform, opacity, visibility;
	transition-duration: .4s;
}

.side-info>.inner,
.side-info .fade {
	z-index: 1024;
}
.side-info .fade {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bgcolor-sinfo-fade);

	opacity: 0;
	visibility: hidden;
	transition-property: opacity, visibility;
	transition-duration: .4s;
}
.side-info__active {
	overflow: hidden;
}
.side-info__active .side-info.active .fade {
	visibility: visible;
	opacity: 1;
}
.side-info__active .side-info.active>.inner {
	box-shadow: var(--bxshadow-sinfo-inner);
	opacity: 1;
	visibility: visible;
}

.side-info .widgetlist {
	padding: 15px 0 65px;
}

/**
 * animation sides
 */
.anim-side__right >.inner {
	height: 100vh;
	min-width: 303px;
	top: 0;
	left: 100%;
}
.anim-side__top > .inner {
	top: unset;
	left: 0;
	bottom:100%;
	width: 100%;
	height: 50vh;
}
.anim-side__left > .inner {
	height: 100vh;
	min-width: 303px;
	top: 0;
	left: unset;
	right: 100%;
}
.anim-side__bottom > .inner {
	top: 100%;
	left: 0;
	width: 100%;
	height: 50vh;
}
.anim-side__center > .inner {
	top:5%;
	left:50%;
	width:600px;
	height: 50vh;
	transform:translate(-50%,-10px);
}

/**
 *
 */
/*@media screen and (min-width: 783px){*/
/*	.admin-bar .side-info>.inner{*/
/*		top: 32px;*/
/*		height: calc(100vh - 32px);*/
/*	}*/
/*}*/
/*@media screen and (max-width: 782px){*/
/*	.admin-bar .side-info>.inner{*/
/*		top: 46px;*/
/*		height: calc(100vh - 46px);*/
/*	}*/
/*}*/