* {
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
header {
    padding-top:0px;
    padding-bottom:37px;
    box-shadow: 2px 2px 6px #333;
}
footer {
/*    background-color: #368bcc; */
    background-color: #1b4566;
    position:fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top:18px;
    padding-bottom:12px;
}
.container {
    width: 100%;
    padding-top:4px;
    padding-bottom:4px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: auto;*/
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ccc;
    /*height: 48px;*/
    /*font-size: 15px;*/
}
li {
    display: inline;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}
/*li:last-child {
    border-right: none;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}*/
li a {
    display: block;
    color: black;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}

* {
  cursor: inherit;
}
body {
  cursor: default;
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    cursor: pointer;
}
a:active {
    text-decoration: none;
}
li a:hover {
    color:#ffe;
    background-color: #368bcc;
}
.fubar {
    display: block;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    color: black;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}
.fubar:hover {
    color:#ffe;
    background-color: #368bcc;
}
.fubarU {
    display: block;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    color: #888;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}
.fubarU:hover {
    color:#888;
}
.funavbar {
    display: block;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    color: black;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}
.funavbar:hover {
    color:#ffe;
    background-color: #368bcc;
}
.funavbarDisable {
    display: block;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    color: #888;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}
.funavbarDisable:hover {
    color:#888;
}

table {
    width: 100%;
}
th, td {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
}
tr.striped:nth-child(odd) {
    background-color: #ddd;
}
tr.striped:nth-child(even) {
    background-color: #ccc;
}
.active .modetext {
  border-bottom: 1px dotted #eee;
}

.btn-primary {
  background-color: #0071BC;
}
.btn-primary:hover {
  background-color: #0071BC;
  color: white;
}

.btn-awesome {
    color: #368bcc;
    background-color: #fff;
    border-color: #368bcc;
	background: -moz-linear-gradient(#fff, #ddd);
	background: -webkit-linear-gradient(#fff, #ddd);
	background: -o-linear-gradient(#fff, #ddd);
}
.btn-awesome:hover {
    background-color: #368bcc;
    color: #fff;
    border-color: #368bcc;
	background: -moz-linear-gradient(#9ac5e5, #368bcc);
	background: -webkit-linear-gradient(#9ac5e5, #368bcc);
	background: -o-linear-gradient(#9ac5e5, #368bcc);
}
.btn-awesomer {
    background-color: #368bcc;
    color: #eee;    /*#ffe;*/
    border-color: #368bcc;
	background: -moz-linear-gradient(#9ac5e5, #368bcc);
	background: -webkit-linear-gradient(#9ac5e5, #368bcc);
	background: -o-linear-gradient(#9ac5e5, #368bcc);
}
.btn-awesomer:hover {
    color: #368bcc;
    background-color: #fff; /*#ffe;*/
    border-color: #368bcc;
	background: -moz-linear-gradient(#fff, #ddd);
	background: -webkit-linear-gradient(#fff, #ddd);
	background: -o-linear-gradient(#fff, #ddd);
}
.active {
    color: #368bcc;
    background-color: #fff; /*#ffe;*/
    border-color: #368bcc;
}

.swell {
    overflow: auto;
    margin:4px;
    /*padding: 24px 16px;*/
    padding: 8px 16px;
    border-radius:8px;
    text-decoration: none;
    box-shadow: 1px 1px 4px #000;
/*    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
/*    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; */
    color: #228;    /*#ffe;*/
    background-color: #ddd;
/*    border-color: #368bcc;*/
    border-color: #000;
    /*border-width: medium;*/
/*    border:1px solid #368bcc;*/
    border:1px solid #228;
	background: -moz-linear-gradient(#fff, #ccc);
	background: -webkit-linear-gradient(#fff, #ccc);
	background: -o-linear-gradient(#fff, #ccc);
}

.modmodmod {
    overflow: auto;
    margin:4px;
    /*padding: 24px 16px;*/
    padding: 8px 16px;
    border-radius:8px;
    text-align: center;
    text-decoration: none;
/*    box-shadow: 1px 1px 4px #000; */
    color: #228;    /*#ffe;*/
    background-color: #ffc ;
    border-color: #000;
    border:1px solid #228;
}

/* Our special buttons */
.bouton {
    display: block;
    text-align: center;
    margin:4px;
    padding: 8px 16px;
    border-radius:8px;
    text-decoration: none;
    color: #eee;    /*#ffe;*/
    background-color: #368bcc;
    border-color: #368bcc;
    /*border-width: medium;*/
    border:1px solid #368bcc;
	background: -moz-linear-gradient(#9ac5e5, #368bcc);
	background: -webkit-linear-gradient(#9ac5e5, #368bcc);
	background: -o-linear-gradient(#9ac5e5, #368bcc);
}
.bouton:hover {
    color: #368bcc;    /*#ffe;*/
    background-color: #fff;
    border-color: #368bcc;
    box-shadow: 0px 0px 6px #368bcc;
    cursor: pointer;
    background: -moz-linear-gradient(#fff, #ddd);
    background: -webkit-linear-gradient(#fff, #ddd);
    background: -o-linear-gradient(#fff, #ddd);
}
.bouton.active {
    color: #368bcc;    /*#ffe;*/
    background-color: #ffc;
    border-color: #368bcc;
    background: -moz-linear-gradient(#fff, #ffd);
    background: -webkit-linear-gradient(#fff, #ffd);
    background: -o-linear-gradient(#fff, #ffd);
}
.bouton.disabled {
    color: #ccc;    /*#ffe;*/
    background-color: #666;
    border-color: #ccc;
}
.bouton.disabled:hover {
  box-shadow: 0px 0px 6px #999;
}
.bouton2 {
    display: block;
    text-align: center;
    margin:4px;
    padding: 8px 16px;
    border-radius:8px;
    text-decoration: none;
    color: #eee;    /*#ffe;*/
    background-color: #36bb77;
    /*background-color: #368bcc;*/
    /*border-color: #368bcc;*/
    border-color: #36aa77;
    /*border-width: medium;*/
    /*border:1px solid #368bcc;*/
    border:1px solid #36aa77;
	background: -moz-linear-gradient(#9ec, #3b7);
	background: -webkit-linear-gradient(#9ec, #3b7);
	background: -o-linear-gradient(#9ec, #3b7);
}
.bouton2:hover {
    color: #36bb77;    /*#ffe;*/
    background-color: #fff;
    border-color: #36bb77;
    box-shadow: 0px 0px 6px #36bb77;
    cursor: pointer;
       background: -moz-linear-gradient(#fff, #ddd);
       background: -webkit-linear-gradient(#fff, #ddd);
       background: -o-linear-gradient(#fff, #ddd);
}

.creme {
    background:#ffc;
    background-color:#ffc;
	background: -moz-linear-gradient(#ffc, #dd9);
	background: -webkit-linear-gradient(#ffc, #dd9);
	background: -o-linear-gradient(#ffc, #dd9);
}
.aluminum {
    background:#eee;
    background-color:#eee;
	background: -moz-linear-gradient(#eee, #ccc);
	background: -webkit-linear-gradient(#eee, #ccc);
	background: -o-linear-gradient(#eee, #ccc);
}
.steel {
    background:#ccc;
    background-color:#ccc;
	background: -moz-linear-gradient(#ccc, #999);
	background: -webkit-linear-gradient(#ccc, #999);
	background: -o-linear-gradient(#ccc, #999);
}
.titanium {
    background:#aaa;
    background-color:#aaa;
	background: -moz-linear-gradient(#aaa, #777);
	background: -webkit-linear-gradient(#aaa, #777);
	background: -o-linear-gradient(#aaa, #777);
}
.bleu {
    background:#368bcc;
    background-color:#368bcc;
}
.cerulean {
    background:#e6f8fd;
    background-color:#e6f8fd;
}

.swellInput {
  border-width: 1px 1px 1px 1px;
  border-color: #eee; /*#228;*/
  background-color: #ffc;
  border-radius: 4px;
  box-shadow: none;
  text-align:right;
  padding-right: 5px;
  -webkit-box-shadow: none;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 10px;
}

.swellInput:focus {
  /*border-width: 1px 1px 1px 1px;*/
  /*border-color: #228;*/
  /*border-radius: 4px;*/
  background: white;
  /*text-align:right;*/
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.swellLabel {
  border-width: 1px 1px 1px 1px;
  border-color: #eee;
  /*background-color: #ddd;*/
  border-radius: 4px;
  box-shadow: none;
  text-align:right;
  padding-right: 5px;
  -webkit-box-shadow: none;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 10px;
}
.swellNonInput {
  border-width: 1px 1px 1px 1px;
  border-color: #eee;
  background-color: #ddd;
  border-radius: 4px;
  box-shadow: none;
  text-align:right;
  padding-right: 5px;
  -webkit-box-shadow: none;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 10px;
}
.swellError {
  background: pink;
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

  font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size:15px;   /* was 12px; */
  height:100%;
  margin:0px;
  padding:0px;
  width:100%;
  background-color: #eee;

  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(left,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #e6f8fd 45%, #e6f8fd 45%, #c8eefb 98%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(45%,#e6f8fd), color-stop(45%,#e6f8fd), color-stop(98%,#c8eefb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#e6f8fd 45%,#e6f8fd 45%,#c8eefb 98%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#e6f8fd 45%,#e6f8fd 45%,#c8eefb 98%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#e6f8fd 45%,#e6f8fd 45%,#c8eefb 98%); /* IE10+ */
  background: linear-gradient(to right,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#e6f8fd 45%,#e6f8fd 45%,#c8eefb 98%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#c8eefb',GradientType=1 ); /* IE6-9 */
}
body {
/*    background:#ffe;*/
    background:#368bcc;
    /*#3468e9; #3434e9; #00007F; #e6f8fd;*/
}
body, html {
    height: 100%;
    overflow: hidden;
}
.scroll {
    overflow: auto;
    height: 100%;
    padding: 20;
}
.errorText {
  color: #a00;
}
.warningText {
  color: #aa0;
}
.statusText {
  color: #0a0;
}
.titleText {
  font-size: 18px; /*1.1em;*/
  font-weight: bold;
}
.largeText {
  font-size: 16px; /*1em;*/
}
.normalText {
  font-size: 14px; /*0.9em;*/
}
.tinyText {
  font-size: 12px; /*0.8em;*/
}
.whisperText {
  font-style: italic;
}
.shoutText {
  font-weight: bold;
}

.yugeText {
  font-size: 16px; /*1.1em;*/
  font-weight: bold;
  color: #000;
}
.biglyText {
  font-size: 12px; /*1.1em;*/
  font-weight: normal;
  color: #777;
}

ul#devices_list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul#devices_list .disabled {
  opacity: .5;
}

span.badge {
  margin-top: 10px;
}

.spudboy-title { width:220px; }

.container-popup {
    position: relative;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

.popup {
    width: 50%;
    height: 50%;
    background: #1abcb9;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.form {
  font-size: 18px;
  font-weight: bold;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form .form-heading,
.form .checkbox {
  margin-bottom: 10px;
}
.form .checkbox {
  font-weight: normal;
}
.form input[type="checkbox"] {
  border: 2px solid black;
}

.form .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}

.form .form-control:focus {
  z-index: 2;
}

.form input[type="email"],
.form input[type="password"],
.form input[type="text"] {
  border-width: 0px 0px 2px 2px;
  border-color: #0071BC;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.form input[type="email"]:focus,
.form input[type="password"]:focus,
.form input[type="text"]:focus {
  border-width: 0px 0px 2px 2px;
  border-color: black;
  border-radius: 0px;
  background: white;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.form input[type="email"] {
  margin-bottom: 10px;
}
.form input[type="password"] {
  margin-bottom: 10px;
}
.form .remember-me {
  text-align: right;
}
.form input[type='checkbox'] {
    -webkit-appearance:none;
    width:18px;
    height:18px;
    background:transparent;
    border-width: 0px 0px 1px 1px;
    border-style: solid;
    border-color: #0071BC;
    margin-bottom: 2em;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.form input[type='checkbox']:checked,
.form input[type='checkbox']:checked:hover {
    background: #0071BC;
    border-width: 0px 0px 1px 1px;
    border-style: solid;
    border-color: #0071BC;
}
.form input[type='checkbox']:hover {
    background: white;
    border-width: 0px 0px 1px 1px;
    border-style: solid;
    border-color: black;
}

.form .pin {
  width: 20%;
  font-size: 14px;
  margin-right: 5%;
  margin-bottom: 1em;
  display: inline;
  text-align: center;
}

.form .pinInput input:last-child {
  margin-right: 0;
}

.security.questions { display: none; }

.existing.question {
  font-size: 14px;
}

.existing.question dl {
  margin: 0;
}
.existing.question dt:before {
  content: "Q: ";
}
.existing.question dd:before {
  content: "A: ";
}

#realtime, #week, #daily, #temperature, #humidity {
  background: white;
  border-radius: 6px;
  margin-bottom: 12px;
}

#week, #daily, #temperature, #humidity {
  display: inline-block;

}

#week,
#daily {
  width: 100%;
  margin-right: 15px;
  clear: both;
}

.axis path,
.axis line {
  fill: none;
  stroke: #c1c1c1;
  shape-rendering: crispEdges;
}

.axis text {
  font-size: 10px;
  fill: #333;
}

.x.axis path {
  display: none;
}



.line {
  fill: none;
  stroke: #428bca;
  stroke-width: 1.5px;
}

.modetext { border-bottom: 1px dotted #333; }

.modeParams { margin-top: 1em; }


.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,1,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 200ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
.modalDialog > div {
	width: 800px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 8px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #aaa);
	background: -webkit-linear-gradient(#fff, #aaa);
	background: -o-linear-gradient(#fff, #aaa);
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #f00; }

.container-popup {
    position: relative;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

.popup {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: #fff;
    background: -moz-linear-gradient(#fff, #aaa);
    background: -webkit-linear-gradient(#fff, #aaa);
    background: -o-linear-gradient(#fff, #aaa);
}



/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-content div {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content div:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}