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

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

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

	body{			
		-webkit-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;
		font-size : 24px;
	}
}

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

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

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

}

	
/* Landscape mode */
@media screen and (orientation:landscape){
  /* some CSS here */

}


/* Portrait mode */

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

}

@font-face {
    font-family: "Interstate Black";
    src: url('../fonts/Interstate Black.ttf');
}


/*********************************
* 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);
	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;
	box-sizing:        border-box;
	
	display: table;
	vertical-align: middle;
	float: left;	

}

/* Left header text center vertically and horizontally*/
.div_left_header_text{
	height:100%;
	width:100%;
	
	display: table-cell;
	vertical-align: middle; 
	
	font-size: 1.2em;
	font-family: Interstate Black;
	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: absolute;	

	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: Interstate Black;
	font-weight: bold;
	font-size: 0.8em !important;
	color: white !important;	
	text-shadow: none !important;
}

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

}

/* Page to load the documents/uploads/scans */
#loaded_page{
	width:100%;
	/*height:65% ;/*!important;*/
	height: 79.2%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch; /* Better scrolling and delete some flicker in transition*/	
}

#loaded_page p{
	text-shadow:none !important;
	font-family: Interstate Black;
	font-weight: bold;
	font-size: 1em;
	color : rgb(0,158,224) !important;
	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;
	-webkit-overflow-scrolling: touch; /* Better scrolling and delete some flicker in transition*/	
}

/* 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: Interstate Black!important;
	font-weight: bold!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)

}

/* 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;
}

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

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

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

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

	font-family: Interstate Black;
	font-weight: 700;
	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: 13%;
	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{	
	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-size:0.8em;
	font-family:Interstate Black;
	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-size:1em;
	font-family :Interstate Black;
	color : rgb(0,158,224) !important;
	text-shadow: none !important;
	text-align: left;
}		

/* to center the text */
.document_text_center{
	width:100%;
	height:20%;
	position:relative;
	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: Interstate Black;	
	font-size: 0.8em;
	text-transform: uppercase; /* only capital as input */
	font-weight: 700;	
	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: Interstate Black;
	font-size: 0.7em;
	font-weight: 900;
}

.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: Interstate Black;
	font-size: 0.6em  !important;
	font-weight: 700  !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: Interstate Black;
	font-weight: 400;
	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: 44%;
	background-size: 100% 100%;
	overflow:hidden;	
	margin-left:  4.3%;
	margin-right: 0%;
	margin-top: 2.5%;
	margin-bottom: 0%;													

	/* 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{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/*border-radius: 5px;*/
	z-index:1;
	background-size: 100% 100%;
}											

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

}

/* Text under the button */
.div_button_text{
	font-family :Interstate Black;
	font-size: 1.1em;
	font-weight: 900;
	color:white; 
	text-shadow:none !important;
	text-align:center;
	width:100%; 
	height:20%; 
	bottom:0px;
	position:absolute; 
	z-index:2;
}

/*  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*/
}

/* 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-size:0.8em;
	font-family:Interstate Black;
	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;
}


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

/*********************************
* CONTENT EVALUATION PAGE
**********************************/

/* Evaluation cancel button */
#evaluation_cancel{

	width:42.5%;
	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 : 0.9em;
	font-weight:900;
	font-family: Interstate Black;
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	
	background-size: 100% 100%;
	background-image: url('../images/app/blue_button.png');
	border: none;

}

/* On click evaluation cancel button */
#evaluation_cancel:active{
	/*background-image: url('../images/di_app_projects/cancel_button_push.png');*/
	color : rgb(0,138,186);
}

#evaluation_submit{
	width: 42.5%;
	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 : 0.9em;
	font-weight:900;
	font-family: Interstate Black;
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	
	background-size: 100% 100%;
	background-image: url('../images/app/blue_button.png');
	border: none;
}
															
/* On click evaluation submit button */
#evaluation_submit:active{
	/*background-image: url('../images/di_app_projects/submit_button_push.png');*/
	color : rgb(0,138,186);
}

/* Evaluation questions*/
.evaluation_questions{
	width:89%; 
	height:20%;
	padding:3%;
	margin-right:3%;
	margin-left:3%; 
	margin-top:1.5%;
	margin-bottom:1.5%;
	
	font-family: Interstate Black;
	font-weight:100;
	font-size: 0.7em;
	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: Interstate Black;
	font-weight:600;
	font-size: 1em;
	color: rgb(0,158,224);
	text-shadow: none!important;
}

.evaluation_callback_text{
	width: 100%;
	height : 50%;
	font-family: Interstate Black;
	font-weight:100;
	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: Interstate Black;
	font-weight:900;
	font-size: 1em;
	color: lightgrey;	
	
	
	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:20px;
	-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: Interstate Black;
	font-weight:900;
	font-size: 1em;
	color: lightgrey;
	padding: 1%;
	
	outline: 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: Interstate Black;
	font-weight:900;
	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: Interstate Black;
	font-weight:900;
	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:23px;
	height:23px;
	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;
	width:23px;
	height:23px;
	margin: 4% 5% -2.5% 0%;
	background-size :100% 100%;
	background-image:url('../images/app/radio_off.png');
	background-repeat: no-repeat; 
	background-position: center center;
	
}

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

/*********************************
* CONTENT UPLOAD PAGE
**********************************/

#upload_file_selection{

	width:42.5%;
	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 : 0.9em;
	font-weight:900;
	font-family: Interstate Black;
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	
	background-size: 100% 100%;
	background-image: url('../images/app/blue_button.png');
	border :none;
}

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

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

.button_text{
	text-align:right;
	width:75%;
	height:100%;
	float:left;
}

#upload_camera{
	width:42.5%;
	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 : 0.9em;
	font-weight:900;
	font-family: Interstate Black;
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	
	background-size: 100% 100%;
	background-image: url('../images/app/blue_button.png');
	border :none;
}

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

#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 : 0.9em;
	font-weight:900;
	font-family: Interstate Black;
	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);
}	


/*********************************
* CONTENT SCAN PAGE
**********************************/
#scan_button{

	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 : 0.9em;
	font-weight:900;
	font-family: Interstate Black;
	text-shadow: none !important;
	text-decoration:  none; /* Remove underline*/
	
	background-size: 100% 100%;
	background-image: url('../images/app/blue_button_big.png');
	border :none;
}

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


/*********************************
* 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: Interstate Black;
	font-weight :900;
	font-size : 0.7em;
	height: 40%;
	/*width : 71%;*/
	width : 45%;
	color: rgb(255,184,100);
	bottom :0px;
	position:absolute;
	margin-top:5%;

}

/* span for the username text */
.div_username_text{

	bottom:0; 
	position:absolute; 
	right:0;
	text-decoration : none;
	text-shadow: none !important;
}

/* Div for the username */
.div_version{

	font-family: Interstate Black;
	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{

	top:0; 
	position:absolute; 
	right:0;	
	text-decoration : none;
	text-shadow: none !important;

}


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

	height:60px;
	text-align:center;
	color :white;
	font-size: 0.8em;
	font-family: Interstate Black;
	font-weight: 700;
	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: Interstate Black;
	font-weight: 700;

	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: Interstate Black;
	font-weight: 700;	
	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: Interstate Black;
	font-weight: 700;	
	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: Interstate Black;
	font-weight: 700;
	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: Interstate Black;
	font-weight: 400;
	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: Interstate Black;
	font-weight: bold;
	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:0.6;
}

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

/* the sign button */
.sign_button{
	font-family: Interstate Black;
	font-weight: bold;
	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);
}