/* ----------------------------------------------------------------------------- */
/* @group Algemeen */

html,body{
	font-size: 10px;
	font-family: arial;
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body{
	background: #DDD url('/images/logo-lab35.png') no-repeat right bottom;
}


label,
p{
	font-size: 16px;
}

/* ----------------------------------------------------------------------------- */
/* @group Login */

#LoginWrapper h1{
	margin-bottom: 20px;
	font-weight: 400;
}
#LoginWrapper{
	background-color: #FFF;
	border-left: 5px solid navy;
	box-shadow: 2px 2px 2px 2px #666;
	width: 280px;
	padding: 10px;
	height: 300px;
	margin: 10% auto;
}

#LoginWrapper label{
	display: block;
	font-weight: bold;
}

#LoginWrapper input{
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #999;
}
#Loginbutton{
	margin-left: 50%;
	width: 50% !important;
}

#WW_vergeten{
	font-size: 1.2em;
	color: #333;
	margin-top: 25px;
}
#WW_vergeten >a{
	color: #000;
}




/* @end */
/* ----------------------------------------------------------------------------- */
/* @group Mainnav */
#MainNav, #MainNav ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 35px;
}
#MainNav a{
	display: inline-block;
	padding: 0 10px;
	text-decoration: none;
	color: #000;
}
#MainNav >li{
	position: relative;
	display: inline-block;
	vertical-align: top;
	transform-style: preserve-3d;
	perspective: 800px;
}
#MainNav >li:hover {
	background: #EEE;
}
#MainNav >li >ul{
	position: absolute;
	font-size: 14px;
	white-space: nowrap;
	opacity:0;
	background: #EEE;
	transform-origin: top center;
	transform: rotateX(-90deg);
	transition: all 0.4s;
	border: 1px solid #666;
	border-top: 0;
}
#MainNav >li:hover >ul{
	opacity:1;
	transform: rotateX(0deg);
}

#MainNav >li >ul >li:hover{
	background: #FFF;
}

.GreyBar{
	position: fixed;
	background: rgba(221,221,221, 0.7);
	height: 10px;
	left:  0;
	right: 0;
}
.GreyBar:nth-child(1){ top:    0; }
.GreyBar:nth-child(2){ bottom: 0; }

/* @end */
/* ----------------------------------------------------------------------------- */
/* @group Dashboard */
#MainHeader, #MainFooter{
	transition: all 0.3s;
}
#MainHeader{
	position: fixed;
	z-index: 25;
	top: 10px;
	left:  25px;
	right: 25px;
	padding: 0 25px;
	background: #FFF;
	border-left: 5px solid navy;
	box-shadow: 2px 2px 2px 2px #666;
	color: #000;
}
#MainHeader h6{
	font-size: 16px;
	margin: 0;
	margin-top:   5px;
	margin-left: 10px;
	color: navy;
}
#MainWrapper{
	border-left: 5px solid navy;
	box-sizing: border-box;
	box-shadow: 2px 2px 2px 2px #666;
	color: #000;
	background: #FFF;
	padding: 25px;
	margin: 100px auto; /* header's line-height + offset.top + thenSome) */
	width: 1000px;
	max-width: 98%;
}

#MainFooter{
	position: fixed;
	bottom: 10px;
	left:  25px;
	right: 25px;
	padding: 0 25px;
	background: #000;
	color: #FFF;
	text-align: right;
	line-height: 35px;
}
#MainFooter >a{
	text-decoration: none;
	color: #FFF;
}

@media screen and (max-width: 1024px){
	#MainHeader{
		left: 0;
		right: 0;
		top: 0;
	}
	#MainFooter{
		left: 0;
		right: 0;
		bottom: 0;
	}
	.GreyBar{
		display: none;
	}
}
@media screen and (max-width: 680px){
	#MainHeader{
		padding: 0 5px;
	}
	#MainWrapper{
		padding: 10px;
		margin-top:    75px;
		margin-bottom: 55px;
	}
	
}
/* @end */
/* ----------------------------------------------------------------------------- */
/* @group Pushberichten */
#PreviewMessage{
	margin: 0;
}
#PreviewMessage{
	position: relative;
	width: 260px;
	background: #F8F8F8;
	border: 1px solid #DDD;
	padding-left: 55px;
	min-height:   75px;
	display: inline-block;
	vertical-align: top;
	margin: 5px;
}
.appIcon{
	position: absolute;
	top:  2px;
	left: 2px;
	width:  48px;
	height: 48px;
}
#PreviewMessage p{
	margin-top: 5px;
	font-size: 14px;
}
#PreviewMessage strong{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: 98%;
}
#sendPushMsg{
	border: 1px solid #999;
	cursor: pointer;
}
#sendPushMsg[disabled]{
	color: #999;
	border: 1px dotted #BBB;
	cursor: not-allowed;
}
#sendPushMsg:not([disabled]):hover{
	background: #999;
	color: #f2f2f3;
}

.OnePushedMessage{
	margin: 0;
	padding: 1px 0;
	position: relative;
}
.OnePushedMessage:nth-child(odd){
	background: #F4F4F4;
}

.OPM_Del{
	color: red;
	position: absolute;
	top: 2px;
	right: 2px;
	cursor: pointer;
}
/* @end */
/* ----------------------------------------------------------------------------- */
/* @group voor root admins */
.Legend, .Legend p{
	font-size: 14px;
	background: #F0F0F0;
	padding: 10px;
}
.Legend h3, .Legend p{
	margin: 0;
	padding: 0;
	color: #555;
}
.OneAppAccess{
	border: 1px solid #CCC;
	border-left: 3px solid navy;
	font-size: 1.1em;
}
.OneAppAccess h3{
	position: relative;
	margin: 0px;
	background: #EEE;
	border-bottom: 1px solid #CCC;
	padding: 2px 10px;
	margin-bottom: 5px;
}
.OneAppAccess .ReloadLimit{
	color: green;
	font-weight: bold !important;
	font-size: 1.2em;
	cursor: pointer;
	font-weight: normal;
}

.OneAppAccess h3>.Remaining{
	font-weight: normal;
	font-size: 0.8em;
	color: #333;
}
.OneAppAccess img{
	display: block;
}

em.del_admin,
em.del_actions,
em.del_topic{
	display: block;
	color: #333;
}
.del_admin,
.del_actions,
.del_topic{
	position: relative;
	cursor: pointer;
}
.del_admin:hover,
.del_actions:hover,
.del_topic:hover{
	background: red;
	color: #FFF;
}
.del_admin:hover:after,
.del_actions:hover:after,
.del_topic:hover:after{
	content: "x";
	position: absolute;
	right: 5px;
}

/* @end */
/* ----------------------------------------------------------------------------- */