table{width:100%;}
tr{font-size:12px;}
/*tr:hover {background-color: deepskyblue;color:white;}*/
tr#blue {color: deepskyblue}
.black {color: #C9C9C9!important;}.carbonink{color:#130E0A!important;}.white{color:white!important;}
.mw100{min-width:100px;width:20%}.mw200{min-width:200px;width:40%}
.p100{width:100%;background-color:deepskyblue;color:white;}

th{font-weight: bold;font-size:12px;}
p{text-align:center;}

body{font-family:Roboto, sans-serif;background:black;}
.body-back{background-color:deepskyblue;color:white;margin:auto;max-width:600px;font-size:15px;}
.table-css, table.table-css tr,table.table-css td{text-align:center;border:0;font-size:15px;}
.btn{text-transform:uppercase!important;font-size:18px;color:deepskyblue;background-color:white;}
table.table-css tr td input{border:0;}
.tablestorage{border:0!important;text-align:center!important;border-collapse: collapse!important;width:calc(100% - 16px)!important;margin:auto!important}
.borderbottom {border-bottom: 5px solid white;}
section#header,section#body{font-family:Roboto, sans-serif;display:inline-block; width:100%;background:#f5f5f5;}
section#box{font-family:Roboto, sans-serif;display:inline-block;position:absolute;left:0px;top:100px; width:100%;background-color:#f5f5f5;}
#reseaugraph,#network,#graph,#stockage,#device,#tameteo,#tameteo2,#tameteo3,#sensehat{display:inline-block;vertical-align:top;margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;}

.mdl-layout__header,.mdl-layout__header-row{height:100px!important;font-size:18px;}
.mdl-card{display:inline-block;}
.kpi{width:calc(100% - 16px); margin-right:8px;margin-top:1px;margin-bottom:1px;margin-left:8px;text-align:center;vertical-align: middle;background-color:deepskyblue;color:white}
.red{background-color:crimson!important}.orange{background-color:gold!important}.green{background-color:limegreen!important;}.carbon{background-color:#130E0A!important;}.lightcarbon{background-color:#424242!important;}.blue{background-color: deepskyblue!important;}.silver{background-color:silver!important;}.bwhite{background-color:white!important;}

.lh20{line-height:20px!important;} .fs18{font-size:18px!important;vertical-align: middle!important;display: inline-flex!important;}

.inline{display:inline-block;width:100%;padding-top:1px;padding-bottom:1px;}
.affichage{width:100%;color:white;border-spacing:0px;}
.warning, .ico{width:40px;}
.sensehat, .zeroint, .zeroint2, .zeroint3, .enviro,.outdoor,.alternate_date{height:108px;}
.alternate_hour{font-size: 120px;display:inline-block;}
.alternate_datetime{height:200px;text-align:center;vertical-align:middle}
.alternate_barometer{height:120px;text-align:center;vertical-align:middle}
.alternate_day{font-size: 80px;text-align:center;border: 2px solid; border-radius:10px;text-align:center;margin-left:auto;margin-right:auto;display:inline-block;vertical-align: 0.12em}
.space{width:40px;display:inline-block;}
.alternate_day_2{width:33%; display:inline-block;}

.alternate_temp{height:310px;font-size: 40px;text-align:center;vertical-align:middle}
.alternate_date{height:140px;font-size: 40px;text-align:center;vertical-align:top}
.alternate_other_temp{height:70px;font-size: 60px;text-align:center;vertical-align:middle}
.jumbo{font-size: 120px;}
.mini{font-size: 24px;}
.svg-margin{margin:4px;vertical-align:middle}.svg-margin-jumbo{margin-top:30px;margin-bottom:30px;margin-left:10px;margin-right:10px;vertical-align:middle} 

.title{height:68px;}
.temp,.hum{font-size: 60px;text-align:center;width:180px;}
.roomname{text-align:left!important;}
.press,.unit{font-size: 24px;line-height:24px;font-style: italic;text-align:center;}

.large{font-size:20px;line-height:30px} .medium{font-size:16px;line-height:20px;} .small{font-size:12px;line-height:20px;}
.cloud{text-align:center;margin:auto;} .storage{width:calc(100%-64px)!important;} .margin{margin:auto;text-align:center} .center{text-align:center;}
.mdl-button{width:65px;margin:4px;text-decoration:none;font-size:15px;border:0;color:white;text-transform: uppercase;background-color:#424242;padding:0}
.mdl-button-active{background-color:deepskyblue;}
.mdl-button :hover{background-color:silver;}
.button-wide{width:85px!important;}
.separator {border-right:2px solid white;}

.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions,.demo-card-wide.mdl-card#Devices{width:100%;height:800px;}
.demo-card-wide.mdl-card#Meteo,.demo-card-wide.mdl-card#Meteo2,.demo-card-wide.mdl-card#Meteo3,.demo-card-wide.mdl-card#Sense{width:100%;height:900px}
.demo-card-wide.mdl-card#Storage{width:100%;height:1000px}

#network{width:330px;} #graph,#reseaugraph,#stockage{width: 576px;} #tameteo,#tameteo2,#tameteo3{width: 800px;} #device{width: 704px;} #sensehat{width:800px;}

.demo-card-wide#QoS > .mdl-card__title {color: white;height: 128px;background: url('Images/QoS.jpg') center / cover;}
.demo-card-wide#Connexions > .mdl-card__title {color: white;height: 128px;background: url('Images/Connexions.jpg') center / cover;}
.demo-card-wide#Storage > .mdl-card__title {color: white;height: 128px;background: url('Images/Storage.png') center / cover;}
.demo-card-wide#Devices > .mdl-card__title {color: white;height: 128px;background: url('Images/Devices.jpg') center / cover;}
.demo-card-wide#Meteo > .mdl-card__title {color: white;height: 128px;background: url('Images/MeteoPa.jpg') center / cover;}
.demo-card-wide#Meteo2 > .mdl-card__title {color: white;height: 128px;background: url('Images/MeteoPa.jpg') center / cover;}
.demo-card-wide#Meteo3 > .mdl-card__title {color: white;height: 128px;background: url('Images/MeteoPa.jpg') center / cover;}
.demo-card-wide#Sense > .mdl-card__title {color: white;height: 128px;background: url('Images/Home.jpg') center / cover;}

.mdl-layout__header{ background-color: deepskyblue;}
.mdl-layout-title{ color : deepskyblue}
.mdl-layout-spacer {text-align:center;}
.mdl-slider.mdl-js_spacer.is-upgraded{background:deepskyblue;}

table#Res,table#Sto,table#Sto,table#Dev,table#Ind,table#Hom{width:calc(100% - 10px);margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:5px;font-family:Roboto, sans-serif;}
table#Met{width:446px;}
td#Ind{height:100px;vertical-align:center;text-align:center;font-size:32px;background-color:deepskyblue;color:white;font-family:Roboto, sans-serif;}

th#Lib,td#Lib,td#T1,td#T2,td#H1,td#H2,td#P1,td#P2{height:16px;vertical-align:center;text-align:center;font-size:12px;font-family:Roboto, sans-serif;}

th#Lib:hover,td#Lib:hover,th#Lib.is-selected,td#Lib.is-selected{background-color:dimgray;color:white;}
td#T1,td#T2:hover,td#T2.is-selected{background-color:deepskyblue;color:white;}
td#T2,td#T1:hover,td#T1.is-selected{background-color:white;color:deepskyblue;}
td#H1,td#H2:hover,td#H2.is-selected{background-color:dodgerblue;color:white;}
td#H2,td#H1:hover,td#H1.is-selected{background-color:white;color:dodgerblue;}
td#P1,td#P2:hover,td#P2.is-selected{background-color:lime;color:white;}
td#P2,td#P1:hover,td#P1.is-selected{background-color:white;color:lime;} 

div#chart_div,div#chart_div2,div#chart_div3,div#chart_div4,div#chart_div5{width:calc(100% - 10px);margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;}
div#imgmeteo{text-align:center;}

.mdl-data-table {margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;border-color:white}
.mdl-data-table thead{padding:0}
.mdl-data-table tbody tr{position:relative;height:20px;}
/*.mdl-data-table tbody tr.is-selected{background-color:deepskyblue;color:white}
.mdl-data-table tbody tr:hover{background-color:deepskyblue;color:white}
.mdl-data-table tbody tr#blue:hover{background-color:deepskyblue!important;color:white!important}
.mdl-data-table tbody tr#blue.is-selected{background-color:deepskyblue!important;color:white!important}
.mdl-data-table tbody tr#white:hover{background-color:white!important;color:dimgray}
.mdl-data-table tbody tr#white.is-selected{background-color:white!important;color:dimgray}*/
.mdl-data-table td{text-align:center}
.mdl-data-table th{padding:5px 5px;text-align:center;font-weight: bold;height:20px;}
.mdl-data-table td:first-of-type,.mdl-data-table th:first-of-type{padding:5px}
.mdl-data-table td:last-of-type,.mdl-data-table th:last-of-type{padding:5px}
.mdl-data-table td{position:relative;height:20px; padding:5px 5px;}

.material-icons.md-10 { font-size: 10px;vertical-align:center;}

@media only screen and (max-width: 480px){
#network,#graph,#stockage,#device,#sensehat,#tameteo2{width:100%;margin-left:0px;margin-right:0px;}
#tameteo,#tameteo3,#reseaugraph,.longheader{display:none!important}
.mdl-layout__header,.mdl-layout__header-row{font-size:24px;}
.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions,.demo-card-wide.mdl-card#Storage,.demo-card-wide.mdl-card#Devices,.demo-card-wide.mdl-card#Meteo,.demo-card-wide.mdl-card#Meteo2,.demo-card-wide.mdl-card#Meteo3,.demo-card-wide.mdl-card#Sense{height:auto}
div#chart_div,div#chart_div2,div#chart_div3,div#chart_div4,div#chart_div5{width:100%;margin-top:5px;margin-bottom:5px;margin-left:0px;margin-right:0px;}
.mdl-data-table {margin-top:5px;margin-bottom:5px;margin-left:0px;margin-right:0px;}
table#Res,table#Sto,table#Sto,table#Dev,table#Ind,table#Hom,div#chart_div,div#chart_div2{width:100%;margin-top:5px;margin-bottom:5px;margin-left:0px;margin-right:0px;}
table#Met{width:446px;}
td#P1,td#P2:hover,td#P2.is-selected{background-color:yellowgreen;color:white;}
td#P2,td#P1:hover,td#P1.is-selected{background-color:white;color:yellowgreen;} 
.large{font-size:12px;line-height:20px;}
.mw100{min-width:50px;width:auto}.mw200{min-width:100px;width:auto;}
section#box{top:120px;}
}
@media only screen and (min-width: 481px) and (max-width: 960px){
#network,#graph,#stockage,#device,#sensehat,#tameteo2{width: calc(100% - 10px);}
#tameteo,#tameteo3,#reseaugraph,.longheader{display:none!important}
.mdl-layout__header,.mdl-layout__header-row{font-size:24px;}
.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions,.demo-card-wide.mdl-card#Storage,.demo-card-wide.mdl-card#Devices,.demo-card-wide.mdl-card#Meteo,.demo-card-wide.mdl-card#Meteo2,.demo-card-wide.mdl-card#Meteo3,.demo-card-wide.mdl-card#Sense{height:auto}
td#P1,td#P2:hover,td#P2.is-selected{background-color:yellowgreen;color:white;}
td#P2,td#P1:hover,td#P1.is-selected{background-color:white;color:yellowgreen;} 
section#box{top:120px;}
}
@media only screen and (min-width: 961px) and (max-width: 1199px){
#network,#graph,#stockage,#device,#tameteo3,#sensehat{width: calc(100% - 10px);}
#tameteo2,#tameteo,#reseaugraph,.shortheader{display:none!important}
.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions,.demo-card-wide.mdl-card#Storage,.demo-card-wide.mdl-card#Devices,.demo-card-wide.mdl-card#Meteo,.demo-card-wide.mdl-card#Meteo2,.demo-card-wide.mdl-card#Meteo3,.demo-card-wide.mdl-card#Sense{height:auto}
}
@media only screen and (min-width: 1200px) and (max-width: 1679px) {
#stockage,#device,#sensehat,#tameteo3{width: calc(100% - 10px)!important;}
#graph{width:calc(100% - 354px)!important;}
#tameteo2,#tameteo,#reseaugraph,.shortheader{display:none!important}
.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions{height:625px;}
.demo-card-wide.mdl-card#Storage,.demo-card-wide.mdl-card#Devices,.demo-card-wide.mdl-card#Meteo,.demo-card-wide.mdl-card#Meteo2,.demo-card-wide.mdl-card#Meteo3,.demo-card-wide.mdl-card#Sense{height:auto}
table#Dev tbody tr,table#Dev tbody tr td{height:32px!important;font-size:16px!important;}
table#Hom tbody tr,table#Hom tbody tr td{height:32px!important;font-size:16px!important;}
table#Res tbody tr,table#Res tbody tr td{height:32px!important;font-size:16px!important;}
}

@media only screen and (min-width: 1680px) and (max-width: 1919px) {
#device{width: calc(100% - 1068px);}
#sensehat{width: calc(100% - 830px);}
#reseaugraph{width:448px;}
.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions{height:auto;}
.demo-card-wide.mdl-card#Storage,.demo-card-wide.mdl-card#Devices{height:1116px;}
#tameteo2,#tameteo3,#network,#graph,.shortheader{display:none!important}
}

@media only screen and (min-width: 1920px){
#device{width: calc(100% - 1192px);}
#sensehat{width: calc(100% - 830px);}
.demo-card-wide.mdl-card#QoS,.demo-card-wide.mdl-card#Connexions{height:auto;}
.demo-card-wide.mdl-card#Storage,.demo-card-wide.mdl-card#Devices{height:1134px;}
#tameteo2,#tameteo3,#network,#graph,.shortheader{display:none!important}
table#Dev tbody tr,table#Dev tbody tr td{height:32px!important;font-size:16px!important;}
table#Hom tbody tr,table#Hom tbody tr td{height:32px!important;font-size:16px!important;}
table#Res tbody tr,table#Res tbody tr td{height:32px!important;font-size:16px!important;}
}