.panel_favorite
{
  height: calc(100% - 55px);
}

.secondary-panel
{
  height: calc(100% - 55px) !important;
}

#id_list_periphs
{
  height: calc(100% - 35px) !important
}

#periphs_page
{
  height: calc(100% - 55px) !important
}

.ui-mobile-viewport
{
  overflow-x: hidden;
  overflow-y: auto;
}

#widgets_list
{
  background-color: #FFF;
}

.ui-panel-open {
  width: 250px;
}

.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn {
  border: 1px solid #FFF !important; /* Hack for Windows phone menu */
}
 
.ui-listview>li h2 {
  white-space: normal;
}

.ui-content .ui-listview  li {
  /*commented to allow long wizard to show nicely*/
  /*padding: 5px 0;
  height: 70px;*/
}

.ui-content .ui-listview >li h2 {
  margin: 0;
}

.ui-header .ui-title, .ui-footer .ui-title {
  margin-right: 100px;
  text-align: center;
}

.ui-thumbnail {
  width: 64px !important;
  height: 64px !important;
  background-size: 64px 64px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 1em;
  z-index: 1;
}
.ui-thumbnail-over {
  z-index: 2;
}


.macro_input {
  width: 40px; /*a bit wider for iPad*/
}

.nd2Tabs {
  margin-left: 15px;
}

#history_page .ui-content {
  padding-left: 0 !important;
}

#history_page #history_list {
  padding-left: 1em !important;
}

#nav_panel li i {
  margin-right: 15px;
}

.main-panel {
  padding: 1em 0em 0 0em;
}

.main-panel div {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  width: 115px;
  height: 105px;
}

.main-panel  img {
  background-size: 64px 64px;
  width: 64px;
  height: 64px;
}
.main-panel span {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.main-panel .waves-effect {
  width: 64px;
  height: 64px;
  margin: auto auto 6px auto;
  border-radius: 10px;
}

.notice_block{
  width: 100%;
  margin: 0px;
  padding: 5px 15px 5px 5px;
  display: inline-block;
  background-color : #FFEFBF;
}

.notice_messages{
  float:left;
  margin: 1px;
	font-size: 14px;
}
  
.notice_right{
  float:right;
  margin: 2px;
  color: #666666;
  font-size: 14px;
}

.notice_right a{
	padding: 12px;
}
.ui-content .ui-listview li.camera_card, .ui-content .ui-listview li.geoloc_card {
  margin: -1.5em 1em;
  height: auto;
}

.nd2-card {
  max-width: 640px;
  margin: 15px 0;
}

.nd2-card .card-action {
  text-align: right;
}
.nd2-card .card-action a {
  font-size: 11px;
}

.nd2-sidepanel-profile .profile-background {
  position: absolute;
  top: 15px;
  left: 15px;
  width: auto;
  height: auto;
  z-index: -1;
}

.ui-edit-favorite,
.lan-icon {
  margin-right: 38px !important;
}


.ui-header > .lan-icon {
  background: #6D84A3 url("../img/box_eedomus.svg") 14px 19px/16px 16px no-repeat;
  display: none;
}

.ui-header > .lan-icon-show {
  display: inline;
}

.ui-content .ui-mini-list.ui-listview  li {
  padding: 5px 0;
  height: 36px;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}

.ui-mini-list img.ui-thumbnail {
  max-width: 32px !important;
  max-height: 32px !important;
  background-size: 32px 32px;
  position: absolute;
}

.ui-mini-list>li p {
  margin: auto 60px;
  line-height: 36px;
}

.ui-mini-list .ui-flipswitch {
  position:absolute;
  top: 0;
  right: 10px;
  width:50px;
  height:26px;
  line-height: 30px;
}
.ui-mini-list .ui-flipswitch-active {
  padding-left:0px;
}
.ui-mini-list .ui-flipswitch .ui-flipswitch-on,
.ui-mini-list .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
  width: 24px;
  height: 24px;
}
.ui-mini-list .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
  padding-top: 0px;
  margin-left: 25px;
  line-height: inherit;
}

.ui-mini-list .ui-flipswitch-off {
  line-height: inherit;
}

#notifications_list li {
  border-bottom: 1px solid #ddd;
  height: auto;
  min-height: 50px;
}

#notifications_list div span {
  position: absolute;
  right: 10px;
  top: 12px;
  font-size: 13px;
  font-weight: 300;
}

#notifications_list div img {
  margin: 5px 0 5px 10px;
}

#notifications_list p {
  margin: 0 10px;
  font-weight: 500;
}

.camera_card, .geoloc_card {
  margin-left:1em !important;
}

.cam-title {
  display: inline !important;
  font-size: 16px !important;
}

.cam-subtitle {
  padding-left: 6px;
  font-size: 13px !important;
}

.cam-header {
  padding: 4px !important;
}

/*Limitation des marges pour les caméras*/
.camera_card {
    margin: 0px -5px -5px -5px !important;
}

.nd2-card 
{
   margin-bottom: 0px 0px 16px 0px !important; /* caméra dans les favoris */
}
  
.nd2-card .card-media {
  background-image: url(../img/camera_loading.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  /*background-position: center;*/
}

.card-media-map
{
  background-image: url(../img/map_loading.png) !important;
}

.card-media-favorites
{
  background-image: url(../img/camera_loading.png) !important;
  min-height: 200px !important;
}

.ui-page-theme-a .ui-header {
    background-color: #6D84A3;
    color: #ffffff;
}

::-webkit-scrollbar { 
  display: none; 
}

@media not all and (min-width: 700px) {
  .main-panel:not(#panels_icons) {
    display:none;
  }
  #home .secondary-panel {
    display:none;
  }
}

@media all and (min-width: 700px)
{

  .ui-mobile .ui-page-active {
    overflow:hidden;
  }

  .secondary-panel{
    position: absolute;
    box-sizing:border-box;
    border-left: #DDD 1px solid;
    width:50%;
    margin-left: 50%;
    overflow-y: auto;
  }

  .main-panel {
    padding: 1em 1em 0 1em;
    position: absolute;
    width: 50%;
    overflow-y: auto;
  }

  .ui-listview:not(.ui-mini-list) .ui-li-has-thumb > img:first-child, .ui-listview:not(.ui-mini-list) .ui-li-has-thumb > .ui-btn > img:first-child {
    left: 2em;
  }

  .ui-listview>.ui-li-has-thumb>.ui-btn, .ui-listview>.ui-li-static.ui-li-has-thumb {
    padding-left: 7.25em;
  }
}

#home .secondary-panel {
  background: url('../img/home_screen.png') no-repeat center 120px/200px;
}

#box_ip_btn {
  float: right;
  text-transform: none !important;
  display: none;
  font-size: 12px;
  box-shadow: none;
  font-weight: 100;
  margin-top: 8px;
}

.box-ip {
  display: none;
}

.list_no_arrow::after
{
  background-image: none !important;
}

/* BEGINNING 5px smaller toolbar */
.ui-header .ui-title
{
  margin: -5px 0 -5px 0;
}

.ui-header > .ui-btn
{
  margin: -5px 0 -5px 0;
}


.nd2Tabs li {
  margin-top: -5px;
}
/* END 5px smaller toolbar */

.widget_container {
  display: table;
  height: 58px;
  vertical-align: middle;
}

.widget_content {
  display: table-cell;
  vertical-align: middle;
  width: 1000px;
}

.widget_line_detail {
  white-space: normal !important;
  margin-bottom: 0 !important;
}

.ui-popup.ui-body-inherit {
  background-color: #FFF;
  border-color: #ccc;
}

.ui-notification
{
  background-image: url('../img/notification_icon.png') !important;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  padding-left: 88px;
  background-position: 10px center;
  display:flex;
  align-items:center;
  height: auto;
  min-height: 64px;
}

.notification_text
{
  /*text-align: left;*/ /*when camera image embedded*/
  color: #666666;
}

.channel_action
{
  float: right;
  margin-left: 10px;
  margin-right: -5px;
  position: relative;
  z-index: 10;
  text-align: center;
}

.ui-thumbnail-channel {
  max-width: 32px !important;
  max-height: 32px !important;
  background-size: 32px 32px;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 1em;
  z-index: 10;
  cursor: pointer;
}
.ui-thumbnail-channel-over {
  z-index: 10;
}

.txt_channel {
  font-size: 12px;
  color: #727272 !important;
  margin-right: -10px;
}

/*bottom margin of a listview*/
.ui-content .ui-listview {
  margin-bottom: 1.8em;
}

/* custom style */
.menu-header-widget {
  transform: translateX(-35px);
  -webkit-transform: translateX(-35px);
  -moz-transform: translateX(-35px);

  padding-right: 0px !important;
  padding-left: 0px !important;
}

/* custom style */
.menu-header-search {
  transform: translateX(-35px);
  -webkit-transform: translateX(-35px);
  -moz-transform: translateX(-35px);

  padding-right: 0px !important;
  padding-left: 0px !important;
}

/* custom style */
.menu-header-favoris {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

/* Modification page */
.fields,
#modification-page .ui-select  {
  margin-bottom: 1.8em;
}


#add_actions,
span .delete_actions{
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  width: 25px;
}

#add_actions{
  background: #c5e5de;
  color: #1abc9c;
}
#div_actions .delete_actions{
  background: #f7d2ce;
  color: #e74c3c;
}

#edit_btn  .cancel_btn,
#programming_btn  .cancel_btn
{
 background: #e74c3c;
 color: #fff;
 width: 125px;
}
#edit_btn .valid_btn,
#programming_btn .valid_btn{  
	background: #1abc9c;  
  color: #fff;
  width: 125px;
}
#programming_btn .valid_btn{
  display: block;
  float: right;
}

.room_checkbox, .input_checkbox{
	display:none;
}

.group_checkbox,
.periph_categorie{
	border: solid 1px #cccccc;
  margin: 0px 0px 5px 0px;
  border-radius: 8px;
}

.line_checkbox{
	border: solid 1px #cccccc;
  margin: 2px 2px 2px 2px;
	padding: 5px 0px 5px 10px;
}

.green_hover:hover{
	background-color: #1ABC9C;
	cursor: pointer;
}

.checkbox_selected{
	background-color: #1ABC9C;
}


@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

/* Diagnostic et zwave page*/
#list-diagnostic span, 
#list-zwave span {
  position: absolute;
  top: 0; left:0;
  width: 45px;
  height: 100%;
  background:#6d84a3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  border-radius: 10px;
}
#list-diagnostic ul li a,
#list-zwave ul li a
{
  padding-left: 50px;
}
#list-diagnostic ul li,
#list-zwave ul li
{
  margin: 10px 0px -5px 5px;
}
#list-diagnostic .unknown span,
#list-zwave .unknown span
{
  background-image: url("images/ajax-loader-trans.gif");
  background-size: 32px auto;
}

#list-diagnostic #network-connection.failed span,
#list-diagnostic #eedomus-cloud.failed span,
#list-diagnostic #box-cloud.failed span,
#list-diagnostic #box-lan.failed span {
  background-image: url(../img/forbidden.png);
  background-size: 80%;
}



#list-zwave .inclusion_zwave.failed span,
#list-zwave .exclusion_zwave.failed span {
  background-image: url(../img/zwave_exclude.png);
  background-size: 80%;
}

#list-zwave .inclusion_zwave.succeed span,
#list-zwave .exclusion_zwave.succeed span 
{
  background-image: url(../img/zwave_include.png);
  background-size: 80%;
}



/*#list-diagnostic #box-cloud.unknown span
{
  background-image: url(../img/unknown.png);
}*/
#list-diagnostic #network-connection.succeed span,
#list-diagnostic #eedomus-cloud.succeed span,
#list-diagnostic #box-cloud.succeed span,
#list-diagnostic #box-lan.succeed span
{
  background-image: url(../img/check.png);
  background-size: 80%;
}

/*favoris*/
#favorites_panel, 
#favorites_panel_home,
#favorites_panel_periph,
#favorites_panel_wizard
{
  list-style: none;
}

#favorites_panel li a, 
#favorites_panel_home li a, 
#favorites_panel_periph li a, 
#favorites_panel_wizard li a
{
  padding: 5px;
  margin-bottom: 8px;
}

#favorites_menu,
#favorites_menu_home,
#favorites_menu_periph,
#favorites_menu_wizard
{
  width: 450px;
}

#favorites_panel li a img,
#favorites_panel_home li a img,
#favorites_panel_periph li a img,
#favorites_panel_wizard li a img
{
  background-image: url("https://m.eedomus.com/img/btn/fond4.png");
  position: relative;
  float: left;
  margin-left: -20px;
  width: 55px;
  background-size: 100% auto;
}

#favorites_panel li.camera_card a img,
#favorites_panel_home li.camera_card a img,
#favorites_panel_periph li.camera_card a img,
#favorites_panel_wizard li.camera_card a img
{
  margin-left: 0px;
  width: 100%;
}

#favorites_panel .widget_container, 
#favorites_panel_home .widget_container,
#favorites_panel_periph .widget_container,
#favorites_panel_wizard .widget_container
{
    vertical-align: middle;
    height: auto;
    width: 80%;
    margin-left: 34px;
    text-align: left;
    display: inline-block;
}

#favorites_panel li div div h2, 
#favorites_panel_home li div div h2,
#favorites_panel_periph li div div h2,
#favorites_panel_wizard li div div h2
{
  text-transform:none; 
  font-size:15px; 
  font-weight:bold;
  margin: 0px;
}

#favorites_panel li div div p, 
#favorites_panel_home li div div p,
#favorites_panel_periph li div div p,
#favorites_panel_wizard li div div p
{
  text-transform:none; 
  color: #6D6D6D;
  margin: 0px;
}

#favorites_panel li a div, 
#favorites_panel_home li a div, 
#favorites_panel_periph li a div, 
#favorites_panel_wizard li a div
{
  margin-top: 11px;
}

#favorites_panel li a div p, 
#favorites_panel_home li a div p, 
#favorites_panel_periph li a div p, 
#favorites_panel_wizard li a div p
{
  margin-top: 5px;
}


/* Place the lan-icon depending on the other icons */
#widgets_page .ui-header > .lan-icon , #home .ui-header > .lan-icon{
    transform: translateX(-32px);
    -moz-transform: translateX(-32px);
    -webkit-transform: translateX(-32px);

    padding-right: 0px !important;
    padding-left: 0px !important;
}
#history_page .ui-header > .lan-icon {
    transform: translateX(-32px);
    -moz-transform: translateX(-32px);
    -webkit-transform: translateX(-32px);

    padding-right: 0px !important;
    padding-left: 0px !important;
}
#favorite_page .ui-header > .lan-icon{
  transform: translateX(-45px);
    -moz-transform: translateX(-45px);
    -webkit-transform: translateX(-45px);

    padding-right: 0px !important;
    padding-left: 0px !important;
}

.box_name{
  position: relative !important;
  background: none !important;
}
.geomap {
  height: 200px;
  overflow: hidden;
  position: static;
}

#interval{
  padding: 5px;
}

#not_follow,
#inclusion-cancel,
#to-home-excl,
#menu_search_history_trigger,
.hide_search_band,
.display_none
{
  display: none;
}

.myaccount_data, .div_myaccount{/*.moncompte_user, .moncompte_account_type, .moncompte_expiration{*/
  margin: 0px 0px 10px 0px;
}

#inclusion-cancel,
#inclusion-launch,
#exclusion-launch,
#to-home-excl,
#btn_search_history ,
#btn_search_video,
#btn_search_back{
    background: #888;
}
#video_read {
  text-align: center;
}
#chose_date,
#btn_search_video{
  background: #888;
  color: #fff;
}
#chose_date.disable-click{
  pointer-events: none !important;
}
#my_date{
  text-align: center;
  border-bottom: 1px solid #ccc;
}
#btn_search_video,
#btn_search_back {
  /*display: block;*/
  width: 70px;
  margin-left: 15px;
}
#popup_date {
  padding: 20px;
}
#popup_date .ui-input-text:after, 
#popup_date .ui-input-search:after {
  display: none;
}

.show_search_history{
  padding: 5px;
  display: block;
  background-color:#FAC026; 
  height: 40px;
}

.label_date{
  margin-top: 10px;
}

/*toujours tester sous ios*/
.label_hhmm{
  float: left;
  margin-top: 8px;
  text-align: center;
  width: 12px;
  margin-left: 5px;
}

.label_from{
  float: left;
  margin-top: 8px;
  margin-right: 5px;
}

.input_date,
#my_date_history,
#date_video,
#date_backward{
  width: 95px;
  float: left;
  margin-top: 3px;
  text-align: center;
}

.input_hhmm,
.my_hhmm{
  width: 35px;
  float: left;
  margin-top: 3px;
  text-align: center;
}

.valider_date_history{
  float: left;
  margin: 3px 2px 2px 0px;
}

.no-bg.rel-pos{
  background: none !important;
  position: relative!important;
}

/*icon lecture arrière backward*/
#play_backward{
  transform:rotate(180deg);
  -ms-transform:rotate(180deg); /* Internet Explorer */
  -moz-transform:rotate(180deg); /* Firefox */
  -webkit-transform:rotate(180deg); /* Safari et Chrome */
  -o-transform:rotate(180deg); /* Opera */
}

.backward_control{
  /*margin: 5px;*/
  color: #565656;
}

.backward_active_control{
  color : #008800;
}


/*Vignettes de caméras*/
.nd2-card .card-title.has-supporting-text {
    padding: 8px 16px 8px;
}
.nd2-card .card-title {
    padding: 8px 16px 8px;
}
.nd2-card .card-title .card-primary-title {
    font-size: 17px;
}
.nd2-card .card-action a {
    font-size: 12px;
}

.nd2-card .card-action {
    padding: 2px 8px 2px;
}

/*Essai Baptiste pour tenter de ne pas masquer les boutons en cas de titre long ex. page d'historique d'une caméra*/
.ui-header .ui-title {
    margin-left: auto;
    margin-right: auto;
    width: 45%;
}

.ui-panel-inner {
    padding-top: 5px;
}

.img_notification
{
  width: 16px;
  height: 16px;
}

.change_theme{
	text-decoration:none;
}

.block_in_right{
	display: inline-block; 
	float: right;
}

/*corrige affichage pour fifox only*/
@-moz-document url-prefix()
{
    .block_in_right{
      margin-top: -20px;
    }
	#play_prev { 
		margin-top: 1px; 
	}
}

/*corrige affichage pour chrome only*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#play_prev { 
		margin-top:0px; 
	}
}

.btn_play{
	font-size: 23px;
	margin-top: 1px;
}

.backward_div_bottom{
	display:inline-block; 
	width:45%;
	float:right; 
	text-align:right;
	text-shadow: none;
}

.backward_div_bottom a{
	display: block;
	float: left;
}

#id_backward_msg{
	color:red;
}

.weekday{
  display: block;
  text-align: center;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid 1px #dddddd;
  margin: 2px 2px 15px 2px;
  padding: 3px;
  float: right;
}

.checkbox_label{
  display: block;
  margin-top: -8px;
}

#repeat_every_week{
  clear: right;
  text-align: right;
  margin-bottom: 10px;
}

#repeat_every_week div{
  display: inline-block;
  width: 190px;
  padding: 3px;
  text-align: center;
}

#repeat_every_week div span{
  display: block;
  margin-top: -25px;
}

.sel{
  width: 100%;
}

.span_actions_left,
.span_actions_right,
.span_del_actions{
  display: inline-block;  
  float: left;
  margin-bottom: 5px;
}
.span_del_actions{
  margin-left: 10px;
}
.span_actions_left{
  width: 50%;
}
.span_actions_right{
  width: 46%;
}

.select_actions{
  display: block;
  width: 100%;
}

/*Date sur les images des caméras dans "Reculer"*/
.nd2-card .card-title .card-subtitle
{
	max-width: 100%;
}

.gear_right{
	display: inline-block; 
	float: right;
  margin-top : 5px;
}

.hide_favorites_menu{
  display: none !important;
}

#msg_name_prog{
  color: red;
}

#div_actions{
  margin-top: 10px;
}

.periph_categorie{
  padding: 5px;
  float:left;
  width: 100%;
}

.p_div,
.p_title{
  display: inline-block;
}

.p_div{
  border-top: solid 1px #f6f6f6;
  height: 40px;  
  float: left;
  position: relative;
}

.p_vertical_align{
  position: absolute;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}

.p_title,
.p_div{
  width: 20%;
}

.p_title_name,
.p_div_name{
  width: 40%;
}

.p_center{
  text-align: center;
}

.p_div a :hover{
  background-color: rgba(200, 200, 200, 0.5);
  border-radius: 8px;
}

.p_green{
  background-color: #BDE4B6;
}
.p_red{
  background-color: #FF0000;
}
.p_grey{
  background-color: #DDDDDD;
}

#linked_channels a{
  text-decoration: none;
  color: #6d84a3;
  font-weight: bold;
}

.plan_mode{
  margin: 4px;
  border: solid #6C83A1  1px;
  padding: 3px;
  text-align: center;
  float: left;
  width: 150px;
}
.plan_mode_wizard{
  /*width: 300px;*/
}

.plan_mode a{
  text-decoration:none;
  color: #ffffff;
}

/*.content_plan_mode{
  float: left;
  width: 50%;
  height: 50px;
}*/
/*.content_plan_mode_wizard{
  float: left;
  height: 50px;
}*/

#popup_plan_mode p, #popup_single_tpl_wdg p{
  display: block;
  width: 300px;
  text-align: center;
}
#save_plan_mode, #save_sigle_tpl_wdg, #save_custum_bg{
  text-decoration: none;
  background: #1abc9c;
  color: #fff;
  border: solid #fff 5px;
}
#popup_plan_mode p p, #popup_single_tpl_wdg p p{
  width: 80%;
  display: inline-block;
  text-align: left;
}
#popup_plan_mode p p[class="sel"], #popup_single_tpl_wdg p p[class="sel"]{
  width: 60%;
  display: inline-block;
  text-align: left;
}
#popup_plan_mode input, #popup_single_tpl_wdg input{
  width: 20px;
  height: 20px;
  float: right;
  margin: 12px 10px;
}
#popup_plan_mode input[class="bg_color"]{
  margin: -5px 10px;
}
#popup_plan_mode select, #popup_single_tpl_wdg select{
  width:100px;
}

#popup_plan_mode p, #popup_plan_mode p h3, #popup_single_tpl_wdg center h3, #option_tpl_wdg p, #popup_select_bg center h3{
  color:#000;
}
.ui-collapsible h3, .ui-collapsible div{
  color:#989898;
}
#popup_plan_mode p p a{
  color:#000;
  text-decoration: none;
}
#popup_plan_mode p p a:hover{
  color:#4a4a4a;
}

.thumb_bg{
  width: 100px;
  margin: 2px;
}

.focus_in, .first_focus, .ui-header > .focus_in{
  color: #b0b0b0 !important;
}

.txt_bold{
  font-weight: bold;
}

a.simple_link:hover {
    color: #03A9F4 !important;
}
.simple_link {
    color: #333 !important;
}