/* =====General===== */
body {
    margin: 0;
    padding: 0;
    background-color: #CCDCEC; /* modify it to change backgroud color */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    line-height: 30px;
}
table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
form {
    margin: 0;
}
pre {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
}
br, p {
    line-height: 16px;
}
a {
    text-decoration: none;
}
select {
    margin: 0 5px 0 5px;
    margin: 0 5px 0 0px\9; /*only valid in IE*/
    padding: 0;
    vertical-align: top;
}
input[type="text"], input[type="password"], input[type="checkbox"], input[type="radio"] { /* set the margin of input element */
    margin: 0 5px 0 5px;
    padding: 0;
    vertical-align: middle;
}
h2 { /* Use for time countdown in certificate importing */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #5F7637;
    line-height: 28px;
}
/* =====General END===== */


/* =====Login page===== */
/* --Background-- */
.loginbg, .loginwiz_bg { /* background image of login page */
    background-color: #6DACDE;
}
.login_box { /* background for login message box */
    background: url("ag214.gif");
    border-radius: 8px;
}
/* --Login/Logout Button-- */
.fixed_input{ /* fixed Username and Password input width */
    width:250px;
}
.login_table{/* login button position */
    margin: 0 0 0 95px;
}
.loginwiz_box{
    background: url("ag214.gif");
    border-radius: 8px;
    width:500px;
    height:380px;
    margin: 100px auto;
}
.loginwiz_tab{
    margin:20px;
}
.loginwiz_title{
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    line-height:60px;
}
.loginwiz_inner{
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
}
.loginwiz-in1,.loginwiz-in2 {
    line-height: 20px;
    margin: 0 0 10px 0;
}
.loginwiz-pw1,.loginwiz-pw2{
    width:260px;
    margin: 5px auto;
    position: relative;
}
.loginwiz_input{
    width:250px;
    padding-right:40px !important;
    margin-left:0 !important;
    height:18px; /*for ie*/
}
/*hide ie password eye*/
.loginwiz_input::-ms-clear { display: none; }
::-ms-reveal { display: none; }

.pw-label{
    cursor: pointer;
    position: absolute;
    right:10px;
    top:24px;
    display: inline-block;  /*for ie,password label click*/
} 
.pw-label img{ pointer-events: none; }  /*for ie,password label click*/

.loginwiz_btn{
    margin: 5px auto;
}
.login_button1 { /* left margin of the button */
    background: url("button_1.png") no-repeat;
    background-position: center right;
    width: 18px;
}
.login_button2 { /* middle as main button*/
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    background: url("button_2.png") repeat-x;
    background-position: center;
    height: 28px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}
.login_button3 { /* right margin of the button */
    background: url("button_3.png") no-repeat;
    background-position: center left;
    width: 18px;
}
#logout_tab, #reboot_tab{
    display:inline;
}
.reboot_msg{
    font-family: Arial, Helvetica, sans-serif;
    color: #FF0000;
    font-size: 12px;
    font-weight: bold;
    margin: 0 10px;
}
/* --Message text-- */
.adminbox { /* text in login box */
    color: #FFFFF6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    padding-left: 2px;
    padding-right: 4px;
}

/* --Username / Password-- */
.adminbox_2 { /* panel of username and password inside login box */
    color: #FFFFF6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* --Logo padding-- */
.adminbox_3 { /* set the margin of logo */
    padding-left: 4px;
    padding-right: 2px;
}
/* =====Login page END===== */


/* =====Outermost container===== */
/* --Border-- */
.mainborder { /* Use as border in outermost table */
    background: url("ag211.gif");
    padding: 8px;
    width: 95%;
    margin: 10px auto;
    width: 100%\9; /*only valid in IE*/
    margin: 10px 2.5%\9; /*only valid in IE*/
}

/* --Background-- */
.mainbackground { /* background for main table*/
    background-color: #6DACDE;
}
/* =====Outermost container END===== */


/* =====Top panel===== */
/* --margin-- */
.TOP-PANEL { /* margin of top panel */
    margin-top: 10px;
    margin-bottom: 20px;
}

/* --background-- */
/*same as .mainbackground*/

/* --Title & Value on the right top side-- */
.ALL-LINK_banner { /*title such as SSID, Language, and Firmware Version */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0000EE;
    font-weight: bold;
    white-space: nowrap;
}
.ALL-LINK_banner .val { /*value after the title*/
    color: #000000;
    margin-right: 5px;
}

/* --Language selection-- */
.toptitle { /* Used for language selection menu */
    background-color: #F1F1F1;
    color: #042D2C;
}
/* =====Top panel END===== */


/* =====Left panel===== */
/* --background-- */
.idlt0 { /* background for left menu */
    background: url("ag214.gif");
    border-radius: 8px;
}

/* --L1 buttons-- */
.LM { /*L1 button*/
    background: url("agbnb.gif") no-repeat;
    font-size: 13px;
    color: #FFFFFF;
    font-family: Arial;
    font-weight: bold;
}
.LM_mouse { /*L1 button: selected or mouse over*/
    background: url("agbny.gif") no-repeat;
    font-size: 13px;
    color: #000000;
    font-family: Arial;
    font-weight: bold;
}

/* --L2 buttons-- */
.LM2 { /*L2 button*/
    background: url("agbn3.gif") no-repeat; 
    font-size: 13px;
    color: #FFFFFF;
    font-family: Arial;
    font-weight: bold;
}
.LM2_mouse { /*L2 button: selected or mouse over*/
    background: url("agbn4.gif") no-repeat; 
    font-size: 13px;
    color: #000000;
    font-family: Arial;
    font-weight: bold;
}
/* --L3 menu margin-- */
.L3_list_margin{
    margin-left: 20px;
}
/* --Buttons-- */
.handlk { /* For the L1 and L2 buttons in left menu */
    cursor: pointer;
}
/*expand left menu img(panel_left-b.svg)*/
#panel_img{
    height:100px;    /*for IE11*/
}
/* =====Left panel END===== */


/* =====Right panel===== */
/* --Show Firmware Version -- */
.show_fw_ver{
    display: inline;
}
/* --Border-- */
.CONTENT-TABLE { /* border of right panel */
    border: 1px solid #6A6DDF;
}
/* --Background-- */
.pgbakground { /* general background for the right panel showing L3 pages*/
    background-color: #D2DDFE;
}
/* --L3 title margin-- */
.L3_title_margin{
    margin-left: 10px;
}
/* --show parr.gif -- */
.show_parr{
    display: inline;
}
/* --Fancybox-- */
/* ALL-LINK is used for fancybox in storage mode */
.fancybox-background { /* fancybox background */
    position: relative;
 /*   background: #6DA0DE;*/
    background: rgba(0, 0, 0, 0);
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.word-color{ /* color of word in fancybox */
    color:#000000;
}
.msg-color{ /* color of word in fancybox-overlay */
    color:blue;
}
.fancybox_message_title{
  background: #6DACDE;
  border-color: #6DACDE;
  border-style: solid;
  border-width: 1px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  line-height: 21px;
  margin: 0;
  padding: 0;
}
/* --L3 buttons-- */
/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
.L3menu { /*background of the L3 buttons bar */
    background-color: #6A6DDF;
}
.LM3 { /*L3 buttons which aren't selected*/
    background: url("sp2.gif");
    padding: 0 10px;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
}
.LM3_mouse { /*L3 button: selected or mouse over*/
    background: url("sb2.gif");
    padding: 0 10px;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
}
.LM3 a, .LM3_mouse a { /*font color of L3 button*/
    font-size: 13px;
    color: #FFFFFF;
}
.LM3_hr { /*horizontal line below L3 menu*/
    height: 2px;
    background: url("sb0.gif") repeat-x;
}

/* --L4 tables--*/
.bmmargin9 { /* Used for setting the margin of the table */
    margin-top:6px;
    margin-bottom:12px;
}
.ALL-LINK { /*L4 Table style*/
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
}
.L4title, .ptl, .ptlrt { /*title row of L4 Table*/
    background-color: #7EC0EE;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}
.stabx th { /*table head of the L4 table which shows status*/
    color: #333333;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    height: 32px;
    padding-left: 3px;
    padding-right: 3px;
    border-left: 1px solid #bbbbbb; 
}
.stabx td { /*table data cellular of the L4 table which shows status*/
    color: #333333;
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    height: 32px;
    padding-left: 3px;
    padding-right: 3px;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
}
.stabx th:first-child, tr td:first-child { /* set the border of first th child and tr first td child */
    border-left: 0px;
}
.staball th { /*table head of the L4 table which shows configuration*/
    color: #333333;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
    padding: 3px;
    border-left: 1px solid #bbbbbb;
}
.staball .staball_sum th { /* for summary table, such as the list with "Add" and "Delete" buttons */
    color: #333333;
    text-align: center;
    line-height: 13px;
    font-weight: bold;
    padding: 3px;
    border-left: 1px solid #bbbbbb;
}
.staball td { /*table data cellular of the L4 table which shows configuration*/
    color: #333333;
    padding: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    empty-cells: show; /*show border for firefox when the column is empty*/
}
.staball th:first-child, tr td:first-child { /* set the border of first th child and tr first td child */
    border-left: 0px;
}
/* Old design for table layout, should use .stabx or .staball instead */
/* table head of the L4 table which shows status and configuration */
#WLAN th,#ttab th,#stab th,#stab0 th,#stab1 th,#stab2 th,#stab3 th,#stab4 th,#stab5 th,#stab6 th,#stab7 th,#stab8 th,#stab9 th,#stab10 th,#stab11 th,#stab12 th,#stab13 th,#stab14 th,#stab15 th,#stab16 th,#stab17 th,#stab18 th,#stab19 th,#stab20 th,#stab21 th,#stab22 th,#stab23 th,#stab24 th,#stab25 th,#tab th,#tab0 th,#tab1 th,#tab2 th,#tab3 th,#tab4 th,#tab5 th,#tab6 th,#tab7 th,#tab8 th,#tab9 th,#tab20 th,#tab21 th,#ltab th,#sxtab th,#tlist th,#dlist th, .headerth , .headertd, .headertd2,#ptab0 th,#ptab1 th,#ptab2 th,#ptab3 th,#ptab4 th,#ptab5 th,#ptab6 th,#ptab7 th,#ptab8 th,#ptab9 th,#tab16 th {
    color: #333333;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    padding-left: 4px;
    padding-right: 4px;
}
/* Old design for table layout, should use .stabx instead */
/* table data cellular of the L4 table which shows status  */
#WLAN td,#ttab td,#stab td,#stab0 td,#stab1 td,#stab2 td,#stab3 td,#stab4 td,#stab5 td,#stab6 td,#stab7 td,#stab8 td,#stab9 td,#stab10 td,#stab11 td,#stab12 td,#stab13 td,#stab14 td,#stab15 td,#stab16 td,#stab17 td,#stab18 td,#stab19 td,#stab20 td,#stab21 td,#stab22 td,#stab23 td,#stab24 td,#stab25 td,#stab26 td,#sxtab td {
    color: #333333;
    font-weight: normal;
    text-align: center;
    line-height: 28px;
    padding-left: 4px;
    padding-right: 4px;
}
/* Old design for table layout, should use .staball instead */
/* table data cellular of the L4 table which shows configuration  */
#tab td,#tab0 td,#tab1 td,#tab2 td,#tab3 td,#tab4 td,#tab5 td,#tab6 td,#tab7 td,#tab8 td,#tab9 td,#wtab1 td,#wtab2 td,#wtab3 td,#wtab4 td,#wtab5 td,#wtab6 td,#wtab7 td,#wtab8 td,#wtab9 td,#ltab td,#tlist td,#dlist td,#tab10 td,#tab11 td,#tab12 td,#tab13 td,#tab14 td,#tab15 td,#tab16 td,#tab17 td,#tab18 td,#tab19 td,#tab20 td,#tab21 td,#tab40 td,#tab41 td,#tab42 td,#tab43 td,#tab44 td,#tab45 td,#tab46 td,#tab47 td,#tab48 td,#tab49 td,#tab50 td,#ptab0 td,#ptab1 td,#ptab2 td,#ptab3 td,#ptab4 td,#ptab5 td,#ptab6 td,#ptab7 td,#ptab8 td,#ptab9 td {
    color: #333333;
    padding: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
}

/* --L5 table-- */
.linetab{ /* L5 table: inner table in the L4 table data cellular */
    border: 1px solid #bbbbbb;
}
.linetab th { /* table head of the L5 table */
    color: #333333;
    background-color: #E6FAFF;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    padding-left: 4px;
    padding-right: 4px;
    border-left: 1px solid #bbbbbb;
}
.linetab td { /* table data cellular of the L5 table */
    color: #333333;
    padding: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
}
.linetab th:first-child, tr td:first-child { /* set the border of first th child and tr first td child */
    border-left: 0px;
}
.linetab1 { /* table below L5 table, which is used to put buttons for saving L5 setting */
    border-right: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
}
.linecolor{/* for wiqb01.js setTabStyle to use */
    border-bottom: 1px solid #bbbbbb;
}
/* --staball password eye-- */
.pw-td{     /*for ie*/
  position: relative;
}
.pw-group{
  position: absolute;
  height:18px;
}
.pw-input{
    padding-right:30px !important;
    height:18px; /*for ie*/
    width:200px; /*for ie*/
}
.pw-eye{
    cursor: pointer;
    position: absolute;
    right:5px;
    top: -7px;
}
.pw-span{
    margin-left:210px;
}
.pw-msg-3g{
    margin: 7px 0px 0px 5px;
}
/*hide ie password eye*/
.pw-input::-ms-clear { display: none; }
::-ms-reveal { display: none; }
/* --Help link-- */
.L4title a, .ptl a, .ptlrt a { /*help link inside L4 title row*/
    font-family: Arial, Helvetica, sans-serif;
    background-repeat: repeat-x;
    font-size: 12px;
    color: #FFFFFF;
    background-position: center;
    font-weight: bold;
    padding-right: 6px;
}

/* --margin of buttons-- */
.ptl input { /* ajust the margin of input elements */
    margin: 2px 0px 0px 5px;
}

/* --Panel for Save button at bottom--*/
.bty { /* Used in the div with Save and Reset buttons */
    padding: 8px;
    color: #1874CD;
    background-position: center;
    text-align: center;
    font-weight: bold;
    line-height: 24px;
}
.bty_pop_ber { /* Used in the div with Save and Reset buttons(pop up) */
    padding: 10px 0px 0px 0px; ;
    color: #1874CD;
    background-position: center;
    text-align: center;
    font-weight: bold;
    line-height: 24px;
}
/*for usb file selected color*/
.select_file{
   background:#D2DDFE;
}
.usb_tab a{
}
/* --L1 spec page & Help page-- */
.ht { /* modify it to set the style of L1 spec pages and help pages */
    padding: 20px;
}
.lih { /* Title in L1 spec page */
    padding-top: 8px;
    font:bold 12px Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 24px;
    list-style-type: disc;
}
.lid { /* Content in L1 spec page */
    padding-left: 8px;
    list-style: none;
    font: 12px Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 24px;
}

/* --File upload page-- */
.tyc { /* text layout in file uploading, such as firmware upgrade. */
    color: #333333;
    background-position: center;
    text-align: center;
    line-height: 28px;
}
.AdminMM { /* Used for showing the text of current firmware version in the page of firmware upgrading */
    font-size: 14px;
    color: #000000;
    font-variant: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-position: center;
}

/* --Dashboard-- */
.dash_left{ /* dashboard left panel */
    width: 50%;
    width: 48%\9; /*only valid in IE*/
    float: left;
}
.dash_right{ /* dashboard right panel */
    width: 50%;
    width: 48%\9; /*only valid in IE*/
    float: right;
}
.dash_iframe{ /* CPU flow chart */
    width: 100%;
    height: 320px;
    border: 0px;
}
.dash_iframe_traffic{ /* Network traffic flow chart */
    width: 100%;
    height: 580px;
    border: 0px;
}
.dash_table{ /* System Information: Content in System Information */
    font-weight: bold;
    line-height: 30px;
}
.dash_table .d1{ /* System Information: each title in content */
    text-align: right;
    padding-right: 15px;
}
.dash_table .d2{ /* System Information: each value after title in content */
    padding-left: 10px;
}
.port_link_out { /* I/O Port Link Status: content in I/O Port Link Status */
    border-collapse: collapse; /* Borders are collapsed into a single border */
}
.port_link { /* I/O Port Link Status: table inside I/O Port Link Status */
    text-align: center;
}
.port_link td { /* I/O Port Link Status: table data cellular inside I/O Port Link Status */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    vertical-align: text-bottom;
}

/* --Track Viewer-- */
.normal_map { /*map size*/
    height: 600px;
    width: 100%;
}
.sidebar { /*sidebar menu*/
    background-color: #EEEEFF;
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    padding: 10px 5px;
    color: #555555;
}
.sidebar a { /*link in the sidebar menu*/
    color: inherit;
    border-left: 5px solid #00BBFF;
    padding-left: 10px;
    font-size: 18px;
}
.sidebar td:hover { /*Mouse over link in the sidebar menu*/
    color: #FFFFFF;
    background-color: #00BBFF;
}
.switchbutton { /*Switch button to show or hide the sidebar*/
    background-color: #EEEEFF;
    border: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    cursor: pointer;
}
.close { /*Close button in APIkey panel and detail panel*/
    float: right;
    display: inline-block;
    padding: 2px 5px;
    background: #ccc;
    cursor: pointer;
}
.detainpanel { /*Detail panel is used to show detail information, and its text will show on the right.*/
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: absolute;
    background-color: pink;
}
.speedpanel { /*Left panel inside detail panel*/
    width: 80%;
    height: 100%;
    float: left;
    overflow: hidden;
    background-color: #FFFFFF;
}
.plotpanel { /*Time-speed graph inside speedpanel*/
    width: 100%;
    height: 180px;
}
.settingpanel { /*Panel for "Show from GPX file" and "Advanced setting"*/
    width: 30%;
    overflow: auto;
    background-color: #FFFFFF;
    padding: 10px;
}
.apikeypanel { /*Google Maps API key input panel*/
    width: 30%;
    overflow: auto;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: 2px solid #009FCC;
    padding: 10px 10px 10px 20px;
    margin-top: 50px;
}

/* --Version buttons-- */
.versionButton { /* style of version buttons */
    background-color: white;
    font-family: "Arial";
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-right: 2.5%;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.trialVersion { /* Trial Version button */
    background-color: white; 
    color: #f44336; 
    border: 2px solid #f44336;
}
.trialVersion:hover { /* Trial Version button when mouse over */
    background-color: #f44336;
    color: white;
}
.officialVersion { /* Official Version button */
    background-color: white; 
    color: #4CAF50; 
    border: 2px solid #4CAF50;
}
.officialVersion:hover { /* Official Version button when mouse over */
    background-color: #4CAF50;
    color: white;
}

/* --primx-- */
/* ALL-LINK_primx series are used in primx.htm & primx_wisp.htm, which belong to Internet Setup */
.ALL-LINK_primxtop { /*Top part of 3G/4G Connection Common Configuration*/
    background-color: #ffffff;
    border-left: 1px solid #bbbbbb;
    border-top: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
}
.ALL-LINK_primxmiddle { /*Used in many tables in Internet Setup*/
    background-color: #ffffff;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
}
.ALL-LINK_primxdown { /*Used in Dynamic IP WAN Type Configuration & WiFi Uplink WAN Type Configuration to handle the top and bottom border*/
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
}
.ALL-LINK_primx3g { /*Used in 3G/4G WAN Type Configuration */
    margin-bottom: 12px;
    background-color: #ffffff;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
}

/* used in prim.htm, primx.htm, primx_sim.htm, primx_wisp.htm, wpa.htm and wp2.htm */
.stabin td { /*inner table inside L4 table in Internet Setup*/
    border-top: 0px solid #666666;
    border-left: 0px solid #666666;
    padding: 0px 0px 1px 5px;
}

/*If the text of title is too long and break into several lines,
set these classes to align the icon and text */
.img_par1 { /* image par.gif*/
    float: left;
    margin: 0px -2px 0px -3px\9; /*only for IE*/
}
.img_par1span { /* wrap the image and text of the title */
    float: left;
    margin: 3px 0px 0px 0px
}

/* --specific text spacing-- */
/* control the text spacing */
.span_margin {
    margin: 0 0px 0 5px;
    padding: 0;
    line-height: 19px;
}
.span_margin1 {
    margin: 0 0px 0 10px;
    padding: 0;
    line-height: 19px;
}

/* --Page number-- */
.ty { /* Used in showing page number for Web Log List */
    color: #333333;
    background-position: center;
    padding: 4px;
}

/* --Notice message-- */
.warnc { /* Used for notice message in SMS */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5F7637;
    font-weight: bold;
}

/* --Host Grouping-- */
/* colresize in Trusted AP List, Host Group Configuration, and Packet Filter Rule Configuration. */
#trustap th {
    white-space: nowrap; /* Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered */
    text-overflow: ellipsis; /* Render an ellipsis ("...") to represent clipped text */
}
#trustap td {
    word-break: break-all; /* Lines may break between any two letters */
}

/* For the column "Action" in user list and group list */
.list_td {
    text-align: left;
}
.list_td input[type="button"] { /* "Edit" button */
    margin: 0px 0px 0px 5px;
}
.list_td input[type="checkbox"] { /* "Select" checkbox */
    margin: 0px 5px 0px 10px;
}

/*delete icon*/
.img_x {
    cursor: pointer;
    padding: 0 0 2px 4px;
    vertical-align: middle;
}

/* --Self-defined css-- */
/*textarea for editing self-defined css*/
.textarea_css{
    background:  #D2E9FF;
    color:  #000000;
    font-size: 16;
    font-family: sans-serif;
    font-weight: bold;
}

/* --Event Handling-- */
.evt_div_margin{ /* control "Network Status" checkbox spacing*/
    margin: 5px;
}
.evt_div_margin1{/* control other checkboxs spacing */
    margin: 2px;
}
td.evt_width1{/* control the width of first column in the table */
    width: 25%;
}
td.evt_padding {/* control padding in the table */
    padding: 4px;
}

/* =====Right panel END===== */

/* =====Wizard===== */
/* --Breadcrumb (navigation)-- */
.wb { /* whole area */
    padding: 10px;
}
.wbl { /* left area */
    color: #333333;
    background-position: center;
    text-align: left;
    font-weight: bold;
}
.wbr { /* right area */
    color: #333333;
    background-position: center;
    text-align: right;
    font-weight: bold;
}
.wbc { /* center area */
    color: #AAAAAA;
    background-position: center;
    text-align: center;
    white-space: nowrap;
    font-weight: bolder;
    letter-spacing: 0.012in;
}
.wbcs { /* font color of current page*/
    color: #5F7637;
    text-decoration: blink;
}

/* --Step instruction-- */
#dec td {
    color: #333333;
    line-height: 20px;
    text-align: left;
}
#dec th, #dec img {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
}

/* --Setup Summary Table-- */
#smytab_wiz td {
    color: #333333;
    background: #F8F8F8;
    font-size: 12px;
    font-weight: normal;
    padding: 0 4 0 4px;
    line-height: 24px;
    width: 50%;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
}
#smytab_wiz th {
    color: #333333;
    background: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    padding: 0 4 0 4px;
    line-height: 24px;
    width: 50%;
    border-top: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
}
#smytab_wiz th.smytl {
    color: #207F5E;
}
#smytab_wiz th.b_btm0, td.b_btm0 {
    border-bottom: 1px solid #bbbbbb;
}
#smytab td.w51 {
    text-align: center;
    line-height: 28px;
}
/* =====Wizard END===== */

/* =====Unauthorized page===== */
.bl { /* separation line */
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #666666;
}
/* =====Unauthorized page END===== */



/* =====新的UI Start===== */

.L4_title_cursor {cursor: move;}

#icons {
    margin: 0;
    padding: 0;
}

#icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
}

#icons span.ui-icon {
    float: left;
    margin: 0 4px;
}

.table_shade {   
   border-width:2px;
   border-color:#000000;
   border-style:dashed;
}

#menu {
    position:absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #F0F0F0;
    cursor: pointer;
}

#menu li {   
    color: #000;
    height:20px;
    padding: 4px;    
}

#menu li:hover {
    background-color: #99BCE8;
    color: #000;
}

#common_menu {
    position:absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
    background-color: #F0F0F0;
    cursor: pointer;
}

#common_menu li {   
    color: #000;
    height:20px;
    padding: 4px;    
}

#common_menu li:hover {
    background-color: #99BCE8;
    color: #000;
}

.menu-separator{
    position:absolute;
    width:1px;
    border-left:solid 1px #e0e0e0;
    background-color:white;
    z-index:2;
    height:100%;
}

.L1_mouse_color{
    background: url("agbnb1.png");
}

.L1_color{
    background: url("agbny1.png");
}

@-webkit-keyframes hvr-icon-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-icon-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.hvr-icon-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-buzz-out .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-buzz-out:hover .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon {
  -webkit-animation-name: hvr-icon-buzz-out;
  animation-name: hvr-icon-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
/* =====新的UI End===== */


/* =====Help內容 Start===== */

#help_content_page{    
    position:absolute;   
}

#help_content_up_figure{
    width:200px;
    height:20px;    
    background-image: url("help_cloud_1.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;    
}

#help_content_word{
    width:180px;
    height:auto;    
    background-image: url("help_cloud_2.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;    
    padding-left:13px;
    padding-right:7px;
    line-height:15px;
}

#help_content_down_figure{
    width:200px;
    height:20px;    
    background-image: url("help_cloud_3.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;    
}

.help_icon{    
    cursor: url("help_light.png"),auto;
}

.help_icon_ie{    
    cursor: url("help_light.ico"),auto;
}

/* =====Help內容 End===== */


/* =====popup邊框 Start===== */

.popup_background{    
    background-color: #D2DDFE;
}

.popup_border {
  border-style: solid;
  border-width: 10px;
  border-color: #BDCED6;
}

/* =====popup邊框 End===== */