/* smartphones, iPhone, portrait 480x320 phones */ 
@media (min-width:320px) { 
	
	body{			
		-webkit-user-select: none !important;
		-ms-user-select: none !important;
		font-size : 18px;
	}
}

/* smartphones, Android phones, landscape iPhone */
@media (min-width:400px) {  
	
	body{			
		-webkit-user-select: none !important;
		-ms-user-select: none !important;
		font-size : 20px;
	}
}

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
@media (min-width:600px) { 

	body{			
		-webkit-user-select: none !important;
		-ms-user-select: none !important;
		font-size : 24px;
	}

}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:801px) {  

	body{			
		-webkit-user-select: none !important;
		-ms-user-select: none !important;
		font-size : 24px;
	}
}

/* big landscape tablets, laptops, and desktops */ 
@media (min-width:1025px) { 
	body{			
		-webkit-user-select: none !important;
		-ms-user-select: none !important;
		font-size : 32px;
	}
}

/* hi-res laptops and desktops */ 
@media (min-width:1281px) { 

	body{			
		-webkit-user-select: none !important;
		-ms-user-select: none !important;
		font-size : 32px;
	}

}

* {
	text-transform: uppercase;
}


@font-face {
	font-family: 'OfficinaSansStd-Book';
    src: url('../fonts/officinasansstd-book-webfont.ttf') format('truetype');
}


/*********************************
* MAIN SCREEN
**********************************/		

/* The user can't copy the text */
/*
body,textarea:focus, input:focus{			
	-webkit-user-select: none !important;
}*/

/* The user can't copy the text 
body{			
	-webkit-user-select: none !important;
	font-size : 24px;
}*/

/* Whole device screen */		
#div_mainscreen {
	width: 100%;
	height: 100%;	
	display: block;
	margin: auto;
	position: absolute;
	background-color: white;
	overflow: hidden;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /*delete high light onclick*/
}

/* Delete Slide transition flicker */
body .ui-page{ 
	 height: 100% !important;	 
}



/* progress bar */
#progress_container{
	display:none;
	width:100%;
	height:1%;
}

/* progress bar */
#progress_bar{

	height:100%;
	width:0%;
	/*background-color:rgb(243,152,0); orange*/
	background-color: rgb(0,158,224);/*blue*/ 
}

/*********************************
* HEADER
**********************************/


/* Header top of the screen */
.div_header{
	width: 100%;
	height: 8%;
	background-color :rgb(243,152,0);  /*orange*/
	display: block;
	position: absolute;
	top: 0px;	
}

/* Left part of the headerPage name) */
.div_left_header{
	height: 100%;
	width: 67%;
	left: 0px;	
	
	padding-left : 8%;	
	/* With padding div won't be bigger*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing:        border-box;
	
	display: table;
	vertical-align: middle;
	float: left;	
  table-layout: fixed;
}

/* Left header text center vertically and horizontally*/
.div_left_header_text{
  text-overflow:ellipsis;
  white-space:nowrap;  
  overflow:hidden;

	height:100%;
	width:100%;
	
	display: table-cell;
	vertical-align: middle; 
	
	font-size: 1.2em;
	font-family: OfficinaSansStd-Book;
	font-weight: 900;
	text-align: left;	
	color: white !important;	
	text-shadow: none !important;
}

/* Connection type div*/
.div_header_connection_type{
	height: 100%;
	width: 10%;
	float :left;

	background-image: none;
	background-repeat: no-repeat; 
	background-position: center center;	
	background-size :40%;
}

/* Right part of the header */
.div_right_header{
	height: 100%;
	width: 23%;
	right: 0px;
	position: relative;	

	display: table;
	vertical-align: middle;
	float:left;
}

/*create left border for log in/out button*/
.div_right_header:before {
  content : "";
  position: absolute;
  top	  : 20%;
  height  : 60%;
  width   : 1px; 
  border-left: 2px solid rgb(255,184,100);
}

/* Change background-color when log in/out button is pushed*/
.div_right_header:active{
	background-color: rgb(255,184,100);
	color:rgb(243,152,0);
}

/* Rigth header text (log in/ out )  center vertically and horizontally*/
.div_right_header_login_button{
	height:100%;
	width:100%;
	display: table-cell;
	vertical-align: middle; 
	text-align:center;	
	font-family: OfficinaSansStd-Book;
	font-weight: bold;
	font-size: 0.8em !important;
	color: white !important;	
	text-shadow: none !important;
}


/*********************************
* CONTENT
**********************************/



/* change disabled styling */
input[type="text"][disabled]{
	color:black!important;
	opacity: 1!important;
	border: 1px solid lightgrey!important;
	background-color : rgb(240,240,240)!important;
}

/* change disabled styling */
input[type="number"][disabled]{
	color:black!important;
	opacity: 1!important;
	border: 1px solid lightgrey!important;
	background-color : rgb(240,240,240)!important;
}

button[disabled]{
	background-color: rgb(240,240,240)!important;
	color: lightgrey;
}

/* change input styling */
input{

  font-family: OfficinaSansStd-Book;

}


/* change readonly styling 
input[type="text"][readonly]{
	color:black!important;
	opacity: 1!important;
	border: 1px solid lightgrey!important;
	background-color : rgb(240,240,240)!important; ligthgrey
}*/


/* maps */
.google_maps_div{
  width:90%;
  height:90%;
  background-color:white;
  border:2px solid rgb(0,158,224);
  top:5%;
  left:5%;
  position:absolute;
  display:block;
}

/* Page to load the documents/uploads/scans */
#loaded_page{
	width:100%;
	/*height:65% ;/*!important;*/
	height: 79%;
	overflow: scroll;
	
	/* Better scrolling and delete some flicker in transition*/	
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
}

/* hide scrollbars android*/
#loaded_page::-webkit-scrollbar {
  display: none;
}

#loaded_page p{
	text-shadow:none !important;
	font-family: OfficinaSansStd-Book;
	/*font-weight: bold;*/
	font-weight: normal;
	font-size: 1em;
	color : rgb(0,158,224);
	text-align:center;
}

/* Page to load the projects */
#projecten_page{
	width:100%;
	height:92%;
	/*height: 79%; use when button download all doc is used*/
	overflow: scroll;
		
	/* Better scrolling and delete some flicker in transition*/
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

#footer_button_one_projecten, #footer_button_one_project.shop{
	background-image: url("../images/app/Shopping_normal.png");
}

#footer_button_two_projecten{
	background-image: url("../images/di_app_projects/trash_normal.png");
}

#footer_button_three_projecten, #footer_button_two_project{
	background-image: url("../images/app/refresh_button_normal.png");
}

#footer_button_one_project{
	background-image: url("../images/app/Home_normal.png");
}

#footer_button_three_project.visible{
	background-image: url("../images/app/sign_out.png");
}

#footer_button_three_project.visible:active{
	background-image: url("../images/app/sign_out_push.png");
}

.scrollable{
    width:100%;
	height:92%;
	/*height: 79%; use when button download all doc is used*/
	overflow: scroll;
		
	/* Better scrolling and delete some flicker in transition*/
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

/* hide scrollbars android*/
#projecten_page::-webkit-scrollbar {
  display: none;
}

/* Search bar */
.search_bar{
	width:100%;
	height:8%;
	background-color : rgb(255,184,100);
}

/* Search bar image */
.search_bar_img {
	width: 15%;
	height: 100%;
	float: left;

	background-image: url('../images/app/search.png')!important;
	background-repeat: no-repeat; 
	background-position: center center;
	
	background-size : auto 70%;
}

/* Change search image on push */
.search_bar_img:active{	 
	background-image: url('../images/app/search_push.png') !important;
	background-repeat: no-repeat; 
	background-position: center center;
}


/* Search bar text */
.search_bar_text {
	width: 85%;
	height: 100%;
	float: left;
}


/* Search bar textarea */
.search_bar_text textarea {
	width: 95% !important;
  height: 70% !important;
	line-height: 100%!important;
	border:1px solid rgb(243,152,0) !important;
	background-color : rgb(255,219,174) !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	text-shadow:none !important;
	font-family: OfficinaSansStd-Book!important;
	font-weight: normal!important;
	font-size : 0.8em !important;

	/* center the search bar*/
	position:relative !important;
	display:block !important;
	margin: auto !important;
    margin-left: 5% !important;
	top: 15% !important;
	color: rgb(243,152,0) !important;
	text-align:center!important;
}

.search_bar_text textarea:focus {
	background-color : rgb(255,236,213) !important;
	box-shadow: none !important;
	
}

/* Sub menu at top */
.content_submenu{
  width : 100%;
  height : 13%;
  background-color : rgb(255,184,100);

  /* place border inside the div*/
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  border-top: 1px solid rgb(243,152,0);
}

.content_submenu_scroll{
  width: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height : 13%;
  background-color : rgb(255,184,100);
  
  /* place border inside the div*/
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  border-top: 1px solid rgb(243,152,0);
  
  /* Better scrolling and delete some flicker in transition*/	
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
   
}

/* hide scrollbars android*/
.content_submenu_scroll::-webkit-scrollbar {
  display: none;
}

/* Buttons in sub menu (4 buttons)*/
.submenu_button{
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	
	width: 25%;
	height: 100%;
	float: left;
}

/* Change color of submenu button onclick */
.submenu_button:active{
	background-color : white;
}


/* Buttons in sub menu (1 button)*/
.submenu_button_1{
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	
	width: 100%;
	height: 100%;
	float: left;
}

/* Change color of submenu button onclick */
.submenu_button_1:active{
	background-color : white;
}

/* Buttons in sub menu (1 button)*/
.submenu_button_2{
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	
	width: 50%;
	height: 100%;
	float: left;
}

/* Change color of submenu button onclick */
.submenu_button_2:active{
	background-color : white;
}

/* Buttons in sub menu (3 buttons)*/
.submenu_button_3{
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	
	width: 33.4%;
	height: 100%;
	float: left;
}



/* Buttons in sub menu (infinity buttons)*/
.submenu_button_infinity{
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	display: inline-block;
	height:100%;
	width:25%;
}

/* Change color of submenu button oneindig onclick */
.submenu_button_infinity:active{
	background-color : white;
}

/* Change color of submenu button onclick */
.submenu_button_3:active{
	background-color : white;
}

.submenu_button_img{
	width:60%;
	height:75%;
	text-align: center;

	background-size : auto 90%;
	background-repeat:no-repeat;
	background-position:center;
}

.submenu_button_text{
	width:100%;
	height:25%;
	
	text-align: center;	

	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:bold;
	font-size: 0.5em;
	color: rgb(243,152,0);
	text-shadow: none !important;
}
	
.upload_scan_button{
	display : none; /*!important;*/
	/*height :15%;*/
	height :13%;
	width:100%;
	background-color:white;
	
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	/*border-bottom: 1px solid rgb(243,152,0);*/
	
}

/* Content of the screen */
.div_content{
	width: 100%;
	height: 84.2%;
	background-color: white;
	display: block;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*padding-bottom: 5px;		*/

	overflow: auto;
	-webkit-overflow-scrolling: touch;  /*Better scrolling and delete some flicker in transition*/		
	
}
	
  
/* Container for documents box */
.document_box{	
	display : block;
	width: 100%;
	height: 2.7em;
	border-bottom: 1px solid lightgrey;
	
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	
	position : relative;
}

/* Change document button color onclick */
.document_box:active, .document_box_active{
	background-color : rgb(185,228,255);
	color : white;
	text-shadow: none !important;
}


/* Container for sub documents box */
.sub_document_box{	
	width: 100%;
	height: 10%;
	border-bottom: 1px solid lightgrey;
	
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;
	
	position : relative;
}

/* Change document button color onclick */
.sub_document_box:active{	
	background-color : rgb(185,228,255);
	color : white;
	text-shadow: none !important;
}

/* Container for text in the sub document box*/
.sub_document_box_text{
	height:100%;
	width:88%;		
	float:left;
	/*font-weight:700;*/
	font-weight:normal;
	font-size:0.8em;
	font-family: OfficinaSansStd-Book;
	color:  rgb(243,152,0) !important;/*rgb(0,158,224) !important;*/
	text-shadow: none !important;
	text-align: left;
	display: table;
	vertical-align: middle;
}


.center_object{
	height:100%;
	width:100%;
	display: table-cell;
	vertical-align: middle;
}


/* Image of extension left of the container */
.document_img{
	width: 18%;
	height: 100%;
	float: left;	
}

/* Image inside the document_img div */
.document_img img{
	height: 60%;
	width:auto;

	/* center the image*/
	position:relative;
	display:block;
    margin:auto;
	top : 20%;	
}

/* Name of document right of the container */
.document_text{
	width: 70%;
	height: 100%;
	float: left;
	/*font-weight: 900;*/
	font-weight: normal;
	font-size:1em;
	font-family: OfficinaSansStd-Book;
	color : rgb(0,158,224) !important; /*blue*/
	text-shadow: none !important;
	text-align: left;
  
  
}

.signincode{
  width:12%;
  height:100%;
  float:left;
  background-size: auto 60%;
	background-repeat: no-repeat; 
	background-position: center center;
}

/* to center the text */
.document_text_center{


  overflow:hidden;
  height:60%;
  top:30%;
  text-overflow:ellipsis;
  white-space:nowrap;

	width:100%;  
	position:relative;
  /*
	height:20%;
  top:40%;*/
}	

/* comment dropdown*/				
.document_comment_drop_down_up{
	width: 12%;
	height: 100%;
	float: left;
}

.document_comment_drop_down_up_img{
	height: 40%;
	width: auto;

	/* center the image*/
	position:relative;
	display:block;
	margin:auto;
	top : 30%;	
}
			
.document_comment_box_submit{
	width: 100%;
	/*height: 17%;*/
	height :30%;
	border-left :2px solid rgb(0,158,224) !important;
	border-right :2px solid rgb(0,158,224) !important;
	/*border-bottom :1px solid rgb(0,158,224) !important;*/
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;		
	clear: both;
	display: none;
	position :relative;
		
}

/* to vertically center the text area en + comment button */
.document_comment_box_submit_inner{
	position:absolute; 
	top:10%; 
	/*height:80%;*/
	height:50%;
	width: 100%;			
}			

.document_comment_box_input{

	-webkit-appearance: none; /* delete inner shadow in textfield */
	height: 100%;
	width: 64%;
	margin-left: 2%;
	/*margin-top: 1.5%;*/
	border-radius: 5px;
	border : 1px solid lightgrey;
	float:left;
	color:lightgrey;
	font-family: OfficinaSansStd-Book;
	font-size: 0.8em;
	text-transform: uppercase; /* only capital as input */
	/*font-weight: 700;	*/
	font-weight:normal;
	outline: none; /* delete crash laytou */
}

.document_comment_box_input:focus{
	box-shadow: 0px 0px 3px rgb(243,152,0);
	color : rgb(243,152,0) !important;
}

.document_comment_box_button{
	height: 100%;
	width: 30%;
	margin-left: 2%;
	/*margin-top: 1.5%;*/
	border: none;
	background-color: rgb(0,158,224);
	border-radius: 7px;
	color: white;
	
	font-family: OfficinaSansStd-Book;
	font-size: 0.6em;
	/*font-weight: 900;*/
	font-weight:normal;
}

.document_comment_box_button:active{
	color: rgb(0,138,186);
}

/* single comment line */
.single_comment{
	width: 100%;
	/*height:17%; done by javascript*/ 
	background-color:white;
	display:block;
	
	border-left :2px solid rgb(0,158,224) !important;
	border-right :2px solid rgb(0,158,224) !important;
	
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;	
}
		
.comment_text{
	padding-left :2%;
	height: 100%;
	width: 62%;
	float:left;
	font-family: OfficinaSansStd-Book;
	font-size: 0.6em  !important;
	/*font-weight: 700  !important;*/
	font-weight:normal !important;
	color : rgb(0,158,224) !important;
	text-align:left;
	text-shadow : none !important;
	clear:both;
	overflow:hidden;
	
	/* to cut a word without spaces so it fit into the div*/
	word-wrap: break-word;

}

.comment_user_gps{
	height: 100%;
	width: 36%;
	float:left;	
	
	font-family: OfficinaSansStd-Book;
	/*font-weight: 400;*/
	font-weight:normal;
	font-size: 0.5em;
	color : rgb(243,152,0) !important;
	text-align : right;
	text-shadow : none !important;
	overflow:hidden;

}

/* Date and time of uploaded document*/
.div_date_time{
	height:100%;
	width:80%;
	float:right;
	position:relative;
	/*font-size: 0.4em;*/
}

/* Div globe of uploaded document*/
.div_globe{
	height:100%;
	width:20%;
	padding-top:1%;
	float:left;
	position:relative;
}

/* Globe image for the maps location */
.globe{
	width:auto;
	height:50%;
	position:absolute;
	bottom:10%;
	right:0;
}

/* Onclick globe image for the maps location */
.globe:active{
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;	
	box-sizing:        border-box;	
	border: 1px solid white;
}
			
				
/* Container for square the button */
.div_button_container{
	display: inline-block;
	position: relative;
	width: 50%;
	background-size: 100% 100%;
	overflow:hidden;	

	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;	
	box-sizing:        border-box;	
}
		
/* Dummy for square button*/		
.div_button_dummy{
	padding-top: 100%;
}

/* Button */
.div_button, .div_button_unavailable{
	position: absolute;
	top: 5%;
	bottom: 0;
	left: 5%;
	right: 5%;
	/*border-radius: 5px;*/
	z-index:1;
	background-size: 100% 100%;
}

.div_button.div_button_administration{
	background-image: url("/app/html/images/app/administration_normal.png");
}

.div_button.div_button_administration:active{
	background-image: url("/app/html/images/app/administration_push.png");
}

.div_button_unavailable.div_button_administration{
	background-image: url("/app/html/images/app/administration_unavailable.png");
}

.div_button.div_button_facebook{
	background-image: url("/app/html/images/app/facebook_normal.png");
}

.div_button.div_button_facebook:active{
	background-image: url("/app/html/images/app/facebook_push.png");
}

.div_button.div_button_location{
	background-image: url("/app/html/images/app/location_normal.png");
}

.div_button.div_button_location:active{
	background-image: url("/app/html/images/app/location_push.png");
}

.div_button_unavailable.div_button_location{
	background-image: url("/app/html/images/app/location_unavailable.png");
}

.div_button.div_button_news{
	background-image: url("/app/html/images/app/news_normal.png");
}

.div_button.div_button_news:active{
	background-image: url("/app/html/images/app/news_push.png");
}

.div_button.div_button_profile{
	background-image: url("/app/html/images/app/profile_normal.png");
}

.div_button.div_button_profile:active{
	background-image: url("/app/html/images/app/profile_push.png");
}

.div_button.div_button_projects{
	background-image: url("/app/html/images/app/projects_normal.png");
}

.div_button.div_button_projects:active{
	background-image: url("/app/html/images/app/projects_push.png");
}

.div_button_unavailable.div_button_projects{
	background-image: url("/app/html/images/app/projects_unavailable.png");
}

.div_button.div_button_realtime{
	background-image: url("/app/html/images/app/realtime_normal.png");
}

.div_button.div_button_realtime:active{
	background-image: url("/app/html/images/app/realtime_push.png");
}

.div_button_unavailable.div_button_realtime{
	background-image: url("/app/html/images/app/realtime_unavailable.png");
}

.div_button.div_button_rs{
	background-image: url("/app/html/images/app/rs_normal.png");
}

.div_button.div_button_rs:active{
	background-image: url("/app/html/images/app/rs_push.png");
}

.div_button_unavailable.div_button_rs{
	background-image: url("/app/html/images/app/rs_unavailable.png");
}

.div_button.div_button_signin{
	background-image: url("/app/html/images/app/signin_normal.png");
}

.div_button.div_button_signin:active{
	background-image: url("/app/html/images/app/signin_push.png");
}

.div_button.div_button_twitter{
	background-image: url("/app/html/images/app/twitter_normal.png");
}

.div_button.div_button_twitter:active{
	background-image: url("/app/html/images/app/twitter_push.png");
}

.div_button.div_button_youtube{
	background-image: url("/app/html/images/app/youtube_normal.png");
}

.div_button.div_button_youtube:active{
	background-image: url("/app/html/images/app/youtube_push.png");
}

/*Change button border onclick */
.div_button:active, .div_button_unavailable:active{
	z-index:3;
	border: 0.4em solid white;
}

/* Text under the button */
.div_button_text{
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:1%;

	font-family:OfficinaSansStd-Book;
	font-weight:bold;
  font-size: 0.9em;
	/*font-weight: 900;*/
	color:white; 
	text-shadow:none !important;
	text-align:center;
	width:100%; 
	height:20%; 
	bottom:0px;
	position:absolute; 
	z-index:2;
}

.div_button:active .div_button_text{
	color: rgb(0,138,186);
}

.div_button_unavailable:active .div_button_text{
	color: rgb(178,178,176);
}

/*  image spinner while loading the image */
.div_button_loading{

	/* center the div vertically and horizontally */
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0; 
	bottom: 0;
	right: 0;
	
	/*width:2.8em;
	height:2.8em;*/
	width: 46px; 
	height: 46px;	
	background-size:100% 100%;
	background-image: url('../images/app/ajax-loader.gif');
	
	opacity:0.30; /*make image transparent*/
}

/* Columns of tiles are added depending on the screen size */
@media all and (min-width: 28em) and (max-width: 35em) {
	.div_button_container{
		width: 33.33333333333333%;
	}

	.div_button_text {
		font-size: 0.8em;
	}
}

@media all and (min-width: 35em) and (max-width: 45em) {
	.div_button_container{
		width: 25%;
	}

	.div_button_text {
		font-size: 0.75em;
	}
}

@media all and (min-width: 45em) and (max-width: 55em) {
	.div_button_container{
		width: 20%;
	}

	.div_button_text {
		font-size: 0.675em;
	}
}

@media all and (min-width: 55em) and (max-width: 65em) {
	.div_button_container{
		width: 16.66666666667%;
	}

	.div_button_text {
		font-size: 0.675em;
	}
}

@media all and (min-width: 65em) and (max-width: 75em) {
	.div_button_container{
		width: 14.28571428571429%;
	}

	.div_button_text {
		font-size: 0.5em;
	}
}

@media all and (min-width: 75em) {
	.div_button_container{
		width: 12.5%;
	}

	.div_button_text {
		font-size: 0.5em;
	}
}

/* Dummy div to create a  white space at the last App buttons */
#dummy_white_line{
	height: 2.5%
}	

/* to show the realtime status info*/													
.realtime_status_info{				
	padding-top:2%;
	padding-bottom:2%;
	width:100%;
	/*height:50%;*/
	/*font-weight:700;*/
	font-weight:normal;
	font-size:0.8em;
	font-family: OfficinaSansStd-Book;
	color:  rgb(243,152,0) !important;
	text-shadow: none !important;
	text-align: left;
	border-bottom:1px solid lightgrey;
	display :none;
	overflow:hidden;
}
 /*to show the realtime status info value*/	
.realtime_status_info:active{
	background-color : rgb(185,228,255) !important;
}

/* to show the realtime status info*/													
.appointment_chapter{				
	padding-top:2%;
	padding-bottom:2%;
	width:100%;
	/*height:50%;*/
	/*font-weight:700;*/
	font-weight:normal;
	font-size:0.8em;
	font-family: OfficinaSansStd-Book;
	color:  rgb(243,152,0) !important;
	text-shadow: none !important;
	text-align: left;
	border-bottom:1px solid lightgrey;
	display :none;
	overflow:hidden;
}


.script_subtitle{
	margin-top:5%;
	margin-left:20%;
	margin-right:20%;
	border-bottom:2px solid rgb(0,158,224);
}

.script_subtitle:active{
	border-bottom:4px solid rgb(0,158,224);
}


/* line between li */
hr{
	margin-left:-15%;			
	border-style : none;
	border-bottom: 1px solid lightgrey;
}

/* subtitle item box*/
.sub_title_item{

	background-color: rgb(230,245,255);
	width:100%;
	height:3em;
  border-bottom:1px solid white;
}

/*onclick*/
.sub_title_item:active{
  background-color:rgb(193,231,255); /* darker blue*/  
}

/* added item text*/
.added_item_username{
	overflow:hidden;
	text-overflow:ellipsis;
	text-align:left;
	height:100%;
	width:75%;
	float:left;
	font-weight:100!important;
  
  /* vertical alignment*/
  padding-top:0.3em;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

/* trash to delete an added item*/
.added_item_trash{
  padding-left:2%;
	text-align:center;
	line-height:40px;
	height:100%;
	width:10%;
	float:left;
	background-size: auto 55%;
	background-repeat: no-repeat; 
	background-position: center center;
}


/* sign to open or close an item*/
.added_item_sign{
	text-align:center;
	line-height:40px;
	height:100%;
	width:10%;
	float:left;
	background-size: auto 40%;
	background-image: url('../images/app/down_arrow.png');
	background-repeat: no-repeat; 
	background-position: center center;
	
}

/*Profile check div*/
.profile_check{
  width:100%;
  margin-top:10%;
  height:10%;
  text-align:center;
  font-size: 1.2em;
  font-family: OfficinaSansStd-Book;
  font-weight: normal;
  text-shadow: none;
  color:rgb(0,158,224);
}

#import_profile_email_di_info, #get_profile_email_di_info {
	text-decoration: none;
	position: absolute;
	bottom: 0;
	font-size: 0.9em;
	height: auto;
}

/* text comment for period RS app */
.perdio_comment_text{
  margin-left:3%;
  font-weight: normal;
  font-size:0.8em;
  font-family: OfficinaSansStd-Book;
  color:rgb(243,152,0);
}

/* comment for period RS app */
.period_comment{
  overflow:scroll; 
  padding-left:1%;
  padding-top:1%;
  width:100%;
  height:auto;
  min-height:4em;
  font-weight: normal;
  font-size:0.8em;
  font-family: OfficinaSansStd-Book;
  color:rgb(243,152,0);
  
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

/* hide scrollbars android*/
.period_comment::-webkit-scrollbar {
  display: none;
} 
/*********************************
* CONTENT EVALUATION PAGE
**********************************/

/* Evaluation questions*/
.evaluation_questions{
	width:89%; 
	height:20%;
	padding-bottom:2%;
  padding-top:1%;
  padding-left:3%;
  padding-right:3%;
	margin-right:3%;
	margin-left:3%; 
	margin-top:1.5%;
	margin-bottom:1.5%;
	
	font-family: OfficinaSansStd-Book;
	/*font-weight:100;*/
	font-weight:normal;
	font-size: 0.9em;
	color: rgb(0,158,224);
	text-shadow: none!important;
}

/* Evaluation callback */
.evaluation_callback{
	width: 100%;
	height: 20%;
	margin-top: 5%;
	text-align: center;
}

.evaluation_callback_title{
	width: 100%;
	height : 50%;
	font-family: OfficinaSansStd-Book;
	/*font-weight:600;*/
	font-weight:normal;
	font-size: 1em;
	color: rgb(0,158,224);
	text-shadow: none!important;
}

.evaluation_callback_text{
	width: 100%;
	height : 50%;
	font-family: OfficinaSansStd-Book;
	/*font-weight:100;*/
	font-weight:normal;
	font-size: 0.7em;
	color: rgb(0,158,224);
	text-shadow: none!important;
}

/* style text-area */
.evaluation_text{
	
	-webkit-appearance: none; /* delete inner shadow in textfield */
	width: 98%;
	border-radius : 3px;
	border : 1px solid lightgrey;
	text-transform: uppercase; /* only capital as input */
	font-family: OfficinaSansStd-Book;
	/*font-weight:900;*/
	font-weight:normal;
	font-size: 1em;
	color: rgb(103,114,107);
  resize: none;
	
	
	outline: none;
}

/* style text-area onfocus */
.evaluation_text:focus{
	box-shadow: 0px 0px 3px rgb(243,152,0);
	color : rgb(243,152,0);
}

/* style simpletext */
.evaluation_simpletext{
	height:2em;
	-webkit-appearance: none; /* delete inner shadow in textfield */
	-moz-appearance: none;
	width:98%;
	border-radius : 3px;
	border : 1px solid lightgrey;
	text-transform: uppercase; /* only capital as input */
	font-family: OfficinaSansStd-Book;
	/*font-weight:900;*/
	font-weight:normal;
	font-size: 1em;
	color: rgb(103,114,107);
	padding: 0.5%;
	
	outline: none;
}

/* Removes select arrow in IE10 */
select::-ms-expand{
  display:none;
}

/* style simpletext onfocus */
.evaluation_simpletext:focus{
	box-shadow: 0px 0px 3px rgb(243,152,0);
	color : rgb(243,152,0);
}

/* style enum */
.evaluation_enum{
	
	-webkit-appearance: none; /* delete inner shadow in textfield */
	width:50%;
	border-radius : 3px;
	border : 1px solid lightgrey;
	text-transform: uppercase; /* only capital as input */
	font-family: OfficinaSansStd-Book;
	/*font-weight:900;*/
	font-weight:normal;
	font-size: 1em;
	color: lightgrey;
	padding: 1%;
	
	outline: none;
}

/* style enum onfocus */
.evaluation_enum:focus{
	box-shadow: 0px 0px 3px rgb(243,152,0);
	color : rgb(243,152,0);
}

/* style set */
.evaluation_set{
	
	-webkit-appearance: none; /* delete inner shadow in textfield */
	width:50%;
	border-radius : 3px;
	border : 1px solid lightgrey;
	text-transform: uppercase; /* only capital as input */
	font-family: OfficinaSansStd-Book;
	/*font-weight:900;*/
	font-weight:normal;
	font-size: 1em;
	color: lightgrey;
	padding: 1%;
	
	outline: none;

}

/* style set onfocus */
.evaluation_set:focus{
	box-shadow: 0px 0px 3px rgb(243,152,0);
	color : rgb(243,152,0);
}

/* set evaluation radio color when user click on the text*/
.eval_text_radio:active{
	color: rgb(243,152,0); /* dark orange */
}

/* set evaluation checkbox color when user click on the text*/
.eval_text_checkbox:active{
	color: rgb(243,152,0); /* dark orange */
}


/* change background image checkbox */
input[type="checkbox"] {
	display:none;
}

/* change background image checkbox unchecked*/
input[type="checkbox"] + label{
	display:inline-block;
	width:2em;
	height:2em;
	margin: 4% 5% -2.5% 0%;
	background-size :100% 100%;
	background-image:url('../images/app/checkbox_off.png');
	background-repeat: no-repeat; 
	background-position: center center;
	
}

/* change background image checkbox checked*/
input[type="checkbox"]:checked + label{
	
	background-image:url('../images/app/checkbox_on.png');
	background-repeat: no-repeat; 
	background-position: center center;
}


/* change background radio button image */
input[type="radio"] {
	display:none;
}

/* change background image radio button unchecked*/
input[type="radio"] + label{
	display:inline-block;
	height:2em;
	margin: 4% 5% -2.5% 0%;
	background-size :contain;
	background-image:url('../images/app/radio_off.png');
	background-repeat: no-repeat; 
	background-position: left;
	padding-left: 2.5em;
	line-height: 2em;
}

/* change background image radio button checked*/
input[type="radio"]:checked + label{
	background-image:url('../images/app/radio_on.png');
}

/* to align the text from the checkbox and radio*/
.align_text_1{
  width:100%;
  display:table;
  vertical-align:middle;
}

/* to align the text from the checkbox and radio*/
.align_text_2{
  display:table-cell;
  vertical-align:middle;
  width:90%;
}
/*********************************
* BUTTONS
**********************************/

.button_img{
	background-repeat: no-repeat;
	background-position: left; center;
	background-size: 1.5em auto;
	width:25%;
	height:100%;
	float:left;
}

.button_text{
	text-align:right;
	width:75%;
	height:100%;
	float:left;
	
	
	font-size : 1.0em;
	/*font-weight:900;*/
	font-weight:normal;
	font-family: OfficinaSansStd-Book;
	text-shadow: none !important;
	text-decoration:  none; 
}

.two_buttons{
	width:42.5%;
	height:60%;  
	float:left;
	color : white;
	display: block;	
	position:relative;
	
	top: 20%;	
	margin-left: 5%;
	text-align :right;	
	padding-right: 3%;	
	
  font-weight:bold!important;
  font-size :0.8em;

	text-shadow: none !important;
	text-decoration:  none; 
	/* Remove underline*/
	
	border-radius:5px;	
	background-color: rgb(0,158,224); /*blue*/
	border :none;	
}

.two_buttons:active{
	background-color:rgb(4,180,255); /*push blue*/
}

#download_all_but{

	width:90%;
	height:60%; 
	float:left;
	background-color : white;
	color : white;
	display: block;	
	position:relative;
	top: 20%;	
	margin-left: 5%;
	text-align :right;	
	padding-right: 3%;
	
	
	font-size : 1.0em;
	/*font-weight:900;*/
	font-weight:normal;
	font-family: OfficinaSansStd-Book;
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	
	background-size: 100% 100%;
	background-image: url('../images/di_app_projects/download_all_button_normal.png');
	border :none;
}

#download_all_but:active{
	background-image: url('../images/di_app_projects/download_all_button_push.png');
	color : rgb(0,138,186);
}	

.one_buttons{

	width:90%;
	height:60%; 
	float:left;
	color : white;
	display: block;	
	position:relative;
	top: 20%;	
	margin-left: 5%;
	text-align :right;	
	padding-right: 3%;
	
	
	font-size : 0.8em;
	font-weight:bold!important;
	
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	border-radius:5px;	
	background-color: rgb(0,158,224); /*blue*/
	border :none;
}

.one_buttons:active{
	background-color:rgb(4,180,255); /*push blue*/
}	

/* button in feedback and draaiboek */
.button_draaiboek{
	position:relative;
	right: 0px;
	width:100%;
	height:2.5em;
  line-height:2.5em;
	text-align:center;
	border-radius:5px;
	font-weight: normal;	
	font-size:1.2em;	
	font-family: OfficinaSansStd-Book;

}

.button_draaiboek:active{
	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	border : 2px solid white;
}

.button_draaiboek_img{
  background-size: auto 80%;
  background-repeat: no-repeat; 
  background-position: center center;
  width:20%;
  height:100%;
  float:left;   
}

.button_draaiboek_text{
  color:white;
  text-align:center;
  line-height:2.5em;
  width:60%;
  height:100%;
  float:left;
}

/* button add in draaiboek/intekenlijst */
.button_add{
	position:relative;
	right:0px;
	width:100%;
	height:2.5em;
	background-color: rgb(0,158,224);/*blue*/ 	
	color:white;
	text-align:center;
	border-radius:5px;
	font-weight: normal;	
	font-size:1.2em;	
	line-height: 2.5em;
	font-family: OfficinaSansStd-Book;
  
}

/* onclick change border */
.button_add:active{
	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	border : 2px solid white;
	background-color:rgb(4,180,255); /*push blue*/
}

/* Call buttton*/
.call_button{
  background-color :rgb(0,158,224);
  width:4em;/*width:15vw; create perfect square*/
  height:4em;/*height:15vw; create perfect square (old devices not supported*/
  border-radius:5px;
  float:left;
  margin-left:5%;
  background-size :auto 60%;
  background-image:url('../images/app/phone.png');
  background-repeat: no-repeat; 
  background-position: center center;
}

/* onclick change border */
.call_button:active{
	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	border : 2px solid rgb(230,245,255);
	background-color:rgb(4,180,255); /*push blue*/
}

/* Call buttton subtitle*/
.call_button_subtitle{
  background-color :rgb(0,158,224);
  width:2em;/*width:15vw; create perfect square*/
  height:2em;/*height:15vw; create perfect square (old devices not supported*/
  border-radius:5px;
  float:left;
  margin-left:5%;
  background-size :auto 60%;
  background-image:url('../images/app/phone.png');
  background-repeat: no-repeat; 
  background-position: center center;
}

/* onclick change border */
.call_button_subtitle:active{
	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	border : 2px solid white;
	background-color:rgb(4,180,255); /*push blue*/
}

/* div for the lwb */
.div_lwb_phone{
  width:100%;
  height:6vh;
}

/* div for call button lwb*/
.div_call_button_lwb{
  width:15%;
  height:100%;
  float:left;
}

/* div for lwb name */
.div_lwb_name{
  width:75%;
  height:100%;
  color: rgb(0,158,224);
  margin-left:10%;
  float:left;
}

/* Call button lwb*/
.call_button_lwb{
  background-color :rgb(0,158,224);
  width:2em;/*width:15vw; create perfect square*/
  height:2em;/*height:15vw; create perfect square (old devices not supported*/
  border-radius:5px;
  float:left;  
  background-size :auto 60%;
  background-image:url('../images/app/phone.png');
  background-repeat: no-repeat; 
  background-position: center center
}

/* onclick change border */
.call_button_lwb:active{
	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	border : 2px solid white;
	background-color:rgb(4,180,255); /*push blue*/
}

/* subtitle text (signlist), keylist etc*/
.subtitle_text{
  padding-top:0.5em;
  width:50%;
  height:2.5em;
  text-align:center;
  float:left;
  color :rgb(243,152,0);  /*orange*/
  font-family: OfficinaSansStd-Book;
  font-size:0.9em;
}

/* subtitle spave (left/rigth) (signlist), keylist etc*/
.subtitle_space{
  padding-top:0.5em;
  width:25%;
  height:2em;
  float:left;
}
/*********************************
* FOOTER
**********************************/

/* Footer of the screen at he bottom */
#div_footer{
	width: 100%;
	height: 8%;
	background-color : rgb(243,152,0);
	display: block;
	margin: auto;
	position: absolute;
	bottom: 0%;	
}



/* Landscape mode */
@media screen and (orientation:landscape){
  /* some CSS here */
	/* button 1 of footer */
	.footer_button_1{

		height: 100%;
		width: 5%;
		float :left;
		margin-left:2.5%;
		/*background-size: 100% auto;*/
		background-size: auto 70%;
		/*background-image: url('../images/app/Shopping_normal.png');*/
		background-repeat: no-repeat; 
		background-position: center center;		
	}
	
	/* button 2 of footer */
	.footer_button_2{

		height: 100%;
		width: 5%;
		float :left;
		margin-left:1.5%;
		
		/*background-size: 100% auto;*/
		background-size: auto 70%;
	/*	background-image : url('../images/app/Home_normal.png');*/
		background-repeat: no-repeat; 
		background-position: center center;
	}
	
	/* button 3 of footer */
	.footer_button_3{

		height: 100%;
		width: 5%;
		float :left;
		margin-left:1.5%;
		
		/*background-size: 100% auto;*/
		background-size: auto 70%;
		background-repeat: no-repeat; 
		background-position: center center;
	}
	
	/* button 4 of footer */
	.footer_button_4{

		height: 100%;
		width: 5%;
		float :left;
		margin-left:1.5%;
		
		/*background-size: 100% auto;*/
		background-size: auto 70%;
		background-repeat: no-repeat; 
		background-position: center center;
	}
}

/* Portrait mode */
@media screen and (orientation:portrait){
  /* some CSS here */
  
	/* button 1 of footer */
	.footer_button_1{

		height: 100%;
		width: 10%;
		float :left;
		margin-left:5%;
		/*background-size: 100% auto;*/
		background-size: auto 70%;
		/*background-image: url('../images/app/Shopping_normal.png');*/
		background-repeat: no-repeat; 
		background-position: center center;
	}	
	
	/* button 2 of footer */
	.footer_button_2{

		height: 100%;
		width: 10%;
		float :left;
		margin-left:3%;
		
		/*background-size: 100% auto;*/
		background-size: auto 70%;
	/*	background-image : url('../images/app/Home_normal.png');*/
		background-repeat: no-repeat; 
		background-position: center center;
	}
	
	/* button 3 of footer */
	.footer_button_3{

		height: 100%;
		width: 10%;
		float :left;
		margin-left:3%;
		
		/*background-size: 100% auto;*/
		background-size: auto 70%;
		background-repeat: no-repeat; 
		background-position: center center;
	}
	
	/* button 4 of footer */
	.footer_button_4{

		height: 100%;
		width: 10%;
		float :left;
		margin-left:3%;
		
		/*background-size: 100% auto;*/
		background-size: auto 70%;
		background-repeat: no-repeat; 
		background-position: center center;
	}
}

/* Change background image when pressed */
.footer_button_1:active{
	/*background-image : url('../images/app/Shopping_push.png');*/
	background-repeat: no-repeat; 
	background-position: center center;
}

/* Change background image when pressed */
.footer_button_2:active{
	/*background-image: url('../images/app/Home_push.png');*/
	background-repeat: no-repeat; 
	background-position: center center;
}

/* Change background image when pressed */
.footer_button_3:active{
	background-repeat: no-repeat; 
	background-position: center center;
}

/* Change background image when pressed */
.footer_button_4:active{
	background-repeat: no-repeat; 
	background-position: center center;
}



/* Refresh button of footer */
.div_refresh_footer{
	height: 100%;
	width: 10%;
	float :left; 
	margin-left:3%;
	background-size: 85% auto;		/*width heigth*/			
	background-image : url('../images/app/refresh_button_normal.png');
	background-repeat: no-repeat; 
	background-position: center center;
 }
 
 /* Change background image when pressed */
.div_refresh_footer:active{
	background-image : url('../images/app/refresh_button_push.png');
	background-repeat: no-repeat; 
	background-position: center center;
}

/* Company logo of footer */
.div_logo_footer{

	height: 100%;
	/*width: 62%;*/
	width: 46%;
	float :right;	
}	

/* Div for the version */
.div_username{
	font-family: OfficinaSansStd-Book;
	font-weight :900;
	font-size : 0.7em;
	height: 40%;
	/*width : 71%;*/
	width : 45%;
	/*color: rgb(255,184,100);*/
  color: white;
	bottom :0px;
	position:absolute;
	margin-top:5%;

}

/* span for the username text */
.div_username_text{
  height:50%;
	bottom:0; 
	position:absolute; 
	right:0;
	text-decoration : none;
	text-shadow: none !important;
}

/* Div for the username */
.div_version{

	font-family: OfficinaSansStd-Book;
	font-weight :900;
	font-size : 0.7em;

	height: 40%;
	/*width : 71%;*/
	width : 45%;
	color: white;
	top :0px;
	position:absolute;
	margin-bottom:3%;
}

/* span for the username text */
.div_version_text{
  height:50%;
	top:0; 
	position:absolute; 
	right:0;	
	text-decoration : none;
	text-shadow: none !important;

}


											
/*********************************
* TOASTER
**********************************/	
/* container for toaster*/
.toast_container{
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  width:100%;
  height:auto;
  text-align:center;
	color :white;
	font-size: 0.8em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:normal;
	padding-top:0.5%;
	overflow: auto;
	-webkit-overflow-scrolling: touch; 
}

/* div for the toast alert text  */
.toast_text{

	height:60px;
	text-align:center;
	color :white;
	font-size: 0.8em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:normal;
	padding-top:2%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;  /*Better scrolling and delete some flicker in transition*/		
	
}
	
/* div for the toast alert buttons  */
.toast_buttons{
	height:40px;
}

/* div for the toast alert with one button  */
.one_button{
	width:100%;
	height:100%;
	position:relative;
}

/* button for the toast alert with one button  */
.one_button_1{

	width:100%;
	height:100%;
	border:none;
	background:none;
	background-color: white;
	position:absolute;
	color:rgb(0,158,224);
	font-size: 0.8em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:normal;

	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	
	
}

/* div for the toast alert with one button  */
.one_button_1:active{
	background-color:rgb(255,184,100);
	color:white;
}

/* div for the toast alert with two buttons, button 1  */
.two_buttons_1{
	width:50%;
	height:100%;
	position:relative;	

	float:left;
}

/* button for the toast alert with two buttons, button 1  */
.two_buttons_1_1{
	width:100%;
	height:100%;
	border:none;
	border-right: 1px solid rgb(243,152,0);
	background:none;
	position:absolute;
	color:rgb(0,158,224);
	background-color: white;
	font-size: 0.8em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:normal;
	border-bottom-left-radius : 10px;
}

/* button for the toast alert with two buttons, button 1 */
.two_buttons_1_1:active{
	background-color:rgb(255,184,100);
	color:white;	
}

/* div for the toast alert with two buttons, button 2  */
.two_buttons_2{
	width:50%;
	height:100%;
	position:relative;	

	float:left;
}

/* button for the toast alert with two buttons, button 2  */
.two_buttons_2_1{
	width:100%;
	height:100%;
	border:none;
	border-left: 1px solid rgb(243,152,0);
	background:none;
	position:absolute;
	color: rgb(0,158,224);
	background-color: white;
	font-size: 0.8em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:normal;
	border-bottom-right-radius : 10px;		
}

/* button for the toast alert with two buttons, button 2  */
.two_buttons_2_1:active{
	background-color:rgb(255,184,100);
	color:white;
}

/* div for toast title text */
.toast_title{
	height:40px;
	text-align:left;
	color :white;
	font-size: 0.8em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 700;*/
	font-weight:normal;
	padding-top:2%;

}

/* div for toast title text */
.toast_title_text{
	height:100%;
	width:90%;
	float:left;
	padding-left:2%;
}

/* div for toast message cancel image*/
.toast_title_img{
	height:100%;
	width:10%;
	float:left;
	position:relative;
} 										

/* div for toast message image */
.toast_title_img_1{
	/*height:60%;
	width:60%;*/
	
	/*square*/
	width: 50%;
	height: 0;
	padding-bottom: 50%;
		
	position:absolute;
	top:0;
	right:10%;
	border:none;
	background:none;
	background-size: 100% 100%;
	background-image: url('../images/app/toast_cancel.jpg');
	
}

/* div for toast message text */
.toast_msg_text{
	height:20px;
	font-size: 0.6em;
	font-family: OfficinaSansStd-Book;
	/*font-weight: 400;*/
	font-weight:normal;
	padding-left:2%;
}

/* overloay when toater shows*/
.overlay {
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.55);
    z-index:9999;
}
 /* overloay when toater shows*/
.overlay:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

/* the signature buttons */
.signature_buttons{
	font-family: OfficinaSansStd-Book;
	/*font-weight: bold;*/
	font-weight:normal;
	font-size: 1em;
	margin-left:10%;
	width:20%;
	/*background-color:rgb(208,213,210);
	border:1px solid rgb(200,203,200); 
	border-radius:3px;
	text-align:center;*/
	color:white;
	float:left;
	background-size : auto 100%;
	background-repeat:no-repeat;
	background-position:center;
	opacity:1;
}

/* the signature buttons onclick*/
.signature_buttons:active{
	opacity:0.6;
}

/* the sign button */
.sign_button{
	font-family: OfficinaSansStd-Book;
	/*font-weight: bold;*/
	font-weight:normal;
	font-size: 1em;
	background-color:rgb(208,213,210);
	border:1px solid rgb(200,203,200);
	border-radius:3px;
	text-align:center;
	color:white;
	width:100%;
	height:40px;  /* overwritten with js*/
}

/* the sign button onclick*/
.sign_button:active{
	background-color:rgb(190,197,192);
}

#signature_show_to_user{
	width:100%;
	border-radius:3px;
	background-color:white;
	display:block;
	border:1px solid lightgrey;
}

#signature_show_to_user:active{
	background-color: rgb(245,245,245);
}

.advertisement_text{
  text-shadow:none !important;
  font-family: OfficinaSansStd-Book;
  font-weight: normal;
  font-size: 1em;
  color : rgb(0,158,224);
  text-align:center;
  width:100%;
  height:10%;
  margin-top: 5%;
}

.advertisement_timer{
  text-shadow:none !important;
  font-family: OfficinaSansStd-Book;
  font-weight: normal;
  font-size: 1em;
  color : rgb(0,158,224);
  text-align:center;
  display:table;
  width:100%;
  height:10%;
}

.advertisement_img{
  position:relative;
  width:100%;
  height:60%;
  background-size :100% auto;
  background-repeat: no-repeat; 
  background-position: center center;
}

#advertisement_confirm {
	display: none;
}

.keyboard{
  background-color:white;
  width:100%;
  height:55%;
  display:none;
}

.legend_symbols_img{
  height:100%;
  width:33.4%;
  float:left;
  text-align:center;
  background-repeat: no-repeat; 
  background-position: center center;
  background-size : auto 80%;
}

.legend_item{
  height:60%;
  width:33.3%;
  float:left;
}

.legend_symbol{
  width:100%;
  height:60%;
}

.legend_text{
  width:100%;
  height:40%;
  text-align:center;
}


.rs_device{
  width:100%;
  height:3em;
  display:table;
}

.rs_content p{
  text-shadow:none !important;
  font-family: OfficinaSansStd-Book;
  font-weight: normal;
  font-size: 1em;
  color : rgb(0,158,224);
  text-align:center;
}

.rs_device_text{
  display:table-cell;
  vertical-align:middle;
  font-weight: normal;
  font-size:1em;
  font-family: OfficinaSansStd-Book;
  color:rgb(0,158,224);  
  width:70%;
}

.rs_device_info{
 display:table-cell;
  vertical-align:middle;
  width:15%;  
  background-size: auto 50%;
	background-repeat: no-repeat; 
	background-position: center center;
}

.rs_device_img{
  display:table-cell;
  vertical-align:middle;
  width:15%;
  background-size: auto 60%;
	background-repeat: no-repeat; 
	background-position: center center;
}

.rs_buttons{
  height :20%;
  width:100%;  
  display:none;
  border-bottom:1px solid lightgrey;
	
	/* place border inside the div*/
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;

  
}

.rs_button{ 
  margin-left:10%;
  width:80%;
  height:50%;
  background-color:rgb(0,158,224); /*blue*/
  border:none;
  border-radius:0.5em;
  font-family: OfficinaSansStd-Book;
  font-weight:normal;
  color:white;
  font-size:1.2em;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  display:block;
  vertical-align:middle;
}

.rs_button:active{
  background-color:rgb(4,180,255); /*push blue*/
}

.rs_button_container{
  width:50%;
  height:100%;
  display:table;
  float:left;
}

.rs_button_wrapper{
  display:table-cell;
  vertical-align:middle;
}

.rs_repeat_text{
  width:100%;
  height:45%;
}


.rs_repeat_buttons{
  width:100%;
  height:55%;
  position: relative;
}

#rs_letter_buttons  {
    width: 84%;
    height: 100%;
    position: relative;
}

#rs_button_backspace_container {
    width:16%;
    position: absolute;
    top: 0;
    right: 0;
}

.rs_button_repeat{
  margin-top:1%;
  margin-left:1%;
  margin-right:0%;
  float: left;
  width:15.5%;
  height:50%;
  background-color:rgb(0,158,224);
  border:none;
  border-radius:0.5em;
  font-family: OfficinaSansStd-Book;
  font-weight:bold;
  color:white;
  font-size:1.4em;
}

.rs_button_repeat:active{
  background-color:rgb(4,180,255); /*push blue*/
}

.rs_repeat_element{
  height:90%;
  margin-left:35%;
  width:30%;
  float:left;
  border-bottom: 0.1em solid lightgrey;
  text-align:center;
  padding-top:3%;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  font-family: OfficinaSansStd-Book;
  font-weight:bold;
  color:rgb(0,158,224);
  font-size:1.4em;
  display:none;
}

.rs_repeat_element_text{
  height:90%;
  margin-left:0%;
  width:100%;
  float:left;  
  text-align:center;
  padding-top:3%;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:        border-box;
  font-family: OfficinaSansStd-Book;
  font-weight:normal;
  color:rgb(0,158,224);
  font-size:1em;

}

.rs_repeat_button_text{
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}

.show_period{
  width:100%;
  height:5em;
  display:none;
  border-bottom:1px solid rgb(243,152,0);
}

.period_buttons{
  text-shadow:none;
  font-family: OfficinaSansStd-Book;
  font-weight:normal;
  font-size: 0.8em;
  border-bottom-right-radius: 0.7em;
  border-bottom-left-radius: 0.7em;
  background-color:rgb(243,152,0);
  color:white;
  text-align:center;
  width:30%;
  margin-left:35%;
  height:8%;
}

.period_buttons:active{
  background-color : rgb(255,184,100);
}


.rs_overlay{
  position:absolute;
  top:21%/*below search and tabs*/;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0, 0, 0, 0.55);
  z-index:9999;
  color:red;
  text-align: center;
  padding-top:50%;
  font-family: OfficinaSansStd-Book;
  font-weight:bold;
  font-size: 1.2em;
  text-shadow: none !important;
  display:none;
}

#resend_sms:active{
  color:rgb(243,152,0);
}


#status_log_bar{
  border-bottom: 1px solid lightgrey;
  width:100%;
  height:5%;
  font-size:0.8em;
  font-weight:normal;
  font-family:OfficinaSansStd-Book;
  text-shadow: none !important;
  color:rgb(0,158,224);
  display:table;
  text-align:center;
}

.font{
  font-weight: normal;
  font-size:1.1em;
  font-family: OfficinaSansStd-Book;
  color:rgb(0,158,224);

}
    
.div_all_materieel{
  font-size:0.9em;    
  height:7%;
  position:absolute;
  bottom:0;
  width:100%;
  border-top: 1px solid lightgrey;
  display:none;  
  font-family: OfficinaSansStd-Book;
  font-weight:normal;
  color: rgb(0,158,224);
  padding-left:0.5em;
  -moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing:        border-box;
}

#div_content_administration .submenu_button_img {
	width: 100%;
}

/* Sign-in list access levels */

.accessLevelForm, .accessLevelCurrent {
	height: auto;
	font-size: 0.7em;
	display: block;
	overflow: hidden;
	background-color: rgb(230,245,255);
}

.accessLevelForm > input[type=submit] {
	background-color: rgb(0,158,224);
	width: 100%;
	height: 4em;
	border-radius: 5px;
	border: none;
	color: white;
	margin-top: 1.5em;
}

/* Work time info */

.workTimeInfo {
	background: url(../images/di_app_realtime/info.png) no-repeat center;
	width: 100%;
	height: 2em;
	background-size: contain;
}

/* Landscape mode */
@media screen and (orientation:landscape){
	/* some CSS here */
	#import_profile_email_di_info, #get_profile_email_di_info {
		position: relative;
	}
}


/* Portrait mode */

@media screen and (orientation:portrait){
	/* some CSS here */


}