body {
    font-size: 18px;line-height: 1.50;color: #333333;position: relative;height: 100%;
	width:100%;font-family: 'Open Sans', sans-serif;max-width: 1023px;margin: auto 0;}
/* ecran 769 à 1023px */
nav{max-width: 1023px;}
/*texte table*/
.txtcenter{text-align: center;}
h1 {font-size:200%}
h2 {font-size:110%}  
h3 {font-size:110%;font-weight: bolder;} 
h4{margin-left:20px;font-size:18px;margin-top: -30pX;}
.dpb {display:block}
.text-center{margin-right: 2px;margin-left: 2px;margin-bottom: 2px;display: inline-block;float: none;}  
.text-c{display:block;}
.table-responsive{width: 97%;overflow-x: auto;}
.table1 {width: 100%;margin-bottom: 1rem;color: #212529;background: #f3f0eb;}
.table td{border:0}
.top-30{margin-top:-30px}
.left-10{margin-left:10px}
/* header */
.logo{float: left;width:140px;height:auto;}
.content ul  {list-style-type: none;}
.title{margin-left: 10px;font-size: 25px;}
[popover] {position: fixed;left: -70dvw;top: 0;height:44dvh;width: 27dvw;transition: transform .2s ease-out, opacity .2s ease-out,
    display .2s ease-out;transition-behavior: allow-discrete;
  /*POPOVER EN ETAT FERMÉ*/
    opacity: 0;transform: translateX(-50px);}

  /*POPOVER EN ETAT OUVERT*/
[popover]:popover-open {opacity: 1;transform: translateX(0px);  }
 /*POPOVER EN ETAT FERME*/  
[popover]:not(:popover-open) {opacity: 0;transform: translateX(-50px);}
#mobile-navigation{font-size: large;background-color:black;}
.menu-h {position: fixed;
        font-size: 1.5em;z-index:30;top: 40px;left:500px;} 
#zz li a {color:white;background-color:#909090;}
/* toutes les pages */
#interieur, #meteo, #alarmes,#commandes,#murcam,#murinter,#app_diverses,
#graphiques,#administration, #zigbee, #zwave, #dvr, #nagios,#spa,#recettes,
#habridge, #modes_emploi, #iobroker{
max-width: 100%;height: 1200px;padding: 80px 0;min-height: 100%;
position: relative;color: #000;top: 350px;z-index:1;overflow: auto;
background-color: aquamarine;}
/*---------------------------------------------------------------*/
#meteo {	background-color: #4f9ff4;}
/*DATE accueil? HEADER*/
/*          ERREURS*/
#erreur{position: absolute;top: 150px;left: 100px;color: white;}
/*          lexique*/
.lex_txt{margin-left:10px;margin-bottom:0.3rem}
.fond_date {color:#fff;width: 90px;height: 80px;margin:20px 30px 0 0;background-image: url(../images/date.svg);}
#jj {margin:2px 0 0 0;text-align: center;}
#numero {margin: 0 0 0 0;text-align: center;}
#mm{margin: 0 0 0 0;text-align: center;}
font-family: Arial;font-size: 18px;Line-height: 1;text-align: center;
position: relative;top: 40px;right:50px;}
.header {height: 150px;	color: #ffffff;background-color: rgba(8, 55, 70, 0.7);
padding: 10px 0;transition: all 0.2s ease-in-out;position: relative;
top: 0;width: 100%;}
.icones_not{position: relative;top:-190px;background-color: #2e333d;height: 130px;}
.temp_accueil{position: relative;top: -150px;left: 290px;width: 420px;}
.coultemp{color: #e7e793;}
#temp_ext{color: rgb(255, 254, 254);font-size: 20px;}
/*pression chaudière, medoc, fosse, porte veranda S, gd portail, porte gar */
#bar_pression {position: relative;top: -910px;width: 100px;left: 500px;}
#pression_chaud{width:60px}
.pression_chaud{position: absolute;width: 60px;left: 555px;height: auto;top: 3px;}
.fosse_septique{position: absolute;left: 435px;top: 5px;width: 70px;}
.porte_veranda_sud{width:40px;height: auto;position: absolute;top: 20px;left: 617px;}
#gd_portail{width:60px;height:45px;position:absolute;top:20px;	left:330px}
#porte_gar{width:45px;height:45px;position:absolute;top:20px;left:390px}
.poubelles{position:relative;left:130px;top:-300px;width:100px} 
/* pluie, affichage anniversaires, alarme nuit,batteries, SOS*/
.aff_pluie{position: absolute;top:-600px;width: 100px;height: auto;left:120px;}
#pluie img{width:80px;}
#txt_pluie{position: relative;top: -70px;color:red;left: 0px;}
#txt_pluie a{color:red;}
.aff_anni{position: absolute;width: 70px;height: auto;top: 0;left: 220px;display: block;}
#prenom{color: #f0e8e8;}
#alarme_nuit{position:absolute;top:20px;left: 170px;width: 40px;}
.aff_bat{position: absolute;top: 20px;left: 120px;}
#batterie{width: 30px;height: auto;}
img#pilule{top: 15px;width: 55px;position: absolute;left: 160px;}
.sos {position:absolute;top: 25px;left: 65px;width:40px;}
/* ping raspi, boite lettres, lastseen, info */
#ping_rasp{position: absolute;top: -180px;display: none;left: 150px;width:40px}
.bl{position: absolute;top: 20px;left: 620px;}
#bl{width: 40px;display:none;height: auto;}
.lastseen, .lastseen1{width: 140px;height: autopx;position: absolute;Top:5px;left: 185px;}
.lastseen1{top: 60px;}
.aff_info{width: 50px;height: auto;top:55px;left:10px;position: absolute}
.notif1{color:white;margin-top: 70px;margin-left: 180px;}
a#annul_notif1{color:white}
/*meteo */
.meteo_concept_am  {display: inline;width: 150px;margin-left: 20px;vertical-align: middle;}
#meteo_concept_am{position: relative;top: 40px;font-size: larger;margin-left: 15px;}
#meteo_concept{position: relative;top: 30px;left:7px;}
.image_met{width:80px;margin-left:15px;}
.icone_vent{width: 40px;margin-left: 0;margin-top: -20px;}
.vvent{font-family: Arial;font-size: 15px;margin-left: 15px;position: relative;top: -40px;}
.vtemp{font-family: Arial;font-size: 15px;margin-left: 15px;position: relative;top: -50px;}
.maj_met{width:60px;height:auto;margin: 15px 0 0 50px;}
#titre_meteo_concept{font-size: larger;margin-left: 15px;}
/*admin et alarme mot passe*/
#d_btn_a , #d_btn_al{display:block;position: absolute;left: 90px;background-color: #4d4d4d;color:white;
border-color: #e0e3e6;border-radius: 0.55rem}
#d_btn_a{top: 190px;left: 220px;}
#d_btn_al{top: 60px;}
img.space5, img.space30, img.space10 {width:35px;}
/*alarme admin*/
#avb{display: block;background-color: #F5F5DC;width: 400px;position: relative;
    top: -10px;left: 5px;}
/*graphiques-------*/
#graphic{color:black;margin-left:20px}
.graphique_img{max-width:700px;margin:0 1px 0 1px,;width:100%;}
.graphiques{background-color: green;}
/* Interieur*/
/*      aff batterie */
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}
.cercle{animation-duration: .8s;animation-name: clignoter;animation-iteration-count: infinite;
   transition: none;}
#about_interieur{width: 400px;position: relative;left: 10px;top: 30px;
}   
#Voltmetre {margin-left: 7%;position: relative;top: -40px;}
#maison1{margin-top:0;}
#voltage{position: absolute;top: 70px;right: -20px;width: 200px;}
#vanne_eau{position: relative;top: -959px;left: 600px;width:48px;}
#linky{position: relative;top:-290px;left: 600px;width: 60px;}
#th_ext_cuis{position: relative;top: -850px;left: 170px;width: 50px;}
#temp_ext_cuisine{font-size: 25px;color: black;}
#erreur_interieur{position: absolute;top: 200px;left: 90px; color: #ce1c1c;}
#reset_erreur_interieur{position: absolute;top: 190px;display: none;width: 40px;left: 40px;}
/* Bulma */
:root {
--bulma-body-background-color: #909090;
--bulma-column-gap: 0;
}
.modal{--bulma-modal-background-background-color: rgba(0, 0, 0, 0.1);}
#lexique.modal {width: 20rem;}
#choix_graph.modal {margin-left: 40px;width: 30rem;}
#choix_graph .modal-card {width: 30rem;}
#admin.modal {--bulma-modal-content-width: 33rem;}
#adm.modal {--bulma-modal-content-width: 32rem;}
#inf_cam.modal {--bulma-modal-content-width: 28rem;}
#erreurs_mo.modal {--bulma-modal-content-width: 32rem;}
#infos_devices.modal {--bulma-modal-content-width: 20rem; }
.modal-card-body {border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;}
/* alarme */
#zm{position:relative;top:10px;left:20px}
.zminder{margin-left: 10px;}
#ecran{margin-top: 70px}
/*clavier mdp */
#pwdalarm{text-align: center;width: 200px;left:200px;margin: 0 auto;position: relative;top: 500px;background-color: rgb(89, 89, 89);height: 180px;}
.close_clavier{font-size: 24px;position: relative;top: 0px;left: 80px;color: white;} 
.form_al {width: 280px;background: #595959;text-align: center;position: relative;font-size: 16px;}
#pwdmo .modal-card .modal-card-body{background-color: hsl(0deg 0% 34.9%);}
#pwdmo .modal-card .modal-card-head .modal-card-title{font-size: 20px;}
#pwdmo .modal-card .modal-card-head {background-color: hsl(151.64deg 67.43% 50.52%);}
#pwdmo {--bulma-modal-content-width: 20rem; }
#logapp {--bulma-modal-content-width: 32rem; }
.pinButton{width: 50px;height: 40px; border-radius: 5px;}
/*administration*/
#reponse1 {background-color: beige;position:relative;top:-1000px;display:none;left:0;height:auto;width:480px}
#reponse2 {background-color: beige;position: relative;top: -900px;left: 5px;display:block;line-height: 0.2;height:500px;width: 430px;}
#info_admin{margin-left:10px;display:block;}
.info_admin{margin-left:0px;}
#adm1{width:475px;}
#admin1{margin-left:-30px;margin-top:-30px;}
#admin2{margin-top: 50px;}
#admin3{margin-left: 25px;width:250px;margin-top: -5px;height: 35px;}
#admin4{margin-top: -10px;}
.logo_dz{position: relative;top: 0px;left: -15px;width: 35px;}
.but1,.but6,.but7{margin-left: -10px;width: 250px;height: 35px;margin-top: 5px;}
.but2,.but3,.but5,.but8,.but9{margin-left:20px;width:300px;height: 35px;}
.but3{margin-top: -5px;}
.but4{margin-top: -10px;}
.but5{margin-top: -27px;}
.but6{margin-top: -20px;}
.but7{margin-top: -32px;}
.but8{margin-top: -40px;}
.but9{margin-top: -30px;}
.but13{margin-bottom: 10px;}
.space5{margin-top: -5px;}
..space30{margin-top: -10px;}
.space30{margin-top: -30px;}
.but10,.but11,.but12{width: 400px;margin-top: -17px;height:35px;margin-left:20px;}
.but11{margin-top:-7px}
.but10{margin-top:-13px;}
.but14{margin-top: -7px;}
.logo_rpi,.logo_iob,.logo_sql{position: relative;top: -20px;left: -15px;width: 30px;}
.logo_sse{position: relative;top: -160px;left: -15px;width: 30px;}
#phpadmin{position: relative;top: -500px;left: 500px;width:120px}
.phpmyadmin{width:100px}
#about{width: 120px;position: relative;left: 500px;top:-450px;}
#ws-zb{position: relative;top: -180px;left: -15px}
.chang_mdp{margin-left: 50px;}
/*---------------SSE*/
#status{position: relative;top:-190px;left:50px;} /*sse*/
#messages, #messages1, #messages2, #messages3{position: relative;top:-190px;left:50px;width: 600px;display: block;}
/* Mur inter */
.liste_inter{margin-left:20px}
#btn_scenes{margin-top: 20px;margin-left: 20px;}
#idhtml1{margin-left:20px}
#sw11{background-color:none}
#sw10{margin-left:50px;}
#sw12, #sw23{margin-left:15px;}
.txt_inter{position:relative;left:20px;} 
#volet_bur{width:420px}
#slider{width: 40%;margin: 1em;top: -50px;left: 50px;width:40%}
#level_vr{position: relative;top: -104px;left: 250px;}
#clic_vr{top:-40px;display:inline;margin-left:-350px;position:relative;}
/* Monitoring */
/*ping PI4*/
#ping_pi4{position: relative;top: -85px;left: 410px;width: 50px;height: 50px;}
#nagiosmobile {width:750px;margin-top:-50px;height: 700px;}
#nagiosapp{width: 750px;height: 700px;position: relative;z-index: 1;
top: -60px;left:15px}
/*zigbee2mqtt zwavejs2mqtt frigate & ngiosmobile   -*/
#zbmqtt,#zwmqtt,#frigate{margin-top: 0px;width: 100%;height: 800px;}
/*ha-bridge-------------------*/
#habridgeapp, #iobrokerapp{width: 700px;height: 800px;position: relative;top: 10px;left:20px}
#about_iob{position: relative;left: 10px;top:10px;}
.refresh_iob{margin-left:20px}
/*recettes*/
#about_rec{ width: 300px;position: relative;left: 50px;top: 30px;}
.imrec{padding:5px;width:90%;}
.col_rec{display:flex}
/* Mur Cameras */
/*       toggle switch */
.toggle-outer{height: 30px;width: 60px;border-radius: 20px;border: 1px solid #ccc;background-color: #f4f4f4;margin: auto;position: relative;transition: all 0.3s ease-in;
			cursor: auto;top:0px;left:-250px;display:block}
.toggle-outer.checked{background-color: blue;		}
.toggle-inner{height: 30px;width: 30px;border-radius: 50%;position: absolute;left: 0;background-color: #fff;border: 1px solid #ccc;transition: all 0.3s ease-in;}
.toggle-outer.checked .toggle-inner{left: 30px;}
input[type="checkbox"]{display: none;}
#toggleLabel{cursor: pointer;}
#titre_mur{margin-left:20px;}
.cam  th, .cam td {text-align: center;
	padding: 0.15rem;border: 5px solid #dee2e6;
vertical-align: middle;}
.cam{margin-left: 15px;}
.colmur{top:-20px;}
#btn_cam{position: relative;
top: 100px;
left: -80px;}
/*               mur cam  pour 9 caméras*/
img#cam1,img#cam2,img#cam3,img#cam4,img#cam5,img#cam6,img#cam7,img#cam8,img#cam9{
	max-width: 100%;
    width: 300px;
    height: auto;
}
/*agent dvr ------------------*/
.title_dvr {font-size: 1.5rem;}
#agent_dvr{width:500px;height: 700px;margin-left: -15px;margin-top: -20px;}
#dvr .switch {top: -40px;}
/* autres dim ecran */
/****************************************************************************/
/* Large devices (Desktop >1023px ) */
@media (min-width:1024px) {
nav{max-width: 1200px;}    
}  
/* devices (tablet <769 */
@media (max-width:768px) {
#lexique.modal {--bulma-modal-content-width: 20rem;}
#choix_graph.modal {--bulma-modal-content-width: 30rem;}
#admin.modal {--bulma-modal-content-width: 33rem;}
#adm.modal {--bulma-modal-content-width: 32rem;}
#inf_cam .modal-card {width: 400px;}
#erreurs_mo.modal {--bulma-modal-content-width: 32rem;}
#infos_devices.modal {--bulma-modal-content-width: 20rem; }   
.temp_accueil {top: -185px;} 

.title_met{margin-top:-50px;margin-left:20px}
.meteo_concept_am {width: 60px;}
.poubelles{left:108px;top: -210px;} 
.menu-h {left: 400px;}
#linky {left: 530px;top:-350px}
#th_ext_cuis {top: -650px;}
.icones_not {height: 300px;}
.aff_anni{width: 50px;height: auto;top: 10px;left: 220px;display: block;}
}

@media (max-width:360px) {
.toggle-outer {left:-140px}
#pwdalarm{left:15px;top:100px}
button {font-size: 0.7em;}
ul {font-size: small;}
.temp_accueil {top: -425px;left:-70px} 
.text-c {margin-left: 40px;font-size: larger}
.text-center {font-size: larger;}
.logo{width:80px;}
.menu-h {left: 200px;top: 30px;}
#jj {margin: 12px 0 0 2px;line-height: normal;font-size: 13px;}
#numero {margin: 0 0 0 2px;font: icon;line-height: normal;}
#mm{margin: 0 0 0 2px;line-height: normal;font-size: 13px;}
.title {font-size: 20px;}
.subtitle{font-size: small;}
.fond_date {top: 20px;width: 80px;height: 70px;background-image: url(../images/datemin.svg);}
.icones_not {position: relative;top: -415px;}
#batterie {width: 20px;}
.aff_info,.aff_anni {width: 35px}
#prenom {font-size: 12px;}
.porte_veranda_sud{ width: 25px; height: 25px;}
#gd_portail {width: 35px;top: 50px;left: 280px;height: 25px;}
#porte_gar {width: 25px;height: 25px;top: 50px;left: 315px;}
.sos {width: 25px;height: 25px;}
.lastseen, .lastseen1 {width: 90px;left: 160px;}
.aff_pluie {top: -400px;left: 70px;}
#voltage {top: 470px;}
#linky {left: 180px;top: -230px;}
#about_interieur {left: -90px;top: 30px;}
#ecran { margin-top: 90px;}
#choix_graph.modal {margin-left: 0px;}
.text-c {font-size: larger; }
#ping_pi4 {left: 250px;}
#nagiosapp {width: 100%;}
#about_rec {left: 0px;top: 0px;}
[popover] {left: -30dvw;width: 66dvw;height:55dvh;}
#d_btn_a {top: 163px; left: 90px;}
#phpadmin {top: -920px;left: 100px;}
#about {left: 240px;top: -985px;}
.aff_pluie {left: 120px;}
.btn_appd{font-size:12px;width:250px;}
.logo_dz {width: 30px;}
#status {top: -170px;}
.logo_sse {top: -140px;}
.porte_veranda_sud {top: 15px;left: 323px;}
h1 {font-size: 120%;}
img#pilule {width: 40px;left: 140px;}
}
}
	/*DCOUVERTE*/
#decouv_int{position: relative;top:-100px;}