/*
Yotta
Copyright(c) 2011-2016 Ylab, www.ylab.nl
#ececec bg grijs
#999 donkergrijs
#2d537d dark blue
#3a6ea5 text blue
#4f85c1 mid blue
#81abd3 light blue
#e6eef7 soft blue bg
#f5dfba soft brown bg
#df8b00 text brown
#dddddd grey neutral
#a53a3a red
*/
html{
	font-family:'Trebuchet MS',sans-serif;
	overflow-y:scroll;
	font-size:small;
	line-height:1.3;
	cursor:default;
	background-color:#f9f9f9;
	color:#333;
	margin:20px;
}
body{
	margin:0 auto;
}
body.popup{
	padding:0;
}
h1{
	font-size:200%;
	line-height:1;
}
h2{
	font-size:140%;
}
h3{
	font-size:110%;
}
h4,p{
	margin:1.12em 0;
}
table{
	border-width:0;
	padding:0;
	border-collapse:collapse;
	border-spacing:0;
}
td,th{
	text-align:left;
	vertical-align:top;
}
ul{
	list-style-type:square;
}
figure{
	margin:0;
}
img{
	border:0;
}
article img{
	max-width:100%;
	height:auto;
}
a{
	color:#3a6ea5;
}
div.checklist,.text-xl,.text-l,.text-m,.text-s,.text-xs,.time,.year,.number,.max{
	border-color:#3a6ea5;
}
a{
	text-decoration:none;
	border-bottom:1px solid #e6eef7;
	cursor:pointer;
}
a:hover{
	border-bottom:1px solid #3a6ea5;
}
u,.u{
	color:#888;
	text-decoration:none;
	font-weight:normal;
}
hr{
	border:0;
	border-top:1px solid #3a6ea5;
	height:0;
}
.double{
	line-height:2.6;
}
nav ul{
	margin:0;
	padding:0;
	list-style:none;
	line-height:26px;
}
footer{
	margin:0 auto;
	font-size:90%;
	color:#bbb;
	padding:0.5em 0 1em;
}
.canvas{
	border:1px solid #999;
	background-color:white;
	overflow-x:hidden;
	min-height:500px;
}
header{
	position:relative;
	padding: 5px 10px;
	height:50px;
	background:#3a6ea5 no-repeat top right;
	border-bottom:1px solid #999;
	overflow:hidden;
	font-size:26pt;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(58,110,165,0.25),1px -1px 0 rgba(58,110,165,0.25),-1px 1px 0 rgba(58,110,165,0.25),1px 1px 0 rgba(58,110,165,0.25);
}
header a,header a:hover{
	color:inherit;
	border-bottom:0;
}
header strong{
	font-family:'Arial Black','Helvetica-Black',Arial,sans-serif;
}
header .anniversary{
	position:absolute;
	display:inline-block;
	background:url('../images/balloon.svg') no-repeat;
	background-size:63px 90px;
	margin-left:10px;
	width:80px;
	height:65px;
	top:-5px;
}
header.dev:after{
	font-style:italic;
	content:' ★';
}
.frame,article,aside{
	margin:0 10px 10px;/*.frame:app page content*/
}
@media (min-width:600px){
	header{
		padding:5px 40px;
		background-image:url('../images/header.jpg');
		background-position:right center;
	}
	#login .frame{
		margin-left:156px;
	}
}
.warning{
	color:#7d2d2d;
}
.canvas > p.warning{
	margin: 0 10px 10px;
	padding-left:64px;
	min-height:48px;
	background:url('/images/warning.svg') no-repeat;
}
.hint{
	font-size:90%;
	color:#2d537d;
}
.debug{
	background:rgba(255,255,255,0.9);
	color:#000;
}
div.hint{
	padding:0.5em 0 1em;
}
div.indent{
	padding-left:17px;
}
div+.hint{
	margin-top:-0.56em;
}
p+.hint,h4+.hint{
	margin-top:-1.12em;
}
p.hint+p.hint{
	margin-top:1ex;
}
div.checklist+.hint{
	margin-top:0;
}
.ra,.right{
	text-align:right;
}
.fl{
	float:left;
}
.caption{
	font-weight:bold;
	margin-top:10px;
}
.select-all{
	padding:0 5px 0 4px;
	border-right:1px solid #eee;
}
.select-none{
	padding-left:5px;
}
.select-all:hover,.select-none:hover{
	border-bottom:0;
}
nav .active{
	font-weight:normal;
	color:#df8b00;
}
.menu{
	padding:5px 10px;
	text-align:right;
	line-height:20px;
	font-size:1px;
}
.popup .menu{
	padding:5px 0;
}
.menu>*{
	font-size:1.05rem;
}
nav a,nav a:hover{
	text-decoration:none;
	border-bottom:0;
}
.menu>a, .menu>div{
	vertical-align:middle;
	display:inline-block;
	padding:0 5px;
	border-right:1px solid #eee;
}
/* Drop down menu*/
.menu .dropdown{
	background: url('../images/dropdown-dark.png') no-repeat center right;
	padding-right:20px;
	position:relative;
	font-weight:bold;
	color:#3a6ea5;
	cursor:pointer;
}
.menu .dropright{
	font-weight:normal;
}
.menu .dropdown ul{
	font-weight:normal;
	display:none;
	position:absolute;
	border-left:1px solid #eee;
	background-color:#f9f9f9;
	left:-1px;
	text-align:left;
	box-shadow:4px 4px 4px rgba(0, 0, 0, 0.25);
}
.menu .dropright ul{
	left:auto;
	right:1px;
}
.menu .dropdown:hover{
	border:1px solid #eee;
	border-width:0 1px 0 1px;
	background-color:#f9f9f9;
}
.menu .dropright:hover{
	border-left:0;
}
.menu .dropdown:hover ul{
	display:block;
}
.menu .dropdown li{
	display:block;
	padding:0 30px 0 5px;
	white-space:nowrap;
}
.menu .dropdown li:hover{
	background-color:#d7ecf2;
}
.menu .dropdown li a{
	display:block;
}
.menu .dropdown li.current{
	background-color:#4f85c1;
}
.menu .dropdown li.current a{
	color:#fff;
}
.menu .dropdown li.in_active a, .in_active{
	color:#888;
}
.menu .dropdown li.current.in_active a{
	color:#eee;
}
.menu .icon{
	padding:0;
	margin:0 5px;
	border-right:0;
}
.menu .adminonly.hidden{
	display:none;
}
.icon{
	display:inline-block;
	height:20px;
	width:20px;
	background-color:transparent;
	background-image:url('../images/icons.svg');
	background-repeat:no-repeat;
	background-size:cover;
	overflow:hidden;
	text-indent:20px;
	white-space:nowrap;
	text-decoration:none;
}
.icon.idle{
	background-image:url('../images/icons-idle.svg');
	cursor:default;
}
.icon-down  {background-position:0  -20px}
.icon-left  {background-position:0  -40px}
.icon-right {background-position:0  -60px}
.icon-up    {background-position:0  -80px}
.icon-export{background-position:0 -100px}
.icon-off   {background-position:0 -120px}
.icon-list  {background-position:0 -140px}
.icon-email {background-position:0 -160px}
.icon-check {background-position:0 -180px}
.icon-print {background-position:0 -200px}
.icon-agenda{background-position:0 -220px}
.icon-lock  {background-position:0 -240px}
.icon-config{background-position:0 -260px}
.icon-trash {background-position:0 -280px}
.icon-lines {background-position:0 -300px}
.icon-users {background-position:0 -320px}
.icon-user  {background-position:0 -340px}
.icon-close {background-position:0 -360px}

.icon.small{
	height:12px;
	width:12px;
	position:relative;
	bottom:2px;
}
.icon-export.small{
	background-position:0 -60px;
}

.spacious{
	padding:0.5em 0;
}
.group{
	padding-left:1em;
	border-left-width:5px;
	border-left-style:solid;
	border-color:#81abd3;
}
.props th{
	font-weight:normal;
	padding-right:1em;
}
/*forms*/
form{
	margin:0;
}
table.form{
	margin:5px 0;
}
.form span{
	padding:1px;
	display:-moz-inline-box;
	display:inline-block;
}
.form td,.form th{
	padding:2px 1em 2px 0;
}
.form tbody+tbody tr:first-of-type>*{
	padding-top:12px;
}
.form .whitespace-top>*{
	padding-top:42px;
}
@media (max-width:480px){
	.form td{
		display:block;
	}
}
.error{
	color:#a53a3a;
}
.rect,.text-xl,.text-l,.text-m,.text-s,.text-xs,.time,.year,.number,.max{
	border:1px solid #3a6ea5;
	margin-right:10px;
	padding:1px 3px;
}
input[type=checkbox],input[type=radio]{
	vertical-align:-0.25ex;
}
select,textarea,input:not([type=checkbox]):not([type=radio]){
	vertical-align:middle;
	border:1px solid #3a6ea5;
}
input:not([type=checkbox]):not([type=radio]){
	height:16px;
	line-height:16px;
}
input[type="text"][data-unique="false"]{
	border-color:#a53a3a;
}
span.ro{
	border:0;
}
.text-xl{
	width:360px;
}
.text-l,.l{
	width:250px;
}
.text-m{
	width:175px;
}
.text-s{
	width:100px;
}
.text-xs{
	width:75px;
}
.time{
	width:50px;
	text-align:right;
}
.year{
	width:50px;
	text-align:right;
}
.number{
	width:25px;
	text-align:right;
}
.datepicker,.monthpicker{
	padding:1px 3px;
	width:7em;
	text-transform:capitalize;
}
#pnlSettings .monthpicker{
	width:5em;
	margin-left:0;
}
.passwordmask{
	padding:0;
	line-height:16px;
	position:relative;
	overflow:hidden;
	display:inline-block;
	vertical-align:middle;
}
.passwordmask input[type="text"]{
	border:0;
	margin:0;
}
.passwordslide{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:#df8b00 url('../images/bg-mask.png') repeat-x center left;
	cursor:pointer;
}
th.small{
	width: 100px;
}
a.deleteContractService{
	border: none;
}
option:disabled,.hidden{
	display: none;
}
.max{
	width:100%;
}
textarea{
	height:50px;
	font-family:sans-serif;
	font-size:inherit;
}
textarea.hmed{
	height:80px;
}
textarea.hlar{
	height:128px;
}
input{
	margin:0;
}
input+label{
	margin-left:4px;
	margin-right:4px;
}
label+input{
	margin-left:4px;
}
td.ra span,td.ra input{
	margin-right:0;
}
.editmode .ra input{
	margin-right:-5px;
}
button[type=submit]{
	background:#4f85c1;
}
button,a.button{
	vertical-align:middle;
	color:#fff;
	background:#6887a8;
	border:0;
	padding:0 1em;
	cursor:pointer;
	height:20px;
	box-sizing:border-box;
	line-height:20px;
}
a.button{
	display:inline-block;
}
a.button:hover{
	border-bottom:0;
}
button:disabled,a.button:disabled,.tab span.disabled{
	background:#bbb;
	color:#ddd;
	cursor:default;
}
label[for],.checkbox,.radio{
	cursor:pointer;
}
label{
	padding:2px 2px 2px 0;
	display:-moz-inline-box;
	display:inline-block;
}
.total{
	font-weight:bold;
	text-decoration:overline;
}
.total total{
	border-top:1px solid #000;
	text-decoration:none;
	display:inline-block;
	min-width:50px;
}
.checklist{
	max-height:100px;
	overflow:auto;
	background:#fff;
}
.checklist div{
	width:100%;
	overflow:hidden;
}
.checklist div label{
	width:calc(100% - 24px);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	vertical-align:bottom;
}
.disabled{
	color:#ddd;
	border-color:#ddd;
	cursor:default;
}
.page .disabled{
	color:#ccc;
	border-color:#ccc;
}

input:not([type=checkbox]):not([type=radio]):disabled{
	border:1px solid transparent;
	background-color: transparent;
	color:#333;
	text-align:left;
}
.clear{
	clear:both;
}
.unselectable{
	user-select:none;
}
.checklist.text-m{
	text-align:left;
	width:175px;
}
/*touch tables*/
.touch{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
	table-layout:fixed;
}
.dashed td,.dashed th{
	border-top:1px dashed #eee;
}

/*status colors*/
.act a{
	display:block;
	padding:5px 5px;
	color:#000;
	border:1px solid;
	border-color:#eee #aaa #aaa #eee;
}
.act a:hover{
	border-color:#fff #888 #888 #fff;
}
.status-final a{
	background-color:#4f85c1;  /*final*/
}
.status-open a{
	background-color:#f5dfba;  /*open*/
}
.status-sneak a{
	background-color:#fcf3e4;  /*sneak*/
}
.status-nocontract a{
	background-color:#ddd;  /*na*/
}
.status-final a{
	color:#e6eef7;
}
.act ol{
	margin:0;
	padding:5px 0;
	list-style:none;
	cursor:pointer;
}
.act li{
	padding:0 5px;
}
.act .status{
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:82.97%;
	line-height:1.5;
}
.status-open ol{
	background-color:#fcf3e4;  /*open*/
}
.status-final ol{
	background-color:#e4effc;  /*final*/
}
.dow{
	display:inline-block;
	width:2.5ex;
}
.past{
	color:#999;
	color:rgba(58, 110, 165, 0.8);
}
.dutytype{
	box-sizing:border-box;
	display:inline-block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:12ex;
	vertical-align:text-bottom;
	font-size:82.97%;
}
.shiftgroups div{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	margin-bottom:0.5ex;
}
/*availability*/
.availabilities td,.availabilities th{
	padding:5px;
}
.availabilities th.col1{
	padding-left:0;
}
.dayparts td{
	border:1px solid #eee;
}
.unselectable .dayparts td{
	cursor:pointer;
	border-color:#eee #aaa #aaa #eee;
}
.dayparts .available-sometimes{
	background-color:#f5dfba;
}
.dayparts .available-often{
	background-color:#4f85c1;
	color:#e6eef7;
}
.dayparts .available-never{
	background-color:#ddd;
}
.availabilitiesmenu{
	position:absolute;
	width:auto;
	display:none;
	background:#eee;
	box-shadow:2px 2px 2px rgba(0,0,0,0.15);
	border:1px solid #999;
}
.availabilitiesmenu a{
	display:block;
	box-sizing:border-box;
	padding:4px 10px;
	border-style:solid;
	border-width:1px 1px 1px 10px;
	color:#000;
}
.availabilitiesmenu a+a{
	margin:1px 0 0 0;
}
.availabilitiesmenu .available-sometimes{
	border-color:#f5dfba;
}
.availabilitiesmenu .available-often{
	border-color:#4f85c1;
}
.availabilitiesmenu .available-never{
	border-color:#ddd;
}
.availabilitiesmenu .available-sometimes.selected{
	background-color:#f5dfba;
	background-color:rgba(245, 223, 186, 0.5);
}
.availabilitiesmenu .available-often.selected{
	background-color:#4f85c1;
	background-color:rgba(79, 133, 193, 0.5);
}
.availabilitiesmenu .available-never.selected{
	background-color:#ddd;
	background-color:rgba(221, 221, 221, 0.5);
}
.popup a{
	border:0;
}
.popup .listview th{
	text-decoration:none;
	cursor:default;
}
.popup .listview th a{
	text-decoration:underline;
}
.popup .absent{
	color:#3a6ea5;
}
.smallcaps{
	text-transform:lowercase;
	font-variant:small-caps;
}
td.smallcaps{
	text-align:right;
}
.page .myduties td,.page .mystats td,.page .myduties th,.page .mystats th{
	padding-right:1em;
}
.emailbody{
	background:#fff;
	padding:10px;
	margin:10px 0;
	width:600px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.15);
}
.noninteractive{
	display:none;
	position:fixed;
	z-index:12;
	top:0;
	left:0;
	right:0;
	bottom:0;
	cursor:wait;
}
.promotion,.mobilepromotion{
	margin-top:5em;
}
.mobilepromotion h2{
	font-size:110%;
}
.mobilepromotion img{
	opacity:0.5;
}
.mobilepromotion div a{
	border-bottom:none;
	margin:5px 5px 5px 0;
}
.mobilepromotion a:hover img{
	opacity:1;
}

@media print{
	h1{
		font-size:160%;
	}
	h2{
		font-size:130%;
	}
	.canvas{
		width:auto;
		height:auto;
		border:0;
		overflow:visible;
	}
	header,.menu,.noprint,footer{
		display:none!important;
	}
	.col-m,.content{
		width:auto;
	}
	.info{
		width:auto;
	}
	.col-m img{
		width:100%;
	}
	a{
		text-decoration:none;
		border:0;
		color:#333;
	}
	body.popup{
		margin:auto;
	}
	.popup table.listview{
		width:auto;
	}
	.popup h3.fl{
		float:none;
	}
}
/* WIDGETS */
/* Listview */
table.listview{
	border:1px dotted #ccc;
	border-width:1px 0;
	cursor:default;
	width:100%;
	background-color:#fff;
}
.listview th{
	font-weight:normal;
	text-decoration:underline;
	cursor:pointer;
	color:#3a6ea5;
}
th.listview-sorted{
	color:#b00;
}
tr.listview-oddrow{
	background-color:#f9f9f9;
}
tr.listview-hilite{
	background-color:#d7ecf2;
}
.listview tbody tr{
	cursor:pointer;
}
.listview tbody tr{
	cursor:pointer;
}
.reportcontent .listview tbody tr,.popup .listview tbody tr{
	cursor:default;
}
.listview .not_allowed,.not_allowed{
	color:#aaa;
	cursor:not-allowed;
}
div.listviewTop{
	text-align:right;
	padding:5px!important;
}
@media print{
	div.listviewTop{
		display:none;
	}
 table.listview{
	border:0;
 }
 .listview th{
		font-weight:bold;
	}
}
/* Tabs */
.tab span{
	background:#4f85c1;
	color:#e6eef7;
	margin-left:1px;
	margin-right:1px;
	padding:4px 10px;
	cursor:pointer;
}
div.page{
	box-shadow:2px 2px 2px rgba(0,0,0,0.15);
}
div.page,.tab span.tabactive{
	background:#eee;
	color:#333;
}
.tab span.tabactive{
	margin-left:-1px;
	margin-right:-1px;
	padding:8px 10px 4px;
}
div.tab{
	padding:0 10px;
	line-height:23px;
}
div.tabTop{
	display:none;
}
div.tabBot{
	text-align:right;
	padding:10px 10px 0;
	border:0;
}
div.page{
	display:none;
	padding:10px;
	min-height:20em;
}
#contracts .page{
	padding-top: 0;
}
#contracts span.fk_service{
	display:block;
	width:172px;
}
div#page0{
	display:block;
}
/* Dropdown List */
.combo{
	width:15em;
	color:#000;
	font-weight:normal;
}
.comboedit{
	padding:1px 2px;
	border:1px solid #3a6ea5;
	background:#f9f9f9 url('../images/dropdown-dark.png') no-repeat center right;
}
.combolist{
	padding:2px;
	border:1px solid #000;
	background-color:#f9f9f9;
}
.combolist div{
	border-bottom:1px solid white;
	width:100%;
}
.comboactive{
	background-color:#a0b0d0;
}
.combonew{
	margin-left:16em;
}
nav.submenu{
	position:absolute;
	width:150px;
	-x-max-height:436px;
	-x-overflow-y:hidden;
}
nav.submenu a{
	display:block;
	padding:10px;
}
nav.submenu a:hover{
	background-color:#d7ecf2;
}
nav.submenu a:last-child{
	font-style:italic;
}
nav.submenu a.active{
	background-color:#f9f9f9;
}
nav.submenu+div{
	padding-left:150px;
}
.scrollUp,.scrollDown{
	height:18px;
	background: #ccc no-repeat center center;
	cursor:pointer;
	display:none;
}
.scrollUp.disabled,.scrollDown.disabled{
	cursor:default;
	opacity:0.25;
}
.scrollUp{
	background-image:url('../images/arrow-up.png');
}
.scrollDown{
	background-image:url('../images/arrow-down.png');
}
.scrollPanel{
	max-height:calc(400px - 36px);
	overflow-y:hidden;
}
.sa{
	padding-bottom:0.5em!important;
	padding-left:150px;
}
.divFilters{
	background:#fff;
	padding:10px 20px;
}
.divFilters span{
	padding-right:1em;
}
.page .page{
	border:1px solid #f9f9f9;
	background:#f9f9f9;
	box-shadow:none;
}
.contractservices{
	margin-top:20px;
}
.contractservices th{
	font-weight:normal;
	vertical-align:bottom;
}
.contractservices .fk_service.ro,.contractservices input:disabled{
	font-weight:bold;
	padding-left:0;
}
.organisations{
	list-style-type:none;
	padding:0;
	width:auto;
}
.organisations li{
	line-height:33px;
	display:block;
	width:auto;
}
.organisations a{
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.service .shifts{
	border-collapse:collapse;
}
.service .shifts td{
	border:1px solid #ddd;
}
.service .shifts .desk{
	padding-left:15px;
}
.service .shiftgroups td{
	padding-right:1em;
}
.service .shiftgroups+.shifts{
	margin-top:20px;
}
.summary{
	max-width:600px;
	border:1px dotted #ccc;
	border-radius:10px;
	padding:10px;
}
.summary>p:first-of-type{
	margin-top:0;
}
.summary .button{
	float:right;
	margin-left:1ex;
}
.usergroups{
	list-style-type:none;
	padding:0;
}
.usergroups li{
	display:inline-block;
	margin-right:1em;
}
/*promo*/
.promo{
	box-sizing:border-box;
	max-width:810px;
}
.promo .customers{
	display:block;
}
.promo .customers li{
	display:inline-block;
	list-style-type:none;
	margin:0;
	padding:0 10px 0 0;
}
aside{
	padding-top:200px;
	width:196px;
	float:left;
	text-align:right;
}
aside .caption{
	margin-top:3em;
}
aside ul{
	margin:0;
	padding:0;
}
aside li{
	list-style-type:none;
	color:#3a6ea5;
}
article{
	position:relative;
	padding-top:2em;
	float:right;
	max-width:554px;
}
article ul{
	margin:0;
	padding:0 0 0 1.2em;
}
.anniversary{
	font-size:110%;
	color:#666;
}
.anniversary:first-line{
	font-weight:bold;
	color:#333;
}
.anniversary img{
	float:left;
	margin-right:1ex;
	position:relative;
	top:-8px;
}
@media (min-width:810px){
	.loginformobile{
		display:none;
	}
}
@media (max-width:810px){
	aside{
		display:none;
	}
	.loginformobile,.loginformobile:hover{
		border-bottom:0;
	}
	.loginformobile{
		position:absolute;
		top:10px;
		right:0;
		display:inline-block;
		height:20px;
		line-height:20px;
		background-repeat:no-repeat;
		background-image:url('../images/icons.svg');
		background-size:20px;
		padding-left:25px;
	}
}
@media (max-width:620px){
	article{
		float:none;
		max-width:none;
	}
	html{
		margin:0;
	}
	body.popup{
		padding:20px;
	}
	.canvas{
		border:0;
	}
}
.settings{
	width:100%;
	overflow-x:scroll;
	padding:1em 0;
}
.settings th, .settings td{
	padding:2px 0.5ex;
}
.settings th:nth-child(odd){
	background:#eee;
}
.settings td:nth-child(odd){
	background:#f5f5f5;
}
.settings em{
	color:#bbb;
}
.adminmenu{
	list-style:none;
	padding:0;
	line-height:2;
}
/*loading indicator*/
#list.loading{
	width:100%;
	height:10px;
	margin:40px auto;
	background-color:#ccd8e3;
	animation:scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
	0% { -webkit-transform:scale(0.0) }
	100% {
		-webkit-transform:scale(1.0);
		opacity:0;
	}
}
@keyframes scaleout {
	0%{
		transform:scale(0.0);
		-webkit-transform:scale(0.0);
	}
	100%{
		transform:scale(1.0);
		-webkit-transform:scale(1.0);
		opacity:0;
	}
}