/* reset all */
/*@font-face {
	font-family: segoe-ui-light;
	src: url(fonts/segoeuil.woff);
}*/
html { height: 100%; }
body {
	position: fixed;
	margin: 0;
	top: 0; bottom: 0;
	left: 0; right: 0;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
body,input,select,button,table,textarea {
	font: normal 12px ubuntu, arial, 'Helvetica CY', sans-serif;
	color: #243640;
}
table {
	border-collapse: collapse;
}
a {
	color: #00509b;
}
img {
	border: none;
	margin: 0px;
}
.nobr {
	white-space: nowrap;
}
.hidden {
	display: none !important;
}
.transparent {
	opacity: 0;
}
.scrollable {
	overflow: auto;
}
.fixed {
	overflow: hidden;
}
.topmost {
	z-index: 99999;
}
.wide { width: 100%; }

/* -------------------------- page layout -------------------------------- */
body.page {
	/*overflow-y: hidden;*/
}
body.popup {
}

.page_frame, .page_menu {
	position: fixed;
	margin: 0px;
	left: -10px;
	right: -10px;
	z-index: 2;
}

.page_menu {
	padding: 0px;
	height: 69px;
	/*width: 954px;*/
	bottom: 0;/*6px;*/

	border: none solid #57729b;
	border-top: 0px;

	-webkit-box-shadow: 0 0 7px #000; box-shadow: 0 0 7px #000;

	text-align: center;
	z-index: 3;
}

.page_frame {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;/*69px;*/
	padding: 0;
	overflow: auto;
	overflow-x: hidden;
}
.nomenu, .nomenu > .page_padding {
	bottom: 0 !important;
}
.page_padding {
	left: 0;
	right: 0;
	top: 0;
	bottom: 69px;
	position: absolute;
	/*overflow: auto;*/
	/*width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;*/
	/*height: auto !important;*/
	/*height: 100%;*/
	/*min-height: 100%;*/
	padding: 6px 0;
	background: #262626 url('/bg/body.png?theme=qrdyr') center top;
}
.page_view {
	height: 100%;
}

.page_layout {
	position: relative;
	overflow: auto;
	min-width: 960px;
	width: 960px;
	/*height: auto !important;*/
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0 auto;
	background: #11335a url('/bg/page_content.png?theme=qrdyr') repeat-x;
	border: 3px solid #57729b;
}
.page_top {
	/*position: static;*/
	border: none;
	/*top: 6px;*/
	/*width: 954px;*/

	background: #11335a url('/bg/logo.png?theme=qrdyr') left top no-repeat;

	/*padding: 0 0 1px;*/
}
.page_content {
	width: 928px;
	margin: 0px;
	padding: 0;

	position: static;
	bottom: 75px;
	top: 146px;

	overflow: auto;
	z-index: 1;
}
.block_content, .block_content_nopadding {
	background: #ffffff;
	position: relative;

	margin: 0 0 13px 26px;


	border: 1px solid;
	border-color: #192e4a;

	-webkit-box-shadow: 0 0 3px #14243b inset; box-shadow: 0 0 3px #14243b inset;
	border-top: none;
}
.block_content_nopadding {
	padding: 0;
	width: 900px;
	overflow: auto;
}
.block_content {
	padding: /*8px 16px */16px;
	width: 868px;
}

.page_header {
	position: relative;
	height: 103px;
	margin: 0px;
	width: 100%;
	z-index: 1;
}
.page_logo_place {
}
.page_logo {
	display: inline-block;
	margin: 18px 0 0 26px;
	width: 92px;
	height: 38px;
	background: url('/i/logo.png?theme=qrdyr') left top no-repeat;
	vertical-align: top;
}
.page_logoname {
	display: inline-block;
	margin: 30px 0 0 23px;
/*	left: 141px;*/
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
}
.page_logoname span {
	color: #ccc;
}
.page_logoname a {
	color: #ccc;
	text-decoration: none;
}
.page_logoname a.top_link {
	margin-left: 8px;
	margin-right: 8px;
}
.page_logoname a:hover {
	text-decoration: underline;
}
.page_prefs {
	position: absolute;
	top: 25px; left: 300px;
	height: 20px;
	width: 634px;
	text-align: right;

	color: #ccc;
	font-size: 12px;
	font-weight: bold;
}
.page_prefs label {
	width: auto;
	margin-left: 10px;
}
.page_prefs .value {
	color: #fff;
}
.menuless {
	bottom: 6px !important;
	top: 79px !important;
}
.headless {
	top: 6px !important;
}
.page_title {
	height: 18px;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	/*margin: 0 0 15px 26px;*/
	position: absolute;
	top: 70px;
	left: 26px;
	right: 0;
}
.page_subtitle {
	font-size: 12px;
	color: #ffffff;
	display: none;
}

.page_tabs {
	/*height: 30px;*/
	margin: 0 0 0 27px;
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
	/*overflow: hidden;*/
	border-bottom: 1px solid #871e1e;
}
.page_tabs, .page_tabs > ul {
	width: 900px;
	max-width: 900px;
	padding: 0;
}
.page_tabs > ul {
	/*height: 50px;*/
	list-style: none;
	margin: 0;
	/*overflow: auto;*/
	border-bottom: 3px solid #d02f2f;
}

.page_prefs select, .page_prefs input {
	margin: 0;
	min-width: inherit;
	/*min-height: 22px;*/
	/*padding-bottom: 1px !important;*/
}
.page_prefs a {
	color: #ccc;
	text-decoration: none;
}
.page_prefs a.top_link {
	margin-left: 8px;
	margin-right: 8px;
}
.page_prefs a:hover {
	text-decoration: underline;
}
/* ----------------------- online/offline informer -------------------------- */
.offline_icon {
	display: inline-block;/*
	height: 16px;
	width: 16px;*/
	margin: 2px 8px;
	padding: 0 5px;
	text-align: center;
	vertical-align: baseline;

	cursor: default;
	border: 1px solid #000;
	border-radius: 2px;
	-webkit-box-shadow: 0 0 1px #000 inset; box-shadow: 0 0 1px #000 inset;
	background: #efe000;
	color: #000;
	font-size: 13px;
	font-weight: bold;
	font-family: serif;
}
/* -------------------------- bottom menu -------------------------------- */
.page_menu {
	background: #747474 url('/bg/menu.png?theme=qrdyr') repeat-x;
}
.page_menu div {
	margin: 0;
	padding: 0px;
	height: 69px;
	overflow: hidden;
	display: inline-block;
}
.page_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.page_menu ul li {
	width: 69px;
	height: 69px;
	margin: 0px;
	vertical-align: top;
	border-left: 1px solid #4d4d4d;
	display: inline-block;
}
.ic_dashboard_shaded   { background-image: url('/ic/dashboard-shade.png?theme=qrdyr'); }
.ic_dashboard          { background-image: url('/ic/dashboard.png?theme=qrdyr'); }
.ic_broadband_shaded   { background-image: url('/ic/broadband-shade.png?theme=qrdyr'); }
.ic_broadband          { background-image: url('/ic/broadband.png?theme=qrdyr'); }
.ic_home_shaded        { background-image: url('/ic/home-shade.png?theme=qrdyr'); }
.ic_home               { background-image: url('/ic/home.png?theme=qrdyr'); }
.ic_wireless_shaded    { background-image: url('/ic/wireless-shade.png?theme=qrdyr'); }
.ic_wireless           { background-image: url('/ic/wireless.png?theme=qrdyr'); }
.ic_security_shaded    { background-image: url('/ic/security-shade.png?theme=qrdyr'); }
.ic_security           { background-image: url('/ic/security.png?theme=qrdyr'); }
.ic_tools_shaded       { background-image: url('/ic/tools-shade.png?theme=qrdyr'); }
.ic_tools              { background-image: url('/ic/tools.png?theme=qrdyr'); }
.ic_usb_shaded         { background-image: url('/ic/usb-shade.png?theme=qrdyr'); }
.ic_usb                { background-image: url('/ic/usb.png?theme=qrdyr'); }

.page_menu ul li:first-child {
	border-left: 0px
}
.page_menu ul li.selected, .page_menu ul li:hover {
	background: #e6e6e6 url('/bg/menu_active.png?theme=qrdyr') repeat-x;
}
.page_menu ul li img {
	width: 69px;
	height: 69px;
}
.page_menu br { clear: left; }
.page_menu li a {
	display: block;
	width: 69px;
	background-color: transparent;
	background-repeat: no-repeat;
	font-weight: bold;
	text-decoration: none;
	font-size: 12px;
	text-align: center;
	line-height: 12px;
	height: 30px;
	padding-top: 159px; /* hack! */
	color: #333;
}
.page_menu li a:hover {
	color: #999;
	font-weight: bold;
}
.page_menu li.selected a { color: #fff; }

/* -------------------------- top tabs -------------------------------- */
.page_tabs li {
	display: inline-block;
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important;
}
.page_tabs a {
	line-height: 30px;
	text-decoration: none;
	color: #333;
	padding: 0px;
	margin: 0px;
	position: relative;
	top: 0;
}
.page_tabs a:before {
	background: url('/i/tab.png?theme=qrdyr') no-repeat top left;
	content: ' ';
	display: inline-block;
	height: 30px;
	width: 0px;
	vertical-align: top;
}
.page_tabs a span {
	background: url('/i/tab.png?theme=qrdyr') no-repeat top right;
	height: 28px;
	line-height: 30px;
	display: inline-block;
	padding: 2px 8px 0px 8px;
	vertical-align: top;
}

.page_tabs a:hover:before  { background-position: left -31px; }
.page_tabs a:hover span    { background-position: right -31px; }
.page_tabs a.current:hover:before,
.page_tabs a.current:before {
	background-position: left -62px;
	width: 11px;
}
.page_tabs a.current:hover span,
.page_tabs a.current span   { background-position: right -62px; padding-bottom: 2px; padding-top: 0; padding-left: 0; }
.page_tabs a:hover { color: #333; }
.page_tabs a.current, 
.page_tabs a.current:hover, 
.page_tabs li.current a {
	cursor: default !important;
	color: #fff !important;
}

/* ---------------------------------- dashboard frames ------------------------------------- */
.status_column {
	display: inline-block;
	width: 426px;
	margin: 16px 0 5px 16px;
	vertical-align: top;
}
.status_wide {
	width: 868px;
	margin: 11px 0 16px 16px;
}
.dashboard_pane {
	background-color: white;
	border: 1px solid silver;
	margin: 0 0 11px;
}
.dashboard_item {
	overflow: hidden; 
	padding: 3px 7px;
}


.status_left {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}
.status_right {
	width: 50%;
	margin: 0;
	padding: 0;
	float: right;
}
.status_wide {
	clear: both;
	margin: 0;
	width: inherit;
}
.status_left .pane {
	margin: 12px 6px 12px 12px;
}
.status_right .pane {
	margin: 12px 12px 12px 6px;
}
.status_wide .pane {
	margin: 12px 12px 12px 12px;
}

.pane {
	background-color: white;
	border: 1px solid silver;
	margin: 0 0 11px;
	padding: 0;
	overflow: auto;
}
.pane > h1, .sub_pane > h1 {
	height: 21px;
	padding: 5px 5px 0 8px;
	text-align: left;
	font-size: 12px; /*ubuntu, verdana, arial, sans-serif*/
	font-weight: bold;
	white-space: nowrap;

	margin: 0;
}
.pane > h1 {
	border-bottom: 1px solid #9e9e9e;
	background: #82abaf url('/bg/th.png?theme=qrdyr') repeat-x;
	color: #fff;
}
.sub_pane {
	overflow: auto;
	margin: 0 !important;
	padding: 0;
}
.sub_pane > h1 {
	background: #f5f5f5 url('/bg/sub_th.png?theme=qrdyr') repeat-x;
	color: #444;
}
.pane > div, .sub_pane > div {
	margin: 2px 2px;
}
table.dash {
	margin: 0;
	border: none;
	text-align: left;
}
table.dash th {
	background: #f5f5f5 url('/bg/sub_th.png?theme=qrdyr') repeat-x;
	color: #333;
	border-bottom: 1px solid #e5e5e5;

	height: 25px;
	padding: 0 5px 0 5px;

	font-weight: bold;

	white-space: nowrap;
}
table.dash > tbody > tr > td {
	height: 22px;
	padding: 1px 5px 1px 5px;
	border: 0px none red;
}
table.dash > tbody > tr {
	border-top: 1px solid #e5e5e5;
}
table.dash > tbody > tr:first-child {
	border-top: none;
}
td.label {
}
td.value {
}


/* ---------------------------------- forms ------------------------------------- */
form {
	margin: 0;
	padding: 0;
	/*position: relative; // removed for former.freeze shade */
}
div.fieldset {
	border: none;
	padding: 0;
	margin: 10px 0;
	line-height: 22px;
}
div.fieldset:first-child {
	margin-top: 0;
}
div.fieldset:last-child {
	margin-bottom: 0;
}
div.field {
	position: relative;
	line-height: 22px;
	/*clear: both;*/
}
div.centered {
	text-align: center;
}
.multicol input, .multicol select, .multicol textarea {
	width: inherit !important;
	min-width: inherit !important;
}
.notice {
	background: #f2f2f2;
	border: 1px solid #bababa;
	border-radius: 5px;
	padding: 0;/*8px;*/
	margin: 10px 0;
	white-space: normal;
}
.info-block p {
	margin: 11px;
}
.text-block p, .info-block p {
	line-height: normal;
}
.block_content_nopadding .notice {
	margin: 11px;
}
form .comment {
	margin: 10px 16px;
}

h1, h2, h3, h4, h5, h6, div.legend {
/*	font-family: ubuntu, verdana, arial, sans-serif;*/
	font-weight: bold;
	color: #333;
}
pre {
	padding: 0 0 0 2.2em;
	margin: 1em 0;
}
h1 { font-size: 16px; }
h2 { font-size: 12px; }
div.legend { font-size: 12px; }

div.legend {
	margin: 0 0 8px 0;
}
h1:first-child, h2:first-child {
	margin-top: 0;
}
h2, div.legend {
	padding-bottom: 0px;
	border-bottom: 1px dashed #aaa;
}
.block_content_nopadding > h1, .block_content_nopadding > h2, .block_content_nopadding > div.legend {
	margin: 11px !important;
}
/*h1:not(:first-child) {
	border-top: 2px solid #ccc;
	padding-top: 9px;
}*/
hr {
	margin: 16px 0 0;
	border: 1px solid #ccc;
	height: 0;
}
b.gap {
	padding: 0 5px;
/*	width: 10px;
	display: inline-block;*/
}
label {
	display: inline-block;
	/*min-height: 22px;*/
	padding: 0;
	margin: 0 4px 0 0;
	line-height: 14px;
	text-align: right;
}
form.legacy label {
	width: 250px;
}
label:empty {
	vertical-align: bottom;
}
label.inline, label.left, form.legacy label.inline {
	/*overflow: auto;*/
	text-align: left;
	width: inherit;
}
label.inline, textarea.inline { margin: 0 4px 0 0; }
label.left   { margin: 0 9px 0 3px; }
label.l2     { margin: 0 20px 0 10px; }
input.inline, textarea.inline, input[type=file] {
	margin-top: 0px;
	margin-bottom: 0px;
}
input[type=text], input[type=password], input[type=checkbox], input[type=radio], select, textarea, input[type=file] {
	margin-left: 0px;
	display: inline-block;
}
.multicol input[type=text], .multicol input[type=password], .multicol select {
/*	margin-right: 0;*/
}
select[size] {
	height: inherit;
	padding: 0;
}
input[type=text], input[type=password], select, textarea {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
input[type=text], input[type=password], select {
	min-width: 160px;
/*	min-height: 19px;*/
	height: 20px;
}
textarea {
	min-height: 20px;
	resize: none;
/*	margin-top: 1px;
	margin-bottom: 1px;*/
}
input[type=text], input[type=password] {
}
button, input[type=button] {
	padding: 0px 6px 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 20px;
}
input[type=text], input[type=password], select, button, textarea, input[type=file] {
	margin-right: 4px;
}
.right_float {
	float: right;
}

.right_float button {
	margin-left: 4px;
	margin-right: 0;
}
input[readonly], textarea[readonly] {
	border: 1px solid #ddd !important;
	background: none !important;
}
input[type=text]:disabled, input[type=password]:disabled, textarea:disabled {
/*	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0, rgba(0, 0, 0, 0.06) 4px, rgba(0, 0, 0, 0.06) 100%);background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.10) 0, rgba(0, 0, 0, 0.06) 4px, rgba(0, 0, 0, 0.06) 100%);*/
	opacity: 0.4; filter: alpha(Opacity=40);
}
button:disabled {
	opacity: 0.4; filter: alpha(Opacity=40);
}
input[type=text], input[type=password], textarea, select[size] {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0, transparent 4px, transparent 100%);background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.10) 0, transparent 4px, transparent 100%);
	background-color: #fafeff;
	border: 1px solid #bbb;
	border-radius: 2px;
	padding: 1px 2px;
	margin-top: 0;
	margin-bottom: 1px;
}
input.invalid, input.state_invalid, select[size].invalid, select[size].state_invalid {
	border: 1px solid #e77;
}
select.state_invalid, input[type=checkbox].state_invalid, input[type=radio].state_invalid {
	-webkit-box-shadow: 0 0 3px #e77; box-shadow: 0 0 3px #e77
}
input.invalid, input.state_invalid {
	/*background: #fdbebb !important;*/
	background-color: #fff8f8;
}
input[type=checkbox], input[type=radio] {
	margin-right: 3px;
	margin-bottom: 3px;
}
input[disabled], select[disabled], textarea[disabled], button[disabled] {
/*	color: #bbb !important;*/
	opacity: 0.4; filter: alpha(Opacity=40);
}
label.disabled, span.disabled {
/*	color: #888 !important;*/
	opacity: 0.4; filter: alpha(Opacity=40);
}
input.short {
	width: 40px;
}
.long_input {
	min-width: 38em;
}
textarea {
	overflow: auto;
}
form br { clear: left; }
select.iface { }
input.greyed-out { }
.apply, .cancel {
	margin: 0 5px 0 0;
}
.apply, .cancel :hover {  }

label                 { vertical-align: baseline; }
input[type=checkbox],
input[type=radio]     { vertical-align: middle; margin-top: 2px; }
button,
input[type=text],
input[type=password],
select                { vertical-align: baseline; }
textarea              { vertical-align: top; /* not baseline b'coz its doesn't working in chrome */}
input.inline,
textarea.inline       { vertical-align: top; /* not baseline b'coz its doesn't working in chrome */ }
input[type=button]    { vertical-align: baseline; }

@media \0screen {
   /* IE8-specific styles go here */
	select {
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select {
		border: 1px solid #bbb;
		border-radius: 2px;
	}
	button, input[type=reset], input[type=submit], input[type=button] {
		border: 1px solid #bbb;
		border-radius: 3px;
		padding: 2px 6px;
		height: 20px;
		background: linear-gradient(to bottom, #e9e9e9 0, #e8e8e8 15%, #dfdfdf 37%, #d7d7d7 57%, #d2d2d2 100%);background: -webkit-linear-gradient(top, #e9e9e9 0, #e8e8e8 15%, #dfdfdf 37%, #d7d7d7 57%, #d2d2d2 100%);
		-webkit-box-shadow: 0 0 1px #f8f8f8 inset; box-shadow: 0 0 1px #f8f8f8 inset;
	}
	input[type=checkbox],
	input[type=radio]     { vertical-align: baseline; }
	input::-ms-clear {
		display: none;
		width: 0;
		height: 0;
	}
}

.loading {
	background: url('/a/loading-form.gif?theme=qrdyr') no-repeat center center;
}
.busy, .total_busy {
	background: url('/a/loading.gif?theme=qrdyr') no-repeat center center;
}
.busy {
	width: 180px;
	height: 180px;
	left: 280px;
	top: 90px;
	position: absolute;
}
.total_busy {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 350;
}
.error, div.invalid {
	/*margin-left: 5px;*/
	color: #de0000;
}
.message, div.message {
}
.greyed-out {
	color: grey;
	font-style: italic;
}


.syslog {
	margin: .5em 0 0;
	border: 1px inset #ddd;
	padding: 0 3px 0 3px;
	max-height: 200px;
	overflow: auto;
	min-height: 120px;
	-webkit-box-shadow: 0 1px 2px #aaa inset; box-shadow: 0 1px 2px #aaa inset;
}

.syslog > .entry {
	clear: right;
	border-top: 1px solid #eee;
}
.syslog > .entry > div {
	float: right;
	width: 668px;
	text-align: left;
	white-space: pre-wrap;
}
.syslog > .entry > .ident       { color: #009000; padding: 0 8px 0 8px; }
.syslog > .entry > div.Debug    { color: #676767; }
.syslog > .entry > div.Info     { color: #000000; }
.syslog > .entry > div.Warning  { color: #009000; }
.syslog > .entry > div.Error    { color: #de0000; }
.syslog > .entry > div.Critical { color: #de0000; }

.console, .code {
	font-family: monospace;
/*	border: 1px solid #ccc;
	padding: 10px;
	max-height: 240px;
	overflow: auto;*/

	margin: .5em 0 0;
	border: 1px inset #ddd;
	padding: 0 3px 0 3px;
	max-height: 300px;
	overflow: auto;
	min-height: 32px;
	white-space: pre;
	-webkit-box-shadow: 0 1px 2px #aaa inset; box-shadow: 0 1px 2px #aaa inset;
}

table.styled {
/*	background-color: white;*/
	border: 1px solid silver;
	margin: 10px 0;
	text-align: left;
}
table.grid, table.grid_cont {
	border: none;
	margin: 0;
}
table.styled caption {
	text-align: left;
	margin: 0 0 8px 5px;
	padding: 0;
}
.dashboard_pane table.styled th {
	background: #f5f5f5 url('/bg/sub_th.png?theme=qrdyr') repeat-x;
	color: #333;
	border-bottom: 1px solid #e5e5e5;
}
table.styled th,.dashboard_pane h1 {
	height: 25px;
	padding: 0 5px 0 5px;
	background: #82abaf url('/bg/th.png?theme=qrdyr') repeat-x;
	text-align: left;
	font-size: 12px; /*ubuntu, verdana, arial, sans-serif*/
	font-weight: bold;
	white-space: nowrap;
	color: #fff;
}
table.styled th {
/*	border-left: 1px solid #9e9e9e;*/
}
table.styled th:first-child {
	border-left: none;
}
table.styled th a {
	color: white;
}
th.numeric {
	text-align: right !important;
}
th.check {
	width: 10px;
	text-align: center !important;
}
th.sort_asc:after {
	content: ' \025B4';
}
th.sort_desc:after {
	content: ' \025BE';
}
th.sortable {
	cursor: pointer;
}

colgroup.col_check,      td.td_check,      th.th_check      { width: 22px; }
colgroup.col_address,    td.td_address,    th.th_address    { width: 140px; }
colgroup.col_channel,    td.td_channel,    th.th_channel    { width: 60px; }
colgroup.col_encryption, td.td_encryption, th.th_encryption { width: 65px; }
colgroup.col_ieee,       td.td_ieee,       th.th_ieee       { width: 65px; }
colgroup.col_quality,    td.td_quality,    th.th_quality    { width: 32px; }

.dashboard_pane h1 {
	height: 21px;
	padding: 5px 5px 0 8px;
	border-bottom: 1px solid #9e9e9e;
	margin: 0;
}
/* tr:nth-child(even) { background-color: #e0e8f5; } */
table.styled > tbody > tr > td, table.styled > tfoot > tr > td {
	height: 22px;
	padding: 0px 5px 0px 5px;
	border: 0px none red;
}
table.styled > tbody {
	text-align: left;
}
table.styled > tbody > tr {
	border-top: 1px solid #e5e5e5;
}
table.styled > tbody > tr:first-child {
	border-top: none;
}
table.grid td, table.grid_cont td {
	width: 151px;
	max-width: 151px;
	height: auto;
	padding: 0 5px 1px 5px;
	border: none;
	text-overflow: ellipsis;
	overflow: hidden;
}
table.grid tr, table.grid_cont tr {
	border-top: 1px solid #e5e5e5;
}
table.grid tr:first-child {
	border-top: none;
}
table.styled tr.editable:hover, tr.clickable:hover, table.styled tr.highlight {
	background: #e4f0f1 url('/bg/tr_hl.png?theme=qrdyr') repeat-x;
	background-size: 1px 100%;
}
table.styled tr.editable, tr.clickable, table.styled tr.highlight {
	cursor: pointer;
}
table.styled .editor {
	width: 100%;
	background-color: #fafafa;
	height: 0;
	padding: 0;
	border: none;
	/*position: static;*/
}
table.styled td.section {
	/*border-bottom: 2px solid silver;*/
	font-weight: bold;
	padding-left: 15px;
	/*padding-top: 3px;*/
	font-size: 120%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.05) 100%);background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.05) 100%);
/*	vertical-align: bottom;*/
}
table.styled td.section h1 {
	display: inline;
	font-size: 11px;
	padding: 0 10px 2px;
}
table.styled td.waiting {
	background: url('/a/loading-char.gif?theme=qrdyr') no-repeat 5px 5px;
}
.row {
	border-top: 1px solid #e5e5e5;
	padding: 5px;
	display: none;
}
/* ----------------- progress ---------------------------------------------------------------------------- */
div.pg_bar {
	border-radius: 2px;
	border: 1px solid;
	border-color: #777 #bbb #bbb #777;
	margin: 20px;
	background: blue url('/a/progress-bar.gif?theme=qrdyr');
	text-align: right;
	height: 22px;
}
div.pg_bar > div {
	display: inline-block;
	background: #eee;
	margin: 0 !important;
	height: 22px;
	border-left: 1px solid #bbb;
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3) inset; box-shadow: 0 0 4px rgba(0,0,0,0.3) inset;
	transition: width 0.5s linear 0s;
}

div.td_progress.in-progress-roll {
	background: blue url('/a/progress-bar.gif?theme=qrdyr');
}

.mini_progress {
	width: 100%;
	height: 12px;
	border: solid 1px #96afb2;
	display: inline-block;
}
.mini_progress_level {
	height: 100%;
	color: #82bdc3;
	background: #82bdc3;
	display: inline-block;
}


.signal_level_frame {
	/*margin-bottom: 3px;
	margin-top: 1px;*/
	vertical-align: baseline;
}
.signal_level {
	height: 12px;
	display: inline-block;
	margin: 1px 0;
	vertical-align: baseline;
}
.signal_level > i, .signal_level > b {
	/*border: 1px solid #ffffff;*/
	width: 3px;
	margin-right: 1px;
	display: inline-block;
	/*vertical-align: bottom;*/
	/*vertical-align: baseline;*/
}
.signal_level > i {
	background: #719396/*#74dbe5/*#9af1df/*#94eaf4*/;
}
.signal_level > b {
	background: #e1edee;
}
.signal_level > .h20 {
	height: 4px;
	border-right: none;
}
.signal_level > .h40 {
	height: 6px;
	border-right: none;
}
.signal_level > .h60 {
	height: 8px;
	border-right: none;
}
.signal_level > .h80 {
	height: 10px;
	border-right: none;
}
.signal_level > .h100 {
	height: 12px;
}
.ant_level {
	/*border: 1px solid #d1ddde;*/
	/*height: 12px;*/
	display: inline-block;
	margin: 2px 0 1px;
	background: #ffffff url('/bg/ant_empty.png?theme=qrdyr') left top;
	height: 11px;
}
.ant_level > div {
	height: 100%;
	display: inline-block;
	background: #ffffff url('/bg/ant_fill.png?theme=qrdyr') left top;
}
.ant_level > i, .ant_level > b {
	border: solid #ffffff;
	border-width: 0 0 0 1px;
	width: 2px;
	display: inline-block;
	vertical-align: bottom;
	height: 12px;
}
.ant_level > :first-child {
	border-left-width: 0;
}
.ant_level > i {
	background: #719396/*#9af1df/*#94eaf4*/;
}
.ant_level > b {
	background: #e1edee;
}

.angle_indicator {
	display: inline-block;
	width: 320px;
	height: 18px;
	margin: 5px !important;
	border: 1px solid #888;
	border-radius: 2px;
	background: #f3f3f3 url('/bg/ai_grid.png?theme=qrdyr') center top;
	-webkit-box-shadow: 0 0 2px #bbb inset; box-shadow: 0 0 2px #bbb inset;
	vertical-align: middle;
	position: relative;
}
div.inline { display: inline-block; }
div.div_field {
	display: inline-block;
	line-height: 1.2;
    max-width: 250px;
}

.left_angle_arrow, .right_angle_arrow {
	position: absolute;
	background: #74dbe5;
	border: 1px solid #777;
	top: 0px;
	bottom: 0px;
	-webkit-box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888;
}
.dbm {
	width: 80px;
	vertical-align: middle;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.bold {
	font-weight: bold;
}
.left_angle_arrow {
	border-radius: 0 1px 1px 0;
	right: 50%;
}
.right_angle_arrow {
	border-radius: 1px 0 0 1px;
	left: 50%;
}

.popup_controls table.styled tr.editable{
	background-image:none;
}
.popup_controls table.styled tr.editable, table.styled tr.highlight {
	cursor: pointer;
	opacity: 0.7; filter: alpha(Opacity=70);
	transition: opacity 0.3s linear 0s;
}
.popup_controls table.styled tr.selected {
	background: #e4f0f1 url('/bg/tr_hl.png?theme=qrdyr') repeat-x;
	font-weight: bold;
	opacity: 1; filter: alpha(Opacity=100);
}
.popup_controls table.styled tr.editable:hover, table.styled tr.highlight {
	background-color: #ebf2f3;
	opacity: 1; filter: alpha(Opacity=100);
}
div.checkbox_list {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0, transparent 4px, transparent 100%);background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.10) 0, transparent 4px, transparent 100%);
	border: 1px solid #bbb;
	border-radius: 2px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: inline-block;
	max-height: 10em;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 1px 2px;
	position: relative;
	min-width: 160px;
}
label.top-align {
	vertical-align: top;
}

.td_button {
	width: 100px;
}
.td_progress {
	position: relative;
	border: 1px solid;
	border-color: #777 #bbb #bbb #777;
	border-radius: 3px;
	background: #719396;/*#c4c4c4*/
	text-align: right;
	height: 19px;
	overflow: hidden;
}
.pg_empty {
	display: inline-block;
	background: #f4f4f4;
	margin: 0 !important;
	height: 100%;
	border-left: 1px solid #bbb;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2) inset; box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
	border-radius: 0 3px 3px 0;
}

input[ftype="check_input"], select[ftype="check_select"] {
    margin-left: 5px;
}

/* --------------------------- SVG style ------------------------------- */
svg path.coord {
	fill: none;
	stroke: rgb(102, 102, 255);
	stroke-width: 1px;
}
svg path.coord_point {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
}
svg path.coord_line {
	fill: none;
	stroke: #e2e2e2;
	stroke-width: 1px;
}
svg path.upstream, svg rect.upstream {
	fill: rgb(109,182,100);
	stroke: rgb(109,182,100);
	stroke-width: 1px;
}
svg path.downstream, svg rect.downstream {
	fill: rgb(20,88,160);
	stroke: rgb(20, 88, 160);
    stroke-width: 1px;
}
svg g.legend text {
	dominant-baseline: middle;
}
div.chart label {
    font-weight: bold;
    margin-left: 20px;
    text-align: left;
}

/* --------------------------- to deprecate ---------------------------- */
.progress {
	background: #eee;
	border-radius: 2px;
	border: 1px solid;
	border-color: #777 #bbb #bbb #777;
	margin: 20px;
}
div.progress_bar {
	height: 22px;
	background: blue url('/a/progress-bar.gif?theme=qrdyr');
	margin: 0 !important;
}

/*----------------------------------- animation ---------------------------------*/
@keyframes flashing {
	0%   { opacity: .3 }
	14%   { opacity: 1 }
	44%  { opacity: 1 }
	64%  { opacity: 0 }
	94%  { opacity: 0 }
	100% { opacity: .3 }
}
@-webkit-keyframes flashing {
	0%   { opacity: .3 }
	14%   { opacity: 1 }
	44%  { opacity: 1 }
	64%  { opacity: 0 }
	94%  { opacity: 0 }
	100% { opacity: .3 }
}
@keyframes flashing2 {
	0%   { opacity: .3 }
	6%   { opacity: 0 }
	36%  { opacity: 0 }
	56%  { opacity: 1 }
	86%  { opacity: 1 }
	100% { opacity: .3 }
}
@keyframes lowFlash {
	0%   { opacity: 0.80 }
	14%   { opacity: 1 }
	44%  { opacity: 1 }
	64%  { opacity: 0.7 }
	94%  { opacity: 0.7 }
	100% { opacity: 0.80 }
}
@keyframes pulse {
	0%   { transform: scale3d(1, 1, 1) }
	30%  { transform: scale3d(1.15, 1.15, 1) }
	40%  { transform: scale3d(0.85, 0.85, 1) }
	50%  { transform: scale3d(1.10, 1.10, 1) }
	65%  { transform: scale3d(0.93, 0.93, 1) }
	75%  { transform: scale3d(1.05, 1.05, 1) }
	100% { transform: scale3d(1, 1, 1) }
}
@-webkit-keyframes pulse {
	0%   { transform: scale3d(1, 1, 1) }
	30%  { transform: scale3d(1.15, 1.15, 1) }
	40%  { transform: scale3d(0.85, 0.85, 1) }
	50%  { transform: scale3d(1.10, 1.10, 1) }
	65%  { transform: scale3d(0.93, 0.93, 1) }
	75%  { transform: scale3d(1.05, 1.05, 1) }
	100% { transform: scale3d(1, 1, 1) }
}
@keyframes rubberBand {
	0%   { transform: scale3d(1, 1, 1) }
	30%  { transform: scale3d(1.25, 0.75, 1) }
	40%  { transform: scale3d(0.75, 1.25, 1) }
	50%  { transform: scale3d(1.15, 0.85, 1) }
	65%  { transform: scale3d(.95, 1.05, 1) }
	75%  { transform: scale3d(1.05, .95, 1) }
	100% { transform: scale3d(1, 1, 1) }
}
@-webkit-keyframes rubberBand {
	0%   { transform: scale3d(1, 1, 1) }
	30%  { transform: scale3d(1.25, 0.75, 1) }
	40%  { transform: scale3d(0.75, 1.25, 1) }
	50%  { transform: scale3d(1.15, 0.85, 1) }
	65%  { transform: scale3d(.95, 1.05, 1) }
	75%  { transform: scale3d(1.05, .95, 1) }
	100% { transform: scale3d(1, 1, 1) }
}
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@-webkit-keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
.flashing {
	opacity: 0.3; filter: alpha(Opacity=30);
	animation: flashing 1.2s infinite normal;
	-webkit-animation: flashing 1.2s infinite normal;
	-ms-animation: flashing 1.2s infinite normal;
	-moz-animation: flashing 1.2s infinite normal;
}
.flashing2 {
	opacity: 0.3; filter: alpha(Opacity=30);
	animation: flashing2 1.2s infinite normal;
	-webkit-animation: flashing2 1.2s infinite normal;
	-ms-animation: flashing2 1.2s infinite normal;
	-moz-animation: flashing2 1.2s infinite normal;
}
.pulse {
	animation: pulse 1s infinite normal;
	-webkit-animation: pulse 1s infinite normal;
	-ms-animation: pulse 1s infinite normal;
	-moz-animation: pulse 1s infinite normal;
	transform: translate3d(0,0,0);
}
.fadeIn {
	animation: fadeIn 0.2s both ease;
	-webkit-animation: fadeIn 0.2s both ease;
	-ms-animation: fadeIn 0.2s both ease;
	-moz-animation: fadeIn 0.2s both ease;
}
.fadeOut{
	animation: fadeOut 1s both ease;
	-webkit-animation: fadeOut 1s both ease;
	-ms-animation: fadeOut 1s both ease;
	-moz-animation: fadeOut 1s both ease;
}
.shadeIn {
	animation: fadeIn 0.25s both ease;
	-webkit-animation: fadeIn 0.25s both ease;
	-ms-animation: fadeIn 0.25s both ease;
	-moz-animation: fadeIn 0.25s both ease;
}
.shadeOut {
	animation: fadeOut .25s both ease;
	-webkit-animation: fadeOut .25s both ease;
	-ms-animation: fadeOut .25s both ease;
	-moz-animation: fadeOut .25s both ease;
}
@media \0screen {
   /* IE8-specific styles go here */
	.fadeIn {
		opacity: 1; filter: alpha(Opacity=100);
	}
	.fadeOut {
		opacity: 0; filter: alpha(Opacity=0);
	} 
}



.debug_led {
	height: 20px;
	width: 20px;
	background-color: transparent;
	background-image: url('/ic/underconstr.png?theme=qrdyr');
	vertical-align: top;
	display: inline-block;
	margin-right: 4px;
}



/*----------------------------------- icons ---------------------------------*/

.i128x128 { width: 128px; height: 128px; vertical-align: middle; }
.i64x64 { width: 64px; height: 64px; vertical-align: middle; }
.i32x32 { width: 32px; height: 32px; vertical-align: middle; }
.i32x16 { width: 32px; height: 16px; vertical-align: middle; }
.i28x16 { width: 28px; height: 16px; vertical-align: middle; }
.i22x22 { width: 22px; height: 22px; vertical-align: middle; }
.i18x18 { width: 18px; height: 18px; vertical-align: middle; }
.i16x16 { width: 16px; height: 16px; vertical-align: middle; }
.i25x14 { width: 25px; height: 14px; vertical-align: middle; }

td.ic_eject,
.ic_arrdown, .ic_arrup, .ic_attention, 
.ic_no_ip, .ic_connect_fail, .ic_no_link, .ic_auth_fail, .ic_ip_conflict,
.ic_connected, .ic_disconnected, .ic_down, .ic_standing_by, .ic_waiting,
.ic_document, .ic_filesystem, .ic_firmware, .ic_back, .ic_folder, .ic_running_config,
.ic_insert, .ic_pause, .ic_play, .ic_reload, .ic_turn_off, .ic_download, .ic_insert,
.ic_clean, .ic_search, .ic_not_ready, .ic_waiting_gif, .ic_file
{ background: left center no-repeat transparent; }


.ic_clean, .ic_search {
	display: block;
	height: 11px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	width: 11px;
}
.ic_attention      { background-image: url('/i/ic_attention.png?theme=qrdyr'); }

.td_icon           { background: 2px center no-repeat; width: 20px; }

.ic_connect_fail, tr.connect_fail > .td_icon,
.ic_no_link,      tr.no_link      > .td_icon,
.ic_auth_fail,    tr.auth_fail    > .td_icon,
.ic_ip_conflict,  tr.ip_conflict  > .td_icon,
.ic_disconnected, tr.disconnected > .td_icon { background-image: url('/i/ic_disconnected.png?theme=qrdyr'); }
.ic_connected,    tr.connected    > .td_icon { background-image: url('/i/ic_connected.png?theme=qrdyr'); }

.ic_down,         tr.down         > .td_icon { background-image: url('/i/ic_down.png?theme=qrdyr'); }

.ic_no_ip,        tr.no_ip        > .td_icon,
.ic_standing_by,  tr.standing_by  > .td_icon { background-image: url('/i/ic_stdby.png?theme=qrdyr'); }
.ic_not_ready,    tr.not_ready    > .td_icon { background-image: url('/i/ic_waiting.png?theme=qrdyr'); }

.ic_back           { background-image: url('/i/ic_back.png?theme=qrdyr'); }
.ic_filesystem     { background-image: url('/i/ic_filesystem.png?theme=qrdyr'); }
.ic_folder         { background-image: url('/i/ic_folder.png?theme=qrdyr'); }
.ic_firmware       { background-image: url('/i/ic_firmware.png?theme=qrdyr'); }
.ic_document       { background-image: url('/i/ic_document.png?theme=qrdyr'); }
.ic_running_config { background-image: url('/i/ic_running-config.png?theme=qrdyr'); }


.ic_arrdown        { background-image: url('/i/ic_arrdown.png?theme=qrdyr'); }
.ic_arrup          { background-image: url('/i/ic_arrup.png?theme=qrdyr'); }

.ic_download       { background-image: url('/i/ic_download.png?theme=qrdyr'); }
td.ic_eject          { background-image: url('/i/ic_eject.png?theme=qrdyr'); }
.ic_insert         { background-image: url('/i/ic_insert.png?theme=qrdyr'); }
.ic_pause          { background-image: url('/i/ic_pause.png?theme=qrdyr'); }
.ic_play           { background-image: url('/i/ic_play.png?theme=qrdyr'); }
.ic_reload         { background-image: url('/i/ic_reload.png?theme=qrdyr'); }
.ic_turn_off       { background-image: url('/i/ic_turn_off.png?theme=qrdyr'); }

.ic_clean          { background-image: url('/i/ic_clean.png?theme=qrdyr'); cursor: pointer; }
.ic_search         { background-image: url('/i/ic_search.png?theme=qrdyr'); }

.ic_insert {
	background-image: url('/i/ic_insert.png?theme=qrdyr');
	width: 25px;
	height: 18px;
	display: block;
}

.ic_waiting_gif      { background-image: url('/a/loading-char.gif?theme=qrdyr'); }



i.ic {
	display: inline-block;
	width: 17px;
	height: 17px;
}

i.bic {
	display: inline-block;
	width: 22px;
	height: 22px;
}

i.ic_eject,
i.ic_space,
i.ic_incoming,
i.ic_outgoing,
i.ic_left,
i.ic_right  { font-style: normal; width: 15px; display: inline-block; font-size: 130%; }

i.ic_eject:before    { content: "\023CF"; }
i.ic_space:before    { content: " "; font-size: 130%; }
i.ic_incoming:before { content: "\02b0b"; color: #5579d1; }/*2b0b 2199*/
i.ic_outgoing:before { content: "\02b08"; color: #55d193; }/*2b08 2199*/
i.ic_left:before     { content: "\02b05"; color: #5579d1; }/*2b0b 2199*/
i.ic_right:before    { content: "\027A1"; color: #55d193; }/*2b08 2199*/

i.ic_info {
	border: 1px #6a8c90 solid;
	border-radius: 50%;
	text-align: center;
	font-style: normal;
	color: #6a8c90;
	line-height: 16px;
	font-weight: bold;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-family: serif;
}

i.ic_info:before { content: "i"; }

svg.d-incoming, svg.h-incoming { fill: #5579d1; }
svg.d-outgoing, svg.h-outgoing { fill: #55d193; }

.ic-hs-offline,
.ic-hs-online,
.ic-hs-new,
.ic-hs-unknown { stroke: #333333; stroke-width: .5px; }

.ic-hs-offline { fill: #ff0000; }
.ic-hs-online  { fill: #00ff00; }
.ic-hs-new     { fill: #ffffff; }
.ic-hs-unknown { fill: #bbbbbb; }


/* ---------------------------------- logger box ------------------------------------- */
.logger {
	position: fixed;
	bottom: 60px;
	right: 20px;
	width: 250px;
	padding: 5px;
	z-index: 1000;
	background: #f1f1f1 none repeat scroll 0 0;
	border: 1px solid #bababa;
	border-radius: 8px;
	color: black;
	font-size: 11px;
	min-height: 10px;
	overflow: auto;
/*	opacity: 0; filter: alpha(Opacity=0);*/
	-webkit-box-shadow: 2px 2px 5px 0 #222; box-shadow: 2px 2px 5px 0 #222;
}
.logger_close {
	position: absolute;
	top: 3px;
	right: 3px;
	background-image: url('/i/close_logger.png?theme=qrdyr');
	width: 14px;
	height: 14px;
	display: block;
	cursor: pointer;
}
div.box {
	overflow: auto;
}
.logger > div.box > div {
	margin: 3px 5px;
}

small.repeat_counter {
	background: #888;
	border-radius: 11px;
	color: #fff;
	padding: 0px 3px 0;
	margin: 0 4px 0 0;
}

div.error > small.repeat_counter {
	background: #de0000;
}





/* ---- nojs ---- */
.nojs {
	background: #ff9;
	border: 1px solid #aa6;
	box-shadow: 0 0 6px #999;
	/*z-index: 999999;*/
}
.nojs, .nojs > div {
	position: absolute;
	top:0;bottom:0;
	left:0;right:0;

	width: 500px;
	height: 170px;
	margin: auto;
	padding: 70px;

	border-radius: 9px;
}
.nojs > div {

}
.nojs > div p {
	font-weight: bold;
	font-size: 200%;
	color: black;
	margin: .25em 0;
}

@keyframes nojs {
	0%  { opacity: 1 }
	46% { opacity: 1 }
	50% { opacity: 0 }
	96%  { opacity: 0 }
	100% { opacity: 1 }
}

@-webkit-keyframes nojs {
	0%  { opacity: 1 }
	46% { opacity: 1 }
	50% { opacity: 0 }
	96%  { opacity: 0 }
	100% { opacity: 1 }
}

.nojs_en {
	animation: nojs 3s infinite normal;
	-webkit-animation: nojs 3s infinite normal;
	-ms-animation: nojs 3s infinite normal;
	-moz-animation: nojs 3s infinite normal;
}

.nojs_ru {
	opacity: 0;
	animation: nojs 3s infinite 1.5s normal;
	-webkit-animation: nojs 3s infinite 1.5s normal;
	-ms-animation: nojs 3s infinite 1.5s normal;
	-moz-animation: nojs 3s infinite 1.5s normal;
}


/* ---------------------------------- popup-window ------------------------------------- */
#popup-window {
	position: static;
	overflow: auto;
	overflow-x: hidden;
	background-image: none;
	background-color: white;
	margin: 0;
}
div.content_panel {
	overflow: auto;
	-webkit-box-shadow: 0 0 2px 0 #444 inset; box-shadow: 0 0 2px 0 #444 inset;
}
div.content_panel table {
	margin: 0;
}
div.control_panel {
	height: 22px;
	padding: 10px;
}


/* --------------------------------- status ------------------------------------- */
div.yellow_ethernet_port, div.blue_ethernet_port, div.gray_ethernet_port, div.gray_dsl_port {
	display: inline-block;
	white-space: normal;
	text-align: center;
	vertical-align: top;
	margin: 0 1px;
}
div.yellow_ethernet_port, div.blue_ethernet_port, div.gray_ethernet_port {
	width: 39px;
}
div.gray_dsl_port {
	width: 39px;
}
div.socket {
	height: 40px;
}
div.yellow_ethernet_port > div.socket {
	background: url('/i/socket_ethernet_yellow.png?theme=qrdyr') center top no-repeat;
}
div.blue_ethernet_port > div.socket {
	background: url('/i/socket_ethernet_blue.png?theme=qrdyr') center top no-repeat;
}
div.gray_ethernet_port > div.socket {
	background: url('/i/socket_ethernet_gray.png?theme=qrdyr') center top no-repeat;
}
div.socket > div.cable {
	width: 100%;
	height: 100%;
}


div.ports_cntnr {
	display: inline-block;
}

div.ports_cntnr div.yellow_ethernet_port,
div.ports_cntnr div.blue_ethernet_port {
	float: left;
}

div.yellow_ethernet_port input,
div.blue_ethernet_port input {
	margin: 0px;
}

div.yellow_ethernet_port > div.socket > div.cable,
div.blue_ethernet_port > div.socket > div.cable,
div.gray_ethernet_port > div.socket > div.cable {
	background: url('/i/plug_ethernet.png?theme=qrdyr') center top no-repeat;
}

/* ez.html for rostelecom kge_rb */



/*----------------------------------- tips ---------------------------------*/
.field_tip {
	position: absolute;
	background: #ffffff;
	/*color: #de3535;*/
	/*border: 0px solid #cccccc;*/
	padding: 1px 4px;
	line-height: 16px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;
	z-index: 100000;
}
.field_tip:after/*, .field_tip_box:before*/ {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0; width: 0;
	position: absolute;
	pointer-events: none;
}
.field_tip:after {
	border-color: rgba(0,0,0,0);
	border-right-color: #ffffff;
	border-width: 5px;
	top: 5px;/*
	margin-top: -5px;*/
}/*
.field_tip:before {
	border-color: rgba(0,0,0,0);
	border-right-color: #cccccc;
	border-width: 6px;
	top: 50%;
	margin-top: -6px;
}*/
@media \0screen {
   /* IE8-specific styles go here */
	.field_tip {
		color: #de3535;
		border: 1px solid #cccccc;
	}
}



/* ---------------------------------- layer class for popups ------------------------------------- */
.layer {
	position: fixed;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
}
.fill, .shade_light, .shade_dark, .shade_freeze {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 49;
	margin: 0 !important;
}
.disable_all > * {
	opacity: 0.5; filter: alpha(Opacity=50);
}
.shade_freeze {
	background: white;
	opacity: 0.6; filter: alpha(Opacity=60);
}
.shade_light, .shade_dark {
	background: #000
}
.shade_dark {
	opacity: 0.5; filter: alpha(Opacity=50);
}
.shade_light {
	opacity: 0.5; filter: alpha(Opacity=50);
/*	display: none;*/
}
.layer > form, .layer div.form {
	width: 800px;
	border: 1px solid #0e6da5;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: #1286cc; 
	z-index: 50;
	-webkit-box-shadow: 0 0 30px #001520; box-shadow: 0 0 30px #001520;
}
.layer > form, .layer div.form {
	position: fixed;
}
.layer > form.compact {
	width: 440px;
}
div.popup_header {
	height: 28px;
	position: relative;

	margin: 0;
	padding: 0px 4px 2px 12px;

	border-radius: 2px;
	border: 0px solid #0e6da5;
	background: url('/bg/popup_header.png?theme=qrdyr');

	color: white;
	-webkit-text-shadow: 0 0 3px rgba(0,0,0,0.6); text-shadow: 0 0 3px rgba(0,0,0,0.6);
	font-size: 14px; /*ubuntu, verdana, arial, sans-serif*/
	font-weight: bold;
	line-height: 30px;
	vertical-align: baseline;
	cursor: move;
}
.popup_close {
	position: absolute;
	right: 4px;
	top: 5px;
	width: 18px;
	height: 18px;
	background-color: transparent;
	background-image: url('/i/close_popup.png?theme=qrdyr');
	padding: 0;
	margin: 0;
	border: none;
}
div.popup_controls {
	position: relative;
/*	width: 760px;*/
	padding: 0;/*8px 16px 16px;*/
	margin: 0 4px 4px;
/*	min-height: 200px;*/
	max-height: 480px;

	background-color: white;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-box-shadow: 0 0 2px #444444 inset; box-shadow: 0 0 2px #444444 inset;
}
div.popup_controls > *:first-child { margin-top: 16px; }
div.popup_controls > *:last-child { margin-bottom: 16px; }
div.popup_controls > * {
	margin-left: 16px !important;
	margin-right: 16px !important;
}
div.popup_cover {
	position: absolute;
	top: 30px;
	left: 4px;
	right: 4px;
	bottom: 4px;
}


/* ---- wizard.css ---- */
form {
	/*position: static;*/
}

.wizard_window {
	width: 800px;
	height: 457px;
	padding: 0;

	overflow: hidden;
	border: 1px solid #0d6aa1;
	background: #1888ce;
	z-index: 50;
}

.wizard_window {
	margin: 0;
	top: 0;
	left: 0;
	position: absolute;

	-webkit-box-shadow: 0 0 14px #002133; box-shadow: 0 0 14px #002133;
}

.wizard_layout {
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	position: absolute;
	margin: 0;
	overflow: hidden;

	border: 1px solid #0d6aa1;
	background: #d9f4ff;
	-webkit-box-shadow: 0 0 2px #333 inset; box-shadow: 0 0 2px #333 inset;
}
#wizard_head_row {
	top: 0;
	left: 0;
	right: 0;
	height: 45px;
	position: absolute;
	cursor: move !important;
}
#wizard_header {
	top: 0;
	left: 0px;
	width: 198px;
	height: 15px;
	position: absolute;

	padding: 15px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;

	font-weight: bold;
	background: #a0def5;
	border-radius: 0 0 8px 0;
	-webkit-box-shadow: 0 0 2px #113444; box-shadow: 0 0 2px #113444;
}
#wizard_notice {
	top: 50px;
	left: 228px;
	right: 0;
	height: 15px;
	position: absolute;

	padding: 15px;
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	z-index: 51;
}
#wizard_comment {
	top: 45px;
	left: 0px;
	width: 198px;
	bottom: 0px;
	position: absolute;

	padding: 63px 15px 15px;
	text-align: left;
	vertical-align: top;
}
.wizard_logo {
	background: url('/i/nf_logo.png?theme=qrdyr') center 25% no-repeat;
}
.wizard_ydns {
	background: url('/i/nf_ydns_logo.png?theme=qrdyr') 15px 15px no-repeat;
	padding-top: 94px !important;
}
#wizard_place {
	top: 45px;
	left: 228px;
	right: 0px;
	bottom: 0px;
	position: absolute;

	background: white;
	border-radius: 8px 0 0 0;
	padding: 50px 15px;
	text-align: left;
	vertical-align: top;

	overflow: auto;
	-webkit-box-shadow: 0 0 2px #333 inset; box-shadow: 0 0 2px #333 inset;
}
#wizard_pages_place {
	top: 50px;
	bottom: 50px;
	left: 0;
	right: 0;
	padding: 0 15px;
	position: absolute;
	overflow: auto;
}
.wizard_page {
}
.wizard_page_scrollable {
	overflow: auto;
	border-top: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
	-webkit-box-shadow: 0 0 2px #ddd inset; box-shadow: 0 0 2px #ddd inset;
}
.wizard_buttons {
	position: absolute;
	bottom: 10px;
	height: 30px;
	left: 0;
	right: 0;
	padding-left: 219px;
}
.wizard_buttons_place {
	left: 0; /* 199px; */
	right: 0;
	bottom: 0;
	position: absolute;
	margin: 15px;
}

.wizard_info {
	margin: 14px 0 6px;
	white-space: normal;
}
.wizard_warning {
	color: #800;
}
div.outlined {
	margin-top: 20px;
}
.wizard_page label {
	width: 200px;
	padding: 0;
	text-align: left;
	margin: 0 0 0 0px;
}
.wizard_page label.inline {
	/*overflow: auto;*/
	margin: 0 4px;
	text-align: left;
	width: inherit;
}
.wizard_page label.underline {
	line-height: 12px;
	font-size: 80%;
	vertical-align: top;
}
.wizard_page label.l2 {
	margin: 0 20px 0 0;
}
.wizard_page label.ll2 {
	margin: 0 0 0 20px;
}
.wizard_page input.inline {
	margin-top: 0px;
	margin-bottom: 0px;
	vertical-align: middle;
}
.first_button {
	margin-right: 16px;
}

.wizard_page .choice,
.wizard_page .choice_ex {
	width: 80%;
}

.wizard_page h3 {
	font-size: 12px;
}
table.report {
	margin: 10px 0;
	width: 100%;
}
colgroup.label {
	width: 183px;
}
colgroup.value {

}
td.hl1, td.hl2, td.l1, td.l2 {
}
td.hl1, td.l1 {
	padding-left: 0px;
}
td.hl2, td.l2 {
	padding-left: 20px;
}
td.value {
	padding-left: 2px;
}
td.hl1, td.hl2 {
	font-weight: bold;
}
td.l1, td.l2 {
}

.p_list {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: none repeat scroll 0 0 white;
	border: 1px solid #bbb;
	height: auto;
	margin: 0;
	max-height: 15em;
	overflow: auto;
	padding: 0;
	position: absolute;
	z-index: 100;
}

.p_list div {
	padding: 1px 3px;
	background: 1px center no-repeat;
}

.p_list div.selected {
	background-color: #eeeeee;
}

.p_list div.ic_home, .p_list div.ic_network {
	padding-left: 19px;
}

.p_list div.ic_home    { background-image: url('/i/ic_home.png?theme=qrdyr') }
.p_list div.ic_network { background-image: url('/i/ic_network.png?theme=qrdyr') }

.busy {
	width: 180px;
	height: 180px;
	left: 100px;
	top: 50px;
	position: absolute;
	background: url('/a/loading.gif?theme=qrdyr') no-repeat center center;
}

h2.stage {
	margin: 20px;
}

@keyframes swIn {
	0% { opacity: 0.5; }
	100% { /*opacity: 1;*/ }
}
@-webkit-keyframes swIn {
	0% { opacity: 0.5; }
	100% { /*opacity: 1;*/ }
}
@-webkit-keyframes swIn {
	0% { opacity: 0.5; }
	100% { /*opacity: 1;*/ }
}
@keyframes swOut {
	0% { /*opacity: inherit;*/ }
	100% { opacity: 0.5; }
}
@-webkit-keyframes swOut {
	0% { /*opacity: inherit;*/ }
	100% { opacity: 0.5; }
}
@-webkit-keyframes swOut {
	0% { /*opacity: inherit;*/ }
	100% { opacity: 0.5; }
}
#switcher {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 50;
	overflow: auto;
	width: 220px;
}
#switcher > ul.sw_stages,
#switcher > ul.sw_menu {
	-webkit-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000;
}
#switcher > ul.sw_stages,
#switcher > ul.sw_menu {
	/*opacity: 0.5; filter: alpha(Opacity=50);*/
	animation: swOut .1s both ease;
	-webkit-animation: swOut .1s both ease;
	-ms-animation: swOut .1s both ease;
	-moz-animation: swOut .1s both ease;
	-webkit-animation: swOut .1s both ease;
}
#switcher > ul.sw_stages:hover,
#switcher > ul.sw_menu:hover {
	/*opacity: 1; filter: alpha(Opacity=100);*/
	animation: swIn 0.1s both ease;
	-webkit-animation: swIn 0.1s both ease;
	-ms-animation: swIn 0.1s both ease;
	-moz-animation: swIn 0.1s both ease;
	-webkit-animation: swIn 0.1s both ease;
}
#switcher > ul.sw_stages {
	margin-top: 10px;
	padding: 0;
}
ul.sw_menu li {
	position: relative;
	margin: 0;
	padding: 0;
}
ul.sw_menu li ul.sw_menu {
	margin: 0;
	display: none;
}
ul.sw_stages,
ul.sw_menu {
	list-style: none;
	padding: 0;
	margin: 4px 4px 8px;
	border: 1px solid #aaa;
}
#switcher > ul.sw_menu {
	width: 170px;
}
#switcher > ul.sw_menu > li > ul.sw_menu {
	width: 148px;
}
#switcher > ul.sw_stages {
	width: 170px;
}
#switcher > ul.sw_menu li:hover ul.sw_menu {
	display: block;
	position: absolute;
	z-index: 1000;
	left: 50%;
	top: 0;
	-webkit-box-shadow: 0px 0px 3px #222; box-shadow: 0px 0px 3px #222;
}
#switcher > ul.sw_menu > li > span {
	width: 162px;
}
#switcher > ul.sw_menu > li > ul.sw_menu > li > span {
	width: 140px;
}
ul.sw_menu span,
ul.sw_stages span {
	font-size: 14px;
	font-weight: 100;
	padding: 1px 4px;
	display: block;
	border-style: solid none;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-color: #666;
	color: #ddd;
	background: #666;
	margin: 0 !important;
	text-align: left;
	cursor: pointer;
}
ul.sw_menu li:first-child > span,
ul.sw_stages li:first-child > span {
	border-top-width: 0px;
}
ul.sw_menu li:last-child > span,
ul.sw_stages li:last-child > span {
	border-bottom-width: 0px;
}
span.sw_current,
ul.sw_menu li:hover > span {
	color: #ff8;
	background-color: #5c5c5c;
	/*background: linear-gradient(to bottom, #444 0%, #555 20%, #555 39%, #555 56%, #555 80%, #444 100%);background: -webkit-linear-gradient(top, #444 0%, #555 20%, #555 39%, #555 56%, #555 80%, #444 100%);*/
	-webkit-box-shadow: 0px 0px 3px #333 inset; box-shadow: 0px 0px 3px #333 inset;
	-webkit-text-shadow: 0px 0px 3px #333; text-shadow: 0px 0px 3px #333;
}
span.sw_current,
ul.sw_menu li:hover > span {
	border-color: #aaa;
}
ul.sw_menu > li > ul.sw_menu > li:hover > span {
	border-color: #888;
}
input.choice_sample {
	width: 240px;
	height: 20px;
	border: none;
	background:none;
	outline:none;
	padding: 0 0 0 4px;
}
input.choice_sample_reset {
	width: 14px;
	border: none;
	background:none;
	outline:none;
}
div.choice_sample_cntnr {
	margin-bottom: 18px;
	width: 264px;
	border: 1px solid #D9D9D9;
	height: 22px;
}

.choice_sample_cntnr a {
	display: inline-block;
	margin-top: 4px
}

.choice_autocomplete {
	z-index: 3;
	position: absolute;
}

.choice_autocomplete_ic_cntnr {
	display: inline-block;
}


.sl-off {
	fill: #e1edee;
}

.sl-on {
	fill: #719396;
}

.signal-level {
	width: 25px;
	height: 15px;
}

/*
.sl0 .r20, .sl0 .r40, .sl0 .r60, .sl0 .r80, .sl0 .r100,
.sl20 .r40, .sl20 .r60, .sl20 .r80, .sl20 .r100,
.sl40 .r60, .sl40 .r80, .sl40 .r100,
.sl60 .r80, .sl60 .r100,
.sl80 .r100 {
	fill: #e1edee;
}

.sl20 .r20,
.sl40 .r20, .sl40 .r40,
.sl60 .r20, .sl60 .r40, .sl60 .r60,
.sl80 .r20, .sl80 .r40, .sl80 .r60, .sl80 .r80,
.sl100 .r20, .sl100 .r40, .sl100 .r60, .sl100 .r80, .sl100 .r100 {
	fill: #719396;
}
*/


div.section {
	margin-top: 16px;
}

div.section:first-child {
	margin-top: 0;
}

form.ui {
}

form.ui-popup {
	position: absolute;
}

/*form.ui button {
	display: block;
}

form.ui .group > button {
	display: inline-block;
}*/

/*form.ui > div.twocols button,*/
form.ui > div.twocols .field > button:first-child,
form.ui > div.twocols .group > .field:first-child > button:first-child,
form.ui > div.twocols .group > .field:first-child > input[type=radio]:first-child,
form.ui > div.twocols .group  input[type=radio],
form.ui > div.twocols .field > input[type=checkbox]:first-child {
	margin-left: 254px;
}

form.ui > div.twocols .group > .field > button:first-child,
form.ui > div.twocols .group > .field > input[type=checkbox]:first-child,
form.ui > div.twocols .group > .field > input[type=radio]:first-child {
	margin-left: 4px;
}

form.ui > div.twocols .ugroup {
	padding-left: 250px;
}

form.ui > div.twocols .ugroup > .field > *:first-child {
	margin-left: 4px;
}

form.ui > div.onecols .ugroup {
}

form.ui div.group > div.subGroup {
	display: inline-block;
}

form.ui .indent {
	margin-left: 16px;
}

form.ui .group, form.ui .ugroup {
	min-height: 22px;
}

form.ui .group > .field, form.ui .ugroup > .field, form.ui .subGroup > .field {
	display: inline-block;
}

form.ui .field > label,
form.ui .group > .field+.field > label:first-child,
form.ui .group > .field:not(:first-child) > label:first-child {
	width: inherit;
}

form.ui > div.twocols .field > label:first-child,
form.ui > div.twocols .group > .field:first-child > label:first-child {
	width: 250px;
}

form.ui label.for-check {
	margin-right: .5em;
}

form.ui div.checks-block {
	vertical-align: top;
}

form.ui .field_tip {
	/* white-space: nowrap; */
}

form.ui div.center {
	text-align: center;
}

.group input, .group select, .group textarea {
	width: inherit !important;
	min-width: inherit !important;
}

form.ui div.info {
	display: inline-block;
	line-height: normal;
	white-space: pre;
	vertical-align: text-top;
	color: #21565a;
	margin-bottom: 4px;
}


tr.sortable, tr.active_row {
	cursor: pointer;
}

tr.active_row:hover {
	background: #e4f0f1 url('/bg/tr_hl.png?theme=qrdyr') repeat-x;
	background-size: 1px 100%;
}


div.table-container {
	margin: 10px 0;
	overflow: auto;
	border: 1px solid silver;
}

table.ui-table {
	margin: 0;
	text-align: left;
	table-layout: fixed;
}

table.ui-table th {
	height: 25px;
	padding: 0 5px 0 5px;
	background: #82abaf url('/bg/th.png?theme=qrdyr') repeat-x;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
	color: #fff;
	fill: #fff;

	overflow: hidden; 
	text-overflow: ellipsis;
}

table.ui-table th:first-child {
	border-left: none;
}

table.ui-table th a {
	color: #fff;
	fill: #fff;
}

table.ui-table > tbody > tr > td, table.ui-table > tfoot > tr > td {
	height: 22px;
	padding: 0px 5px 0px 5px;
	border: 0px none red;
	overflow: hidden; 
	text-overflow: ellipsis;
}
table.ui-table > tbody {
	text-align: left;
}
table.ui-table > tbody > tr {
	border-top: 1px solid #e5e5e5;
}
table.ui-table > tbody > tr:first-child {
	border-top: none;
}

table.ui-table td.waiting {
	background: url('/a/loading-char.gif?theme=qrdyr') no-repeat 5px 5px;
}

table.ui-table input, table.ui-table button, table.ui.table { margin: 0; }

td.check { text-align: center; }
th.pad   { width: auto; }

/*td.textInput { padding: 0 !important; }*/
td.textInput input[type=text] {
	margin: 0;
	width: 100%;
	min-width: inherit;
}

td.textLines, td.checkLines { line-height: 18px; }

span.icon {
	width: 16px;
}

div.top-panel {
	position: fixed;
	top: 0;
	right: 0;
/*	left: 0;
	height: 22px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;*/
	z-index: 100;

	text-align: right;
	background: rgba(0,0,0,0.50);
	border-bottom: 1px rgba(165,165,165,0.50) solid;
	border-left: 1px rgba(165,165,165,0.50) solid;
	padding: 2px 1px;
	font-size: 11px;
}

div.top-panel > span.widget {
	margin: 0 2px;
}

.panel_button, .hl_panel_button {
	border: none 0 #000;
	margin: 0;
	padding: 0 1px;
	cursor: pointer;
	box-shadow: none;
	transition: color .2s ease ;
	text-decoration: none;
}

.panel_button:hover {
	color: white;
}

.panel_button {
	color: #ccc;
	background: none;
	border-radius: 0;
	padding: 1px 1px;
}

.hl_panel_button {
	/*font-weight: bold;*/
	color: #fff !important;
	background: rgba(255,255,255,.2) !important;
	border-radius: 2px !important;
	padding: 1px 3px;
}


/*div.top-panel > div.block {
	display: inline-block;
}*/

svg.icon {
	width: 15px;
	height: 13px;
	vertical-align: middle;
}

svg.th_icon {
	width: 15px;
	height: 13px;
	vertical-align: top;
}

div.svgs, div.svgs > svg {
	width: 0;
	height: 0;
}

div.ui_warning, div.ui_error {
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	padding: 0;/*8px;*/
	margin: 10px 0;
	white-space: normal;
}

div.ui_warning {
	background-color: #fff0cc;
	border-color: #907300;
	color: #907300;
}
div.ui_error {
	background-color: #ffcccc;
	border-color: #cc0000;
	color: #cc0000;
}

span.ok {
	color:green;
}
span.error {
	color: #cc0000;
}
span.bold {
	font-weight: bold;
}