@media (max-width: 640px) { body {font-size:15px; }}
@media (min-width: 640px) { body {font-size:16px; }}

body {
	/*font: 18px Tahoma, sans-serif;*/
	font-family: Tahoma, sans-serif;
	background-color: #cee0de;
	margin: 0px;
}
a, a:active, a:visited {
 color: #426672;
}
p {
	margin: 10px 0;
}
#wrapper {
	max-width: 860px;
	min-width: 380px;
	margin: auto;
}
header {
	font-size: 20px;
	padding: 14px;
	margin: 0px;
	margin-bottom: 0px;
	background-color: #aec0be;
	text-align: center;
	cursor: pointer;
}
section {
	margin: 10px 0px 10px 0px;
	padding: 10px;
	background-color: #f3f8f7;
	display: block;
}
section.main {
	padding: 3px 10px;
}
.info table {
	border-collapse: collapse;
	border: 1px solid grey;
	width: 100%;
}
.info td {
	border-bottom: 1px solid grey;
	padding: 5px;
}
.sect_name td {
	text-align: center;
	font-weight: bold;
	background-color: #aec0be;
}
.settings td, .alarms td, .log .sect_name td {
	padding: 5px;
}
.alarms td:nth-child(1n+2) { white-space:nowrap; }
.alarms td.en { white-space:nowrap; width:1%;}
.alarms .days label { white-space:nowrap; width:1%;}
.alarms tr { vertical-align: top; }
.alarms hr { margin-top: 0px;  margin-bottom: 0px; }
.alarms .en td { padding-top: 0px; padding-bottom: 3px; }

@media (min-width: 750px), (min-width: 460px) and (max-width: 640px) { 
	.alarms input[type='time'] { margin-top: -5px; border-top: -5px; }
	.alarms br { display: none; }
}
.alarms input[type='radio'] { margin-left: 0px; }
.alarms input[type='checkbox'] { margin-left: 0px; }
.alarms .a_radio label { margin-left: 0px; margin-right: 22px; }
.alarms .en label { margin-left: 0px; margin-right: 0px;}
.alarms .days label { margin-left: 0px; margin-right: 5px; }

.m_s input[type='checkbox'] { margin-left: 0px; }
.m_s label { margin-left: 0px; margin-right: 5px; }
.m_s.disabled { color:#505050; }

header { max-width: 830px;}

.svg
{
	background-repeat: no-repeat;
	background-position: center;
}

.status
{
	margin: 10px 0px 10px 0px;
	background-color: #f3f8f7;
	padding: 0px;
}
.status ul
{
	margin: 0px;
	padding-left: 0px;
	width: 100%;
}
.status ul li
{
	display: inline-block;
	list-style: none;
	margin: 8px 0;
	text-transform: uppercase;
	font-size: 0px;
	width: 16%;
	text-align: center;
}
.status ul li a
{
	text-decoration: none;
	font-weight: 800;
	color: #f3f8f7;
}
.status .svg {
	height:50px;
}

.main ul
{
	margin: 0px;
	padding-left: 0px;
	width: 100%;
}
.main ul li
{
	/* display: inline-block; */
	list-style: none;
	margin: 0px 0 8px 0;
	text-transform: uppercase;
	font-size: 0px;
	width: 100%;
	text-align: center;
}
.main ul li a
{
	text-decoration: none;
	font-weight: 800;
	color: #f3f8f7;
}
.main .svg {
	height:150px;
}

.main ul.addr
{
	margin: 0px;
	padding-left: 0px;
	width: 100%;
	text-align: center;
}
.main .addr li, .main .presets li
{
	list-style: none;
	text-transform: uppercase;
	font-size: 14px;
	width: 100%;
	text-align: center;
	margin: 24px 0px;
}
.main .addr li
{
	display: inline-block;
	margin: 14px 0px 0px 1px;
	width: auto;
}

.main .addr .sel a
{
	background: #aec0be;
}
td.ctrl, td.presets {
	padding: 0px 0px 0px 0px;
}
.main table {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.main .addr a, .main .presets a
{
	text-decoration: none;
	font-weight: 800;
	color: #000000;
	padding: 12px 12px;
	margin: 0px;
	border-radius: 9px;
	border: 3px solid #000000;
	display: inline-block;
	cursor: pointer;
}
.main .presets a
{
	padding: 14px 16px;
}
@media (min-width: 640px) {
	.main .addr li, .main .presets li {
		font-size: 16px;
	}
	.main .addr a, .main .presets a	{
		padding: 14px 13px;
	}
}
@media (min-width: 780px) {
	.main .addr a, .main .presets a	{
		padding: 14px 18px;
	}
}
.main .presets a
{
	display: block;
}
.main table
{
	width: 100%;
}
.main td.ctrl
{
	width: 100%;
}

.log td { vertical-align: top; }
.log td.warn { color: #808000; }
.log td.error { color: #800000; }
.log td.debug { color: #505050; }

.menuopen .svg {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 12 10'%3E%3Cpath d='M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659l4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z'/%3E%3C/svg%3E");
}
.menuclose .svg {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 12 10'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E");
}
.menustop .svg {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 12 10'%3E%3Cpath d='M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z'/%3E%3C/svg%3E");
}
.menuinfo .svg {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 488.9 488.9'%3E%3Cpath d='M239.15,0c31.9,0,57.7,25.8,57.7,57.7s-25.8,57.7-57.7,57.7s-57.7-25.8-57.7-57.7S207.25,0,239.15,0z M291.65,151.6h-1.5 h-92.8h-3.4c-19,0-34.3,15.4-34.3,34.3l0,0c0,19,15.4,34.3,34.3,34.3h3.4v200h-37.7v68.7h169.6v-68.7h-37.5V151.6H291.65z'/%3E%3C/svg%3E");
}
.menualarms .svg {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
}
.menusettings .svg {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019l.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z'/%3E%3C/svg%3E");
}

.info.show, .settings.show, .alarms.show, .main.show, .log.show {
	display: block;
}

.info.hide, .settings.hide, .alarms.hide, .main.hide, .log.hide {
	display: none;
}

.val input[type=text] { width: 255px;}
.val_p input[type=text] { width: 100px;}
.val_ip input[type=text] { width: 45px; text-align: right; }

@media (min-width: 640px) { 
#wrapper {min-width: 710px;}
.info.hide, .info.show { width: 240px; float: left; display: block; margin-top:0px;} 
select, input, button { font-size: 16px; }
section.settings, section.alarms, section.main, section.log {
	max-width: 560px;
	display: block;
	margin-left: 280px;
}
.status ul {	padding-left: 0px; }
.status ul li { margin: 12px 0; }
.status ul li a {   font-size: 16px; 	color: #426672; }
.status .svg
{
	height:30px;
}
header {	margin: 10px; 	padding: 10px; }
section, .status {	margin: 10px; }
.status ul li.menuinfo { display: none; }
.status ul li {	width: 20%; }
}

.rf span { white-space: nowrap; }
.rf td { vertical-align: top; }
.rf hr { margin-top: 0px;  margin-bottom: 0px; }

.sun tr:nth-child(1),
.sun tr:nth-child(2n) {background: #e6f0ee; }
.sun tr:nth-child(2n+3) {background: #FFF; }
.sun td { padding: 0 5px 0 5px; }
.sun th { padding: 0 5px 0 5px; }
.sun td:nth-child(n+2) { text-align: right; }
.sun tr:nth-child(8) { font-weight: 600; }

section.info {
	position: sticky;
	top: 10px;
}

.maxIPsWarn { color: #b82027; }
.limit { color: #b82027; }
#edt_ip { width: 45px; }
.slave_ips td { padding: 0px; padding-right: 5px; }
#tr_ips td, #tr_sl_ips td { vertical-align: top; }
#wake_btns button { margin-right: 5px; }