.div_info_big
{
	padding : 5px 3px 5px 40px;
	margin : 5px 0 5px 0;
	background : white url(../images/info.gif) no-repeat 5px 5px;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
	clear : both;
	white-space : normal;
}


.div_euro
{
	padding : 5px 10px 5px 60px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/euro.png) no-repeat 5px center;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 100%;
	white-space : normal;	
}


.div_info
{
	padding : 5px 3px 5px 50px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/info.gif) no-repeat top left;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
	white-space : normal;
}

.div_twin
{
	padding : 5px 3px 5px 70px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/twin.png) no-repeat 2px 8px;
	border : 1px solid red;
	border-radius : 6px;
	font-size : 90%;
	white-space : normal;
	cursor : pointer;
}

.div_zorgmail
{
	padding : 5px 3px 5px 50px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/zorgmail_32.png) no-repeat 10px 10px;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
	white-space : normal;
	cursor : pointer;
}

.div_photo
{
	padding : 5px 3px 5px 50px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/email_36.png) no-repeat 10px 10px;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
	white-space : normal;
	cursor : pointer;
	z-index : 2;
}

.div_warning
{
	padding : 5px 3px 5px 3px;
	background : linear-gradient(#FF8C8C, #FF4000 50%,#FF3000 50%,#FF8C8C);
	margin : 5px 0 5px 0;
	border : 1px solid red;
	border-radius : 6px;
	font-size : 100%;
	color : black;
	cursor : pointer;
}

.div_shop
{
	padding : 5px 3px 5px 50px;
	background : transparent url(../images/stock_gray_32.png) no-repeat 10px 5px;
	margin : 5px 0 5px 0;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 100%;
	color : black;
	cursor : pointer;
}

.div_birthday
{
	padding : 10px 3px 10px 50px;
	background : transparent url(../images/cake_32.png) no-repeat 10px 5px;
	margin : 5px 0 5px 0;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 100%;
	color : black;
}

.div_sms
{
	padding : 20px 10px 20px 45px;
	margin : 5px 0 5px 0;
	background : linear-gradient(#FFE7DA,#FF640F);
	border : 1px solid #ff5a00;
	border-radius : 6px;
	font-size : 90%;
}

.div_extention
{
	padding : 5px 3px 5px 40px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/extention_bg.jpg) no-repeat top left;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
}

.div_pdf
{
	padding : 5px 3px 5px 70px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/adobe.gif) no-repeat 2px 2px;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
}

.div_hint
{
	padding : 5px 3px 5px 40px;
	margin : 5px 0 5px 0;
	background : transparent url(../images/hint_bg.jpg) no-repeat top left;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
}

.div_hint_image
{
	padding : 5px 3px 5px 70px;
	margin : 5px 0 5px 0;
	border : 1px solid #DDDE;
	border-radius : 6px;
	font-size : 90%;
}

.div_hint_image img
{
	margin : 0 15px 15px -65px;
}

#color
{
	position : fixed;
	margin : 2px 2px 2px 2px;
	z-index : 0;
	background : transparent url(../images/color_dialog.png) no-repeat 1px 2px;
	width : 71px;
	height : 71px;
	border : 1px solid #DDDE;
	border-radius : 2px;
	display : none;
	padding: 2px 0; 
}

.answer 
{
	display : none; 
	padding-left : 5px; 
	padding-top : 2px; 
	padding-bottom : 2px; 
	margin-left : 25px; 
	font-size : 90%; 	
	color : blue
}


.hint 
{
	display : none; 
	padding-left : 5px; 
	padding-top : 2px; 
	padding-bottom : 2px; 
	margin-left : 25px; 
	color : blue
}

.question 
{ 
	margin-top : 3px; 
	cursor : pointer; 
	background : transparent url(../images/li.gif) no-repeat top left;
  	padding-left : 15px; 
}

.question:hover 
{
	color : blue; 
	text-decoration : underline; 

}

#help_index
	{
  	display : block;
  	position : fixed;
  	right : 2px;
  	top : 0px;
  	margin : 2px 4px; 
  	padding : 6px 8px;
  	border : 2px solid #FF6135;
  	z-index : 20;
  	cursor : pointer;
	border-radius : 6px;
	background-color : #FF6135;
	font-size: 110%;
	transition-duration: .3s;
	}

#help_index:hover
	{
	background-color : white;
	}


#wait, #q_msg, #searching {
	display 	: none;
    position: fixed;
    width: 35em;
    background: rgba(210, 210, 210, .9);
    font-size: 120%;
    left: calc(50% - 17em);
    top: calc(50% - 2em);
    border-radius: 4px;
    padding: 1.5em 1em;
    z-index: 101;
    text-align: center;
    color: #202020;
}

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

#q_msg td
{
border-width : 0px;
padding : 0px;
}

#msg
{
	box-shadow : 8px 8px 10px 1px black;
	border : 1px solid #F0F0F0;
	background : #DBE8FF; 
	border-radius : 6px;
	border : 1px solid gray;
	display : none;
	right : -300px;
	top : 45px;
	padding : 5px 5px 5px 5px;
	position : absolute;
	width : 250px;
	font-size : 90%;
	text-align : left;
	z-index : 110;
}

#msg_img
{
	clear : both;
	float : left;
	width : 31px;
	background : transparent url(/images/info.gif) no-repeat 2px center;	
}

#msg_text
{
	width : 200px;
}

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

#photo_div .imageClose {
position : inherit;
margin : 0 2px -17px 0;
}

#photo_div .imageInfo {
position : inherit;
margin : 0 2px -19px 0;
}

#photo_div
{
  z-index : 99;
  position : fixed;
  right : -300px;
  bottom : 73px; 
  font-size : 100%;
  background-color : white;
  display : none;
  box-shadow : 8px 8px 10px 1px  black;
  border-top-left-radius : 10px;
  border-top-right-radius : 10px;
  border-left : 1px solid gray;
  border-right : 1px solid gray;
  border-bottom : 1px solid gray;
  padding : 0 2px 2px 0;
}


#photo_div span
{
  display : block;
  width : 100%;
  font-weight : 700;
  border-color : transparent;
  text-align : center;
  color : white;
  background: linear-gradient(white, red); /* Standard syntax (must be last) */
  border-top-left-radius : 10px;
  border-top-right-radius : 10px;
  border-bottom : 2px solid white;
  padding : 2px 0px 2px 2px;
}

#photo_div div
{
  float : left;
  margin-left : 2px;
  height : 100px;
  background-color : white;
  border : 1px dotted blue;
}


#photo_div div a img /*, #photo_div div img */
{
  border-width : 0px;
  height : 80px;
}

#tooltip, #inshint
{
	display : none;
	border : 1px solid gray;
	background : white;
	border-radius : 6px;
	position : absolute;
	padding : 3px 4px 2px 4px;
	min-width : 30px;
	font-size : 90%;
	box-shadow : 2px 3px 3px 1px gray;
	opacity : 0;
	z-index : 101;
	/*max-width : 600px;*/
	text-align : left;
}

#tooltip b {
	font-weight: 600;
}

#tooltip .img_pm {
	margin : 2px 2px -5px 0;
}

#tooltip td.tt_nocheck
{
	margin  : 0px;
	padding : 0px;
	width   : 13px;
	background : transparent url(/images/checktooltip.png) no-repeat 0px 2px;
} 

#tooltip td.tt_nocheck:hover{ 
	background-position : 0px -18px;
}

#tooltip td.tt_check
{
	margin  : 0px;
	padding : 0px;
	width   : 13px;
	background : transparent url(/images/checktooltip.png) no-repeat 0px -38px;
} 

#tooltip td.tt_check:hover{ 
	background-position : 0px -58px;
}

#tooltip td.tt_clear {
	margin  : 0px;
	padding : 0px;
	width   : 13px;
	background : transparent url(/images/checktooltip.png) no-repeat 0px -78px;
}

#tooltip td.tt_clear:hover {
	background-position : 0px -98px;
}


#tooltip_arrow
{
	display : none;
	position : absolute;
	opacity : 0;
	z-index : 102;
}


#tooltip td:nth-child(4) {
	padding	 		: 2px 3px 2px 3px;
}


#tooltip td a {
	margin : 0 -4px;
}


#tooltip tr td:nth-child(even):hover {
	background-color : #E0E0E0;
	border-radius 	: 2px;
	color: black;
}

/* chat css */
#div_chat {
  position : absolute;
  width : 225px;
  display : block;
  border-radius : 6px;
  background-color : #FFFE;
  z-index : 3;
  padding : 2px;
  margin : 5px;
  transition: all .5s linear 0s;
  transform: translate(calc(100vw + 242px), 0);
  box-sizing: border-box;
  display : none;
}

#div_chat.move {
  transform: translate(calc(100vw - 238px), 0);
}

#div_chat_data
{
  display: block;
  clear : both;
  float: left;
  overflow-y : auto;
  overflow-x : hidden;
  border-bottom : 1px solid #DDD;
  height : calc(100% - 110px);
}

@media (orientation: landscape) {
 #div_chat {
   margin-top: calc(25px + 1.5em); 
   height : calc(100vh - 75px);
 } 
}

@media (orientation: portrait) { 
 #div_chat {
  margin-top: 90px ; 	
  height : calc(100vh - 120px);
 }
}


#div_chat_tools
{
  display: block;
  clear : both;
  float: left;
  height : 105px;
  width : 100%;
  background-color : #FFFE;
  border-left : 1px solid #DDD;
  font-size : 90%;
}

#div_chat_tools textarea
{
  border-radius : 6px;
  width : calc(100% - 4px);
  height : 66px;
  background : white;
  margin : 2px 2px 4px 2px;
}

#div_chat_tools b
{
  margin : 2px;
  color : #303030;
  float: left;
  display: block;
}

#div_chat_tools div {
	float: left;
	margin : 0;
}

.chatCloseBtn
{
  background: transparent url("../images/close_16.png") no-repeat scroll 0 0;
  display : block;
  float : right;
  width : 16px;
  height : 16px;
  margin : 4px 4px 1px 1px;
}

.chatboxSendBtn
{
  background: transparent url("../images/chat_transmit.png") no-repeat scroll 0 0;
  display : block;
  float : right;
  width : 22px;
  height : 22px;
  margin : 0 1px 1px 1px;
}

.chatboxCloseBtn
{
  background: transparent url("../images/chat_close.png") no-repeat scroll 0 0;
  display : block;
  float : right;
  width : 22px;
  height : 22px;
  margin : 0px 4px 1px 1px;
}


.chat_left, .chat_right, .chat_podonet
{
  font-size : 90%;
  width : 200px;
  border-radius : 6px;
  margin : 2px 0px 2px 0px;
}

.chat_left /* chat color */
{
  float : left;
  background-color : #FF6;
  border: 1px solid #DDD;
}

.chat_right  /* chat color */
{
  float : right;
  background-color : #FFF;
  border: 1px solid #DDD;
}

.chat_podonet  /* chat color */
{
  float : right;
  background-color : #21FF94;
}

.chat_arrow_left 
{
  clear: both;
  float : left; 
  padding-top : 1em;
}

.chat_arrow_right, .chat_arrow_podonet
{
  clear: both;	
  float : right;
  padding-top : 1em;
}

.chat_left span, .chat_right span, .chat_podonet span /* text blok */
{
  display : block;
  padding : 4px 10px 4px 10px;
}

.chat_left b, .chat_podonet b /* van wie, left*/
{
  display : block;
  color : #050576;
  padding : 4px 10px 0px 10px;
}

.chat_left i, .chat_right i, .chat_podonet i /* tijdstip */
{
  display : block;
  clear : both;
  float : right;
  margin : -12px 10px  0;
  width : auto !important;
}

.chat_right b /* van wie, right */
{
  display : block;
  color : red;
  padding : 4px 10px 0px 10px;
}

#lock_screen {
	display: none;
	position: fixed;
	top : 0px;
	left : 0px;
	bottom : 0px;
	right : 0px;
	background-color: rgba(0,0,0,.4);
	z-index: 999;
	opacity: 0;
	transition: opacity 1s ease-in-out 0s;
}

#lock_screen h2 {
	position: relative;
	top: calc(50% - 1em);
	width: 100%;
	color: white;
	font-size: 250%;
	text-align: center;
	font-weight: 400; 
}

#login_code {
	display : none;
	position: absolute;
	top: 30%;
	left: calc(50% - 64px);
}

#login_code h3 {
	color: white;
	text-align: center;
	font-size: 200%;
	font-weight: 400;
	margin: 10px;
}

.pin {
   	border-color: #AAAAAA #D4D4D4 #F1F1F1 #D5D5D5;
   	border-image: none;
   	border-radius: 2px;
   	border-style: solid;
   	border-width: 1px;
   	box-shadow: 0 1px 2px 0 #CCCCCC inset;
   	outline: 0 none;
   	display: inline-block;
   	font-size: 1.428em;
   	margin: 0 2px;
   	padding: 4px 0 0; 
   	text-align: center;
   	width: 28px;  
   	height : 28px;
}

.pin_ipad {
   	border-color: #AAAAAA #D4D4D4 #F1F1F1 #D5D5D5;
   	border-image: none;
   	border-radius: 2px;
   	border-style: solid;
   	border-width: 1px;
   	box-shadow: 0 1px 2px 0 #CCCCCC inset;
   	outline: 0 none;
   	display: inline-block;
   	font-size: 1.428em;
   	margin: 2px 6px 0 0;
   	padding: 0 0 0 4px; 
   	text-align: left;
   	width: 6em;  
   	height : 25px;
   	text-align: center;
}	


.pin:focus, .pin_ipad:focus {
		background-color : #FFFFB0;
}