/*
MiniModal Gadget - CSS styling. A fully functional but minimal modal
See detailed documentation in Dev/mediawiki
*/

.mini-modal {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
}

.mini-modal:not(.active) {
	display: none;
}

.mini-modal .underlay {
	background-color: rgba(0,0,0,.5);
	width: 100%;
	height:100%;
	position: absolute;
	cursor: pointer;
	opacity: 1;
	transition: opacity .5s;
}

.mini-modal .underlay:hover {
	opacity: .6;
}

.mini-modal .mm-close {
	position: absolute;
	right: 27px;
	top: 16px;
	font-size: 73px;
	color: white;
	text-shadow: 1px 2px 3px rgba(0,0,0,.4);
	transition: color .3s;
	cursor: pointer;
}

.mini-modal .mm-close:hover {
	color: #ff6489;
}

.mini-modal .underlay:hover + .mm-close {
	color: #ff89a5;
}

.mini-modal > .content {
    position: absolute;
    width: 100%;
    max-width: 650px;
    margin: 100px 0 30px;
    left: calc( 50% - 325px );
    max-height: calc( 100% - 120px );
    overflow: auto;
}

@media (max-width: 680px ) {
	.mini-modal > .content {
		width: calc( 100% - 30px );
		left: 0;
    	margin: 100px 15px 30px;
	}
}

/*
[[Category:MultiWiki]]
*/