html
{
	margin: 0;
	padding: 0;
}

body
{
	margin: 0;
	padding: 0;
	background: white;
	font-family: Tahoma, "Adobe Helvetica", helvetica, "Trebuchet MS", sans-serif;
	font-size: 12px;
	letter-spacing: 0px;
	font-weight: normal;
	color: black;
	overflow-x: hidden;
}

#header {
	display: block;
	position: fixed;
	height: 50px;
	top: 0px;
	width: 100%;
	background: #9aa5f7; 
}

#avatar {
	margin : 5px;
	border-radius :5px;
	height: 40px;
	width: 40px;
	overflow: hidden;
	clear: both;
	float: left;
}

#avatarName {
	float: left;
	font-weight: 500;
	font-size: 15px;
	color: white;
	margin: 14px 0 0 7px;
	width: calc(100% - 110px);
	height: 2.5em;
	text-overflow: ellipsis;
	overflow: hidden;
}

#avatar img {
	width : 40px;
}

#avatarName span {
	font-size: 1.9em;
	display: block;
	text-align: center;
}

#menu {
	display: block;
	position: fixed;
	right: 12px;
	top: 16px;
}

div#content_inside
{
	padding : 2px 0px 5px 0px;
	margin: 50px 0 0 0px; 
	width: 100%;
	top: 0px;
	bottom: 0px;
	z-index : 1;
	overflow-x: hidden;
	position: absolute;
}


b 
{
	color : black;
}

.login 
{
  width : 13em;
  margin : 20px auto 20px auto;
}

.login td
{
  padding-right : 10px;
  padding-top : 2px;
}

.white 
{
background-color : white;
border-right : 1px solid #84B0C7;
width : 26px;
}

.left {
  float : left; 
  margin : 0px 5px 0px 5px;
}

/* logout en user name (rechts bovenaan) , omdat tabs volledige breedte heeft moet ik hier width gebruiken */
.logout
{
position : absolute;
bottom : 15px;
left : 8px;
width : 22px;
height : 22px;
background : transparent url(../../images/exit22.gif) no-repeat;
background-position : 0px 0px;
}


.bg_dialog 
{
  display : none;
  clear : both;
  position : absolute;
  z-index : 99;
  top : 0px;
  left : 0px;
  right : 0px;
  bottom : 0px;
  opacity : 0.4;
  background-color : black;
}

.dialog
{
   background-color : white;
   display : none;
   border : 2px solid yellow;
   border-radius : 4px;
   position : absolute;
   top : 40%;
   left : 50%;
   margin-left : -125px;
   padding : 5px;
   width : 250px;
   z-index : 100;
   text-align : center;
   font-size : 120%;
}

.month
{
  float : left;
  clear : both;
  margin : 0 0 5px 10px;
}

#toolbar 
{
  position : fixed;
  right : 1px;
  top : 56px;
  z-index : 2;
  padding : 3px;
  background-color : rgba(220,220, 220, .9);
  border-radius : 3px;
  width : 46px;
  border : 1px solid gray;
}

.toolbutton a
{
display : block; 
text-align : center; 
padding : 40px 0px 2px 0px;
color : black;
border-bottom: 1px solid gray;
}

.toolbutton a:last-child {
	border-bottom : 0px;
}

#dossier { background : transparent url(/images/smart_phone/dossier.png) no-repeat 12px 15px; }
#exit { background : transparent url(../../images/exit22.gif) no-repeat 15px 11px; }
#forward { background : transparent url(../../images/add.png) no-repeat 15px 15px; }
#backward { background : transparent url(../../images/minus.png) no-repeat 15px 15px; }
#search { background : transparent url(../../images/find.png) no-repeat 15px 15px; }
#clear { background : transparent url(../../images/smart_phone/erase.png) no-repeat 13px 15px;}
#new { background : transparent url(../../images/minitools_20.png) no-repeat 15px 15px;}
#save { background : transparent url(../../images/filesave_22.png) no-repeat 14px 15px;}
#delete { background : transparent url(../../images/delete_20.png) no-repeat 15px 15px;}
#home { background : transparent url(../../images/smart_phone/calender.png) no-repeat 15px 15px; }
#calender { background : transparent url(../../images/smart_phone/calender.png) no-repeat 15px 15px; }

#bill { background : transparent url(../../images/smart_phone/bill_tool_button.png) no-repeat left top; }
#prev_bill { background : transparent url(../../images/smart_phone/prev_bill.png) no-repeat left -4px;}
#next_bill { background : transparent url(../../images/smart_phone/next_bill.png) no-repeat left -4px;}
#del_bill { background : transparent url(../../images/smart_phone/trashcan_16.png) no-repeat left -4px;}
#save_bill { background : transparent url(../../images/smart_phone/save_bill.png) no-repeat left -4px;}
#edit_bill { background : transparent url(../../images/smart_phone/edit_bill.png) no-repeat left -4px;}
#pdf_bill { background : transparent url(../../images/smart_phone/pdf_bill.png) no-repeat left -4px;}
#print_bill { background : transparent url(../../images/smart_phone/print_bill.png) no-repeat left -4px;}
#mail_bill { background : transparent url(../../images/smart_phone/mail_bill.png) no-repeat left -4px;}

.gray_btn
{
  filter: grayscale(100%);
  -webkit-filter : grayscale(.4);
  opacity : 0.5;
}

#name
{
margin : 10px 0;
padding-left : 10px;
clear : both;
float : left;
width : 100%;
display : block;
font-size : 120%;
color : black;
overflow : hidden;
}

/* search page */
#searchtext {
	display: block;
	float: left;
	margin: 8px 0 0 4px;
}

#searchedit {
	float: right;
	display: block;
	margin: 3px 55px 5px 0;
	width: calc(100% - 55px - 4em);		
}

#searchtable
{
  width: calc(100% - 58px);
  border : 1px solid gray;
  margin : 3px 2px 3px 2px;
  padding : 0;
  font-size : 95%; 
  border-radius : 4px;
  background-color : white;
}

#searchtable tr
{
  height : 2.5em;
}

#searchtable tr:nth-child(even) {
  background-color : #F0F0F0;
}

#searchtable .head tr
{
  background-color : white;
}

#searchtable tr .current
{
 background-color : #D5D5D5;
}

#searchtable .head tr td
{
 border-bottom : 1px solid gray;
}

#searchtable td:nth-child(1) {
	width : 16px;
}

#searchtable td:nth-child(3) {
	width : 6em;
}

/*
#inactive {
	background : yellow;
	margin : 2px -2px 2px 2px;
	border-radius : 2px;
}

#searchtable span {
  display : inline-block;
  font-size : 110%;	
  padding-bottom : 4px;
}
*/

#searchtable img {
   display : inline-block;
	width : 16px;
	padding-bottom : 2px;
	margin : 0 5px -5px 5px;
}

.pages a, #photo_footer a , #avatar_footer a{
	display : block;
	float : left;
	margin: 1px;
	padding: .5em 5px 0 5px;
	border-radius: 4px;
	background	: linear-gradient(rgb(240, 240, 240), rgb(210, 210, 210) 50%, rgb(200, 200, 200) 50%, rgb(210, 210, 210));
	height 	    	: 1.5em;
	color 	    	: black;
	overflow 	: hidden;
	text-align	: center;
	text-decoration : none;
	border	    	: 1px solid gray;
	width: 7em;
}

/* agenda style sheet */
#calender_div
{	
	clear : both;
	float : left;
	border : 1px solid #84B0C7;
	border-bottom-width : 0px;
	font-size : 85%;
	width : calc(100% - 60px);
	overflow : auto;
	border : 1px solid #84B0C7;
}

#calender_div table 
{
	width : 100%;
	border-width : 0px;
}

/* volgorde is zeer belangrijk ! */
.calender table .special_day { background : #9CFF99; }
.calender table .preday { background : #CECECE; }

.center_text { text-align : center; }

.detail_head td 
{
	margin : 0px;
	background-color : white;
	height : 1.5em;
	padding : 0px;
	border-top : 1px solid #84B0C7;
}

.head 
{
 	text-align : center;
}

#calender_table td { padding : 4px 0 4px 0; }

.caltime
{
	float : left;
	display : block;
	width : 30px;
	color : black;
	text-align : right;
	padding : 2px;
}

.red_time
{
	float : left;
	display : block;
	width : 30px;
	color : red;
	text-align : right;
	padding : 2px;
}

.caltype
{
	float : left;
	display : block;
	width : 15px;
	color : blue;
	padding : 2px;
}

.calinfo
{
	background: transparent url(../../images/action_info.gif) no-repeat 0px 0px;
	float : left;
	display : block;
	min-width : 19px;
	min-height : 16px;
}

.calweb 
{
	background: transparent url(../../images/minitools.png) no-repeat 0px 0px;
	float : left;
	display : block;
	min-width : 19px;
	min-height : 16px;
}

.calbreak
{
	background: transparent url(../../images/toast.png) no-repeat 0px 0px;
	float : left;
	display : block;
	min-width : 19px;
	min-height : 16px;
}

.calcoffee
{
	background: transparent url(../../images/coffeecup_white_16.png) no-repeat 0px 0px;
	float : left;
	display : block;
	min-width : 19px;
	min-height : 16px;
}

.calname
{
	float : left;
	display : block;
	color : black;
	padding : 2px;
}

.gray_name
{
	float : left;
	display : block;
	color : #C0C0C0;
	padding : 2px;
}


#calform
{
	position : fixed;
	border : 1px solid blue;
	background-color : #E1E1E1;
	display : block;
	top : 100px;
	left : 100px;
	font-size : 95%;
	padding : 0px;
	z-index : 0;
}

.splitter
{
  border-top : 1px solid #84B0C7;
}

.spacer
{
  padding-bottom : 3px;
}

#calform_bottom
{
	padding : 5px 0 5px 0; 
	margin : 0 3px 0 3px;
}

#calform_text
{
	margin-left : 0px;
	padding : 3px; 
	text-indent : 20px;
	background : white url(../images/date-16.gif) no-repeat 3px 2px;
	font-weight : bold;
}

#calform_close 
{
  background : transparent url(../images/close_16.png) no-repeat 0 0;
  position : absolute;
  right : 2px;
  top : 3px;
  width : 16px;
  height : 16px;
  padding: 0 -20px 0 0;
}

input
{
  font-size : 100%;
}

.select_150
{
  width : 150px;
}

#appointment_div {
	width: calc(100% - 60px);
}

#appointment_div table 
{
  width : 100%;
}

#appointment_div .edit_40
{
   width : 3em;
}

#appointment_div .edit_30
{
   width : 2em;
}

.edit_75, .noedit_75
{
  width : 4em;
}

.edit_100, .noedit_100
{
width : 10em;
}

.select_250
{
width : 15em;
}


/* check boxes */
.bill_dis_nocheck, .no_check
{
  background: transparent url(../../images/checkbtn.gif) no-repeat;
  background-position : 4px 0px;
  padding-left : 24px;
  color : #B7B7B7;
  cursor : default;
  padding-bottom : 2px;
}

.bill_nocheck, .nocheck
{
  background: transparent url(../../images/checkbtn.gif) no-repeat;
  background-position : 4px -20px;
  padding-left : 24px;
  padding-bottom : 0px;
  cursor : default;
}

.bill_dis_checked, .dis_checked
{
  background: transparent url(../../images/checkbtn.gif) no-repeat;
  background-position : 4px -72px;
  padding-left : 24px;
  color : #B7B7B7;
  cursor : default;
  padding-bottom : 0px;
}

.bill_checked, .checked
{
  background: transparent url(../../images/checkbtn.gif) no-repeat;
  background-position : 4px -98px;
  padding-left : 24px;
  cursor : default;
  padding-bottom : 0px;
}

#bill_checkbox { padding-bottom : 4px;}

#div_zorgprofile, #wait, #wrongname
{
  display : none;
}

#bottom
{
  display : block;
  position : absolute;
  top : 400px;
}

.fact_product 
{
  display :none;
}

.fact_product select
{
  width : 180px;
}

.red { color : red; }
.blue { color : blue; }

input[id^="price_"], #factAmount input
{
  width : 4em;
  text-align : right;
  padding : 1px;
  margin : 0px 1px 0px 4px;
  border : 1px solid #D0D0D0;
  border-radius : 3px;
}

#top
{
  margin-bottom : 5px;
}

#top input
{
  text-align : right;
  padding : 1px;
  margin : 0px 1px 0px 4px;
  border : 1px solid #D0D0D0;
  border-radius : 3px;
}

i
{
  display : none;
}

#fact_insurance
{
  background-color: #AAACE2; 
  margin : 0 0 2px 0;
  border : 1px solid #0612FF;
  border-radius : 4px;
}

#fact_insurance table 
{
  width : calc(100% - 10px);
}

#factAmount table
{
  border-collapse : collapse;
  margin-bottom : 5px;
}

#factAmount table tr > :first-child
{
width : 186px;
}

#top table tr > :first-child
{
width : 9.30em;
}

#payAmount
{
  font-weight : 600;
  color: black;
}

#art_deliverd
{
  padding-top : 5px;
}

#combo
{
font-size : 100%;
width : 13em;
}

#imageBox {
	z-index : 100;
	position: fixed;
	display: none;	
	background-color: white;
	overflow: hidden;
	border-radius : 4px;
	width : 0px;
	height : 0px;
	transition: ease-in-out 0.2s;
	left : 50%;
	top : 50%;
	padding: 3px;
} 

#calform_top input {
  width : calc(100% - 10px);
}


#mail_2023 {
	display : inline-block;
	width : 14px;
	margin : 0 0 -4px -17px;
}

.message {
  display : block;
  position : relative;
  font-size : 18px;
  top: calc(50% - 1em);
  z-index: 100;
  width: calc(100% - 60px);
  text-align: center;
  margin: 200px 0 0 20px;
  background: lime;
  border-radius: 4px;
  padding: 10px;
}