
const char PAGE_Style_css[] PROGMEM = R"=====(
body { color: #000000; font-family: avenir, helvetica, arial, sans-serif;  letter-spacing: 0.15em;} 
hr {    background-color: #eee;    border: 0 none;   color: #eee;    height: 1px; } 
#mqtt_bk, #mqtt_un, #mqtt_pw, #mqtt_rt, #mqtt_tt, {
    width:240px;
}
#headrow {
    font-size:28px !important;
}
.btn, .btn:link, .btn:visited {  
	border-radius: 0.3em;  
	border-style: solid;  
	border-width: 1px;  
color: #111;  
display: inline-block;  
	font-family: avenir, helvetica, arial, sans-serif;  
	letter-spacing: 0.15em;  
	margin-bottom: 0.5em;  
padding: 1em 0.75em;  
	text-decoration: none;  
	text-transform: uppercase;  
	-webkit-transition: color 0.4s, background-color 0.4s, border 0.4s;  
transition: color 0.4s, background-color 0.4s, border 0.4s; 
} 
.btn:hover, .btn:focus {
color: #7FDBFF;  
border: 1px solid #7FDBFF;  
	-webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;  
transition: background-color 0.3s, color 0.3s, border 0.3s; 
}
	.btn:active {  
color: #0074D9;  
border: 1px solid #0074D9;  
		-webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;  
transition: background-color 0.3s, color 0.3s, border 0.3s; 
	} 
	.btn--s 
	{  
		font-size: 12px; 
	}
	.btn--m { 
		font-size: 14px; 
	}
	.btn--l {  
		font-size: 20px;  border-radius: 0.25em !important; 
	} 
	.btn--full, .btn--full:link {
		border-radius: 0.25em; 
display: block;  
			margin-left: auto; 
			margin-right: auto; 
			text-align: center; 
width: 100%; 
	} 
	.btn--blue:link, .btn--blue:visited {
color: #fff;  
		background-color: #0074D9; 
	}
	.btn--blue:hover, .btn--blue:focus {
color: #fff !important;  
		background-color: #0063aa;  
		border-color: #0063aa; 
	}
	.btn--blue:active {
color: #fff; 
		background-color: #001F3F;  border-color: #001F3F; 
	}
	@media screen and (min-width: 32em) {
		.btn--full {  
			max-width: 16em !important; } 
	}
)=====";

const char PAGE_Style2_css[] PROGMEM = R"=====(

.btn:hover, .btn:focus {
color: #7FDBFF;  
border: 1px solid #7FDBFF;  
  -webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;  
transition: background-color 0.3s, color 0.3s, border 0.3s; 
}
  .btn:active {  
color: #0074D9;  
border: 1px solid #0074D9;  
    -webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;  
transition: background-color 0.3s, color 0.3s, border 0.3s; 
  } 
  .btn--s 
  {  
    font-size: 12px; 
  }
  .btn--m { 
    font-size: 14px; 
  }
  .btn--l {  
    font-size: 20px;  border-radius: 0.25em !important; 
  } 
  .btn--full, .btn--full:link {
    border-radius: 0.25em; 
display: block;  
      margin-left: auto; 
      margin-right: auto; 
      text-align: center; 
width: 100%; 
  } 
  .btn--blue:link, .btn--blue:visited {
color: #fff;  
    background-color: #0074D9; 
  }
  .btn--blue:hover, .btn--blue:focus {
color: #fff !important;  
    background-color: #0063aa;  
    border-color: #0063aa; 
  }
  .btn--blue:active {
color: #fff; 
    background-color: #001F3F;  border-color: #001F3F; 
  }
  @media screen and (min-width: 32em) {
    .btn--full {  
      max-width: 16em !important; } 
  }
)=====";
 
