/* =====General===== */
body {
    margin: 0;
    padding: 0;
    background-color: #f6f6f6; /* 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 { /* background image of login page */
    /*background: url("ag213.gif");*/
    background-color: #005C9F;
}
.idlt0 { /* backgroud for left menu and login message box */
    background: url("ag214.gif");
    border-radius: 8px;
}

/* --Login/Logout Button-- */
.login_button { /* Login of the button */
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF; /*text color */
    background: #14BEF0; /* background color */
    border: 1px #FFFFFF solid;
    border-radius:1px;
    font-size: 12px;
    font-weight: bold;
    width: 92px;
    height: 26px;
    cursor: pointer;
    margin: 0 5px 0 0;
}
.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;
}

/* --Message text-- */
.adminbox { /* text in login box */
    color: #FFFFF6;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    padding-left: 130px;
    padding-right: 4px;
    padding-top: 40px;
}

/* --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: 0 2px 0 20px;
    position:absolute;
    left:0px;
    top:25px;
    margin: 0 0 0 5px
}
/* =====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: url("ag213.gif");
}
/* =====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-- */
/*same as .idlt0*/

/* --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;
}

/* --Buttons-- */
.handlk { /* For the L1 and L2 buttons in left menu */
    cursor: pointer;
}
/* =====Left panel END===== */


/* =====Right panel===== */
/* --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; */ /* Commented by Balpreet Saran */
    background-color: #ffffff; /* Added by Balpreet Saran */
}
/* --Fancybox-- */
/* ALL-LINK is used for fancybox in storage mode */
.fancybox-background { /* fancybox background */
    position: relative;
    background: #6DA0DE;
    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;
}
/* --L3 buttons-- */
.L3menu { /*background of the L3 buttons bar */
/*    background-color: #6A6DDF; */ /* Commented by Balpreet Saran */
    background-color: #005C9F; /* Added by Balpreet Saran */
}
.LM3 { /*L3 buttons which aren't selected*/
    background: #7EC0EE;
    height: 25px;
    margin: 5px 2px 0px 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 5px 10px 0px 10px;
    text-align: center;
    vertical-align: bottom;
}
.LM3_mouse { /*L3 button: selected or mouse over*/
    background: #FFFFFF;
    height: 25px;
    margin: 5px 2px 0px 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 5px 10px 0px 10px;
    text-align: center;
/*    vertical-align: bottom; */ /* Commented by Balpreet Saran */
    vertical-align: middle; /* Added by Balpreet Saran */
}
.LM3 a { /*font color of L3 button not on page*/
    font-size: 13px;
    color: #FFFFFF;
}
.LM3_mouse a { /*font color of L3 button on page*/
    font-size: 13px;
    color: #000000;
}
.LM3_hr { /*horizontal line below L3 menu*/
/*    height: 2px; 
    background: url("sb0.gif") repeat-x; */  /* Commented by Balpreet Saran */
    display: none; /* Added by Balpreet Saran */
}

/* --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: 2px solid #000000;
}
/* Added by Balpreet Saran */
/* End added by Balpreet Saran */
.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 #666666;
}
.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 #666666;
    border-left: 1px solid #666666;
}
.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 #666666;
}
.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 #666666;
}
.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 #666666;
    border-left: 1px solid #666666;
    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 #A3A3A3;
}
.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 #A3A3A3;
}
.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 #A3A3A3;
    border-left: 1px solid #A3A3A3;
}
.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 #A3A3A3;
    border-left: 1px solid #A3A3A3;
    border-bottom: 1px solid #A3A3A3;
}

/* --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;
}

/* --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_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: 2px solid #000000;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
}
.ALL-LINK_primxmiddle { /*Used in many tables in Internet Setup*/
    background-color: #ffffff;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
}
.ALL-LINK_primxdown { /*Used in Dynamic IP WAN Type Configuration & WiFi Uplink WAN Type Configuration to handle the top and bottom border*/
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}
.ALL-LINK_primx3g { /*Used in 3G/4G WAN Type Configuration */
    margin-bottom: 12px;
    background-color: #ffffff;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

/* 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
}
/* --control div and img of spacing in Help pages-- */
.div_top{
    margin-top:10px;
}
.img_right{
    margin-right:10px ;
    height: 10;
}
/* --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-- */
/*fancybox background is the same as .mainbackground*/
/*textarea for editing self-defined css*/
.textarea_css{
    background:  #D2E9FF;
    color:  #000000;
    font-size: 16;
    font-family: sans-serif;
    font-weight: bold;
}
/* =====Right panel END===== */


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