:root {
	--font-FontAwesome: "Font Awesome 5 Pro";
}
html, body {
	min-width:1024px;	/* To align with expected display area */
	height:100%;
}
body {
	margin:0;
	-webkit-text-size-adjust: 100%;
}
body, input, select, textarea, button {
	font-family:Verdana, Arial, Helvetica;
	/* font-family: Arial, Verdana, Helvetica; */
	font-size:13px;
}
/*
	Adjusted default input style
	Safari has non-zero margin by default
*/
input:not([type]), input[type=text], input[type=password] {
	margin-top:0;
	margin-bottom:0;
}
table {
	border-collapse:separate;
}
/*
body, p, div, th, td, tr {
	font-family:Verdana, Arial, Helvetica;
	font-size:13px;
}
*/
input.single, select.single,
textarea.single {
	box-sizing:border-box;
	width:100%;
}

textarea {
	resize: none;
}
.ic2_managed_text {
	color: #1F1F1F;
}
.ic2_enabled_text {
	color: blue;
}
#mainTable {
	border-collapse:collapse;
	width:100%;
	height:100%;
	table-layout:fixed;
}
#mainContent {
	width:100%;
	vertical-align:top;
	padding-bottom:40px;
}
.autoEllipsis {
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;

}
/* Table { form_table } Styling */
table.form_table, table.form_table td {
	border:0 solid black;
}
table.form_table {
	border-spacing:0;
	width:100%;
	border-top-width:1px;
}
table.form_table td {
	position:relative;
	background-clip:padding-box;
	border-width:0 1px 1px 0;
	padding:3px;
}
table.form_table > tbody:first-child > tr:first-child > td {
}
table.form_table td:first-child {
	border-left-width:1px;
}
table.form_table td.form_legend {
	width:30%;
	height:22px;
}
/* table.form_table td .form_field,*/ .form_field {
	width:calc(100% - 23px);
	margin:3px 0;
}
table.form_table.disabled, table.form_table .disabled {
	opacity: 0.5;
}
table.form_table td.button,
table.form_table tbody td.button {
	width: 48px;
}
/* TODO: it is not expected to have tr.no_info
   but for the case in Controller Status - Access Point
   we need this
*/
table.stat_table tbody tr.no_info td,
table.stat_table tbody.no_info tr td,
table.form_table tbody.no_info tr td {
	font-family:Verdana, Arial, Helvetica;
	font-size:13px;
	font-weight:400;
	color:#FFF;
	background-color:#A0A0A0;
	vertical-align:top;
	text-align: center;
}
table.stat_table tbody tr.no_info td,
table.stat_table tbody.no_info tr td {
	font-size: 11px;
	color: #AAA;
	background-color: #E6E6EB;
}
table.form_table tfoot tr.tablecontent3 td,
table.stat_table tfoot tr.tablecontent3 td {
	text-align: center;
}
table.form_table tfoot tr.tablecontent3 td button {
	width: max-content;
	padding: 1px 20px;
}
div.sep,
table.stat_table.sep,
table.form_table.sep {
	margin-bottom:20px;
}
table.form_table.glue {
	margin-bottom:0;
}
table.form_table.glue > tr:last-of-type > td,
table.form_table.glue > tbody:last-of-type > tr:last-of-type > td {
	border-bottom:0;
}
table.form_table tbody td.button {
        width: 48px;
}
/* Table { stat_table } Styling */
table.stat_table td {
	border:0 solid white;
	position: relative;
}
table.stat_table {
	border-spacing:0;
	border:1px solid black;
	width:100%;
}
table.stat_table .tabletitle2 td {
	font-size:11px;
}
table.stat_table td {
	padding:3px;
}
table.stat_table tbody tr:hover {
	background:#E1F1FF;
}
table.stat_table tbody td {
	border-left-width:1px;
}
table.stat_table tbody td:first-child {
	border-width:0;
}
table.stat_table tbody td, table.stat_table .stat_info, table.stat_table .stat_info td {
	font-size:11px;
}

table.virtual_table {
	border-width:0;
	border-spacing:0;
	width:100%;
}
table.virtual_table td:first-child,
table.virtual_table td {
	border-width:0;
	padding:0 3px 3px 0;
}
/* Zebra crossing table, typical styles */
tbody.zb:nth-of-type(even), tr.zb:nth-of-type(even),
tbody.zb1, tr.zb1 {
	background-color:#FFF;
}
tbody.zb:nth-of-type(odd), tr.zb:nth-of-type(odd),
tbody.zb2, tr.zb2 {
	background-color:#E6E6E6;
}

table td.action_col {
	width:50px;
}
.multiple_checkbox {
	border: 1px solid #AAF;
	width: 230px;
	height: 95px;
	white-space: nowrap;
	overflow: auto;
}

.flyoutHeading {
	padding:5px;
}
.clickable {
	cursor:pointer;
}
.clickable:active {
	position:relative;
	right:-1px;
	opacity:0.5;
}
.hide {
	display:none !important;
}

.tabletitle {
	font-family:Verdana, Arial, Helvetica;
	font-size:13px;
	font-weight:700;
	color:#FFB81C;
	background-color:#000;
	background-image:url("MANGA/images/topbg.gif");
	background-repeat:repeat-x;
	height:24px;
}
select#SubnetMask, input#IP {
	width:158px
}
input#DHCP_Low_IP {
	width:124px
}
span#product_info {
	width:610px;
	text-align:center
}
.input_textbox_with_label * {
	margin-right: 5px;
}
.tabletitle2, .tabletitle3, .tabletitle4, .tabletitle5 {
	font-family:Verdana, Arial, Helvetica;
	font-size:13px;
	font-weight:400;
	color:#FFF;
	background-color:#A0A0A0;
	vertical-align:top;
}
.tabletitle3 {
	padding-left:20px;
	background-color:#AAA;
}
.tabletitle4 {
	padding-left:40px;
	background-color:#B0B0B0;
}
.tabletitle5 {
	padding-left:60px;
	background-color:#BBB;
}
.tablecontent1, .tablecontent2, .tablecontent2b,
.tablecontent3, .tablecontent4, .tablecontent4b {
	font-family:Verdana, Arial, Helvetica;
	font-size:13px;
}
.tablecontent1, .tablecontent2, .tablecontent2b {
	background-color:#E6E6EB
}
.tablecontent1 {
	color:#000;
}
.tablecontent3 {
	color:#000;
	background-color:#E9F1FC;
	border:#000;
	border-width:2px
}
.tablecontent2b,
.tablecontent2 {
	color:#1F1F1F;
}
.tablecontent4 {
	color:#AAA;
	background-color:#E6E6EB
}
.tablecontent4b {
	color:#AAA;
	background-color:#DDECFF
}
.errormsg {
	font-family:Verdana, Arial, Helvetica;
	font-size:13px;
	color:red;
	white-space:pre-line;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.tight {
	margin-left:4%;
	margin-right:4%
}
.wizard_header,
.smart_header {
	margin:20px 4%;
	padding:5px;
}
.smart_header {
	visibility:hidden;
	margin:0;
}
.smart_status:empty {
	display:none;
}
.smart_status {
	margin-bottom:20px;
	border:solid 1px #FFCC56;
	color:#157015;
	font-weight:700;
	background:#FFFFB0;
	padding:5px 3px 3px 6px;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}
.smart_status_red {
	color: #FF0000;
}
.smart_status.smart_status_attn {
	padding:5px 3px 3px 2em;
}
.smart_status.smart_status_attn:before {
	font-family: "Font Awesome 5 Pro";
	font-size: inherit;
	content: "\f071";
	margin: 0 0.5em 0 -1.5em;
	color:#fc5;
}
.smart_content {
	width:92%;
	margin:0 auto;
}

.standardText {
	cursor:default;
	font-family:Arial, Helvetica, sans-serif
}
.greyText {
	cursor:default;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#646464
}
.fixedmaxwidth {
	border:0 solid #000;
	width:1024px;
	max-width:1024px;
	display: flex;
}
.small_label label {
	font-size:8px;
}

.text_center {
	text-align:center;
}
/* helptext */
/* helpIcon */
div.helpIcon {
	font-family:"Font Awesome 5 Pro";
	font-size:20px;
	position:absolute;
        width:20px;
        height:20px;
	line-height:20px;
	padding-right:inherit;
	right:0;
        cursor:pointer;
}
div.helpIcon:after {
	position:absolute;
	left:0;
}
div.helpIcon:before {
	content: "\f111";
	font-weight:900;
	color:#6495C3;
}
div.helpIcon:after {
        content:"\f059";
	font-weight:400;
	color:#F3F5FA;
}
div.helpIcon:hover:before {
	color:#0CF;
}
#_tips_obj_ {
	font-family: Verdana, Arial, Helvetica;
	border: solid 1px black;
	min-width: 200px;
	background-color: #E9F1Fc;
	font-size: 10px;
	word-wrap: break-word;
	position: absolute;
	cursor: default;
	line-height: normal;
	z-index: 10000;
	padding: 0;
	font-weight: normal;
}
#_tips_cap_ {
	padding: 2px;
	background-color: #000;
	min-height: 14px;
}
#_tips_cap_ > div {
	padding-right: 20px;
	color: #FFF;
	font-weight: bold;
}
#_tips_cap_ > #_tips_close_ {
	float: right;
	color: #99F;
	padding-right: 0;
	cursor: pointer;
}
#_tips_cap_ > #_tips_close_ > a {
	color: #99F;
}
#_tips_cap_ > #_tips_close_ > a:before {
	content: "Close";
}
#_tips_box_ {
	padding: 2px;
	color: #000;
}
.data_popup_tips_wrap {
	white-space: wrap;
}
.data_popup_tips {
	white-space: pre;
}
/* helpIcon - Contextual oriented adjustment */
.tabletitle div.helpIcon {
/*
	tabletitle hard-coded height 24px
	helpIcon 1.5px top, 20px content, 1.5px bottom, 1px border-line
*/
	top: 1.5px;
}
.tabletitle2 div.helpIcon {
	top: 1px;
}
td.form_legend div.helpIcon {
/*
	td.form_legend hard-code height 22px
	helpIcon with td, 1px margin, 20px content, 1px breath zone
*/
	margin:1px 0 0 0;
	top: auto;
}


div.center {
	margin:auto;
}
div.loadIcon {
	background:url("en/images/dialog-throbber.gif");
	width:16px;
	height:16px;
}
div.v_pad {
	margin-top:5px;
	margin-bottom:5px;
}

/* CSS for selection box / input box max-width */
.form_table .form_legend,
.form_table td.tabletitle2 a.linkedName,
.picklist .pick {
	overflow-wrap: anywhere;
	word-break: break-word;
}
.form_table .form_legend,
.form_table select:not(.single),
.form_table input:not(.single) {
	max-width: 500px;
}

.ui-dialog .form_table select:not(.single),
.ui-dialog .form_table input:not(.single) {
	max-width: 400px;
}
.ui-dialog .grid_table select:not(.single),
.ui-dialog .grid_table input:not(.single) {
	max-width: 300px;
}

.multi_col .tabletitle2 td {
	padding: 0;
}
.multi_col .tabletitle2 td > div {
	display: flex;
	justify-content: space-evenly;
	line-height: 25px;
	align-items: center;
}
.multi_col .tabletitle2 td > div div.col_title {
	flex: 1 1 50%;
	border-radius: 0 20px 0 0;
	background-color: #E6E6EB;
	padding-left: 3px;
	color: #1F1F1F;
}
table:not(.virtual_table) .multi_col .tabletitle2 td > div div.col_title:not(:first-child) {
	border-left: 1px black solid;
}
.top_menu_logo {
	width:142px;
	height:57px;
	float:left;
	margin-right:0;
}
.top_menu_panel {
	background-color:#000;
	background-image:url("MANGA/images/topbg.gif");
	background-repeat:repeat-x;
	height:57px;
	font-size:14px;
	font-weight:700;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0
}
.top_menu_panel .menu_item {
	margin:18px 0 0;
	border-left:1px solid #666;
	padding:7px 8px 0;
	height:32px;
	float:left;
	text-align:center;
	font-size:14px;
	color:#FFF;
	cursor:default;
}
.top_menu_panel .menu_selected {
	height:27px;
	border-bottom:5px solid #FFB81C;
	color:#FFF;
}
.top_menu_panel .menu_end {
	border-right:1px solid #666;
}
.top_menu_panel .menu_active {
	color:#FFB81C;
	cursor:pointer;
}
.top_menu_panel .menu_apply {
	color:#666;
	width:120px;
	float:right;
}
.top_menu_panel .menu_apply.apply_action {
	color:#FFF;
	cursor:pointer;
}
.top_menu_panel .menu_apply.apply_action.menu_active {
	background-color:#FFB81C;
}
.top_menu {
	width:994px;
	height:57px;
}
.top_menu_panel > .menu_1024px,
.top_moduleu_panel > .menu_1024px {
	width:1024px;
}
.top_module_panel {
	background-color:#FFB81C;
}
.top_vrf_panel {
	background-color:rgb(96, 111, 123);
	position:fixed;
	bottom:0;
	z-index:100;
	width:100%;
	color:#FFF;
	white-space:nowrap;
}
.top_vrf_panel select {
	border:0;
	padding:8px;
	background-color:rgb(135, 149, 161);
	color:#FFF;
	min-width:100px;
	max-width:600px;
}
.top_vrf_panel button {
	color:#FFF;
	background-color:rgb(135, 149, 161);
}
.top_vrf_panel,
.top_vrf_panel select,
.top_vrf_panel button {
	font-size:16px;
}
.top_vrf_menu {
	padding:0 5px;
	vertical-align:middle
}
.top_module_menu {
	padding:5px;
}
.top_module_menu:before {
	font-weight:bold;
	content: "Rearrange module configurations"
}
/* Left Menu Region */
#menuBar {
	width:140px;
	min-width:140px;
	max-width:140px;
	background-color:#E6E6E6;
}
A:link, A:visited, A:hover {
/*
	text-decoration:none
*/
}
.linkedName, .linkedName:link, .linkedName:visited {
	color:#FFF;
	text-decoration:underline
}
.linkedName:link:hover, .linkedName:visited:hover {
	color:#FFB81C;
	text-decoration:underline
}
.linkedName:link:active, .linkedName:visited:active {
	color:#BBB;
	text-decoration:underline
}

.ssid {
	white-space: pre;
}

.more_panel > div {
	display:none;
}

.more_panel > div.selected,
.more_panel > div.ctrl {
	display:block;
}
.more_panel > div.ctrl {
	text-decoration: underline;
	cursor:pointer;
}

.more_panel.all > div {
	display:block;
}

.more_panel.all > div.ctrl {
	display:none;
}

.block_label > label {
	display:block;
}

/* .leftmenu styles, added by Kenny Kwok, 2012/11/21 */
.leftmenu {
	border:1px solid #999;
	border-top:none;
	background-color:#E6E6E6;
	min-width:140px;
	max-width:140px;
	width:140px;
	vertical-align:top;
}
.leftmenu ul {
	list-style-type:none;
	padding:0 0 40px 0;
	margin:0;
}
.leftmenu ul li.hl {
	background-color:#90B0DC;
}
/* li styles of each supported level of .leftmenu */
.leftmenu ul li {
	border-top:1px solid #999;
	padding:5px;
	font-weight:bold;
}
.leftmenu ul li.lv1 {
/*
	background:url("en/images/sub.gif") 6px 11px no-repeat, url("en/images/tri.gif") 120px 8px no-repeat;
*/
	background-image:url("en/images/sub.gif");
	background-position:6px 11px;
	background-repeat:no-repeat;
	border:0;
	padding:5px 5px 5px 20px;
	font-weight:normal;
}
/* Left Menu Style */
.left_menu_div {
	padding:5px;
}
.left_menu_highlight {
	background-color: #90B0DC;
}
.left_menu_clickable {
	cursor: pointer
}
.left_menu_clickable:hover {
	background-color: #ADADAD;
}
/* Default Button Style */

.autoButton {
	border-width: 3px;
	border-style: double;
	height:21px;
	width:auto;
	font-weight:700;
	font-size:12px !important;
	font-family:Verdana, Helvetica, Arial, sans-serif !important;
	margin:0 2px;
	padding-top:0;
	padding-bottom:0;
}
.tinyButtonSize
{
/*
	width:40px !important;
*/
	font-size:8px !important;
	height:18px !important;
}
div.tinyButtonSize
{
	height:12px !important;
}
.autoButton {
	border-color:#CCC #999 #999 #CCC;
	background-color:#FFF;
	background-image:url("en/images/background_form_element.gif");
	background-repeat:repeat-x;
	color:#333;
}
.sensitiveButton {
	background-image:none; background-color:#FFDEDE;
}
/* Button Style update on Mouse-over */
.autoButton:hover {
	border:3px double #333;
	border-top-color:#999;
	border-left-color:#999
}

/* DIV Simulated Button additional style tweak */
div.autoButton {
	float:left;
	padding:0 6px;
	height:auto;
	cursor:default;
}
div.autoButton {
	height:15px
}
div.autoButton:active {
	padding:0 5px 0 7px;
	margin:1px 1px -1px 3px;
}

.autoButton img {
	width:12px;
	height:12px;
	vertical-align:baseline;
}

/* Standardized Style for Connection / IP Address Selection Table */
table.selectionTable {
	border-collapse:collapse;
}
table.selectionTable, table.selectionTable TD {
	border:1px solid #000;
}
table.virtualTable, table.virtualTable TD {
	border-width:0;
}

/* Signal Icon [5 Bars Style] */
.icon-signal-bar {
	--icon-height: 16px;
	--icon-width: 22px;
	--img-width: 19px;
	display: inline-block;
	background-image: url("en/images/signal5-0.gif");
	background-repeat: no-repeat;
	width: var(--img-width);
	height: var(--icon-height);
	margin-right: calc(var(--icon-width) - var(--img-width));
	vertical-align: bottom;
}
.icon-signal-bar[data-signal-bar="1"] {
	background-image: url("en/images/signal5-1.gif");
}
.icon-signal-bar[data-signal-bar="2"] {
	background-image: url("en/images/signal5-2.gif");
}
.icon-signal-bar[data-signal-bar="3"] {
	background-image: url("en/images/signal5-3.gif");
}
.icon-signal-bar[data-signal-bar="4"] {
	background-image: url("en/images/signal5-4.gif");
}
.icon-signal-bar[data-signal-bar="5"] {
	background-image: url("en/images/signal5-5.gif");
}

a img {
	border-style: none;
}

img.icon_w16 {
	width: 16px;
}
img.icon {
	vertical-align:bottom;
	height:16px;
	border:0;
	text-decoration:none;
}

.icon-ic2:after {
	content:"";
	background-image:url("en/images/ic2.png");
	background-size:contain;
	background-repeat:no-repeat;
	margin-left:3px;
	width:16px;
	height:16px;
	vertical-align:bottom;
	display:inline-block;
}

/* CSS Icon - LED Button Set */
/*
.icon-led,
.icon-led-red,
.icon-led-green,
.icon-led-orange,
.icon-led-gray {
	display:inline-block;
	background-color:#FFF;
	margin:0 1px -2px;
	height:10px;
	width:10px;
	border:2px solid #000;
	border-radius:4px;
}
.icon-led-red {
	background-color:#F55;
	border-color:#800;
}
.icon-led-orange {
	background-color:#FA5;
	border-color:#830;
}
.icon-led-green {
	background-color:#5F5;
	border-color:#080;
}
.icon-led-gray {
	background-color:#AAA;
	border-color:#888;
}
*/

/* Font Awesome Icons setup - Connection Icon symbols */
/*
.connicon {
	display:inline-flex;
	justify-content: space-evenly;
	width:35px;
	align-items: first baseline;
}
.connicon > * {
	font-size: 0.8em;
}
.connicon > .fa-2x {
	font-size: 0.55em;
}
*/
/* Font Awesome Icons - LED Icon Set */
.fas.ledIcon {
	text-align: center;
	text-shadow:0 0 1px black;
	color:lightGray;
}
.fas.ledIcon:before {
	content: "\f0c8";
	vertical-align:inherit;
}
.fas.ledIcon-managementOnly:before {
	content: "\f0fa";
}
.fas.ledSpinner {
	background: url("en/images/dialog-throbber.gif") center no-repeat;
	background-size: contain;
	height:1em;
	color:transparent;
}
.fas.ledSpinner:before {
	content: "\f110";
}

.fas.icon-lock, .fas.icon-unlock, .fas.cloudIcon {
	font-size: 1.4em;
	vertical-align:top;
}
.fas.icon-lock:before {
	content: "\f023";
}
.fas.icon-unlock:before {
	content: "\f09c";
}
.fas.icon-sfcloud_home_sharing,
.fas.icon-sfcloud_location,
.fas.icon-sfcloud_client,
.fas.icon-sfcloud_ssid,
.fas.icon-sfcloud_saas {
	display: inline-flex;
	justify-content: center;
	width: 16px;
	margin-right: 5px;
}
.fas.icon-sfcloud_home_sharing:before {
	content: "\f1e0";
}
.fas.icon-sfcloud_location:before {
	content: "\f124";
}
.fas.icon-sfcloud_client:before {
	content: "\f007";
}
.fas.icon-sfcloud_ssid:before {
	content: "\f1eb";
}
.fas.icon-sfcloud_saas:before {
	font-weight: normal;
	content: "\f2d0";
}
.fas.cloudIcon:before {
	content: "\f0c2";
	color: #0099FF;
}
.fas.scheduleIcon {
	float: right;
	font-weight: normal;
	padding: 0px 3px;
	font-size: 20px;
}
.fas.scheduleIcon:before {
	content: "\f017";
	color: #FFB81C;
}
.fas.scheduleIcon.ineffective:before {
	opacity: 0.3;
	color: #FFF;
}
/* Font Awesome Icons - Client Type Set */
.fas.client-type {
	font-size:16px;
	padding-right:3px;
}
.fas.client-default:before {
	content: "\f2c3";
}
.fas.client-desktop:before {
	content: "\f108";
}
.fas.client-mobile:before {
	content: "\f10a";
}
.fas.client-game:before {
	content: "\f11b";
}
.fas.client-network:before {
	content: "\f0e8";
}

.fas.ineffective:before {
	opacity: 0.3;
}

/* Font Awesome Icons - Experimental Styling */
button:not([disabled]) {
	cursor: pointer;
}
/*
   Firefox specific (especially in Linux Platform)
   padding and inner border is set zero, and
   reserve some space for the icon
*/
/*
button.icon.fa::-moz-focus-inner {
	border:0;
	padding:0;
}
*/
/*
	Adjusted default button style
	Each browser may have different
	default padding affecting button
	text display position
*/
button.icon.fas,
button.icon.far {
	padding:0;
}
button.icon.fas:before,
button.icon.far:before {
/* KennyK: I don't know why middle, but it does not always fit */
/*
	vertical-align:middle;
*/
}
.ui-widget button.icon,
button.icon {
	font-size:12px;
	font-weight:700;
	height:21px;
	vertical-align:middle;
	min-width:65px;
}
.ui-widget button.far,
button.icon.far,
.ui-widget button.fas,
button.icon.fas {
	font-family: "Font Awesome 5 Pro";
	font-size:16px;
	min-width:48px;
	width:48px;
}
button.icon.fas {
	min-width:48px;
	width:48px;
}
button.fas.addIcon {
	color:#36a;
}
button.fas.addIcon:before {
	content: "\f067";
}
button.fas.trashIcon {
	color:#d00;
}
button.fas.trashIcon:before {
	font-size:18px;
 	content: "\f00d";
}
button.fas.trashRestoreIcon:before {
 	content: "\f82a";
}
button.fas.editIcon {
	color:#d65;
}
button.fas.editIcon:before {
	content: "\f044";
}
button.fas.downarrowIcon {
	color:#069;
}
button.fas.downarrowIcon:before {
	content: "\f063";
}
button.fas.downloadIcon {
	color:#070;
}
button.fas.downloadIcon:before {
	font-size:14px;
	content: "\f019";
}
button.fas.restoreIcon {
	color:#000;
}
button.fas.restoreIcon:before {
	font-size:12px;
	vertical-align:top;
	line-height: 13px;
	content: "\f0e2";
}
button.fas.fa-play {
	color:#070;
}
button.fas.fa-pause {
	color:#000;
}
button.fas.fa-stop {
	color:#d00;
}
button.fas.tagsIcon:before {
	content:"\f02c";
}
button.fas.unbanIcon:before {
	content:"\f234";
}
button.fas.banIcon:before {
	content:"\f235";
}
button.fas.chartIcon:before {
	font-size:14px;
	content: "\f080";
}
.firewallActionIcon .firewallActionLogIcon {
	display:none;
}
.firewallActionIcon.fa-2x {
	font-size: 1.1em;
}
.firewallActionIcon.firewallActionWithLog .firewallActionLogIcon {
	display:inline-block;
	color:black;
}
.fas.firewallDenyIcon:before {
	color:#f00;
	content: "\f05e";
}
.fas.firewallAllowIcon:before {
	color:#090;
	content: "\f058";
}
button.icon:disabled {
	color:#aaa;
}
.fas.portalIcon {
	font-size:16px;
	color:#FFB81C;
}
.fas.portalIcon:before {
	content: "\f0f4";
}

/* sorting arrow */
div.fas.sort_icon {
	font-size: 13px;
	padding: 0 5px;
}
.sort_icon_asc:before {
	content: "\f0d8";
}
.sort_icon_dsc:before {
	content: "\f0d7";
}
/* open row arrow */
div.fas.folder_icon {
	display: inline-block;
	font-size: 14px;
	padding: 0 3px;
	color:#0099FF;
}
tr div.fas.folder_icon:before, .closeArrow:before {
	content: "\f0da";
}
tr.open div.fas.folder_icon:before, .openArrow:before {
	content: "\f0d7";
}
.closeArrow:before, .openArrow:before {
	color:#0099FF;
}
/* New Standard for Connection / IP Address Selection Table (for IPListTable Class) */
table.slim_table tbody td { padding:1px; }
table .connlist_table_row > td:first-child {
	border-right-width: 0px;
	width: 99%;
	vertical-align: top;
}
table .connlist_table_box {
	background-color:#FFF;
	border:1px solid #AAF;
	width:230px;
	height:95px;
	white-space:nowrap;
	overflow:auto;
}

/* Standardized Style for Dialog Type of Info-filling Table */
table.dialogTable {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	border-collapse: collapse
}
table.dialogTable td {
	border-width: 0;
}

/* Standardized Icon for general purpose */
div.textIcon {
        background:transparent url("en/images/1ptrans.gif") no-repeat scroll center;
        height:15px;
}
div.emptyIcon,
div.trashIcon, div.addIcon, div.editIcon,
div.linkIcon, div.startIcon, div.stopIcon,
div.downloadIcon {
        background:transparent url("en/images/1ptrans.gif") no-repeat scroll center;
	width:15px;
	height:15px;
}
div.trashIcon {
        background-image:url("en/images/trash.gif");
}
div.addIcon {
	background-image:url("en/images/list-add.gif");
}
div.editIcon {
	background-image:url("en/images/edit_icon.gif");
}
div.linkIcon {
	background-image:url("en/images/link_icon.gif");
}
div.startIcon {
	background-image:url("en/images/start_icon.gif");
}
div.stopIcon {
	background-image:url("en/images/stop_icon.gif");
}
div.downloadIcon {
	background-image:url("en/images/arrow_down.gif");
	background-size:16px 14px;
}

table.grid_table .matrix_btn_col {
	width: 50px;
	text-align:center;
}
table.grid_table.slim_table .matrix_btn_col {
	padding-left:1px;
	padding-right:1px;
}

/*
	Universal Supplementary Styles
*/
.pseudo-disabled {
	filter:grayscale(1) opacity(0.4);
}
.pseudo-disabled, button.pseudo-disabled {
	cursor:not-allowed;
}

/* CSS Style for picklist */
/*
div.picklist {
	min-width:100px;
}
div.picklist >div {
	position: relative;
	box-sizing:border-box;
	border:1px black solid;
	border-top:0;
	padding-top:2px;
	padding-left:2px;
	padding-right:50px;
	min-height:24px;
}
div.picklist >div:first-child {
	border-top:1px black solid;
}
div.picklist >div .trashIcon,
div.picklist >div .addIcon {
	position: absolute;
	top: 1px;
	right: 0;
}
div.picklist .pick {
	padding-top:2px;
	padding-left:2px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
*/

/* Layer 2 SpeedFusion VPN Bridge PVID specific styling */
.layer2_panel .picklist td.supp,
.layer2_panel tr.pvid_panel {
	display:none;
}
.layer2_panel.pvid .picklist td.supp {
	display:table-cell;
}
.layer2_panel.pvid tr.pvid_panel {
	display:table-row;
}

/* CSS style for sche_selector */
select.sche_profile {
	max-width: 300px;
}
/* CSS style for maskedInput UI */
span.ui-maskedInput-widget {
	position: relative;
	display:block;
}
span.ui-maskedInput-widget > .ui-maskedInput-mask {
	position: absolute;
	left: 0;
}
span.ui-maskedInput-widget > .ui-maskedInput-input:focus + .ui-maskedInput-mask {
	display:none;
}
span.ui-maskedInput-widget > .ui-maskedInput-input:not(:focus) {
	visibility:hidden;
}
span.ui-maskedInput-widget > .ui-maskedInput-input.show {
	visibility:visible;
}
/* CSS style for Protocol / Source / Destination
	(firewall/outbound/inbounddistribution/ssid) */
.protocol_tr {
}
.protocol_tr td:last-child > div,
.iptype_panel,
.protocol_port_panel {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.protocol_port_panel > span {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.protocol_tr select,
.protocol_tr input,
.protocol_port_panel select,
.protocol_port_panel input,
.iptype_panel select,
.iptype_panel input {
	margin: 1px;
}
.iptype_panel {
	align-items: baseline;
	flex-wrap: wrap;
}
.iptype_panel > * {
	flex-shrink: 0;
}

/* CSS style for wantable.js - Wi-Fi Network Scan List */
.wifi_scan_layout {
	height: 300px;
	overflow-y: auto;
}
.wifi_scan_layout table {
	border-top-width:0;
}
.wifi_scan_layout table > :first-child {
	position:sticky;
	top:0;
	z-index:2;
}
.wifi_scan_layout table > :first-child tr:first-child td {
	border-top-width:1px;
}
.wifi_scan_layout table tbody {
	font-size: 12px;
	line-height: 18px;
}
.wifi_scan_layout table tbody tr.connected {
	background-color: #FFB;
}
.wifi_scan_layout tr .security_icon {
	visibility: hidden;
}
.wifi_scan_layout tr.secure .security_icon {
	visibility: visible;
}
.wifi_scan_layout .security_flex {
	display: flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:flex-center;	/* To be confirmed */
}
.wifi_scan_layout .security_flex * {
}
.wifi_scan_layout tr .bssid {
	text-align:right;
}

.wifi_scan_layout .fa-star {
	color: #FFA500;
}
.wifi_scan_layout .fa-check {
	color: #9C2;
}
.wifi_scan_layout .fa-spinner {
	color: grey;
}

/* CSS style for clientlist.js */
.client_type_selection {
	display:flex;
	flex-wrap:wrap;
	border:1px solid grey;
	padding:5px 2px;
	margin:10px 2px;
}
.client_type_selection > * {
	flex: 1 1 190px;
}

/* CSS style for portinfo.js */
.collapse * {
	display:none;
}
.collapse:before {
	display:inline;
	content:var(--data-content, "\2026");
	cursor:pointer;
}

.warn-label {
	color:#F50;
	margin:5px 0;
}
.tabletitle2 .warn-label {
	color:#FC0;
}
.warn-label:before {
	font:normal normal normal 1em/1 var(--font-FontAwesome);
	font-weight:900;
	font-size:inherit;
	content:"\f071";
	width:2em;
	display:inline-block;
	text-align:center;
}

.throbber
{
	text-align: center;
	position: absolute;
	z-index: 1000;
	left: 0;
	top: 0;
	background-color: #E6E6EB;
}

.throbberContents
{
	font-size: 9px;
	font-family: Verdana,Arial,Helvetica;
	color: #808080;
	position: absolute;
}

.nameinput
{
	position: absolute;
	left: 2px;
	width: 140px;
	font-size: 13px;
	border: 1px solid #404040;
	background-color: #a0a0a0;
	color: #fff;
	font-family: Verdana,Arial,Helvetica;
	overflow-x: visible;
	overflow-y: hidden;
}

.popupinput
{
	position: absolute;
	left: 2px;
	width: 140px;
	font-size: 13px;
	border: 1px solid #404040;
	background-color: #E6E6EB;
	color: #1F1F1F;
	font-family: Verdana,Arial,Helvetica;
	overflow-x: visible;
	overflow-y: hidden;
}

.nametext
{
	position: absolute;
	width: 140px;
}

.dialogbackground
{
	background-color: #635d80;
	position: absolute;
	top: 7px;
	left: 7px;
	z-index: 10;
}

.shadowtl, .shadowtc, .shadowtr, .shadowl, .shadowc, .shadowr, .shadowbl, .shadowbc, .shadowbr
{
	position: absolute;
	z-index: 0;
}

.dialogbackgroundcover
{
	position: absolute;
	z-index: 500;
	background-color: white;
	opacity: 0.5;
}

.dialogclosebutton
{
	background-color:#FFF;
	position: absolute;
	right: 0;
	top: 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.sliderbar
{
	position: absolute;
	top: 10px;
}

.sliderbarleft
{
	left: 0;
	width: 22px;
	height: 20px;
}

.sliderbarmiddle
{
	left: 22px;
	height: 20px;
}

.sliderbarright
{
	width: 22px;
	height: 20px;
}

.sliderblob
{
	width: 20px;
	height: 20px;
	left: 15px;
}

.sliderlabelblock
{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 9px;
}

.sliderlabeltxt
{
	margin-left: 5px;
	font-size: 9px;
	font-weight: bold;
}

.sliderlabelvalue
{
	font-size: 9px;
	color: #808080;
}

.draggablecelltitle
{
	background-color: #A0A0FF;
}

.draggablecellcontent
{
	background-color: #D0D0FF;
}

.spreadsheetcell
{
	background-color: white;
}

.spreadsheetinput
{
	background-color: white;
	border-style: none;
}

.ssidpopupinput
{
	height: 18px !important;
}

/* CSS Style for Cellular SIM Card Selection */
.sim_card_custom_selection {
	margin-left:20px;
}
.sim_card_custom_selection label {
	display:block;
}
.sim_card_custom_selection label > div {
	display:inline-flex;
	width:300px;
	justify-content:space-between;
	align-items:baseline;
}

.channel_pci_panel, .channel_pci_panel_wide {
	display:grid;
	grid-template-columns:60px 1fr;
	justify-items:stretch;
	align-items:baseline;
	gap:3px;
}
.channel_pci_panel_wide {
	grid-template-columns:100px 1fr;
}

/* CSS Style for SpeedFusion Dialog */
table.vpn_miracle_panel.slim,
table.vpn_miracle_panel.slim td {
	border-color: transparent;
}
table.vpn_miracle_panel.slim .vpn_maxlvl {
	display: none;
}
table.vpn_miracle_panel td:first-child {
	width: 250px;
}
table.vpn_miracle_panel select {
	min-width: 100px;
}

/*	Ugly / dirty style in particular for Details/Wireless Networks button
 *	in the dashboard page, recommended by Matthew Chan @2009/05/20
 */
.floating_right_button {
	float:right;
	*position:relative;
	*top:-19px;
}
.floating_right_button, x:-moz-any-link {
	float:right;
	position:relative;
	top:-19px;
}
.floating_right_button:nth-child(n) {
	float:right;
	top:0;
}

/* QQ */
body.cnggba,
body.cnggba .TEXTAREA,
body.cnggba .TEXTAREA2,
body.cnggba .tabletitle,
body.cnggba .tabletitle2, body.cnggba .tabletitle3, body.cnggba .tabletitle4, body.cnggba .tabletitle5,
body.cnggba .tablecontent1, body.cnggba .tablecontent2, body.cnggba .tablecontent2b,
body.cnggba .tablecontent3, body.cnggba .tablecontent4, body.cnggba .tablecontent4b,
body.cnggba .errormsg,
body.cnggba .top_menu_panel,
body.cnggba .autoButton,
body.cnggba .throbberContents,
body.cnggba .nameinput,
body.cnggba .popupinput {
	font-family:Arial;
}
body.cnggba .top_menu_panel, body.cnggba .tabletitle {
	color:#FFF;
	background-color:#FFF;
	background-image:url("cgi-bin/MANGA/connicon.cgi?type=topbg");
}
body.cnggba .top_menu_panel .menu_item {
	border-color:#9DCEE9;
}
body.cnggba .top_menu_panel .menu_active {
	color:#069;
}
body.cnggba .top_menu_panel .menu_apply {
	color:#9DCEE9;
}
body.cnggba .top_menu_panel .menu_apply.apply_action {
	color:#FFF;
}
body.cnggba .top_menu_panel .menu_apply.apply_action.menu_active {
	background-color:#9DCEE9;
}
/** Drag and Drop file uploading **/
.file_upload_panel {
	outline: 2px dashed #A0A0A0;
	outline-offset: -5px;
	width: 100%;
	height: 100px;
	text-align: center;
}
.file_upload_panel.dragover {
	outline-offset: -10px;
	outline-color: #FFB81C;
	background-color: #FFF;
}
.file_upload_panel .uploadIcon:before {
	content: "\f019";
}
.file_upload_panel .uploadIcon {
	font-size: 30px;
	display: block;
	padding-top: 20px;
}
.file_upload_panel .file_upload_label {
	padding-top: 10px;
	display: block;
	cursor: pointer;
}
.file_upload_panel .file_upload {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.file_upload_panel .choose_file {
	font-weight: bold;
	text-decoration: underline;
}
.file_upload_panel .choose_file:hover {
	color:#FFB81C;
}
/** End of Drag and Drop file uploading **/
:root {
	--mobile-top-height:57px;
}

/* Mobile Menu Styles */

.mobile_top_menu {
	position: fixed;
	background-image:url("cgi-bin/MANGA/connicon.cgi?type=topbg");
	background-repeat:repeat-x;
	background-position:bottom;
	background-color:black;
	height:var(--mobile-top-height);
	width: 100%;
	z-index: 1000;
	text-align: center;
	display: none;
	transition:top 0.5s;
}
.mobile_top_menu .menu_logo {
	cursor: pointer;
}
.mobile_top_menu > span.icon {
	--mobile-top-button-padding:10px;
	--mobile-top-button-notification-size:7px;
	position:absolute;
	font-size: 24px;
	min-width:25px;
	text-align:center;
	padding-left:var(--mobile-top-button-padding);
	padding-right:var(--mobile-top-button-padding);
	text-decoration: none !important;
	bottom:10px;
}

/* Mobile Top Menu (Left Button) - Navigation */
.mobile_top_menu .nav_action {
	left: 3px;
}
html[data-config-changed] .mobile_top_menu .nav_action::before {
	position:absolute;
	background-color:#F94763;
	border-radius:50%;
	height:var(--mobile-top-button-notification-size);
	width:var(--mobile-top-button-notification-size);
	right:calc(var(--mobile-top-button-padding) - calc(var(--mobile-top-button-notification-size) / 2));
	content: "";
}
.mobile_top_menu .nav_action::after {
	content: "\f0c9";
}

/* Mobile Top Menu (Right Button) - Logout */
.mobile_top_menu .logout_action {
	right: 3px;
}
.mobile_top_menu .logout_action::after {
	content: "\f2f5";
}

/* Mobile Menu Panel - Specific Styles */
.mobile_menu_panel {
	box-sizing:border-box;
	width:100vw;
	min-height:100vh;
	margin:0;
	padding:0;
	padding-top:calc(var(--mobile-top-height) + 20px);
	padding-bottom:200px;
	z-index: 1000;
	background-color:#000;
	font-size:14px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	font-weight:700;
	color:#FFF;
	display: none;
}

.mobile_menu_panel .menu_item {
	width:100vw;
	margin:0;
	padding:0;
	background-color:#ABABAB;
	text-align:left;
}
.mobile_menu_panel .menu_item.menu_apply {
	margin:20px 0 0;
	text-align:center;
}
html:not([data-config-changed]) .mobile_menu_panel .menu_item.menu_apply {
	display:none;
}

.mobile_menu_panel .menu_item:first-child > :first-child {
	border-top:1px solid #ABABAB;
}
.mobile_menu_panel .menu_item > :first-child {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:flex-end;
	padding:14px 8px;
	background-color:black;
	border-bottom:1px solid #ABABAB;
}
.mobile_menu_panel .menu_item.menu_selected > :first-child {
	border-bottom:2px solid #FFB81C;
}
.mobile_menu_panel .menu_item.menu_apply > :first-child {
	background-color:#FFB81C;
	border:0;
}

.mobile_menu_panel .menu_item > :first-child > :first-child {
	flex-grow:1;
}
.mobile_menu_panel .menu_item > :first-child > :nth-child(2) {
	width: 30px;
	text-align: center;
}
.mobile_menu_panel .menu_item > :first-child > :nth-child(2):before {
	content: "\f067";
}
.mobile_menu_panel .menu_item.expand > :first-child > :nth-child(2):before {
	content: "\f068";
}

.mobile_menu_panel ul li {
	border:0;
	background-color:#999;
	padding:0px 10px;
	font-weight:bold;
}
.mobile_menu_panel ul li.hl {
	background-color:#90B0DC;
}
.mobile_menu_panel ul li:empty {
	display:none;
}

.mobile_menu_panel .menu_item > .left_menu_clickable {
	padding:10px;
	background-color:transparent;
	border-bottom:1px solid #999;
}
.mobile_menu_panel .menu_item > .lv1 {
	padding-left:40px;
	font-weight: normal;
}
.mobile_menu_panel .menu_item > .left_menu_highlight {
	background-color: #90B0DC;
}

.mobile_menu_panel .menu_item:not(.expand) > li {
	display:none;
}

.mobile_bottom_menu {
	text-align: center;
	bottom: 30px;
	position: relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	width: 100vw;
	display: none;
}
html.mobile_view .mobile_bottom_menu .mobile,
html.desktop_view .mobile_bottom_menu .desktop {
	font-weight: bold;
	text-decoration: none;
	pointer-events: none;
}
.mobile_title {
	display: none;
}
@media only screen and (max-width: 768px) {
	.leftmenu,
	.top_menu_panel,
	.mobile_menu_panel {
		display: none;
	}
	.mobile_top_menu {
		display: block;
	}
	.smart_header {
		margin-top: 57px;
	}
	html.support_mobile_view.mobile_view,
	.support_mobile_view.mobile_view body,
	.support_mobile_view.mobile_view .fixedmaxwidth	{
		min-width: 100vw;
		width: 100vw;
	}
	.support_mobile_view.mobile_view #mainTable,
	.support_mobile_view.mobile_view #mainContent {
		max-width: 100vw;
	}
	/** Dialog **/
	/** the width of dialog is set through the .css function
		!important is needed for overriding it **/
	.support_mobile_view.mobile_view .ui-dialog {
		width: 95vw !important;
		left: 10px !important;
		box-sizing: border-box;
	}
	/** Half of the screen should be a resaonable width for user input type **/
	.support_mobile_view.mobile_view input:not([type=checkbox]):not([type=radio]),
	.support_mobile_view.mobile_view textarea,
	.support_mobile_view.mobile_view select {
		max-width: 50vw;
	}
	.support_mobile_view.mobile_view .ui-dialog .form_table input:not([type=checkbox]):not([type=radio]),
	.support_mobile_view.mobile_view .ui-dialog .form_table textarea,
	.support_mobile_view.mobile_view .ui-dialog .form_table select {
		max-width: 40vw;
	}
	.support_mobile_view.mobile_view .ui-dialog .grid_table input:not([type=checkbox]):not([type=radio]),
	.support_mobile_view.mobile_view .ui-dialog .grid_table textarea,
	.support_mobile_view.mobile_view .ui-dialog .grid_table select {
		max-width: 35vw;
	}
	/** End of Dialog **/
	/** Start of grid_table **/
	.support_mobile_view.mobile_view .ui-dialog .grid_table input:not([type=checkbox]):not([type=radio]),
	.support_mobile_view.mobile_view .ui-dialog .grid_table textarea,
	.support_mobile_view.mobile_view .ui-dialog .grid_table select {
		max-width: 45vw;
	}
	.support_mobile_view.mobile_view .grid_table,
	.support_mobile_view.mobile_view .grid_table > *,
	.support_mobile_view.mobile_view .grid_table td {
		border: none;
	}
	/** usually the title blue row **/
	.support_mobile_view.mobile_view .grid_table thead.grid_thead {
		display: none;
	}
	/** zebra style for compressed row **/
	.support_mobile_view.mobile_view .grid_table tbody:nth-of-type(even) {
		background-color: #D3D3D3;
	}
	.support_mobile_view.mobile_view .grid_table tbody:nth-of-type(odd) {
		background-color: #E8E8E8;
	}
	/** usually is a delete / add button, put it to the right bottom corner of each row **/
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row.expand tr td.matrix_btn_col {
		position: absolute;
		bottom: 2px;
		right: 0;
		padding: 0;
	}
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row tr {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row tr td {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/** Make the compressed row taller **/
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row:not(.expand) tr td {
		flex-basis: 20px;
	}
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row tr td:first-child .mobile_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row tr td .mobile_title {
		display: unset;
		font-weight: bold;
	}
	/** Some gird table with more than one column
		will be compressed in to one single row
		only the data of first column (accordion_content) will be shown,
		user may click the row to open the details
	**/
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row tr td .mobile_title .accordion_content {
		font-weight: normal;
	}
	/** The first td of each row is recomposed as <mobile_title><accordion_content><accordionIcon>
		<mobile_title> and all others column / input settings will be hidden
			while <accordion_content> will be shown when row is compressed
	**/
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row.expand tr td:first-child .accordion_content,
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row:not(.expand) tr td:first-child .mobile_title div:first-child,
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row:not(.expand) tr td:first-child .content,
	.support_mobile_view.mobile_view .grid_table tbody.matrix_row:not(.expand) tr td:not(:first-child) {
		display: none;
	}
	.support_mobile_view.mobile_view .grid_table .matrix_row td .accordion::before {
		content: "\f054";
		color: gray;
	}
	.support_mobile_view.mobile_view .grid_table .matrix_row.expand td .accordion::before {
		content: "\f078";
		color: gray;
	}
	/** End of grid_table **/
	/** Start of list_table **/
	/** This class is usually for those Summary Table **/
	/** <button/> border needs to be reserved, so cannot just use * **/
	.support_mobile_view.mobile_view .list_table > *,
	.support_mobile_view.mobile_view .list_table td {
		border: none;
	}
	/* align vertical in middle (flex direction is column */
	.support_mobile_view.mobile_view .list_table tr {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		position: relative;
		/* align vertical in middle (flex direction is column) */
		justify-content: center;
	}
	/*	Hide the blue row / stat_info row
		table with multiple column only show the first column's title
	*/
	.support_mobile_view.mobile_view .list_table.stat_table thead tr.tabletitle2,
	.support_mobile_view.mobile_view .list_table thead tr.tablecontent3,
	.support_mobile_view.mobile_view .list_table thead tr td:not(:first-child) {
		display: none;
	}
	/* zb style dark grey */
	.support_mobile_view.mobile_view .list_table tr:not(.tablecontent3):nth-child(even) {
		background-color: #D3D3D3;
	}
	/* zb style light grey */
	.support_mobile_view.mobile_view .list_table tr:not(.tablecontent3):nth-child(odd) {
		background-color: #E8E8E8;
	}
	/* set td transparent for showing the tr zb style
		and td width may vary and leads to not fill up background color
	*/
	.support_mobile_view.mobile_view .list_table tbody tr td {
		display: flex;
		background-color: transparent;
	}
	/* content other than mobile title */
	.support_mobile_view.mobile_view .list_table tbody tr td > *:not(.fas):not(.loadIcon):not(.mobile_title) {
		flex: 1 1 60vw;
	}
	/* mobile_title should be shown for mobile view (unset the display none)*/
	.support_mobile_view.mobile_view .list_table tbody tr td > .mobile_title {
		display: unset;
		font-weight: bold;
		flex: 0 1 30vw;
	}
	.support_mobile_view.mobile_view .list_table tbody tr td > .content {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	.support_mobile_view.mobile_view .list_table tbody tr td.tabletitle2 a.linkedName,
	.support_mobile_view.mobile_view .list_table tbody tr td.tabletitle2 {
		color: #000;
	}
	/* usually is a delete button, put it to the right bottom corner of each row */
	.support_mobile_view.mobile_view .list_table tbody tr td.button {
		position: absolute;
		bottom: 0px;
		right: 0px;
	}
	.support_mobile_view.mobile_view .form_table .form_table tbody tr td.button,
	.support_mobile_view.mobile_view .form_table .grid_table tbody tr td.matrix_btn_col {
		width: 30px;
	}
	.support_mobile_view.mobile_view .form_table .form_table tbody tr td.button button,
		.support_mobile_view.mobile_view .form_table .grid_table tbody tr td.matrix_btn_col button {
		min-width: 30px;
		width: 30px;
		display: flex;
		justify-content: center;
	}
	/** End of list_table **/
	/** Start of multi_col **/
	.support_mobile_view.mobile_view .multi_col div.col_title {
		opacity: 0.5;
		color: #A0A0A0;
		text-decoration: underline;
	}
	.support_mobile_view.mobile_view .multi_col td[data-multiCol] {
		display: none;
	}
	.support_mobile_view.mobile_view .multi_col[data-multiCol="1"] div.col_title[data-multiCol="1"],
	.support_mobile_view.mobile_view .multi_col[data-multiCol="2"] div.col_title[data-multiCol="2"] {
		opacity: 1;
		color: #000;
	}
	.support_mobile_view.mobile_view .multi_col tr.tabletitle2 td,
	.support_mobile_view.mobile_view .multi_col[data-multiCol="1"] td[data-multiCol="1"],
	.support_mobile_view.mobile_view .multi_col[data-multiCol="2"] td[data-multiCol="2"] {
		display: table-cell;
	}
	/** End of multi_col **/
	/* CSS style for Protocol TCP/UDP Port (firewall/outbound/inbounddistribution/ssid) */
	.support_mobile_view.mobile_view .protocol_tr td:last-child > div,
	.support_mobile_view.mobile_view .iptype_panel {
		flex-direction: column;
	}
	.support_mobile_view.mobile_view .protocol_port_panel {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media only screen and (max-width: 768px) {
	html.responsive,
	.responsive body {
		min-width: 100vw;
		width: 100vw;
	}
	.responsive .fixedmaxwidth,
	.responsive .top_vrf_panel {
		display: none;
	}
	.responsive .mobile_top_menu {
		top: 0 !important;
	}
	.responsive .mobile_top_menu .nav_action:before {
		display: none;
	}
	.responsive .mobile_top_menu .nav_action:after {
		content: "\f00d";
	}
	.responsive .mobile_menu_panel,
	.responsive .mobile_bottom_menu {
		display: block;
	}
}