/**
 * koala ui components
 */

//alert
.koalaui-alert {
	width: 300px;
	height: 150px;
	background-color: #CEDEE9;
	box-shadow: 0 0 5px #A7A7A7;
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -75px;
	margin-left: -150px;
	z-index: 11;

	.text {
		padding: 20px;
	}

	footer {
		text-align: center;
		position: absolute;
		bottom: 20px;
		width: 100%;

		button {
			width: 75px;
		}
	}
}

//loading
.koalaui-loading {
	width: 50px;
	height: 50px;
	background-color: #cedee9;
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -24px;
	margin-left: -24px;
	z-index: 11;
	box-shadow: 0 0 5px #A7A7A7;
	padding: 10px;
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 10px;
	background-image: url(../img/loading.gif);
	opacity: 0.8;
	//-webkit-animation: loading 1.2s ease-out infinite;
}

//tooltip
.koalaui-tooltip {
	max-width: 300px;
	padding: 10px 20px;
	font-size: 14px;
	position: absolute;
	top:50%;
	left: 50%;
	pointer-events: none;
	background-color: #F9E98E;
	color: #915629;
	box-shadow: 0 0 5px #A7A7A7;
	z-index: 11;

	&.success {
		background-color: rgba(163, 249, 142, 0.8);
		color: rgba(62, 145, 41, 0.8);
	}
	&.error {
		background-color: rgba(249, 142, 142, 0.8);
		color: rgba(145, 41, 41, 0.8);
	}

	&.bigfont {font-size: 22px;}
}

//confirm
.koalaui-confirm {
	.koalaui-alert; 

	.ok {
		margin-right: 20px !important;
	}
}

//overlay 
.koalaui-overlay {
	position: absolute;
	width: 100%; 
	height: 100%;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.3);
	opacity: 0;
}
.win32 .koalaui-overlay{
	top:40px;
	height: ~"-webkit-calc(100% - 40px)";
}

// loading animate
@-webkit-keyframes loading {
	0% {-webkit-transform: rotate(0)}
	100% {-webkit-transform: rotate(360deg)}
}