@charset "utf-8";
/* CSS Document */
/*--------------------- GENERAL CLASSES ----------------------*/
body {
	font-family:"Myriad Light";
	font-size:16px;
	padding:0px;
	margin:0px;
	zoom:100%;
	overflow-x:hidden;
	background:#f2f7fa;
}

#content {
	width:100%;
	float:left;
	height:auto;
	margin-bottom:125px;
}

	#content:after {
		background:url(../images/spin_logo.png);
		background-size:10%;
		background-repeat:no-repeat;
		background-position:center;
		content:"";
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		opacity:0.1;
		z-index:-1;
	}

.highlight:hover { cursor:pointer; background:#78c4f5; color:#FFF; }
.row  { height:auto; min-height:25px; vertical-align:middle; width:100%; float:left; line-height:25px; margin:2px 0px; position:relative; }
.header { font-weight:bold; }
.header:hover { cursor:pointer; color:#0d7abf; }
.border_bottom { border-bottom:1px solid #CCC; }

.row .logo {
	width:auto;
	height:50px;
	position:absolute;
	z-index:10;
	right:6px;
	top:4px;
}

	.row .logo img { height:100%; width:auto; }

.row .back_button {
	width:5%;
	height:36px;
	position:absolute;
	z-index:10;
	left:6px;
	top:8px;
}

	.row .back_button img { height:100%; width:auto; }
	.row .back_button:hover { cursor:pointer; }

.row .titel {
	width:100%;
	height:50px;
	vertical-align:middle;
	line-height:50px;
	font-size:23px;
	text-align:center;
	margin-top:4px;
	font-style:italic;
	color:#4694CB;
	font-weight:bold;
}

.page_title { 
	height:50px;
	font-size:20px;
	line-height:25px; 
	vertical-align:middle; 
	text-align:center;
	margin-top:10px;
}

	.page_title img {
		width:26px;
		height:26px;
		vertical-align:middle;
		margin-right:4px;
	}

.banner_row {
	border-bottom:1px solid #CCC;
}

.contact_button_row {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;
}

	.contact_button_row .contact_button {
		width: auto;
		text-overflow: none;
		white-space: nowrap;
		font-size: 14px;
		border: 1px solid #4694CB;
		background: #4694CB;
		color: #FFF;
		border-radius: 4px;
		padding: 4px;
		height: 20px;
		line-height: 20px;
		vertical-align: middle;
	}
	
		.contact_button_row .contact_button:hover {
			cursor:pointer;
			background:#FFF;
			color:#4694CB;
		}
		
.blur_overlay {
	position:absolute;
	z-index:700;
	left:-2px;
	top:-2px;
	width:calc(100% + 4px);
	height:calc(100% + 4px);
	background:#FFF;
	opacity:0.6;
}

#spinner_filter {
	width:100%;
	height:100%;
	position:fixed;
	z-index:800;
	background: background: rgba( 255, 255, 255, .8 ) no-repeat;
	top:0;
	left:0;
	display:none;
}

#spinner {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 900;
    background: rgba( 255, 255, 255, .8 );
	background-position:center;
	display:none;
}

#spinner #spinner_img {
	position:absolute;	
	left:calc(50% - 60px);
	top:calc(50% - 60px);
	border: none; /* Light grey */
	border-top: 12px solid #004f9f; /* Blue */
	border-bottom:none;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	z-index:901;
}

	#spinner img {
		width:60px;
		height:60px;
		position:absolute;
		left:calc(50% - 30px);
		top:calc(50% - 30px);
		z-index:902;
		animation:none;
	}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#footer {
	position:fixed;
	bottom:0px;
	left:0px;
	height: auto;
	width:100%;
	background:#6d7178;
	float:left;
	color:#FFF;
	font-size:18px;
	text-align:center;
	padding:15px 0px;
	z-index:10;
}
	#footer .row { width:100%; height:auto; min-height:25px; line-height:25px; vertical-align:middle; float:left; }
	#footer .row a { text-decoration:none; color:#FFF; }
		#footer .row a:hover { cursor:pointer; color:#004f9f; }
	#footer .blue a { color:#004f9f; font-weight:bold; }
	#footer .blue a:hover { color:#FFF; }
	
/*----------------------------------------------------
	JQUERY DIALOG STYLE
----------------------------------------------------*/
.ui-dialog, #dialog { z-index: 1000 !important ;}
.succes .ui-dialog-titlebar 		{ background:#b4fab4; }
.dialog-error .ui-dialog-titlebar  	{ background:#ed1c24; }
.ui-dialog-titlebar-close 			{ visibility:hidden;  }

#msg_filter {
	position:fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background:rgba( 255, 255, 255, .8 ) no-repeat;
	display:none;
	z-index:900 !important;
}

#msg_dialog {
	width:400px;
	height:300px;
	position:fixed;
	z-index:1000 !important;
	border:1px solid black;
	border-radius:4px;
	background:#FFF;
	display:none;
}

	#msg_dialog .title {
		width:100%;
		border-top-right-radius:4px;
		border-top-left-radius:4px;
		height:40px;
		text-align:center;
		line-height:40px;
		vertical-align:middle;
		background:#ed1c24;
		font-weight:bold;
		font-size:24px;
	}
	
	#msg_dialog .dialog_succes { background: #b4fab4; }
	
	#msg_dialog .row {
		width:100%;
		text-align:center;
		vertical-align:middle;
		line-height:25px;
		height:calc(100% - 90px);
		overflow-x:hidden;
		overflow-y:auto;
		font-size:18px;
	}
	
		#msg_dialog .row b {
			font-weight:bold;
			color:#ed1c24;
			font-size:20px;
		}
	
		#msg_dialog #msg_dialog_detail { width: calc(100% - 10px); padding:5px; }
	
	#msg_dialog .dialog_button {
		width:40px;
		height:40px;
		border:1px solid black;
		border-radius:4px;
		text-align:center;
		line-height:40px;
		vertical-align:middle;
		margin:5px;
		margin-left:calc(100% - 50px);
	}
	
		#msg_dialog .dialog_button:hover { cursor:pointer; background:#CCC; }


#user_invitation {
	width:400px;
	height:234px;
	position:fixed;
	z-index:1000 !important;
	border:1px solid black;
	border-radius:4px;
	background:#FFF;
	display:none;
	left:calc(50% - 200px);
	top:calc(50% - 117px);
}

	#user_invitation .title {
		width:100%;
		border-top-right-radius:4px;
		border-top-left-radius:4px;
		height:40px;
		text-align:center;
		line-height:40px;
		vertical-align:middle;
		background:#4694CB;
		font-weight:bold;
		font-size:24px;
	}

	#user_invitation .row {
		width: calc(100% - 10px); 
		padding:5px;
		text-align:center;
		vertical-align:middle;
		line-height:30px;
		overflow-x:hidden;
		overflow-y:auto;
		font-size:18px;
		height:auto;
		min-height:30px;
	}

		#user_invitation .row b {
			font-weight:bold;
			color:#ed1c24;
			font-size:20px;
		}
		
		#user_invitation .row label { width:  90px; float:left; }
		#user_invitation .row input { width: 200px; float:left; height:20px; margin:2px; padding:4px; border-radius:4px; border:1px solid black; }
	
	#user_invitation .button_row { height:45px; }
	
	#user_invitation .dialog_button {
		width:100px;
		height:40px;
		border:1px solid black;
		border-radius:4px;
		text-align:center;
		line-height:40px;
		vertical-align:middle;
	}
	
		#user_invitation #user_invitation_close {
			position:absolute;
			left:5px;
			top:5px;
		}
		
		#user_invitation #user_invitation_confirm {
			position:absolute;
			right:5px;
			top:5px;
		}
	
		#user_invitation .dialog_button:hover { cursor:pointer; background:#CCC; }

@media only screen and (max-width: 800px) {
	#content:after {
		background-size:15%;
	}
}

@media only screen and (max-width: 600px) {
	.row .logo img { height:80%; width:auto; }
	.row .back_button { top:12px; }
	.row .back_button img { height:80%; width:auto; }
}

@media only screen and (max-width: 520px) {
	.row .logo img { height:60%; width:auto; }
	#content:after {
		background-size:20%;
	}
}

@media only screen and (max-width:430px) {
	#user_invitation { width:calc(90% - 4px); left:5%; }
}

@media only screen and (max-width: 400px) {
	.row .logo img { height:50%; width:auto; }
}

@media only screen and (max-width: 360px) {
	.row .logo img { height:46%; width:auto; }
	
	#user_invitation { height:280px; top:calc(50% - 140px); }
	#user_invitation .row label { width:60px; }
}

@media only screen and (max-width: 320px) {
	#user_invitation { height:324px; top:calc(50% - 162px); }
	#user_invitation .row label { width:100%; text-align:center; }
	#user_invitation .row input { width:90%; margin-left:calc(5% - 10px); }
}