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

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

.side-info>.inner {
	overflow: auto;

	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: var(--transduration-body);
}

.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: var(--transduration-body);
}
html.side-info__active,
html.side-info__active body {
	overflow: hidden;
	height: 100%;
	position: relative;
}
.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;
	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);
}

.side-info .close {
	position: absolute;
	right: 15px;
	top: 15px;
	border: none;
	background-color: transparent;
	/*font-size: 2.15em;*/
	/*line-height: .4;*/
	padding: 0;
	width: 20px;
	height: 20px;
	cursor: pointer;
	display: flex;
}
.side-info .close img {
	width: 100%;
	height: 100%;
}

@media (max-width: 991px){
	.side-info .close {
		width:15px;
		height: 15px;
	}
}

@media (max-width: 600px) {
	.anim-side__center > .inner {
		top:0;
		/*left:0;*/
		width:100%;
		height: 100vh;
		/*transform:translate(0,-10px);*/
	}
	.side-info>.inner {
		padding:10px 25px;
	}
}

/**
 *
 */
/*@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);*/
/*	}*/
/*}*/