@CHARSET "ISO-8859-1";



	#background_opacity {
/* 		position: fixed;
		z-index: -10;
		top: 0; left: 0; right: 0; bottom: 0;
		background-color: rgba(255, 255, 255, 0.5); L'opacite se regle ici */
	}
	  /*rgba(0, 205, 255, 0.8);*/


 /*page setup */

   [data-role=content],[data-role=main],[data-role=header],[data-role=footer]{

		max-width: 600px;

		margin: auto;
	} 

   .ui-panel-wrapper,[data-role=page]{
	
		background:url(/img/jpg/key.jpg) repeat center center fixed;
		background-size: 140px 108px; 
	
	} 

	#all_iot .ui-collapsible-set{
		/* background-color: rgba(0, 85, 153, 0.6); */
	}

	#all_iot .ui-collapsible-heading-toggle{
		/* background-color: rgba(221, 221, 221, 0.9) !important */
		
	}
	
	#all_iot .ui-collapsible-content {
/* 		background-color: white;
		opacity:0.95; */
	}
	.ui-body{
		//opacity:0.95;
		width:85%;
		margin: auto;
		//height:100%;
	}
 
 
 /*properties for hidden text */
 .text-hidden{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
    }
   

/*light login */
#login_lightlogin input{
	padding: 10px;
}



/*user data update screen formatting */

 	#password_change_state{
		display:none;
	    text-align: center;
	    width: 100%;
	    height: 2em;
	    padding-top: 0.75em;
	    border-radius: 10px;
	}
	
	#password_change_state.success  {
		display:block;
		background-color: #05f709;
	    color: black;
		}	
	
	#password_change_state.error {
		display:block;
		background-color: red;
	    color: white;
	}
	
	#update_user_data label{
	 		font-size: 1em;	
	 		font-family: fantasy;
	 		margin-left: 10px;	
	}
	
	#light_login_picture_picker{
		text-align: center;
	
	}
	#light_login_picture_picker img{
		padding:10px;
		height:40px;
		width:40px;	
	}
	
	#light_login_picture_picker img[selected_pic="true"]  {
			border-style: solid;
			border-color: black;
			border-width: 2px;
			background-color:rgba(255, 0, 71, 0.15);
			//border-radius: 25px;
			
		}
	#current_light_login_pic img{
		height:35px;
		width:35px;	
		padding-bottom: 10px;
		margin-left: 30px;	
	}

/*Iot data editable by user an stored in the iot properties table*/

	.Iot_device_title{
		border-top-style: inset;
    	border-top-color: green;
    	border-top-width: 4px;
	}
	
	.editable{
/* 		background-color:white;
		padding:0.4em;
		border-radius: 25px;
 */		color:black;
		text-shadow: 1px 1px 2px rgba(10, 230, 27, 0.68);
	}


/*Iot data in title on page index.php*/
	
	
	
	.iot-details {
		white-space: normal;
		min-width: 200px;

 	}
 
	.iot-status-bar table{
		width: 100%;
		text-align: center;
	}
	
	.iot-status-bar td {
		width: 50%;
		text-align: center;
		font-size: 0.7em;
	}
			
 	.iot-status-bar img{
 		height:10px;
 		font-size: 1em;
 	}


	.iot-description {
		width: 80%;
		margin:auto;
		text-align: center;
		padding:0.2em!important;
		
	}
	
	.iot-description table {
		width:100%;
		
	}
	
	.iot-description tr {
 		font-size: 10px;
 		vertical-align: top;
 		padding-right: 10px;
 		padding-bottom: 0.3em;
 		text-align: left;
 	}	
	
	.iot-description .label {
 		text-align: right;
 	}	
 		
/* 	.Iot_device_title .online-status .img-online {
		height:40px;	
	}
	
	.Iot_device_title .online-status .offline {
		height:15px;
	}	
	
	.Iot_device_title .online-status .online {
		height:15px;
	}
	 */
	



	.iot-gmap-show-toggle {
/* 		line-height: 0; 
	    font-size: 0;
	    color: transparent;  */
	}
		
		.map-visible img{
			height:70px;
		}	
		.map-hidden img{
			height:70px;
		}
		.iot-navigation img{
			height:60px;
			padding-bottom: 9px;	
		}	

	.iot_device_bloc{
		background-color: black;
		padding: 10px;
	}
	
	.iot-name-title{
		font-size: x-large;
	}

/*custom yellow button with the share symbol*/
	.ui-icon-share {
		background: url(/img/png/share-icon.png);
		background-position: center center;
		background-size: 70% 70%;
		background-color:yellow!important;
		background-repeat:no-repeat;
		border=0;
	}


/*
*Style formatting for the list holding data shares for an action button
*/

	.group-btn-share-action{
		/*background-color:#008000!important;*/
		width: 100%;
		margin-bottom: 0px!important;
		border-bottom: 0px!important;
		padding-bottom: 0px!important;
	}
	.btn-shares {
		width: 10em;	
	}
	.btn-action{
		width: 7em;	
/*		
	   pointer-events: none;
	   cursor: default;	
	   background: url(/img/png/share-icon.png);
	   background-size: 70% 70%;	
*/
	}
	.btn-shares-add{
		background: url(/img/png/sign_plus_red.png) no-repeat;
		background-size: 2em;
		background-position: center;
		display: block;
		height: 2em;
	}



	.list-btn-shares{
		display: none; 
		text-align: right;
		text-shadow:none;
		font-size:1.5em;
		background-color: #229A45;
		color:black;
		margin-top: -5px;
		padding-top: 5px;
		padding-left:1em;
		border-radius  :10px 0px 0px 10px;
	}






/* NOT USED */


/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.ButttonsShareList thead th,
.ButttonsShareList tbody th .ui-table-cell-label,
.ButttonsShareList tbody td .ui-table-cell-label {
    text-transform: uppercase;
    font-size: .7em;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
}
/* White bg, large blue text for rank and title */
.ButttonsShareList tbody th {
    font-size: 1.2em;
    background-color: #fff;
    color: #77bbff;
    text-align: center;
}
/*  Add a bit of extra left padding for the title */
.ButttonsShareList tbody td.title {
    padding-left: .8em;
}
/* Add strokes */
.ButttonsShareList thead th {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.ButttonsShareList tbody th,
.ButttonsShareList tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
}
/*  Custom stacked styles for mobile sizes */
/*  Use a max-width media query so we don't have to undo these styles */
@media (max-width: 40em) {
    /*  Negate the margin between sections */
    .ButttonsShareList tbody th {
        margin-top: 0;
        text-align: left;
    }
    /*  White bg, large blue text for rank and title */
    .ButttonsShareList tbody th,
    .ButttonsShareList tbody td.title {
        display: block;
        font-size: 1.2em;
        line-height: 110%;
        padding: .5em .5em;
        background-color: #fff;
        color: #77bbff;
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }
    /*  Hide labels for rank and title */
    .ButttonsShareList tbody th .ui-table-cell-label,
    .ButttonsShareList tbody td.title .ui-table-cell-label {
        display: none;
    }
    /*  Position the title next to the rank, pad to the left */
    .ButttonsShareList tbody td.title {
        margin-top: -2.1em;
        padding-left: 2.2em;
        border-bottom: 1px solid rgba(0,0,0,.15);
    }
    /*  Make the data bold */
    .ButttonsShareList th,
    .ButttonsShareList td {
        font-weight: bold;
    }
    /* Make the label elements a percentage width */
    .ButttonsShareList td .ui-table-cell-label,
    .ButttonsShareList th .ui-table-cell-label {
        min-width: 20%;
    }
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 40em ) {
    /* Show the table header rows */
    .ButttonsShareList td,
    .ButttonsShareList th,
    .ButttonsShareList tbody th,
    .ButttonsShareList tbody td,
    .ButttonsShareList thead td,
    .ButttonsShareList thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .ButttonsShareList td .ui-table-cell-label,
    .ButttonsShareList th .ui-table-cell-label {
        display: none;
    }
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 40em ) {
    .ButttonsShareList td,
    .ButttonsShareList th {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}