/* ===============================================================
   WEB WIZ SHARED STYLES (ww_modern.css)
   One style sheet for every Web Wiz site. It lives in this site's
   includes folder and is also served as
   https://static.webwiz.net/includes/ww_modern.css
   The shared header loads it, so a page needs no link of its own.
   When this file changes, raise the ?v= number in the header so
   browsers fetch the new copy.

   Parts, in order:  fonts  |  header (.wwh)  |  footer (.wwf)  |
   page building blocks (.wwm)  |  product pages (.wwp)  |
   domain names (.wwd)  |  availability checker (.wwc)
   =============================================================== */

/* The same Open Sans as default_style.css, so the header and footer look the
   same on a site whose own style sheet does not load it */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/open-sans-v44-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-v44-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/open-sans-v44-latin-600.woff2') format('woff2'); }

.wwh, .wwf, .wwfCtaWrap, .wwhCrumb { font-family: 'Open Sans', Arial, sans-serif; }


/* ===============================================================
   HEADER (.wwh)
   =============================================================== */
/* A white bar that stays at the top: logo, the menus, then Knowledgebase,
   search and Login. On the main site the menus sit beside the logo; in the
   Client Area and Network Tools, which have more and longer menus, they sit
   on a row of their own (.wwhTwo). */

body { margin-top: 0; }

.wwh { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #E3E9E6; }
.wwh * { box-sizing: border-box; }
.wwhIn { position: relative; display: flex; align-items: center; gap: 26px; max-width: 1280px; height: 90px; margin: 0 auto; padding: 0 16px; }
.wwhLogo { flex: 0 0 auto; line-height: 0; }
.wwhLogo img { display: block; width: 262px; height: 66px; }
.wwhChk { position: absolute; opacity: 0; pointer-events: none; }

.wwhNav { display: flex; flex: 1 1 auto; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wwhNav > li { position: relative; margin: 0; padding: 0; }
.wwh .wwhHead, .wwh a.wwhHead:visited { display: block; padding: 10px 14px; border-radius: 8px; color: #1F3529; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; }
label.wwhHead::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 9px; border-right: 2px solid #7C8C85; border-bottom: 2px solid #7C8C85; transform: rotate(45deg); }
.wwh .wwhNav > li:hover > .wwhHead { background: #EEF4F1; color: #1F3529; text-decoration: none; }

/* The panel that drops down. The gap above it is padding, so the mouse can cross it */
.wwhDrop { display: none; position: absolute; top: 100%; left: -6px; z-index: 60; padding-top: 16px; }
.wwhNav > li:hover > .wwhDrop, .wwhNav > li:focus-within > .wwhDrop { display: block; }
.wwhNav > li:nth-last-child(-n+2):not(:nth-child(-n+3)) > .wwhDrop { left: auto; right: -6px; }
.wwhPanel { display: grid; gap: 4px 18px; min-width: 290px; padding: 12px; border: 1px solid #E3E9E6; border-radius: 14px; background: #FFFFFF; box-shadow: 0 20px 44px rgba(20,40,35,0.16); }
.wwhPanel2 { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
.wwhPanel ul { margin: 0; padding: 0; list-style: none; }
.wwhPanel li { margin: 0; padding: 0; }
.wwhGroup { display: block; padding: 8px 12px 6px 12px; color: #6B7773; font-size: 12.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; }
.wwh .wwhPanel a, .wwh .wwhPanel a:visited { display: block; padding: 10px 12px; border-radius: 8px; color: #1A1A1A; font-size: 15.5px; font-weight: normal; line-height: 1.4; text-decoration: none; transition: none; white-space: nowrap; }
.wwh .wwhPanel a:hover, .wwh .wwhPanel a:visited:hover { background: #EEF4F1; color: #2A4536; text-decoration: none; }

.wwhSide { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-left: auto; }
.wwh a.wwhLink, .wwh a.wwhLink:visited { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; color: #1F3529; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.wwh a.wwhLink:hover, .wwh a.wwhLink:visited:hover { background: #EEF4F1; color: #1F3529; text-decoration: none; }
.wwhLink svg { display: block; width: 21px; height: 21px; fill: currentColor; }
.wwh a.wwhBtn, .wwh a.wwhBtn:visited { display: inline-block; margin-left: 8px; padding: 11px 26px; border: 1px solid #2A4536; border-radius: 8px; background: #2A4536; color: #FFFFFF; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.wwh a.wwhBtn:hover, .wwh a.wwhBtn:visited:hover { background: #4C7A60; border-color: #4C7A60; color: #FFFFFF; text-decoration: none; }
.wwh a.wwhBtnLine, .wwh a.wwhBtnLine:visited { background: #FFFFFF; color: #2A4536; }
.wwh a.wwhBtnLine:hover, .wwh a.wwhBtnLine:visited:hover { background: #EEF4F1; border-color: #2A4536; color: #1A1A1A; }
.wwhBurger { display: none; width: 46px; height: 44px; margin-left: 6px; align-items: center; justify-content: center; border: 1px solid #C5CFCB; border-radius: 8px; cursor: pointer; }
.wwhBurger svg { display: block; width: 24px; height: 24px; fill: #2A4536; }

/* ---------- The Client Area and Network Tools: the menus on a row of their own ---------- */

@media screen and (min-width : 1121px) {
	/* Signed in on the main site there are two buttons (Sign Out and Login): Knowledgebase drops to its icon so the row still fits */
	.wwh:not(.wwhTwo):has(a.wwhBtnLine) .wwhLink span { display: none; }
	.wwh:not(.wwhTwo):has(a.wwhBtnLine) a.wwhBtn { margin-left: 4px; padding: 11px 20px; }
	/* Network Tools: one row, menus a touch tighter so six fit beside the logo */
	.wwhNT .wwhIn { gap: 16px; }
	.wwh.wwhNT .wwhHead { padding: 10px 10px; font-size: 15.5px; }
	.wwhNT label.wwhHead::after { margin-left: 7px; }
}
/* Client Area on a wide screen: one row. The menu names lose their extra words (.wwhX) and Knowledgebase is the icon only, so it fits beside the logo. */
@media screen and (min-width : 1400px) {
	.wwhTwo .wwhIn { gap: 10px; }
	.wwh.wwhTwo .wwhHead, .wwh.wwhTwo a.wwhHead:visited { padding: 10px 7px; font-size: 15px; }
	.wwhTwo label.wwhHead::after { margin-left: 7px; }
	.wwhTwo .wwhX, .wwhTwo .wwhLink span { display: none; }
	.wwh.wwhTwo a.wwhBtn, .wwh.wwhTwo a.wwhBtn:visited { margin-left: 2px !important; padding: 10px 14px !important; font-size: 15px; }
}
/* Client Area on a narrower desktop: two rows. The logo row scrolls away, the menu row stays at the top of the screen. */
@media screen and (min-width : 1121px) and (max-width : 1399px) {
	.wwhTwo { top: -87px; }
	.wwhTwo .wwhIn { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 12px; }
	.wwhTwo .wwhNav { order: 3; flex: 1 1 100%; margin: 8px -14px 0 -14px; padding: 4px 0; border-top: 1px solid #EEF2F1; }
	.wwhTwo .wwhDrop { padding-top: 6px; }
}

/* ---------- The breadcrumb trail under the bar (inner pages) ---------- */

.wwhCrumb { padding: 18px 16px 0 16px; color: #8A9690; font-size: 14px; line-height: 1.6; }
#breadcrumb.wwhCrumb a, #breadcrumb.wwhCrumb a:visited { color: #55635D; font-size: 14px; text-decoration: none; }
#breadcrumb.wwhCrumb a:hover, #breadcrumb.wwhCrumb a:visited:hover { color: #0062A6; text-decoration: underline; }
#breadcrumb.wwhCrumb > span > span:last-child a { color: #1F3529; font-weight: 600; }
.wwhCrumb i { margin: 0 8px; color: #B0BAB5; font-style: normal; }

/* The old header gave every page at least this much height */
.wwhBody { min-height: 340px; }
/* Some sites (the blog) float their columns: the page block must hold them and the footer must start below them */
.wwhBody::after { content: ""; display: block; clear: both; }
.wwfCtaWrap, .wwf { clear: both; }

@media screen and (max-width : 1120px) {
	.wwhIn { height: 84px; gap: 12px; }
	.wwhBurger { display: flex; }
	.wwhNav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 84px); overflow-y: auto; padding: 6px 16px 18px 16px; border-bottom: 1px solid #E3E9E6; background: #FFFFFF; box-shadow: 0 18px 30px rgba(20,40,35,0.12); }
	#wwhMenu:checked ~ .wwhNav { display: block; }
	.wwh .wwhHead, .wwh a.wwhHead:visited { padding: 15px 4px; border-bottom: 1px solid #EEF2F1; border-radius: 0; font-size: 17px; }
	label.wwhHead::after { float: right; margin: 7px 6px 0 0; }
	.wwh .wwhNav > li:hover > .wwhHead { background: none; }
	.wwhDrop, .wwhNav > li:hover > .wwhDrop, .wwhNav > li:focus-within > .wwhDrop { display: none; position: static; padding: 0; }
	.wwhNav > li > .wwhChk:checked ~ .wwhDrop { display: block; }
	.wwhPanel, .wwhPanel2 { grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 6px 0 10px 6px; border: 0; border-radius: 0; box-shadow: none; }
	.wwh .wwhPanel a, .wwh .wwhPanel a:visited { padding: 11px 10px; font-size: 16.5px; white-space: normal; }
}

@media screen and (max-width : 620px) {
	.wwhIn { height: 60px; padding: 0 10px; gap: 6px; }
	.wwhLogo img { width: 131px; height: 33px; }
	.wwhLink span { display: none; }
	.wwh a.wwhLink { padding: 8px 7px; }
	.wwh a.wwhBtn { margin-left: 2px; padding: 8px 13px; font-size: 15px; }
	.wwhBurger { width: 42px; height: 40px; margin-left: 4px; }
	.wwhSide { gap: 2px; }
	.wwhNav { max-height: calc(100vh - 60px); }
}


/* ===============================================================
   FOOTER (.wwf)
   =============================================================== */

/* A green panel promoting the servers sits half over the top of a deep green
   footer: links in columns, then the company details. No picture. */

.wwfCtaWrap { position: relative; z-index: 2; max-width: 1280px; margin: 70px auto -78px auto; padding: 0 16px; box-sizing: border-box; }
.wwfCta { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; padding: 38px 44px; border-radius: 16px; background: #2F5A44; background: linear-gradient(120deg, #2A4536 0%, #2F6B4C 55%, #2E8B57 100%); box-shadow: 0 18px 40px rgba(20,40,35,0.28); color: #FFFFFF; box-sizing: border-box; }
.wwfCta h2 { margin: 0 0 6px 0; color: #FFFFFF; font-size: 28px; font-weight: 600; line-height: 1.25; }
.wwfCta p { margin: 0; color: #E3F0E9; font-size: 18px; line-height: 1.5; }
.wwfCtaBtns { display: flex; flex-wrap: wrap; gap: 12px; }
.wwfCta a, .wwfCta a:visited { display: inline-block; padding: 13px 28px; border: 1px solid #FFC83D; border-radius: 8px; background: #FFC83D; color: #1A1A1A; font-size: 17px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.wwfCta a:hover, .wwfCta a:visited:hover { border-color: #FFD76B; background: #FFD76B; color: #1A1A1A; text-decoration: none; }
.wwfCta a.wwfCtaLine, .wwfCta a.wwfCtaLine:visited { border-color: rgba(255,255,255,0.7); background: transparent; color: #FFFFFF; }
.wwfCta a.wwfCtaLine:hover, .wwfCta a.wwfCtaLine:visited:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.14); color: #FFFFFF; }

.wwf { background-color: #13231B; background-image: radial-gradient(900px 420px at 88% 0%, rgba(46,139,87,0.30), rgba(46,139,87,0) 62%), radial-gradient(760px 380px at 0% 100%, rgba(46,139,87,0.16), rgba(46,139,87,0) 62%); color: #B9D3C5; font-size: 15.5px; line-height: 1.6; }
.wwf * { box-sizing: border-box; }
.wwfNoCta { margin-top: 56px; }
.wwfNoCta .wwfIn { padding-top: 56px; }
.wwfIn { max-width: 1280px; margin: 0 auto; padding: 140px 16px 0 16px; }
.wwfCols { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 34px 40px; padding: 0 0 46px 0; }
.wwfBrand strong { display: block; margin: 0 0 8px 0; color: #FFFFFF; font-size: 28px; font-weight: 600; line-height: 1.2; }
.wwfBrand p { max-width: 290px; margin: 0 0 20px 0; color: #B9D3C5; font-size: 15.5px; }
.wwfSocial { display: flex; gap: 10px; }
.wwf .wwfSocial a, .wwf .wwfSocial a:visited { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.24); border-radius: 50%; color: #FFFFFF; font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; text-decoration: none; }
.wwf .wwfSocial a:hover, .wwf .wwfSocial a:visited:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.14); color: #FFFFFF; text-decoration: none; }
.wwfCol h3 { margin: 6px 0 16px 0; color: #8FD3AE; font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; }
.wwfCol ul { margin: 0; padding: 0; list-style: none; }
.wwfCol li { margin: 0 0 11px 0; padding: 0; }
.wwf .wwfCol a, .wwf .wwfCol a:visited { color: #DCE9E2; font-size: 15.5px; text-decoration: none; }
.wwf .wwfCol a:hover, .wwf .wwfCol a:visited:hover { color: #FFFFFF; text-decoration: underline; }
.wwfLegal { padding: 22px 0 26px 0; border-top: 1px solid rgba(255,255,255,0.13); color: #8CA79A; font-size: 13.5px; line-height: 1.7; }
.wwfLegal p { margin: 0 0 6px 0; }
.wwfLegal p:last-child { margin: 0; color: #B9D3C5; }

@media screen and (max-width : 900px) {
	.wwfCta { padding: 28px 24px; }
	.wwfCta h2 { font-size: 24px; }
	.wwfCols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wwfBrand { grid-column: 1 / -1; }
}

@media screen and (max-width : 600px) {
	.wwfCtaWrap { padding: 0 10px; }
	.wwfCta a { flex: 1 1 100%; text-align: center; }
	.wwfCtaBtns { width: 100%; }
}


/* ===============================================================
   BASE LAYER (.wwhBody): every page that has NOT been rebuilt.
   The header opens a block with this class around the page, so a
   page gets these rules with no change to the page itself. They
   only tidy what the old pages already have: links, headings, the
   grey and green table cells, the side bar, code boxes, screen
   shots and buttons. Rebuilt pages sit in .wwm and are not reached
   by the table rules here, which all start at ".wwhBody > table".
   =============================================================== */

.wwhBody { color: #1A1A1A; }
.wwhBody > table { width: calc(100% - 24px); margin-left: 12px; margin-right: 12px; }
/* Pages whose heading and text sit straight in the block, not in a table */
.wwhBody:has(> h1) { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.wwhBody:has(> h1) > table { margin-left: 0; margin-right: 0; }
.wwhBody:has(> h1) > .wwhCrumb { margin-left: -16px; margin-right: -16px; }
.wwhBody select { max-width: 100%; }
/* Price cells at the top of the plan comparison tables (colocation, forum hosting) */
.wwhBody > table td[bgcolor] div.hostingPackagePrice { height: auto; padding: 0 0 14px 0; color: #1F3529; font-size: 25px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.wwhBody > table td[bgcolor] div.hostingPackagePrice .smText { font-weight: normal; }
/* The plan icons above those prices (forum hosting): one is wrapped differently in the page, make all three sit the same */
.wwhBody > table td[bgcolor] span.hostingPackagePrice { display: block; height: auto; font-size: 0; line-height: 0; }
.wwhBody > table td[bgcolor] span.hostingPackagePrice + br, .wwhBody > table td[bgcolor] > img[width="88"] + br { display: none; }
.wwhBody > table td[bgcolor] span.hostingPackagePrice img, .wwhBody > table td[bgcolor] > img[width="88"] { display: block; float: none; margin: 8px auto 0 auto; }
/* The plans block at the top of a comparison table (forum hosting, colocation): its first cell is an empty corner,
   so the frame goes round the plan columns only, not round the empty corner */
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) { border: 0; border-radius: 0; background: transparent !important; box-shadow: none; overflow: visible; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:first-child > td[rowspan="2"]:first-child { border: 0; background: transparent !important; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:first-child > td[bgcolor="#2A4536"] { border-bottom: 0; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:first-child > td:nth-child(2) { border-top-left-radius: 10px; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:first-child > td:last-child { border-top-right-radius: 10px; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:nth-child(2) > td { border-bottom: 1px solid #DDE5E3; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:nth-child(2) > td:first-child { border-left: 1px solid #DDE5E3; border-bottom-left-radius: 10px; }
.wwhBody > table table:has(> tbody > tr:first-child > td[rowspan="2"]:first-child) > tbody > tr:nth-child(2) > td:last-child { border-right: 1px solid #DDE5E3; border-bottom-right-radius: 10px; }
.wwm.wwmIn .wwmGrid2 { margin-top: 30px; }

/* Form panels (.greyTable) and the order pages: choose a plan, configure a server, your details, confirm */
.wwhBody > table table.greyTable:not(:has(.search_box_dom)) { border: 1px solid #DDE5E3; border-radius: 12px; border-collapse: separate; border-spacing: 0; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); }
.wwhBody > table table.greyTable > caption { padding: 0 2px 8px 2px; color: #1F3529; font-size: 19px; font-weight: 600; line-height: 1.3; text-align: left; }
.wwhBody > table table.greyTable td.tblBorderTop, .wwhBody > table table.greyTable td.tblBorderBottom { height: 6px; padding: 0; border: 0; }
.wwhBody > table table.greyTable > tbody > tr > td:not([class^="tblBorder"]) { padding: 10px 22px; line-height: 1.6; }
.wwhBody > table table.greyTable select, .wwhBody > table table[class^="tableHighlight"] select { height: 42px; max-width: 100%; margin: 4px 0 2px 0; padding: 0 10px; border: 1px solid #C5CFCB; border-radius: 6px; background-color: #FFFFFF; font-size: 15.5px; }
.wwhBody > table table.greyTable input[type="text"], .wwhBody > table table.greyTable input[type="password"], .wwhBody > table table.greyTable input[type="email"], .wwhBody > table table.greyTable input[type="tel"] { height: 40px; max-width: 100%; padding: 0 10px; border: 1px solid #C5CFCB; border-radius: 6px; font-size: 15.5px; box-sizing: border-box; }
.wwhBody > table table.greyTable textarea { max-width: 100%; padding: 8px 10px; border: 1px solid #C5CFCB; border-radius: 6px; font-size: 15.5px; box-sizing: border-box; }
.wwhBody > table table.greyTable select:focus, .wwhBody > table table.greyTable input:focus, .wwhBody > table table.greyTable textarea:focus { border-color: #2E8B57; outline: 2px solid #CFE8DA; }
.wwhBody > table form:has(table.greyTable) input[type="submit"], .wwhBody > table table.greyTable input[type="submit"], .wwhBody > table table[class^="tableHighlight"] input[type="submit"] { height: auto; padding: 12px 30px; border: 0; border-radius: 6px; background: #2A4536; color: #FFFFFF; font-size: 16.5px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.wwhBody > table form:has(table.greyTable) input[type="submit"]:hover, .wwhBody > table table.greyTable input[type="submit"]:hover, .wwhBody > table table[class^="tableHighlight"] input[type="submit"]:hover { background: #4C7A60; }
/* The plans to pick from */
.wwhBody > table table[class^="tableHighlight"] { width: 100%; border: 1px solid #DDE5E3 !important; border-radius: 12px; border-collapse: separate; background: #FFFFFF !important; box-shadow: 0 1px 3px rgba(20,40,35,0.07); }
.wwhBody > table table[class^="tableHighlight"]:has(input[type="radio"]:focus), .wwhBody > table table[class^="tableHighlight"]:hover { border-color: #9DB8AA !important; box-shadow: 0 8px 22px rgba(20,40,35,0.11); }
.wwhBody > table table[class^="tableHighlight"] > tbody > tr > td { padding: 20px 24px; line-height: 1.6; }
.wwhBody > table table[class^="tableHighlight"] h2 { margin: 0 0 2px 0; font-size: 21px; }
.wwhBody > table table[class^="tableHighlight"] table { width: 100%; margin: 10px 0 6px 0; }
.wwhBody > table table[class^="tableHighlight"] table td { padding: 5px 0; font-size: 16px; }
.wwhBody > table table[class^="tableHighlight"] input[type="radio"] { width: 17px; height: 17px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: #2E8B57; }
.wwhBody > table td.tblBorderTopSquare { border-top-color: #DDE5E3; }
/* Error box on the order and form pages */
.wwhBody > table table[bgcolor="#FFEDD2"] { border: 1px solid #F1C9C5; border-left: 4px solid #C0392B; border-radius: 10px; border-collapse: separate; border-spacing: 0; background: #FDF3F2; }
.wwhBody > table table[bgcolor="#FFEDD2"] td.tblBorderTop, .wwhBody > table table[bgcolor="#FFEDD2"] td.tblBorderBottom { height: 6px; padding: 0; border: 0; }
.wwhBody > table table[bgcolor="#FFEDD2"] td:not([class^="tblBorder"]) { padding: 8px 22px; line-height: 1.6; }
.wwhBody > table table[bgcolor="#FFEDD2"] h2 { color: #8E2A20; font-size: 19px; }
.wwhBody > table table[bgcolor="#FFEDD2"] h2 + br { display: none; }
.wwhBody > table table[bgcolor="#FFEDD2"] h2 img { width: 22px; height: 22px; margin-right: 6px; vertical-align: -4px; }

/* Network Tools: the form panel at the top of each tool page */
.wwhBody > table table[style*="net-tools-table-bg"] { border: 1px solid #DDE5E3; border-left: 4px solid #2E8B57; border-radius: 12px; border-collapse: separate; border-spacing: 0; background: #F4F8F6 !important; background: linear-gradient(135deg, #F2F8F4 0%, #FFFFFF 70%) !important; box-shadow: 0 4px 14px rgba(20,40,35,0.08); }
.wwhBody > table table[style*="net-tools-table-bg"] td.tblBorderTop, .wwhBody > table table[style*="net-tools-table-bg"] td.tblBorderBottom { height: 8px; padding: 0; border: 0; }
.wwhBody > table table[style*="net-tools-table-bg"] > tbody > tr > td:not([class^="tblBorder"]) { padding: 10px 22px; font-size: 16px; line-height: 1.7; }
.wwhBody > table table[style*="net-tools-table-bg"] input[type="text"], .wwhBody > table table[style*="net-tools-table-bg"] select { height: 44px; max-width: 100%; margin: 4px 0; padding: 0 12px; border: 1px solid #C5CFCB; border-radius: 6px; background-color: #FFFFFF; font-size: 16.5px; box-sizing: border-box; }
.wwhBody > table table[style*="net-tools-table-bg"] textarea { max-width: 100%; margin: 4px 0; padding: 10px 12px; border: 1px solid #C5CFCB; border-radius: 6px; background-color: #FFFFFF; font-size: 15px; box-sizing: border-box; }
.wwhBody > table table[style*="net-tools-table-bg"] input[type="text"]:focus, .wwhBody > table table[style*="net-tools-table-bg"] select:focus, .wwhBody > table table[style*="net-tools-table-bg"] textarea:focus { border-color: #2E8B57; outline: 2px solid #CFE8DA; }
.wwhBody > table table[style*="net-tools-table-bg"] input[type="button"], .wwhBody > table table[style*="net-tools-table-bg"] input[type="submit"] { height: auto; margin: 4px 6px 4px 0; padding: 12px 30px; border: 0; border-radius: 6px; background: #2A4536; color: #FFFFFF; font-size: 16.5px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.wwhBody > table table[style*="net-tools-table-bg"] input[type="button"]:hover, .wwhBody > table table[style*="net-tools-table-bg"] input[type="submit"]:hover { background: #4C7A60; }
.wwhBody > table table[style*="net-tools-table-bg"] input[type="radio"], .wwhBody > table table[style*="net-tools-table-bg"] input[type="checkbox"] { width: 17px; height: 17px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: #2E8B57; }
@media screen and (max-width: 700px) {
.wwhBody > table table[style*="net-tools-table-bg"] > tbody > tr > td:not([class^="tblBorder"]) { padding: 8px 10px; }
.wwhBody > table table[style*="net-tools-table-bg"] input[type="text"], .wwhBody > table table[style*="net-tools-table-bg"] select, .wwhBody > table table[style*="net-tools-table-bg"] textarea { width: 100%; }
}
/* Network Tools: the results a tool prints (warning and error rows, status icons, summary box) */
.wwhBody > table td[bgcolor="#FFFFC8" i], .wwhBody > table td[bgcolor="#FCE4EB" i], .wwhBody > table td[bgcolor="#DFF2E1" i], .wwhBody > table td[bgcolor="#48775E" i] { padding: 12px 16px; border-bottom: 1px solid #EAEFEE; line-height: 1.5; }
.wwhBody > table td[bgcolor="#FFFFC8" i] { background: #FFF8E1; }
.wwhBody > table td[bgcolor="#FCE4EB" i] { background: #FDF0EE; }
.wwhBody > table td[bgcolor="#DFF2E1" i] { background: #EEF7F1; }
.wwhBody > table td[bgcolor="#48775E" i] { background: #3D6650; }
.wwhBody > table table:has(> tbody > tr > td[bgcolor="#48775E" i]) { border: 1px solid #DDE5E3; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.wwhBody img[src$="network-tools/images/ok.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E6F4EC'/%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%232E8B57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wwhBody img[src$="network-tools/images/warn.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FFF1CC'/%3E%3Cpath d='M12 6.5v7' stroke='%23B87A00' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.3' r='1.5' fill='%23B87A00'/%3E%3C/svg%3E"); }
.wwhBody img[src$="network-tools/images/error.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FBE3E0'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23C0392B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wwhBody img[src$="network-tools/images/info.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E3EEF7'/%3E%3Cpath d='M12 11v6.5' stroke='%230062A6' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7' r='1.5' fill='%230062A6'/%3E%3C/svg%3E"); }
.wwhBody img[src*="network-tools/images/"][width="24"] { width: 22px; height: 22px; margin-right: 4px; vertical-align: -5px; }
.wwhBody > table div[style*="border-left:6px solid"] { margin-top: 20px !important; padding: 18px 22px !important; border: 1px solid rgba(20,40,35,0.10); border-left-width: 5px !important; border-radius: 10px; box-shadow: 0 2px 8px rgba(20,40,35,0.06); line-height: 1.6; }
.wwhBody > table div[style*="border-left:6px solid"] > div:first-child { font-size: 13px !important; letter-spacing: 0.7px; text-transform: uppercase; }
.wwhBody > table div[style*="border-left:3px solid"], .wwhBody > table div[style*="border-left:4px solid"] { border-radius: 0 8px 8px 0; }
/* The steps across the top of the order pages */
.wwSteps { margin: 26px 16px 6px 16px; }
.wwSteps ol { display: flex; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; counter-reset: wwstep; }
.wwSteps li { flex: 1 1 0; position: relative; margin: 0; padding: 40px 4px 0 4px; color: #8A9690; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; counter-increment: wwstep; }
.wwSteps li::before { content: counter(wwstep); position: absolute; top: 0; left: 50%; z-index: 1; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #E6ECEA; color: #55635D; font-size: 14px; line-height: 30px; }
.wwSteps li::after { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: #DDE5E3; }
.wwSteps li:first-child::after { display: none; }
.wwSteps li.wwStepDone { color: #2A4536; }
.wwSteps li.wwStepDone::before { content: "\2713"; background: #2E8B57; color: #FFFFFF; }
.wwSteps li.wwStepOn { color: #1F3529; }
.wwSteps li.wwStepOn::before { background: #2A4536; color: #FFFFFF; box-shadow: 0 0 0 4px #DCEBE2; }
.wwSteps li.wwStepDone::after, .wwSteps li.wwStepOn::after { background: #2E8B57; }
.wwSteps + br { display: none; }
/* Every field and button on the order pages (the pages that carry the steps) */
.wwSteps ~ table input[type="text"], .wwSteps ~ table input:not([type]), .wwSteps ~ table input[type="password"], .wwSteps ~ table input[type="email"], .wwSteps ~ table input[type="tel"], .wwSteps ~ table input[type="number"], .wwSteps ~ table select { height: 40px; max-width: 100%; margin: 3px 0; padding: 0 10px; border: 1px solid #C5CFCB; border-radius: 6px; background-color: #FFFFFF; font-size: 15.5px; box-sizing: border-box; }
.wwSteps ~ table textarea { max-width: 100%; padding: 8px 10px; border: 1px solid #C5CFCB; border-radius: 6px; font-size: 15.5px; box-sizing: border-box; }
.wwSteps ~ table input[type="text"]:focus, .wwSteps ~ table input[type="password"]:focus, .wwSteps ~ table select:focus, .wwSteps ~ table textarea:focus { border-color: #2E8B57; outline: 2px solid #CFE8DA; }
.wwSteps ~ table input[type="submit"], .wwSteps ~ table input[type="button"] { height: auto; padding: 11px 26px; border: 0; border-radius: 6px; background: #2A4536; color: #FFFFFF; font-size: 16px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.wwSteps ~ table input[type="submit"]:hover, .wwSteps ~ table input[type="button"]:hover { background: #4C7A60; }
.wwSteps ~ table input[type="checkbox"], .wwSteps ~ table input[type="radio"] { width: 17px; height: 17px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: #2E8B57; }
.wwSteps ~ table td { line-height: 1.6; }
.wwSteps ~ table h1 { margin-top: 14px; }
.wwSteps ~ table table caption { padding: 0 2px 8px 2px; color: #1F3529; font-size: 19px; font-weight: 600; text-align: left; }
@media screen and (max-width: 700px) {
.wwSteps { margin: 18px 6px 4px 6px; }
.wwSteps li { font-size: 12px; }
.wwSteps ~ table select { max-width: calc(100vw - 96px); }
.wwSteps ~ table input[type="text"], .wwSteps ~ table input:not([type]), .wwSteps ~ table input[type="password"] { max-width: 50vw !important; }
.wwSteps ~ table table.greyTable > tbody > tr > td:not([class^="tblBorder"]) { padding: 10px 8px; }
.wwSteps ~ table td + td select { max-width: 50vw !important; }
.wwSteps ~ table table[width="500"], .wwSteps ~ table table[width="450"], .wwSteps ~ table table[width="400"], .wwSteps ~ table table[width="600"] { width: 100%; }
.wwSteps ~ table span[style*="nowrap"] { display: block; margin: 0 0 6px 0 !important; }
.wwSteps ~ table td[align="right"] { white-space: normal; }
}
@media screen and (max-width: 700px) {
.wwhBody td[nowrap], .wwhBody td[style*="nowrap"], .wwhBody span[style*="nowrap"] { white-space: normal !important; }
.wwhBody select, .wwhBody > table table.greyTable select, .wwhBody > table table[class^="tableHighlight"] select { max-width: calc(100vw - 96px); }
.wwhBody > table table.greyTable > tbody > tr > td:not([class^="tblBorder"]) { padding: 10px 14px; }
}
:where(.wwhBody) a, :where(.wwhBody) a:visited { color: #0062A6; }
:where(.wwhBody) a:hover, :where(.wwhBody) a:visited:hover { color: #004C82; text-decoration: underline; }
:where(.wwhBody) h1 { margin: 8px 0 4px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.2; color: #1F3529; }
:where(.wwhBody) h2 { font-size: 23px; font-weight: 600; line-height: 1.35; color: #1F3529; }
.wwhBody > table .text, .wwhBody > table .heading, .wwhBody > table .lgText { line-height: 1.65; }

/* Tables built from the old coloured cells */
.wwhBody > table table:has(> tbody > tr > td[bgcolor="#2A4536"]), .wwhBody > table table.dynamicTable { border: 1px solid #DDE5E3; border-radius: 10px; border-collapse: separate; border-spacing: 0; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); overflow: hidden; }
.wwhBody > table td[bgcolor="#2A4536"] { padding: 12px 16px; background: #2A4536; }
.wwhBody > table td[bgcolor="#2A4536"] h2 { color: #FFFFFF; font-size: 18px; }
.wwhBody > table td[bgcolor="#E7EEEF"], .wwhBody > table td[bgcolor="#F0F7F7"] { padding: 12px 16px; border-bottom: 1px solid #EAEFEE; line-height: 1.5; }
.wwhBody > table td[bgcolor="#E7EEEF"] { background: #FFFFFF; }
.wwhBody > table td[bgcolor="#F0F7F7"] { background: #F6F9F8; }
.wwhBody > table tr:last-child > td[bgcolor="#E7EEEF"], .wwhBody > table tr:last-child > td[bgcolor="#F0F7F7"] { border-bottom: 0; }
.wwhBody > table em.yes { width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E6F4EC'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%232E8B57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 26px 26px; }

/* The side bar on knowledgebase pages */
.wwhBody #rightSideBar { width: 250px; margin: 10px 0 22px 30px; padding: 16px 20px 18px 20px; border: 1px solid #DDE5E3; border-radius: 12px; background: #F7FAF9; }
.wwhBody #rightSideBar table { width: 100%; }
.wwhBody #rightSideBar caption { padding: 0 0 6px 0; color: #55635D; font-size: 12.5px; font-weight: 600; letter-spacing: 0.7px; text-align: left; text-transform: uppercase; }
.wwhBody #rightSideBar td { padding: 4px 0; font-size: 15.5px; line-height: 1.45; }
.wwhBody #rightSideBar input[type="text"] { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #C5CFCB; border-radius: 6px; font-size: 15px; box-sizing: border-box; }

/* Domain prices page: category list down the left, price table beside it */
.wwhBody #leftSideBar { width: 200px; margin: 0 30px 22px 0; padding: 14px 18px 12px 18px; border: 1px solid #DDE5E3; border-radius: 12px; background: #F7FAF9; box-sizing: border-box; }
.wwhBody #leftSideBar table { width: 100%; border-spacing: 0; }
.wwhBody #leftSideBar caption { padding: 0 0 6px 0; color: #55635D; font-size: 12.5px; font-weight: 600; letter-spacing: 0.7px; text-align: left; text-transform: uppercase; }
.wwhBody #leftSideBar caption br, .wwhBody #leftSideBar > br, .wwhBody #leftSideBar > div { display: none; }
.wwhBody #leftSideBar td { padding: 4px 0; font-size: 15.5px; line-height: 1.4; }
.wwhBody #leftSideBar td a { font-size: 15.5px; }
@media screen and (min-width: 966px) {
.wwhBody #leftSideBar ~ form { text-align: left; }
.wwhBody #leftSideBar ~ table { width: calc(100% - 232px) !important; max-width: none !important; margin: 0; }
}

/* Domain transfer page: the search panel */
.wwhBody > table table.greyTable:has(.search_box_dom) { width: 100%; border: 0; border-radius: 14px; background: #2A4536 !important; background: linear-gradient(135deg, #223A2D 0%, #2F5A44 55%, #2E8B57 100%) !important; box-shadow: 0 6px 20px rgba(20,40,35,0.18); overflow: hidden; }
.wwhBody > table table.greyTable:has(.search_box_dom) td { border: 0; background-image: none; }
.wwhBody > table table.greyTable:has(.search_box_dom) h2 { padding: 0 16px; color: #FFFFFF; font-size: 25px; font-weight: 600; }
.wwhBody > table table.greyTable:has(.search_box_dom) br + br { display: none; }
.wwhBody > table .search_box_dom { width: 520px; max-width: 62%; height: 54px; padding: 0 18px; border: 2px solid #FFFFFF !important; border-radius: 8px; background: #FFFFFF; font-size: 18px !important; box-sizing: border-box; vertical-align: middle; }
.wwhBody > table .search_box_dom:focus { border-color: #FFC83D !important; }
.wwhBody > table .search_btn_dom, .wwhBody > table .search_btn_dom:hover, .wwhBody > table .search_btn_dom:focus { height: 54px !important; padding: 0 32px; border: 0 !important; border-radius: 8px !important; background: #FFC83D !important; color: #1A1A1A !important; font-size: 18px !important; font-weight: 600; vertical-align: middle; }
.wwhBody > table .search_btn_dom:hover, .wwhBody > table .search_btn_dom:focus { background: #FFD76B !important; }
.wwhBody > table table.greyTable:has(.search_box_dom) form { padding-bottom: 14px; }
.wwhBody #leftSideBar ~ table td:first-child { white-space: nowrap; }
@media screen and (max-width: 700px) {
.wwhBody > table table.greyTable:has(.search_box_dom) { table-layout: fixed; }
.wwhBody > table table.greyTable:has(.search_box_dom) h2 { font-size: 20px; }
.wwhBody > table .search_box_dom { width: 62%; max-width: none; padding: 0 10px; }
.wwhBody > table .search_btn_dom, .wwhBody > table .search_btn_dom:hover, .wwhBody > table .search_btn_dom:focus { padding: 0 16px; }
.wwhBody #leftSideBar ~ table td { padding-left: 6px; padding-right: 6px; }
.wwhBody #leftSideBar ~ table td:first-child { white-space: normal; }
.wwhBody #leftSideBar ~ table td:first-child .largeText, .wwhBody #leftSideBar ~ table td:first-child strong { font-size: 17px; }
}

/* Code examples */
.wwhBody > table .codeTable { border: 1px solid #DDE5E3; border-radius: 10px; border-collapse: separate; border-spacing: 0; background: #F6F8F7; overflow: hidden; }
.wwhBody > table .codeTable td[class^="tblCorner"], .wwhBody > table .codeTable td[class^="tblBorder"] { width: 12px; height: 12px; border: 0; background-image: none; }
.wwhBody > table .codeTable td.code { padding: 4px 8px; font-size: 15px; line-height: 1.6; }

/* Screen shots */
.wwhBody > table img.bBorder { max-width: 100%; height: auto; border: 1px solid #DDE5E3; border-radius: 10px; box-shadow: 0 4px 14px rgba(20,40,35,0.10); }

/* Buttons */
.wwhBody input[type="submit"], .wwhBody input[type="button"], .wwhBody input[type="reset"] { border-radius: 8px; background-color: #2A4536; }
.wwhBody input[type="submit"]:hover, .wwhBody input[type="button"]:hover, .wwhBody input[type="reset"]:hover { background-color: #4C7A60; }
.wwhBody > table .orangeButton { border-radius: 8px !important; background: #2A4536 !important; }
.wwhBody > table .orangeButton:hover, .wwhBody > table .orangeButton:focus { background: #4C7A60 !important; }

@media screen and (max-width : 600px) {
	.wwhBody > table { width: calc(100% - 12px); margin-left: 6px; margin-right: 6px; }
	.wwhBody h1 { font-size: 28px; }
	.wwhBody > table td[bgcolor="#E7EEEF"], .wwhBody > table td[bgcolor="#F0F7F7"], .wwhBody > table td[bgcolor="#2A4536"] { padding: 10px 10px; }
}

/* ===============================================================
   PAGE BUILDING BLOCKS (.wwm)
   =============================================================== */

/* ---------------------------------------------------------------
   Web Wiz shared styles (pilot): the look of the restyled Client Area.
   The same greens, blue, borders and corners. Fonts come from
   default_style.css. Everything is under .wwm, so nothing here
   reaches the header, the footer or any other page.
   --------------------------------------------------------------- */

.wwm { padding: 0 16px; box-sizing: border-box; color: #1A1A1A; }
.wwm * { box-sizing: border-box; }
.wwm a, .wwm a:visited { color: #0062A6; }

/* ---------- The top of the page ---------- */

.wwmHero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: 44px 0 36px 0; }
.wwmTag { display: inline-block; padding: 4px 14px; border-radius: 14px; background: #E6F4EC; color: #2A4536; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; line-height: 1.7; }
.wwm .wwmHero h1 { margin: 16px 0 14px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.2; color: #1F3529; text-wrap: balance; }
.wwmLead { max-width: 640px; margin: 0 0 26px 0; font-size: 20px; line-height: 1.6; color: #3F4F49; }
.wwmHeroArt img { display: block; width: 100%; height: auto; }

/* ---------- Buttons ---------- */

.wwmBtns { display: flex; flex-wrap: wrap; gap: 12px; }
.wwm a.wwmBtn, .wwm a.wwmBtn:visited { display: inline-block; padding: 13px 28px; border: 1px solid #2A4536; border-radius: 6px; background: #2A4536; color: #FFFFFF; font-size: 17px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; }
.wwm a.wwmBtn:hover, .wwm a.wwmBtn:visited:hover { background: #4C7A60; border-color: #4C7A60; color: #FFFFFF; text-decoration: none; }
.wwm a.wwmBtnLine, .wwm a.wwmBtnLine:visited { background: #FFFFFF; color: #2A4536; }
.wwm a.wwmBtnLine:hover, .wwm a.wwmBtnLine:visited:hover { background: #EEF4F1; border-color: #2A4536; color: #1A1A1A; }
.wwm a.wwmBtnGold, .wwm a.wwmBtnGold:visited { border-color: #FFC83D; background: #FFC83D; color: #1A1A1A; }
.wwm a.wwmBtnGold:hover, .wwm a.wwmBtnGold:visited:hover { border-color: #FFD76B; background: #FFD76B; color: #1A1A1A; }
.wwm a.wwmBtnWide { display: block; text-align: center; }

/* ---------- What we host: the row of links under the buttons ---------- */

.wwmChips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.wwm .wwmChips a, .wwm .wwmChips a:visited { display: inline-block; padding: 0 14px; border: 1px solid #C5CFCB; border-radius: 17px; background: #FFFFFF; color: #2A4536; font-size: 14.5px; font-weight: 600; line-height: 2.15; text-decoration: none; white-space: nowrap; }
.wwm .wwmChips a:hover, .wwm .wwmChips a:visited:hover { background: #EEF4F1; border-color: #2A4536; text-decoration: none; }

/* ---------- The green band ---------- */

.wwmBand { margin: 10px 0 44px 0; padding: 40px 44px; border-radius: 10px; background: #2A4536; background: linear-gradient(135deg, #223A2D 0%, #2F5A44 55%, #2E8B57 100%); box-shadow: 0 6px 20px rgba(20,40,35,0.18); color: #FFFFFF; text-align: center; }
.wwm .wwmBand h2 { margin: 0 0 12px 0; color: #FFFFFF; font-size: 32px; font-weight: 600; line-height: 1.25; }
.wwmBand p { max-width: 900px; margin: 0 auto; font-size: 19px; line-height: 1.6; color: #E7F1EC; }

/* ---------- The three services ---------- */

.wwmGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 22px 0; }
.wwmAlso { margin: 0 0 44px 0; color: #6B7773; font-size: 15.5px; line-height: 1.8; text-align: center; }
.wwm .wwmAlso a, .wwm .wwmAlso a:visited { color: #2A4536; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wwm .wwmAlso a:hover, .wwm .wwmAlso a:visited:hover { color: #0062A6; text-decoration: underline; }
.wwmCard { display: flex; flex-direction: column; min-width: 0; padding: 30px 28px 28px 28px; border: 1px solid #DDE5E3; border-radius: 10px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.wwmCard:hover { border-color: #9DB8AA; box-shadow: 0 10px 26px rgba(20,40,35,0.13); transform: translateY(-3px); }
.wwmCardTop { display: flex; gap: 16px; align-items: center; margin: 0 0 18px 0; }
.wwmCardTop > a { flex: 0 0 72px; width: 72px; line-height: 0; }
.wwmCardTop img { display: block; width: 72px; height: 72px; max-width: none; }
.wwm .wwmCard h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; }
.wwm .wwmCard h2 a, .wwm .wwmCard h2 a:visited { color: #1A1A1A; font-weight: 600; text-decoration: none; }
.wwm .wwmCard:hover h2 a { color: #0062A6; }
.wwmPill { display: inline-block; margin: 0 0 14px 0; padding: 3px 12px; border-radius: 12px; background: #2E8B57; color: #FFFFFF; font-size: 13.5px; font-weight: 600; line-height: 1.7; }
.wwmPill small { font-size: 13.5px; font-weight: normal; }
.wwmTicks { flex: 1 1 auto; margin: 0 0 24px 0; padding: 0; list-style: none; }
.wwmTicks li { margin: 0; padding: 7px 0 7px 32px; border-bottom: 1px solid #EEF2F1; font-size: 16px; line-height: 1.5; color: #333333; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E6F4EC'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%232E8B57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 9px; background-size: 20px 20px; }
.wwmTicks li:last-child { border-bottom: 0; }
/* A plan card is one link: its button is stretched over the whole card, so a click anywhere on the card follows it.
   Other links inside the card (the icon, the heading) stay on top and keep working. */
.wwmCard { position: relative; }
.wwmCard > a.wwmBtnWide::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 10px; }
.wwmCard:has(> a.wwmBtnWide) { cursor: pointer; }
.wwmCard .wwmCardTop a, .wwmCard .wwmTicks a, .wwmCard p a { position: relative; z-index: 1; }

.wwmReviews { margin: 0 0 30px 0; text-align: center; }

@media screen and (max-width : 980px) {
	.wwmHero { grid-template-columns: minmax(0, 1fr); padding: 26px 0 24px 0; text-align: center; }
	.wwmLead { margin-left: auto; margin-right: auto; }
	.wwmChips { justify-content: center; }
	.wwmBtns { justify-content: center; }
	.wwmGrid { grid-template-columns: minmax(0, 1fr); }
	.wwmCard { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media screen and (max-width : 600px) {
	.wwm { padding: 0 10px; }
	.wwm .wwmHero h1 { font-size: 32px; }
	.wwmLead { font-size: 18px; }
	.wwmBand { padding: 28px 20px; }
	.wwm .wwmBand h2 { font-size: 25px; }
	.wwmBand p { font-size: 17px; }
	.wwm a.wwmBtn { flex: 1 1 100%; text-align: center; }
	.wwmCard { padding: 22px 18px; }
}

/* ---------- Sales landing pages: heading, two plans side by side, "from" price ---------- */

.wwmHead { max-width: 1000px; margin: 0 auto; padding: 34px 0 30px 0; text-align: center; }
.wwm .wwmHead h1 { margin: 0 0 14px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 38px; font-weight: 600; line-height: 1.2; color: #1F3529; }
.wwmHead .wwmLead { max-width: none; margin: 0; font-size: 18.5px; }
.wwmGrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-left: auto; margin-right: auto; }
.wwmFrom { margin: 0 0 14px 0; color: #55635D; font-size: 15px; line-height: 1.4; }
.wwmFrom strong { margin: 0 3px; color: #1F3529; font-size: 30px; font-weight: 600; }

/* The plan cards from hosting_packages_inc.asp, which sit inside an older page */
.wwm.wwmIn { margin: 6px 0 34px 0; padding: 0; text-align: left; }
.wwmGridAuto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Plan cards at the top of a comparison page (forum hosting, colocation), the full comparison table follows them */
.wwm.wwmPlans { margin: 26px 0 30px 0; }
.wwmPlans .wwmGrid { margin-bottom: 0; }
.wwmGrid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wwmGrid4 .wwmCard { padding: 24px 20px 22px 20px; }
.wwmCardPic { display: flex; align-items: center; height: 44px; margin: 0 0 12px 0; }
.wwmCardPic img { display: block; max-width: 100%; height: auto; }
.wwm .wwmGrid4 .wwmCard h2 { margin: 0 0 10px 0; }
.wwmVat { display: block; margin: 2px 0 0 0; color: #6B7773; font-size: 13.5px; }
.wwmGrid4 .wwmFrom strong { margin-left: 0; font-size: 27px; }
@media screen and (max-width : 1150px) {
	.wwmGrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width : 600px) {
	.wwmGrid4 { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width : 980px) {
	.wwmGrid2, .wwmGridAuto { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width : 600px) {
	.wwm .wwmHead h1 { font-size: 30px; }
	.wwmHead .wwmLead { font-size: 17px; }
}

/* ===============================================================
   PRODUCT PAGES (.wwp, used with .wwm). The pages keep the tables
   they are built from: the old grey cells, dark bars, orange
   buttons and tick pictures are dressed here by what the page
   already says about them (bgcolor, class), so the page's own
   pricing code is not touched.
   =============================================================== */

.wwp { font-size: 17px; line-height: 1.6; }
.wwp > table[cellpadding="4"] > tbody > tr > td { padding: 0; }

/* ---------- The top of a product page ---------- */

.wwpHero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px 52px; align-items: center; padding: 38px 0 34px 0; }
.wwm .wwpHero h1 { margin: 16px 0 14px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.2; color: #1F3529; }
.wwpNote { margin: 0 0 26px 0; font-size: 16.5px; line-height: 1.65; color: #3F4F49; }
.wwpNote strong { display: block; margin: 0 0 2px 0; color: #1F3529; font-size: 17.5px; font-weight: 600; }

.wwpPrice { padding: 30px 28px 26px 28px; border: 1px solid #DDE5E3; border-radius: 14px; background: #F4F8F6; background: linear-gradient(180deg, #F2F8F4 0%, #FFFFFF 70%); box-shadow: 0 10px 28px rgba(20,40,35,0.10); text-align: center; }
.wwpPrice img { display: block; width: 88px; height: 88px; margin: 0 auto 14px auto; }
.wwpPriceLabel { display: block; color: #6B7773; font-size: 13.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; }
.wwpPriceNum { display: block; margin: 4px 0 2px 0; color: #1F3529; font-size: 46px; font-weight: 600; line-height: 1.15; }
.wwpPriceNum small { font-size: 18px; font-weight: normal; color: #3F4F49; }
.wwpPrice p { margin: 0 0 18px 0; color: #3F4F49; font-size: 15.5px; line-height: 1.5; }

/* ---------- The feature tables ---------- */

.wwp table[cellspacing="5"] { border-spacing: 0; }
.wwpHideFirst table[cellspacing="5"] > tbody > tr:first-child { display: none; }
.wwp table[cellpadding="10"] { width: 100%; margin: 0 0 10px 0; border-collapse: separate; border-spacing: 0; background: none; }

.wwp td[bgcolor="#E7EEEF"], .wwp td[bgcolor="#F0F7F7"] { padding: 15px 20px; border-bottom: 1px solid #EAEFEE; vertical-align: middle; line-height: 1.5; }
.wwp td[bgcolor="#E7EEEF"] { border-left: 1px solid #DDE5E3; background: #FFFFFF; }
.wwp td[bgcolor="#F0F7F7"] { border-right: 1px solid #DDE5E3; background: #F6F9F8; }
.wwp tr:first-child > td[bgcolor="#E7EEEF"] { border-top: 1px solid #DDE5E3; border-top-left-radius: 10px; }
.wwp tr:first-child > td[bgcolor="#F0F7F7"] { border-top: 1px solid #DDE5E3; border-top-right-radius: 10px; }
.wwp tr:last-child > td[bgcolor="#E7EEEF"] { border-bottom-color: #DDE5E3; border-bottom-left-radius: 10px; }
.wwp tr:last-child > td[bgcolor="#F0F7F7"] { border-bottom-color: #DDE5E3; border-bottom-right-radius: 10px; }
.wwp tr:hover > td[bgcolor="#E7EEEF"] { background: #FAFCFB; }

.wwp .largeText { color: #1A1A1A; font-size: 17.5px; font-weight: 600; }
.wwp .lgText { font-size: 17px; }
.wwp td .smText, .wwp td.smText { font-size: 14.5px; color: #55635D; }
.wwp td:not([bgcolor]) > .largeText { display: block; margin: 30px 0 8px 0; color: #1F3529; font-size: 26px; }

/* The dark bar that opens and closes a group */
.wwp td[bgcolor="#2A4536"] { padding: 14px 20px; border-radius: 10px; background: #2A4536; }
.wwp td[bgcolor="#2A4536"]:hover { background: #33543F; }
.wwm.wwp h2.white { color: #FFFFFF; font-size: 18.5px; font-weight: 600; line-height: 1.5; }
.wwp td[bgcolor="#2A4536"] img { width: 26px; height: 26px; }

/* The tick */
.wwp em.yes { width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E6F4EC'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%232E8B57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 26px 26px; }

/* The old orange button */
.wwp .orangeButton { height: auto !important; padding: 14px 36px !important; border-radius: 8px !important; background: #2A4536 !important; color: #FFFFFF !important; font-size: 18px !important; font-weight: 600; line-height: 1.4; }
.wwp .orangeButton:hover, .wwp .orangeButton:focus { background: #4C7A60 !important; }

/* The pop-up notes on the i marks */
.wwp a.tooltip span { max-width: 80vw; padding: 14px 16px; border-radius: 10px; line-height: 1.55; box-shadow: 0 14px 34px rgba(20,40,35,0.16); }
.wwp a.tooltip:hover span, .wwp a.tooltip.is-open span { border-color: #DDE5E3; }

.wwpFoot { display: block; margin: 18px 0 0 0; color: #55635D; font-size: 14.5px; line-height: 1.6; }

@media screen and (max-width : 980px) {
	.wwpHero { grid-template-columns: minmax(0, 1fr); padding: 26px 0 24px 0; }
	.wwpPrice { max-width: 460px; margin: 0 auto; width: 100%; }
}

@media screen and (max-width : 600px) {
	.wwm .wwpHero h1 { font-size: 30px; }
	.wwp td[bgcolor="#E7EEEF"], .wwp td[bgcolor="#F0F7F7"] { padding: 12px 10px; }
	.wwp .largeText { font-size: 16px; }
}

/* ---------- Server plans as cards (dedicated servers) ---------- */

.wwpPlans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 6px 0 14px 0; }
.wwpPlan { display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 26px 26px; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.wwpPlan:hover { border-color: #9DB8AA; box-shadow: 0 10px 26px rgba(20,40,35,0.13); transform: translateY(-3px); }
.wwm .wwpPlan h2 { margin: 0 0 4px 0; color: #1F3529; font-size: 23px; font-weight: 600; line-height: 1.3; }
.wwpPlanCpu { margin: 0 0 16px 0; color: #3F4F49; font-size: 15.5px; line-height: 1.5; }
.wwpSpecs { margin: 0 0 20px 0; padding: 0; border-top: 1px solid #EAEFEE; list-style: none; }
.wwpSpecs li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1px 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid #EAEFEE; font-size: 15.5px; line-height: 1.45; }
.wwpSpecs li span { grid-row: 1 / span 2; padding-top: 3px; color: #6B7773; font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.wwpSpecs li strong { color: #1A1A1A; font-weight: 600; }
.wwpSpecs li em { grid-column: 2; color: #55635D; font-size: 14.5px; font-style: normal; }
.wwpPlanPrice { margin: auto 0 16px 0; text-align: center; }
.wwpPlanPrice span { display: block; color: #6B7773; font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.wwpPlanPrice b { display: block; color: #1F3529; font-size: 36px; font-weight: 600; line-height: 1.2; }
.wwpPlanPrice small { display: block; color: #55635D; font-size: 14.5px; }
.wwpPlansNote { margin: 0 0 30px 0; color: #55635D; font-size: 14.5px; line-height: 1.6; }
.wwpPrice img.wwpWide { width: 155px; height: 51px; mix-blend-mode: multiply; }

@media screen and (max-width : 980px) {
	.wwpPlans { grid-template-columns: minmax(0, 1fr); }
	.wwpPlan { max-width: 520px; width: 100%; margin: 0 auto; }
}

/* ---------- Server plans as a list (dedicated servers): one row per server,
   so any number of servers can be listed as stock comes and goes ---------- */

.wwpList { margin: 6px 0 14px 0; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); overflow: hidden; }
.wwpListHead, .wwpRow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.35fr) minmax(0, 1.25fr) minmax(0, 0.6fr) minmax(0, 1.15fr) 150px; gap: 8px 22px; align-items: center; }
.wwpListHead { padding: 12px 26px; border-bottom: 1px solid #DDE5E3; background: #F4F8F6; color: #55635D; font-size: 12.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; }
.wwpListHead span:nth-child(4), .wwpListHead span:nth-child(5) { text-align: center; }
.wwpRow { padding: 22px 26px; border-top: 1px solid #EAEFEE; font-size: 15.5px; line-height: 1.45; }
.wwpListHead + .wwpRow { border-top: 0; }
.wwpRow:hover { background: #FAFCFB; }
.wwm .wwpRow h2 { margin: 0 0 3px 0; color: #1F3529; font-size: 21px; font-weight: 600; line-height: 1.3; }
.wwpRow p { margin: 0; color: #3F4F49; font-size: 15px; }
.wwpRow strong { display: block; color: #1A1A1A; font-weight: 600; }
.wwpRowName p strong { display: inline; }
.wwpRow em { display: block; color: #55635D; font-size: 14.5px; font-style: normal; }
.wwpRow > div[data-label="Available"], .wwpRowPrice { text-align: center; }
.wwpRowPrice span { display: block; color: #6B7773; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.wwpRowPrice b { display: block; color: #1F3529; font-size: 28px; font-weight: 600; line-height: 1.2; }
.wwpRowPrice small { display: block; color: #55635D; font-size: 13.5px; }
.wwpRowBtn { text-align: right; }
.wwm .wwpRowBtn a.wwmBtn { padding: 12px 24px; }

@media screen and (max-width : 980px) {
	.wwpListHead { display: none; }
	.wwpRow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; align-items: start; padding: 22px 18px; }
	.wwpListHead + .wwpRow { border-top: 0; }
	.wwpRowName, .wwpRowPrice, .wwpRowBtn { grid-column: 1 / -1; }
	.wwpRow > div[data-label]::before { content: attr(data-label); display: block; margin: 0 0 2px 0; color: #6B7773; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
	.wwpRow > div[data-label="Available"] { text-align: left; }
	.wwpRowBtn { text-align: center; }
	.wwm .wwpRowBtn a.wwmBtn { display: block; }
}

/* ---------- One plan that the customer builds (Hyper-V servers) ---------- */

.wwpPrice img.wwpWide2 { width: 200px; height: 67px; }
.wwpBuild { margin: 4px 0 30px 0; padding: 26px 28px 28px 28px; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); }
.wwpBuildHead { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; margin: 0 0 20px 0; }
.wwm .wwpBuildHead h2 { margin: 0 0 4px 0; color: #1F3529; font-size: 24px; font-weight: 600; line-height: 1.3; }
.wwpBuildHead p { margin: 0; color: #3F4F49; font-size: 16.5px; line-height: 1.5; }
.wwpBuildGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wwpBuildItem { padding: 18px 20px; border-radius: 10px; background: #F2F8F4; }
.wwpBuildItem span { display: block; margin: 0 0 4px 0; color: #55635D; font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.wwpBuildItem strong { display: block; color: #1F3529; font-size: 21px; font-weight: 600; line-height: 1.3; }
.wwpBuildItem em { display: block; margin: 2px 0 0 0; color: #55635D; font-size: 14.5px; font-style: normal; }

@media screen and (max-width : 980px) {
	.wwpBuildGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width : 520px) {
	.wwpBuild { padding: 20px 16px; }
	.wwpBuildGrid { grid-template-columns: minmax(0, 1fr); }
	.wwm .wwpBuildHead a.wwmBtn { flex: 1 1 100%; text-align: center; }
}

/* ---------- A panel of plain text under the top of a product page ---------- */

.wwpHi { color: #2E8B57; }
.wwpText { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px 44px; margin: 0 0 30px 0; padding: 26px 30px; border-radius: 12px; background: #F2F8F4; color: #3F4F49; font-size: 16.5px; line-height: 1.65; }
.wwpText p { margin: 0; }
.wwpText p:first-child { color: #1F3529; font-size: 19px; font-weight: 600; line-height: 1.5; }
.wwpTextOne { grid-template-columns: minmax(0, 1fr); }
.wwpText.wwpTextOne p:first-child { color: #3F4F49; font-size: 16.5px; font-weight: normal; line-height: 1.65; }

@media screen and (max-width : 980px) {
	.wwpText { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
}

/* ===============================================================
   DOMAIN NAMES (.wwd, used with .wwm)
   =============================================================== */

.wwd { font-size: 17px; line-height: 1.6; }
.wwdHero { padding: 34px 0 6px 0; text-align: center; }
.wwm .wwdHero h1 { margin: 16px 0 14px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.2; color: #1F3529; }
.wwdHero .wwmLead { max-width: 860px; margin: 0 auto; }
.wwdHero .wwmLead strong { color: #1F3529; }

/* The search: the loudest thing on the page */
.wwdSearch { margin: 26px 0 34px 0; padding: 34px 38px 30px 38px; border-radius: 14px; background: #2A4536; background: linear-gradient(135deg, #223A2D 0%, #2F5A44 55%, #2E8B57 100%); box-shadow: 0 6px 20px rgba(20,40,35,0.18); color: #FFFFFF; text-align: center; }
.wwm .wwdSearch h2 { margin: 0 0 18px 0; color: #FFFFFF; font-size: 27px; font-weight: 600; line-height: 1.25; }
.wwdSearch form { margin: 0; }
.wwdSearchRow { display: flex; gap: 12px; max-width: 780px; margin: 0 auto; }
.wwm .wwdSearch input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; height: 58px; margin: 0; padding: 0 20px; border: 2px solid #FFFFFF; border-radius: 8px; background: #FFFFFF; color: #1A1A1A; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.wwm .wwdSearch input[type="text"]:focus { border-color: #FFC83D; outline: none; }
.wwm .wwdSearch input[type="submit"] { flex: 0 0 auto; height: 58px; margin: 0; padding: 0 38px; border: 0; border-radius: 8px; background: #FFC83D; color: #1A1A1A; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.wwm .wwdSearch input[type="submit"]:hover, .wwm .wwdSearch input[type="submit"]:focus { background: #FFD76B; color: #1A1A1A; }
.wwdCat { margin: 18px 0 0 0; color: #E7F1EC; font-size: 16px; }
.wwdCat label { margin-right: 8px; font-weight: 600; }
.wwm .wwdCat select { height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: #FFFFFF; color: #1A1A1A; font-size: 16px; }

/* The three featured extensions */
.wwdTlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 28px 0; }
.wwdTld { padding: 26px 22px 24px 22px; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); text-align: center; }
.wwdTldImg { display: flex; height: 80px; align-items: center; justify-content: center; }
.wwdTldImg img { max-width: 100%; height: auto; }
.wwdTld p { margin: 12px 0 8px 0; color: #3F4F49; font-size: 16.5px; }
.wwdTld strong { color: #1F3529; font-size: 28px; font-weight: 600; }
.wwdTld strong small { color: #55635D; font-size: 16px; font-weight: normal; }

/* Panels */
.wwdCard { margin: 0 0 28px 0; padding: 26px 30px; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); }
.wwdCardHead { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 0 0 12px 0; }
.wwm .wwdCardHead h2 { margin: 0; color: #1F3529; font-size: 24px; font-weight: 600; line-height: 1.3; }
.wwdCardHead h2 small { color: #6B7773; font-size: 15px; font-weight: normal; }
.wwm .wwdCardHead a.wwmBtn { padding: 10px 22px; font-size: 16px; }
.wwdPrices { column-count: 2; column-gap: 56px; }
.wwdPriceRow { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid #EAEFEE; break-inside: avoid; font-size: 17px; }
.wwdPriceRow strong { color: #1A1A1A; font-size: 18.5px; font-weight: 600; }
.wwdPriceRow small { color: #55635D; font-size: 14.5px; }
.wwdPriceRow s { margin-right: 6px; color: #C0392B; font-size: 15.5px; }
.wwdTicks { column-count: 2; column-gap: 56px; margin: 0; }
.wwdTicks li { break-inside: avoid; font-size: 17px; }
.wwm .wwdTicks li:last-child { border-bottom: 1px solid #EEF2F1; }
.wwdLogos { margin: 8px 0 10px 0; text-align: center; }
.wwdLogos img { max-width: 100%; height: auto; }

@media screen and (max-width : 900px) {
	.wwdTlds { grid-template-columns: minmax(0, 1fr); }
	.wwdTld { max-width: 460px; width: 100%; margin: 0 auto; }
	.wwdPrices, .wwdTicks { column-count: 1; }
}

@media screen and (max-width : 600px) {
	.wwm .wwdHero h1 { font-size: 30px; }
	.wwdSearch { padding: 24px 16px 22px 16px; }
	.wwdSearchRow { flex-wrap: wrap; }
	.wwm .wwdSearch input[type="submit"] { flex: 1 1 100%; }
	.wwdCard { padding: 20px 16px; }
}

/* ===============================================================
   DOMAIN AVAILABILITY CHECKER (.wwc, used with .wwm). The result
   rows are filled in by the page's own lookup script, so they are
   left as they are built and only dressed here.
   =============================================================== */

.wwc { font-size: 17px; line-height: 1.6; }
.wwc > table[cellpadding="4"] > tbody > tr > td { padding: 0; }
.wwcHero { padding-bottom: 0; }
.wwdSearch.wwcSearch { margin: 20px 0 34px 0; padding: 28px 34px 24px 34px; }
.wwm.wwc h2 { margin: 6px 0 4px 0; color: #1F3529; font-size: 24px; font-weight: 600; line-height: 1.3; }

.wwc table[cellpadding="10"] { width: 100%; margin: 0 0 8px 0; border: 1px solid #DDE5E3; border-radius: 12px; border-collapse: separate; border-spacing: 0; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); overflow: hidden; }
.wwc td[bgcolor="#2A4536"] { padding: 14px 22px; background: #2A4536; }
.wwm.wwc h2.white { margin: 0; color: #FFFFFF; font-size: 19px; }
.wwc td[bgcolor="#48775E"] { padding: 11px 22px; border-bottom: 1px solid #DDE5E3; background: #F4F8F6; font-size: 12.5px; letter-spacing: 0.7px; text-transform: uppercase; }
.wwc td[bgcolor="#48775E"], .wwc td[bgcolor="#48775E"] strong, .wwc td[bgcolor="#48775E"] .smText { color: #55635D !important; font-weight: 600; }
.wwc td[bgcolor="#E7EEEF"], .wwc td[bgcolor="#E7EEE0"] { height: auto; padding: 15px 22px; border-bottom: 1px solid #EAEFEE; background: #FFFFFF; font-size: 17px; vertical-align: middle; }
.wwc td[bgcolor="#E7EEE0"] { background: #F2F8F4; }
.wwc tr:last-child > td[bgcolor="#E7EEEF"], .wwc tr:last-child > td[bgcolor="#E7EEE0"] { border-bottom: 0; }
.wwc tr:hover > td[bgcolor="#E7EEEF"] { background: #FAFCFB; }
.wwc td[bgcolor="#E7EEEF"]:first-child, .wwc td[bgcolor="#E7EEE0"]:first-child { color: #1A1A1A; font-weight: 600; }
.wwc div[id^="LU"] { height: auto !important; min-height: 26px; overflow: hidden; }
.wwc .largeText { font-size: 17px; font-weight: normal; }

.wwc input[name="Submit"] { height: auto !important; margin: 14px 0 0 0; padding: 14px 34px; border: 1px solid #2A4536; border-radius: 8px; background: #2A4536; color: #FFFFFF; font-family: 'Open Sans', Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.wwc input[name="Submit"]:hover, .wwc input[name="Submit"]:focus { background: #4C7A60; border-color: #4C7A60; }

@media screen and (max-width : 600px) {
	.wwdSearch.wwcSearch { padding: 22px 16px 20px 16px; }
	.wwc td[bgcolor="#2A4536"], .wwc td[bgcolor="#48775E"], .wwc td[bgcolor="#E7EEEF"], .wwc td[bgcolor="#E7EEE0"] { padding-left: 12px; padding-right: 12px; }
	.wwc input[name="Submit"] { width: 100%; }
	.wwc table[cellpadding="10"] { table-layout: fixed; }
	.wwc td[bgcolor="#E7EEEF"], .wwc td[bgcolor="#E7EEE0"] { font-size: 15.5px; overflow-wrap: anywhere; }
	.wwc td[bgcolor="#48775E"] { font-size: 11px; letter-spacing: 0.3px; overflow-wrap: anywhere; }
	.wwc td[bgcolor="#48775E"]:nth-child(3) .smText { display: none; }
	.wwc tr > td[bgcolor="#E7EEEF"]:first-child, .wwc tr > td[bgcolor="#E7EEE0"]:first-child { width: 42%; }
	.wwc td[bgcolor="#48775E"]:nth-child(1) { width: 42%; }
	.wwc td[bgcolor="#48775E"]:nth-child(2) { width: 24%; }
	.wwc td[bgcolor="#48775E"]:nth-child(3) { width: 20%; }
	.wwc td[bgcolor="#48775E"]:nth-child(4) { width: 14%; }
}

/* ===============================================================
   KNOWLEDGEBASE HOME (.wwk, used with .wwm)
   =============================================================== */

.wwdSearch.wwkSearch { margin: 24px 0 34px 0; padding: 30px 36px 26px 36px; text-align: left; }
.wwm .wwkSearch h2 { margin: 0 0 14px 0; }
.wwkSearch #frmSearch .kb-search { padding: 0; }
.wwkSearch #frmSearch label { color: #E7F1EC; font-size: 14.5px; }
.wwkSearch #frmSearch input#KW, .wwkSearch #frmSearch select { min-height: 50px; border: 2px solid #FFFFFF; font-size: 16.5px; color: #1A1A1A; }
.wwkSearch #frmSearch input#KW:focus, .wwkSearch #frmSearch select:focus { border-color: #FFC83D; box-shadow: none; }
.wwkSearch #frmSearch .kb-actions { margin-top: 20px; text-align: center; }
.wwk .nt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 0 40px 0; padding: 0; }
.wwk a.nt-card, .wwk a.nt-card:visited { display: flex; gap: 16px; align-items: flex-start; min-width: 0; padding: 24px; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(20,40,35,0.07); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.wwk a.nt-card:hover, .wwk a.nt-card:visited:hover { border-color: #9DB8AA; box-shadow: 0 10px 26px rgba(20,40,35,0.13); color: inherit; text-decoration: none; transform: translateY(-3px); }
.wwk .nt-ico { display: flex; flex: 0 0 58px; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 12px; background: #EEF4F1; }
.wwk .nt-ico img { display: block; max-width: 40px; max-height: 40px; border: 0; object-fit: contain; }
.wwk .nt-body { display: block; min-width: 0; }
.wwm.wwk .nt-body h2 { margin: 0 0 6px 0; color: #1A1A1A; font-size: 19px; font-weight: 600; line-height: 1.3; }
.wwm.wwk a.nt-card:hover .nt-body h2 { color: #0062A6; }
.wwk .nt-body p { margin: 0; color: #444444; font-size: 15.5px; line-height: 1.55; }

@media screen and (max-width : 1000px) {
	.wwk .nt-grid { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width : 600px) {
	.wwdSearch.wwkSearch { padding: 22px 16px 20px 16px; }
	.wwk a.nt-card { padding: 18px 16px; }
}

/* ===============================================================
   STATUS SITE HOME PAGE (.wws), status.webwiz.net/default.htm
   =============================================================== */

.wwsHead { padding: 34px 0 26px 0; }
.wwm .wwsHead h1 { margin: 16px 0 12px 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 38px; font-weight: 600; line-height: 1.2; color: #1F3529; }
.wwsHead .wwmLead { max-width: 860px; margin: 0; font-size: 18.5px; }
.wwsNow { display: flex; align-items: center; gap: 22px; padding: 26px 30px; border: 1px solid #DDE5E3; border-left-width: 6px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 6px 20px rgba(20,40,35,0.09); }
.wwsNow > div { flex: 1 1 auto; min-width: 0; }
.wwm .wwsNow h2 { margin: 0; font-size: 27px; font-weight: 600; line-height: 1.25; color: #1F3529; }
.wwsNow p { margin: 4px 0 0 0; color: #3F4F49; font-size: 16.5px; line-height: 1.5; }
.wwsDot { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 60px 60px; }
.wwsOk { border-left-color: #2E8B57; background: linear-gradient(135deg, #F2F8F4 0%, #FFFFFF 60%); }
.wwsOk .wwsDot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%232E8B57'/%3E%3Cpath d='M17 31l9 9 18-20' fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: 0 0 0 7px #DCEBE2; }
.wwsWarn { border-left-color: #E0A100; background: linear-gradient(135deg, #FFF8E1 0%, #FFFFFF 60%); }
.wwsWarn .wwsDot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%23E0A100'/%3E%3Cpath d='M30 15v19' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='44' r='3.6' fill='%23FFFFFF'/%3E%3C/svg%3E"); box-shadow: 0 0 0 7px #FFEFC2; }
.wwsOff { border-left-color: #8A9690; }
.wwsOff .wwsDot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%238A9690'/%3E%3Cpath d='M19 30h22' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); box-shadow: 0 0 0 7px #E6ECEA; }
.wwsNote { margin: 14px 4px 34px 4px; color: #6B7773; font-size: 15px; line-height: 1.6; }
.wwsCard { margin: 0 0 26px 0; padding: 24px 28px 22px 28px; border: 1px solid #DDE5E3; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,40,35,0.07); }
.wwsCardTop { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 14px 0; }
.wwm .wwsCard h2 { margin: 0; font-size: 23px; font-weight: 600; color: #1F3529; }
.wwsCardTop p { margin: 3px 0 0 0; color: #55635D; font-size: 15.5px; }
.wwm .wwsCardTop a.wwmBtn { padding: 9px 20px; font-size: 15.5px; }
.wwsNews table { width: 100%; border-spacing: 0; }
.wwsNews td { padding: 0 !important; border-top: 1px solid #EEF2F1; }
.wwm .wwsNews td a, .wwm .wwsNews td a:visited { display: block; padding: 12px 6px 12px 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%232E8B57'/%3E%3C/svg%3E") no-repeat 6px 50%; background-size: 9px 9px; color: #1A1A1A; font-size: 16.5px; line-height: 1.45; text-decoration: none; }
.wwm .wwsNews td a strong { font-weight: 600; }
.wwm .wwsNews td a:hover, .wwm .wwsNews td a:visited:hover { background-color: #F4F8F6; color: #0062A6; text-decoration: none; }
.wwsCard iframe { display: block; border-radius: 8px; }
/* The live status page: one card for each section of the feed, a row for each service */
.wwsLiveGrid { columns: 2; column-gap: 22px; margin: 0; }
.wwsLiveGrid .wwsCard { margin: 0 0 22px 0; break-inside: avoid; }
.wwsCard.wwsLive { padding: 0; overflow: hidden; }
.wwm .wwsLive h2 { padding: 14px 22px; background: #2A4536; color: #FFFFFF; font-size: 18px; font-weight: 600; }
.wwsRow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; border-top: 1px solid #EEF2F1; font-size: 16px; line-height: 1.45; }
.wwsRow:nth-of-type(even) { background: #F8FAF9; }
.wwsRow em { flex: 0 0 auto; padding: 3px 12px 3px 30px; border-radius: 14px; background-repeat: no-repeat; background-position: 9px 50%; background-size: 15px 15px; font-size: 14px; font-style: normal; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.wwsPillOk { background-color: #E6F4EC; color: #1F6B42; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%232E8B57'/%3E%3Cpath d='M4.3 8.4l2.4 2.4 5-5.4' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wwsPillBad { background-color: #FBE3E0; color: #9C2B20; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23C0392B'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wwsPillOff { background-color: #E9EDEB; color: #55635D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%238A9690'/%3E%3Cpath d='M4.5 8h7' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wwm .wwsNote a, .wwm .wwsNote a:visited { color: #2A4536; font-weight: 600; text-decoration: none; }
.wwm .wwsNote a:hover { color: #0062A6; text-decoration: underline; }
@media screen and (max-width : 900px) {
	.wwsLiveGrid { columns: 1; }
	.wwsRow { padding: 11px 14px; }
	.wwm .wwsLive h2 { padding: 12px 14px; }
}

@media screen and (max-width : 700px) {
	.wwm .wwsHead h1 { font-size: 29px; }
	.wwsNow { flex-wrap: wrap; padding: 20px 18px; gap: 14px 16px; }
	.wwsNow > div { flex: 1 1 60%; }
	.wwm .wwsNow h2 { font-size: 22px; }
	.wwsDot { flex-basis: 46px; width: 46px; height: 46px; background-size: 46px 46px; }
	.wwm .wwsNow a.wwmBtn { flex: 1 1 100%; text-align: center; }
	.wwsCard { padding: 18px 14px; }
}