.native_overlay {
	position:fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index : 50;
	pointer-events: none;
}

.native_overlay .watermark{
	background-image: url('../assets/gma_logo.png');
	opacity: 0.5;
	position: fixed;
	width: 20%;
	height: 10%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.native_overlay .left{
	left : 1%;
}

.native_overlay .right{
	left : 79%
}

.native_overlay .top{
	top : 1%;
}

.native_overlay .bottom{
	top : 89%
}

.native_overlay .center{
	left : 40%;
	top : 45%;
}

.page {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.util_container {
	position : absolute;
	left : -101vw;
	top : 0vh;
	width : 100vw;
	height : 100vh;
	z-index: 10;
}

#app_page {
	position:fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border : none;
}

#utility_page {
	position : relative;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	box-shadow: 3px 0px 3px grey;
	border : none;
}


@keyframes animateIn {
	from{
		left : -101vw;
	}
	to {
		left : 0vw;
	}
}

@keyframes animateOut {
	from{
		left : 0vw;
	}
	to {
		left : -101vw;
	}
}

.toOpen {
	animation: animateIn 1.2s 0s 1 forwards
}

.toClosed {
	animation: animateOut 1.2s 0s 1 forwards
}

#swipeHandle {
	position : absolute;
	left : 100vw;
	top : 0vh;
	width : 2vw;
	height : 100vh;
}

.invalid {
	-webkit-filter: opacity(15%) brightness(5);
	-moz-filter: opacity(15%) brightness(5);
	-o-filter: opacity(15%) brightness(5);
	filter: opacity(15%) brightness(5);
}