@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, li, form, input {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

body {
    background-color: #f4f6f8;
    color: #000;
    font-family: 'Open Sans', Calibri, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
}

a, a:link, a:visited {
    color: #000;
    font-weight: 600;
    text-decoration: none;
}
a:hover { text-decoration: underline; }

#outerWrapper {
    background-color: #fff;
    margin: 0 auto;
    text-align: left;
    min-width: 1600px;
    width: 1500px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

#header {
    padding: 0 20px;
    height: 84px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header table { width: 100%; }
#header td { vertical-align: middle; }
#header td[align="right"] { text-align: right; }

#header img {
    height: 50px;
    width: auto;
    display: block;
}

.merheader2 {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #005EB8;
    padding: 5px 10px 0 0;
    line-height: 1;
    letter-spacing: 0.5px;
}

.merheader3 {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 11px;
    color: #666;
    padding: 4px 10px 5px 0;
    line-height: 1;
    font-style: italic;
}

.topmenu {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    text-align: left;
}

#navibar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    background-color: #005EB8;
    font-size: 12px;
}

#navibar ul { list-style: none; padding: 0 15px; }
#navibar li { display: inline; }

#navibar a {
    display: inline-block;
    padding: 8px 14px;
    text-decoration: none;
    color: #fff;
    line-height: 1.2;
    font-weight: 600;
}

#navibar a:hover {
    background-color: #003D7A;
    color: #fff;
    text-decoration: none;
}

#navibarlowerlinks {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    background-color: #005EB8;
    font-size: 12px;
    color: rgba(255,255,255,0.55); /* text separators (" | ") between the links */
}

#navibarlowerlinks ul { list-style: none; padding: 0 15px; }
#navibarlowerlinks li { display: inline; }

#navibarlowerlinks a {
    display: inline-block;
    padding: 6px 14px;
    text-decoration: none;
    color: #fff;
    line-height: 1.2;
    font-weight: 600;
}

#navibarlowerlinks a:hover {
    background-color: #003D7A;
    text-decoration: none;
}

#contentWrapper {
    min-height: 540px;
    padding: 12px 0 24px;
}

#content {
    margin: 0 24px;
    color: #000;
}

.maintext {
    font-size: 13px;
    color: #000;
    margin: 6px 12px 8px;
    line-height: 1.5;
}

h4.formspacing {
    color: #005EB8;
    font-size: 18px;
    font-weight: 600;
    text-indent: 12px;
    line-height: 30px;
    margin-top: 20px;
    padding-top: 20px;
}

#footer {
    background-color: #005EB8;
    border-top: 1px solid #003D7A;
    padding: 14px 10px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    font-size: 12px;
}

.clearFloat { clear: both; display: block; }

/* Base form controls.
   The reset above strips native input borders, so any control a page does not
   style specifically gets the rebrand look here. Page-specific rules further
   down (#filter, #login, the pricing filter tray) still take priority. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea {
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #000;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
}

select {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #000;
    font-family: inherit;
    font-size: 13px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: #005EB8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,94,184,0.2);
}

input[type="submit"],
input[type="button"],
button {
    padding: 8px 18px;
    border: 0;
    border-radius: 3px;
    background-color: #005EB8;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover { background-color: #003D7A; }
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
button:focus-visible {
    outline: 2px solid #003D7A;
    outline-offset: 2px;
}

/* dslchecker form */
#filter {
    margin: 12px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 580px;
    font-family: inherit;
    font-size: 13px;
    color: #000;
}
#filter:focus {
    border-color: #005EB8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,94,184,0.2);
}

#addressselectbox {
    margin: 0 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
    padding: 4px;
    color: #000;
    background-color: #fff;
}

#submit {
    background-color: #005EB8;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 10px 28px;
    margin: 12px 0 12px 12px;
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.5px;
}
#submit:hover { background-color: #003D7A; }

/* Login form.
   login.php emits its own <style> block in the body (old #3399cc blues,
   body background #567, 100px-wide .button). These selectors carry an
   extra id so they out-rank that block without touching the markup. */
html body { background-color: #f4f6f8; }

#outerWrapper .button {
    width: 200px;
    background-color: #005EB8;
    display: block;
    margin: 12px auto 0;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    border-radius: 3px;
    font-size: 13px;
}
#outerWrapper .button:hover { background-color: #003D7A; color: #fff; text-decoration: none; }

#content #login {
    width: 400px;
    margin: 8px auto 32px;
}

#login #triangle {
    width: 0;
    border-top: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #005EB8;
    border-left: 12px solid transparent;
    margin: 0 auto;
}

#login .login-h1 {
    background: #005EB8;
    padding: 18px 0;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #fff;
    margin: 0;
}

#login form {
    background: #f0f0f0;
    padding: 28px 24px;
}

#login input[type="text"],
#login input[type="username"],
#login input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
    color: #000;
}
#login input[type="text"]:focus,
#login input[type="username"]:focus,
#login input[type="password"]:focus {
    border-color: #005EB8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,94,184,0.2);
}

#login input[type="submit"] {
    width: 100%;
    background: #005EB8;
    border: 0;
    border-radius: 3px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.5px;
}
#login input[type="submit"]:hover { background: #003D7A; }

.save-row {
    text-align: center;
    padding: 4px 0 12px;
    font-size: 12px;
    color: #000;
}

/* Sidemenu (broadband tools list on home page) */
#sidemenu {
    list-style: none;
    margin: 16px 0 24px 24px;
    padding: 0;
    width: 280px;
    background-color: #005EB8;
    border: 1px solid #003D7A;
    border-radius: 3px;
    overflow: hidden;
    font-family: inherit;
    font-size: 13px;
}

#sidemenu li {
    border-top: 1px solid rgba(255,255,255,0.15);
}
#sidemenu li:first-child { border-top: 0; }

#sidemenu li a {
    display: block;
    padding: 9px 14px;
    color: #fff;
    background-color: #005EB8;
    text-decoration: none;
    font-weight: 600;
}

#sidemenu li a:hover {
    background-color: #003D7A;
    color: #fff;
    text-decoration: none;
}

/* ==================================================================
   Filter trays
   Used by the Pricing / Edit Packages page (and any list page with the
   "clearable" search box). The live page styles these controls with
   inline attributes and a <style> block emitted inside the body, so the
   rules below are scoped tightly enough to out-rank those without any
   change to the markup.
   ================================================================== */

.smalltext {
    font-size: 12px;
    color: #000;
    margin: 0 12px 7px;
    line-height: 1.3;
}

form > .smalltext:has(.divclearable) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    background-color: #f4f6f8;
    border: 1px solid #d8dde2;
    border-radius: 3px;
    line-height: 1;
}

form > .smalltext:has(.divclearable) strong {
    color: #005EB8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 2px;
}

form > .smalltext:has(.divclearable) label {
    margin-left: 4px;
    color: #555;
    font-weight: 600;
}

/* Search box: the wrapper carries the border; the input inside it is borderless. */
#content .divclearable {
    display: inline-flex;
    align-items: center;
    height: 28px;
    box-sizing: border-box;
    padding-right: 8px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
}
#content .divclearable:focus-within {
    border-color: #005EB8;
    box-shadow: 0 0 0 2px rgba(0,94,184,0.2);
}
#content .divclearable input[type="text"] {
    height: 100%;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 3px 0 0 3px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: #000;
}
#content .divclearable input[type="text"]:focus { box-shadow: none; }
#content a.clearlink { opacity: 0.55; }
#content a.clearlink:hover { opacity: 1; }

form > .smalltext:has(.divclearable) select {
    height: 28px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #000;
    font-family: inherit;
    font-size: 12px;
}
form > .smalltext:has(.divclearable) select:focus {
    border-color: #005EB8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,94,184,0.2);
}

form > .smalltext:has(.divclearable) input[type="submit"] {
    height: 28px;
    min-width: 88px;
    margin-left: 4px;
    background-color: #005EB8;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
form > .smalltext:has(.divclearable) input[type="submit"]:hover { background-color: #003D7A; }
form > .smalltext:has(.divclearable) input[type="submit"]:focus-visible {
    outline: 2px solid #003D7A;
    outline-offset: 2px;
}

/* "Download CSV" link above the table, shown as a secondary (outline) button. */
#content a[href*="doCSV"]:not(p a) {
    display: inline-block;
    margin: 10px 0 8px;
    padding: 0 12px;
    line-height: 24px;
    border: 1px solid #005EB8;
    border-radius: 3px;
    background-color: #fff;
    color: #005EB8;
    font-size: 12px;
}
#content a[href*="doCSV"]:not(p a):hover {
    background-color: #005EB8;
    color: #fff;
    text-decoration: none;
}

/* ==================================================================
   Data tables (.styled-table)
   ================================================================== */

#content table.styled-table {
    width: 100%;
    min-width: 0;
    margin: 10px 0 16px;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d8dde2;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
}

#content .styled-table thead tr { background-color: #005EB8; }

#content .styled-table thead td {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 10px;
    background-color: #005EB8;
    color: #fff;
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
}
#content .styled-table thead td:first-child { border-top-left-radius: 2px; }
#content .styled-table thead td:last-child  { border-top-right-radius: 2px; }

#content .styled-table td {
    padding: 7px 10px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

#content .styled-table tbody tr,
#content .styled-table tbody tr:last-of-type { border: 0; }
#content .styled-table tbody tr:nth-of-type(odd)  { background-color: #fff; }
#content .styled-table tbody tr:nth-of-type(even) { background-color: #f4f6f8; }
#content .styled-table tbody tr:hover {
    background-color: #E6EFF8 !important; /* the page's own <style> block marks its hover !important */
    color: #000;
}
#content .styled-table tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; }
#content .styled-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 2px; }

#content .styled-table a { color: #005EB8; white-space: nowrap; }
#content .styled-table a:hover { color: #003D7A; }

/* Pricing page only (identified by its Reseller filter):
   the package name leads the row, and numeric headings sit over their figures. */
#content:has(#resellerID) .styled-table tbody td:first-child {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #555;
}
#content:has(#resellerID) .styled-table tbody td:nth-child(2) { font-weight: 600; }
#content:has(#resellerID) .styled-table thead td:nth-child(n+7):nth-child(-n+14) { text-align: right; }

/* ==================================================================
   List pages: headings, pagination rows, tray extras
   ================================================================== */

#content h3 {
    margin: 8px 0 2px;
    color: #005EB8;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    text-indent: 12px;
}

/* "Showing record x to y" and Next Page | Show All | Main Menu */
#content p.smalltext { color: #555; }
#content p.smalltext a { color: #005EB8; }
#content p.smalltext a:hover { color: #003D7A; }

/* The filter forms leave stray " | " text nodes between the tray and the
   table. Text sitting directly inside such a form (never inside the tray
   itself) is collapsed; the tray then restores its own size and colour. */
#content form:has(> .smalltext .divclearable) {
    font-size: 0;
    color: transparent;
}
form > .smalltext:has(.divclearable) {
    font-size: 12px;
    color: #000;
}
form > .smalltext:has(.divclearable) input[type="text"] {
    height: 28px;
    min-width: 72px; /* inline widths such as the 56px month picker clip their value */
    padding: 0 8px;
    font-size: 12px;
}
form > .smalltext:has(.divclearable) input[type="checkbox"] {
    margin: 0 4px 0 0;
    vertical-align: middle;
}
/* Secondary action beside Search, e.g. the CSV "Download" button on IP Report. */
form > .smalltext:has(.divclearable) input[type="submit"][name="doCSV"] {
    background-color: #fff;
    color: #005EB8;
    box-shadow: inset 0 0 0 1px #005EB8;
}
form > .smalltext:has(.divclearable) input[type="submit"][name="doCSV"]:hover {
    background-color: #005EB8;
    color: #fff;
}
/* Lone action buttons such as "Add user" that sit in a form of their own. */
#content form > input[type="submit"]:only-child { margin: 8px 12px; }

/* ==================================================================
   List tables (.adsltable): Broadband Reports, Radius users / log /
   data, IP Report, Usage. On the live site the row classes carry
   meaning: 1/2 neutral, 3/4 OK (green), 5/6 alert (red), 7/8 warning
   (orange). Pete pointed out that staff rely on those full-row colours, 
   so these are kept exactly as they were. 
   
   The header uses the darker brand blue so it still reads as a header 
   above the blue rows.
   ================================================================== */

#content table.adsltable {
    width: 100%;
    margin: 10px 0 16px;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d8dde2;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
}

#content .adsltable tr.adsltableheader { background-color: #003D7A; }
#content .adsltable tr.adsltableheader > td,
#content .adsltable tr.adsltableheader > th,
#content .adsltable thead > tr > td,
#content .adsltable thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    background-color: #003D7A;
    color: #fff;
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
    line-height: 1.35;
}
#content .adsltable tr.adsltableheader > :first-child { border-top-left-radius: 2px; }
#content .adsltable tr.adsltableheader > :last-child  { border-top-right-radius: 2px; }
#content .adsltable tr:last-child > td:first-child { border-bottom-left-radius: 2px; }
#content .adsltable tr:last-child > td:last-child  { border-bottom-right-radius: 2px; }

#content .adsltable td {
    padding: 7px 10px;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}
/* Full-row colours carried over from the live site. */
#content .adsltable tr.adsltable1 { background-color: #477BAF; }
#content .adsltable tr.adsltable2 { background-color: #336ca6; }
#content .adsltable tr.adsltable3 { background-color: #519548; }
#content .adsltable tr.adsltable4 { background-color: #498641; }
#content .adsltable tr.adsltable5 { background-color: #B8002E; }
#content .adsltable tr.adsltable6 { background-color: #A30029; }
#content .adsltable tr.adsltable7 { background-color: #FF9900; }
#content .adsltable tr.adsltable8 { background-color: #FFA319; }

#content .adsltable tr:is(.adsltable1, .adsltable2, .adsltable3, .adsltable4,
                          .adsltable5, .adsltable6, .adsltable7, .adsltable8) > td { color: #fff; }
#content .adsltable tr:is(.adsltable1, .adsltable2, .adsltable3, .adsltable4,
                          .adsltable5, .adsltable6, .adsltable7, .adsltable8) a {
    color: #fff;
    text-decoration: underline;
}

/* Hover: lighten the row without losing its colour. Rows with no colour class get the usual tint. */
#content .adsltable tbody tr:not(.adsltableheader):hover > td { box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0.15); }
#content .adsltable tbody tr:not([class]):hover { background-color: #E6EFF8; }

#content .adsltable a { color: #005EB8; }
#content .adsltable a:hover { color: #003D7A; }
#content .adsltable tr.adsltableheader a { color: #fff; }
#content .adsltable tr.adsltableheader a:hover { color: #fff; text-decoration: underline; }

/* ==================================================================
   Broadband checker results (dslcheckerfull.php): plain h4 headings,
   label / value tables with a status cell, and bullet lists.
   ================================================================== */

#content h4:not(.formspacing) {
    margin: 14px 0 4px;
    color: #005EB8;
    font-size: 15px;
    font-weight: 600;
    line-height: 26px;
    text-indent: 12px;
}
/* The result title ("Broadband Check - address") leads the page. */
#content > h4:first-child {
    margin-top: 8px;
    font-size: 18px;
    line-height: 30px;
}

.maintext b,
.maintext strong { font-weight: 600; }

/* Label / value tables (scoped to the whole table, because the checker
   form only marks its first label cell with the class). */
#content table:has(td.head-cell1) td {
    padding: 4px 8px;
    vertical-align: top;
    line-height: 1.4;
}
#content table:has(td.head-cell1) td:first-child { padding-left: 12px; }
#content form table:has(td.head-cell1) td { vertical-align: middle; }
#content td.head-cell1 {
    width: 140px;
    white-space: nowrap;
}
#content td.head-cell1 b { font-weight: 600; }

/* Status cells: same greens / reds / blue as the list tables. */
#content td.OKCell,
#content td.BadCell,
#content td.InfoCell {
    min-width: 96px;
    padding: 4px 10px;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
#content td.OKCell   { background-color: #519548; }
#content td.BadCell  { background-color: #B8002E; }
#content td.InfoCell { background-color: #005EB8; }

/* Bullet lists in content (the reset above removes their indent). */
#content ul:not(#sidemenu) {
    padding-left: 12px;
    list-style: disc inside;
}
#content ul:not(#sidemenu) > li {
    margin: 2px 0;
    line-height: 1.5;
}