/*
 * ColdProxy members portal theme: the component layer (spec #1, phase 1, ticket #10).
 *
 * Restyles the Bootstrap 3.4 components Six and the addons print, so every client-area page takes
 * ColdProxy's look with no template change: buttons, forms, input groups, tables, panels, alerts,
 * labels, tabs, pagination, modals, dropdowns, popovers and list groups. The values come from the
 * owner-approved design canvas (direction 1).
 *
 * Rules for this file (tests/cases/Theme*Test.php check them):
 * - Colours are written only in the :root token block below. Every other rule reads var(--cp-*).
 *   RipTide's client shell and Auto Terminate read the same names.
 * - Nothing loads from another host: fonts and images come from this theme folder or data: URLs.
 * - head.tpl links this file with ?v=<version of this file>. After any change, run
 *   php tools/theme/stamp.php and commit the stamped includes/coldproxy-stylesheet.tpl with it.
 * - Right-to-left: header.tpl sets dir="rtl" for Arabic, Farsi and Hebrew. New rules use logical
 *   properties (margin-inline-start, text-align: start...) where they can; floats and Bootstrap's
 *   physical offsets are mirrored under [dir="rtl"] at the end of the file.
 * - The file loads after Six's all.min.css and before the stylesheets hooks and modules print. A rule
 *   that picks a form control by element and attribute alone (input[type="checkbox"]) goes in :where(),
 *   so a class a module gives its own control outranks it.
 */

/* ======================================================================= fonts */

/*
 * Inter 4.001, Fontsource 5.3.0's latin, latin-ext, cyrillic and cyrillic-ext subsets, one variable
 * file each for weights 100-900 (SIL Open Font License, fonts/OFL.txt). A browser fetches a file only
 * for a page that uses a character in its unicode-range. Where two ranges overlap, the face declared
 * last wins, so latin comes last, as in Fontsource's own stylesheet.
 */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-cyrillic-ext-var.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-cyrillic-var.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-ext-var.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial, sized to Inter's metrics, while Inter loads or for characters outside its subsets (coldproxy.com's fallback). */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');font-weight:100 500;size-adjust:106.58%;ascent-override:90.89%;descent-override:22.63%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');font-weight:600 700;size-adjust:102.45%;ascent-override:94.56%;descent-override:23.54%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');font-weight:800 900;size-adjust:103.81%;ascent-override:93.32%;descent-override:23.24%;line-gap-override:0%}

/* ======================================================================= tokens */

:root{
    /* type */
    --cp-font:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --cp-font-rtl:'Segoe UI',Tahoma,'Noto Sans Arabic','Noto Sans Hebrew',Arial,sans-serif;
    --cp-mono:ui-monospace,'Cascadia Code','SFMono-Regular',Consolas,'Liberation Mono',monospace;

    /* surfaces */
    --cp-page:#f5f9ff;
    --cp-surface:#ffffff;
    --cp-surface-2:#f8fafc;
    --cp-surface-3:#f1f5f9;
    --cp-row-hover:#fafbff;

    /* lines */
    --cp-border:#e2e8f0;
    --cp-border-soft:#eef2f7;
    --cp-border-strong:#cbd5e1;
    --cp-border-hover:#94a3b8;

    /* text */
    --cp-heading:#010b1c;
    --cp-ink:#1e293b;
    --cp-text:#475569;
    --cp-muted:#64748b;
    --cp-faint:#94a3b8;
    --cp-on-accent:#ffffff;

    /* brand */
    --cp-accent:#4f46e5;
    --cp-accent-hover:#4338ca;
    --cp-accent-ink:#4338ca;
    --cp-accent-soft:#eef2ff;
    --cp-accent-line:#c7d2fe;
    --cp-focus:#6366f1;
    --cp-focus-ring:rgba(99,102,241,.18);

    /* states: ok, wait, bad, info */
    --cp-ok:#047857;
    --cp-ok-strong:#065f46;
    --cp-ok-dot:#10b981;
    --cp-ok-soft:#ecfdf5;
    --cp-ok-line:#a7f3d0;
    --cp-ok-ring:rgba(16,185,129,.18);
    --cp-wait:#92400e;
    --cp-wait-strong:#78350f;
    --cp-wait-dot:#f59e0b;
    --cp-wait-soft:#fffbeb;
    --cp-wait-line:#fde68a;
    --cp-wait-ring:rgba(245,158,11,.2);
    --cp-bad:#b91c1c;
    --cp-bad-hover:#991b1b;
    --cp-bad-soft:#fef2f2;
    --cp-bad-line:#fecaca;
    --cp-bad-ring:rgba(185,28,28,.15);
    --cp-info:#312e81;
    --cp-info-link:#3730a3;

    /* dark surfaces: the proxy console, tooltips, the modal backdrop */
    --cp-console:#0f172a;
    --cp-console-ink:#e2e8f0;
    --cp-console-scroll-shadow:rgba(226,232,240,.24);

    /* shape and motion */
    --cp-radius:16px;
    --cp-radius-md:12px;
    --cp-shadow:0 2px 12px rgba(15,23,42,.04);
    --cp-shadow-menu:0 18px 40px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06);
    --cp-shadow-modal:0 30px 60px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06);
    --cp-shadow-primary:0 8px 24px rgba(99,102,241,.32);
    --cp-shadow-primary-hover:0 14px 32px rgba(99,102,241,.42);
    --cp-scroll-shadow:rgba(15,23,42,.16);
    --cp-ease:cubic-bezier(.4,0,.2,1);

    /* the veil that turns a label WHMCS colours inline into a soft pill */
    --cp-label-veil:rgba(255,255,255,.8);

    /* icons that carry a colour */
    --cp-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --cp-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --cp-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    --cp-icon-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

/* Inter has no Arabic, Farsi or Hebrew glyphs, so those languages use a system stack that has them. */
:root:lang(ar),:root:lang(fa),:root:lang(he){--cp-font:var(--cp-font-rtl)}

/* ======================================================================= base */

body{background-color:var(--cp-page);color:var(--cp-text);font-size:14px;line-height:1.5;font-variant-ligatures:no-contextual;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,input,button,select,textarea,h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.panel-sidebar .panel-title,.popover,.tooltip{font-family:var(--cp-font)}
input,button,select,textarea{color:var(--cp-ink)}
::selection{background-color:var(--cp-accent-line);color:var(--cp-heading)}
:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--cp-heading);font-weight:700;line-height:1.3}
h1,.h1{font-size:26px;letter-spacing:-.015em}
h2,.h2{font-size:22px;letter-spacing:-.01em}
h3,.h3{font-size:18px}
h4,.h4{font-size:16px}
h5,.h5{font-size:14px}
h6,.h6{font-size:12px}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small{color:var(--cp-muted);font-weight:400}
.lead{font-size:15px;color:var(--cp-text)}
small,.small{font-size:13px}
strong,b{font-weight:600}

a{color:var(--cp-accent);text-underline-offset:3px}
a:hover,a:focus{color:var(--cp-accent-hover)}
a:focus{outline:0}
a:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}

hr{border-top-color:var(--cp-border)}
blockquote{border-left:0;border-inline-start:4px solid var(--cp-border);color:var(--cp-text);font-size:15px}
blockquote footer,blockquote small,blockquote .small{color:var(--cp-muted)}
code{padding:2px 6px;border-radius:6px;background-color:var(--cp-accent-soft);color:var(--cp-accent-ink);font-family:var(--cp-mono);font-size:.9em}
kbd{border-radius:6px;background-color:var(--cp-ink);color:var(--cp-on-accent);font-family:var(--cp-mono);box-shadow:none}
pre{padding:14px 16px;border:1px solid var(--cp-border);border-radius:var(--cp-radius-md);background-color:var(--cp-surface-2);color:var(--cp-ink);font-family:var(--cp-mono);font-size:13px}
pre code{background-color:transparent;color:inherit;padding:0}
th{text-align:start}

.text-muted{color:var(--cp-muted)}
.text-primary{color:var(--cp-accent)}
a.text-primary:hover,a.text-primary:focus{color:var(--cp-accent-hover)}
.text-success{color:var(--cp-ok)}
a.text-success:hover,a.text-success:focus{color:var(--cp-ok-strong)}
.text-info{color:var(--cp-accent-ink)}
a.text-info:hover,a.text-info:focus{color:var(--cp-info)}
.text-warning{color:var(--cp-wait)}
a.text-warning:hover,a.text-warning:focus{color:var(--cp-wait-strong)}
.text-danger{color:var(--cp-bad)}
a.text-danger:hover,a.text-danger:focus{color:var(--cp-bad-hover)}
.bg-primary{background-color:var(--cp-accent);color:var(--cp-on-accent)}
a.bg-primary:hover,a.bg-primary:focus{background-color:var(--cp-accent-hover)}
.bg-success{background-color:var(--cp-ok-soft)}
a.bg-success:hover,a.bg-success:focus{background-color:var(--cp-ok-soft)}
.bg-info{background-color:var(--cp-accent-soft)}
a.bg-info:hover,a.bg-info:focus{background-color:var(--cp-accent-soft)}
.bg-warning{background-color:var(--cp-wait-soft)}
a.bg-warning:hover,a.bg-warning:focus{background-color:var(--cp-wait-soft)}
.bg-danger{background-color:var(--cp-bad-soft)}
a.bg-danger:hover,a.bg-danger:focus{background-color:var(--cp-bad-soft)}

/* ======================================================================= page shell */
/* The page is a column at least as tall as the window: the header, the main body, which takes the
   spare height, and the footer, which therefore sits at the bottom of a short page. Anything else
   the page prints (banners, the overlay and modals) is a row of its own; the footer hook output sits
   in the footer's row ("footer" below). */

body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
section#main-body{flex:1 0 auto;background-color:var(--cp-page);padding:28px 0 56px}
/* Six gives .main-content a 60px bottom margin, which the main body's 56px bottom padding replaces, and a
   300px minimum height, which left a gap above side cards stacked under short content (#16, run 6 S5). */
.main-content{margin-bottom:0;min-height:0;color:var(--cp-text)}

/* The page frame (ticket #14): the main body, the verification banners and the home page's banner
   and shortcuts follow the window up to 1600px with 24px gutters, 16px on phones, as the header and
   footer rows do; Bootstrap's row and columns put the content at the gutter. This replaces Six's
   fixed .container widths and RipTide's cp_portal_frame_width.php hook, which prints nothing on the
   pages of a release with the readiness flag. These selectors outweigh the hook's .container, so the
   frame holds wherever that hook still prints. Six pads the verification banner 10px on each side,
   which would set its frame 10px in from the others. */
section#main-body>.container,.verification-banner>.container,#home-banner>.container,.home-shortcuts>.container{width:auto;max-width:1600px;padding-inline:24px}
.verification-banner{padding-inline:0}
@media (max-width:767.98px){
section#main-body>.container,.verification-banner>.container,#home-banner>.container,.home-shortcuts>.container{padding-inline:16px}
}

/* Page title: the breadcrumb sits above the title, as on the canvas's service pages. */
div.header-lined{display:flex;flex-direction:column-reverse;margin-bottom:24px}
div.header-lined h1{margin:0;padding:0;border:0;font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--cp-heading)}
div.header-lined h1 small{display:block;margin-top:6px;font-size:15px;letter-spacing:0;color:var(--cp-text);white-space:normal}
div.header-lined .breadcrumb{margin:0 0 10px;padding:0;font-size:13px;border-radius:0}
@media (max-width:600px){div.header-lined h1{font-size:22px}}

.breadcrumb{padding:0;margin-bottom:16px;background-color:transparent;font-size:13px;color:var(--cp-muted)}
/* U+203A is bidi-mirrored, so right to left it already points from the parent to the child. */
.breadcrumb>li+li:before{content:"\203A";padding:0 8px;color:var(--cp-faint)}
.breadcrumb a,div.header-lined .breadcrumb li a{color:var(--cp-muted);text-decoration:none}
.breadcrumb a:hover,div.header-lined .breadcrumb li a:hover{color:var(--cp-heading);text-decoration:underline}
.breadcrumb>.active,div.header-lined .breadcrumb>.active{color:var(--cp-ink)}

/* Images in a knowledgebase article shrink to the column, so a phone shows them whole. */
.kb-article-content img{max-width:100%;height:auto}
/* Running text keeps the 848px line that the cp_portal_frame_width.php hook kept in its wide frame:
   the column's full width at a 1200px window in Six. Tables, images and code take the full width. */
:is(.kb-article-content,.announcement-single,.ticket-reply .message) :is(p,li){max-width:848px}

/* ======================================================================= header */
/* header.tpl: a white bar with the logo and the utilities, and the main menu under it. The Account
   menu and the main menu are WHMCS's secondary and primary navbars, which includes/coldproxy-navbar.tpl
   prints as Six's includes/navbar.tpl does: an <li> per item, whose submenu is a Bootstrap .dropdown-menu. */

.cp-header{position:relative;z-index:10;background-color:var(--cp-surface);border-bottom:1px solid var(--cp-border)}
.cp-header-bar-in{display:flex;align-items:center;gap:16px;max-width:1600px;height:68px;margin:0 auto;padding:0 24px}
.cp-header-logo,.cp-header-logo:hover,.cp-header-logo:focus{display:flex;align-items:center;flex:0 1 auto;min-width:0;color:var(--cp-heading);text-decoration:none}
.cp-header-logo img{display:block;width:auto;max-width:240px;height:32px}
/* Without a logo file, the company name, cut short with an ellipsis where the bar is too narrow. */
.cp-header-logo-text,.cp-header-logo-text:hover,.cp-header-logo-text:focus{display:block;overflow:hidden;font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.cp-header-utils{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.cp-header-account,.cp-header-menu{margin:0;padding:0;list-style:none}

/* The utilities, the Account menu's top items among them. */
.cp-header-util,.cp-header-account>li>a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:0;border-radius:10px;background-color:transparent;color:var(--cp-text);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s var(--cp-ease),color .2s var(--cp-ease)}
.cp-header-util:focus,.cp-header-account>li>a:focus{color:var(--cp-text);text-decoration:none}
.cp-header-util:hover,.cp-header-util:focus-visible,.cp-header-util[aria-expanded="true"],
.cp-header-account>li>a:hover,.cp-header-account>li>a:focus-visible,.cp-header-account>.open>a{color:var(--cp-heading);background-color:var(--cp-surface-3)}
.cp-header-util svg{flex:none}
.cp-header-icon{position:relative;width:40px;padding:0;justify-content:center}
.cp-header-badge{position:absolute;top:5px;inset-inline-end:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background-color:var(--cp-accent);color:var(--cp-on-accent);font-size:10px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--cp-surface)}
.cp-header-menu-button{display:none}
.cp-header-account{display:flex;align-items:center}
/* The avatar before the Account menu's name: the canvas's user icon in an indigo circle. The icon is a
   data: URL, so it does not depend on the name of the icon font WHMCS bundles. */
.cp-header-account>li>a::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--cp-icon-user) center/14px 14px no-repeat var(--cp-accent-soft)}
/* A photo an addon prints in the name's label (the Client Manager addon's, signed in) takes the
   avatar's place. A browser without :has() shows both. The addon's inline style sets a max-width
   and margins, so those two declarations carry !important. */
.cp-header-account>li>a:has(img)::before{display:none}
.cp-header-account>li>a img{flex:none;width:28px;height:28px;max-width:none !important;margin:0 !important;border-radius:50%;object-fit:cover}
/* navbar.tpl's caret becomes the canvas's chevron. */
.cp-header .caret{width:14px;height:14px;margin:0;border:0;background:var(--cp-icon-chevron) center/14px 14px no-repeat;vertical-align:middle}
/* A divider item: navbar.tpl prints it as an <li class="nav-divider"> around a "-----" link. */
.cp-header .nav-divider{height:1px;margin:6px 4px;overflow:hidden;background-color:var(--cp-border-soft)}
.cp-header .nav-divider>a{display:none}

/* The menus that open from the bar. */
.cp-header-account .dropdown-menu{left:auto;right:0;min-width:240px}
.cp-header-languages{width:320px;max-height:min(70vh,420px);overflow-y:auto}
.open>.cp-header-languages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.cp-header-languages>li>a[aria-current]{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);font-weight:600}
.cp-header-alerts{width:340px;max-width:calc(100vw - 32px)}
.cp-header-alerts-title{margin:0;padding:8px 10px 6px;font-size:13px;font-weight:700;color:var(--cp-heading)}
.cp-header-alert,.cp-header-alert:focus{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--cp-ink);font-size:13px;line-height:1.45;text-decoration:none}
.cp-header-alert:hover,.cp-header-alert:focus-visible{color:var(--cp-heading);background-color:var(--cp-surface-2);text-decoration:none}
.cp-header-alert-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:10px;background-color:var(--cp-accent-soft);color:var(--cp-accent-ink)}
.cp-header-alert-danger .cp-header-alert-icon{background-color:var(--cp-bad-soft);color:var(--cp-bad)}
.cp-header-alert-warning .cp-header-alert-icon{background-color:var(--cp-wait-soft);color:var(--cp-wait)}
.cp-header-alert-success .cp-header-alert-icon{background-color:var(--cp-ok-soft);color:var(--cp-ok)}
.cp-header-alerts-none{padding:10px;color:var(--cp-muted);font-size:13px}
/* WHMCS's Logout item, in the danger colour as on the canvas. */
.cp-header-account .dropdown-menu>[menuItemName="Logout"]>a{color:var(--cp-bad)}
.cp-header-account .dropdown-menu>[menuItemName="Logout"]>a:hover,.cp-header-account .dropdown-menu>[menuItemName="Logout"]>a:focus{color:var(--cp-bad-hover);background-color:var(--cp-bad-soft)}

/* The main menu: one row of links, which scrolls sideways where the window is too narrow for it
   ("conformance: layout" below). */
.cp-header-nav{border-top:1px solid var(--cp-border-soft)}
.cp-header-menu{display:flex;max-width:1600px;margin:0 auto;padding:0 10px}
.cp-header-menu>li{display:flex;height:48px}
.cp-header-menu>li>a,.cp-header-menu>li>a:focus{display:inline-flex;align-items:center;gap:6px;padding:0 14px;color:var(--cp-text);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:color .2s var(--cp-ease),box-shadow .2s var(--cp-ease)}
.cp-header-menu>li>a:hover,.cp-header-menu>li>a:focus-visible,.cp-header-menu>.open>a{color:var(--cp-heading);box-shadow:inset 0 -2px 0 var(--cp-border-strong)}

/* Phones: the bar keeps the logo, the bell, the return to the admin area and the menu button. The
   language, View Cart, the Account menu and the main menu fold into a panel under it, which the
   menu button opens by adding .cp-header-open to the header; the main menu comes first. */
@media (max-width:767.98px){
.cp-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;padding:10px 12px;padding-inline-start:16px}
.cp-header-bar,.cp-header-bar-in,.cp-header-utils{display:contents}
.cp-header-logo,.cp-header-logo:hover,.cp-header-logo:focus{flex:1 1 0}
.cp-header-logo img{max-width:160px;height:26px}
.cp-header-menu-button{display:inline-flex}
/* min-width:0, so a row never grows wider than the screen to fit content that does not wrap. */
.cp-header-fold{display:none;order:2;flex:0 0 100%;min-width:0;padding:6px 0;border-top:1px solid var(--cp-border-soft)}
.cp-header-nav{order:1;margin-top:10px}
.cp-header-open .cp-header-fold{display:block}
.cp-header-open .cp-header-cart{display:flex}
.cp-header-fold .cp-header-util,.cp-header-fold.cp-header-util,.cp-header-account>li>a{width:100%;height:44px;justify-content:flex-start}
/* View Cart is a fold and a utility in one element: it keeps the utility's sides, not the fold's. */
.cp-header-fold.cp-header-util{padding:0 12px}
.cp-header-fold .cp-header-chevron,.cp-header-account .caret,.cp-header-menu .caret{margin-inline-start:auto}
.cp-header-menu{display:block;padding:0}
.cp-header-menu>li{display:block;height:auto}
.cp-header-menu>li>a,.cp-header-menu>li>a:focus{display:flex;height:44px;padding:0 12px;border-radius:10px;box-shadow:none}
.cp-header-menu>li>a:hover,.cp-header-menu>li>a:focus-visible,.cp-header-menu>.open>a{background-color:var(--cp-surface-3);box-shadow:none}
/* The panel's menus open in place, in the panel's flow; the panel has no touch backdrop
   ("conformance: phone" below). The extra .cp-header outweighs the right-to-left float of every
   .dropdown-menu. */
.cp-header .cp-header-fold .dropdown-menu{position:relative;float:none;width:auto;min-width:0;max-height:none;margin:0 0 6px;padding:0;padding-inline-start:12px;border:0;box-shadow:none}
/* A long item, such as a product group's name, wraps onto a second line inside the panel. */
.cp-header .cp-header-fold .dropdown-menu>li>a{white-space:normal}
/* The bell's list opens across the header's width. */
.cp-header-bell{position:static}
.cp-header .cp-header-bell .dropdown-menu{left:12px;right:12px;width:auto;max-width:none}
}

/* ======================================================================= footer */
/* footer.tpl: one white row at the foot of the page, as the canvas's board 09: the copyright at the
   row's start and the footer hook output at its end, where the consent integration's Cookie settings
   button sits. Where the two do not fit on one line the row wraps, and the button starts the second
   line, as on the canvas's phone. The output's scripts and styles take no place in the row. */

.cp-footer{background-color:var(--cp-surface);border-top:1px solid var(--cp-border)}
.cp-footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;max-width:1600px;margin:0 auto;padding:20px 24px;color:var(--cp-text);font-size:13px;line-height:1.5}
.cp-footer-in>p{margin:0;color:var(--cp-muted)}
/* The Cookie settings button (cp_consent.php) has no class, so its data-cp-consent-portal attribute
   picks it. Its inline style takes the font and the colour from the row (font:inherit, color:inherit)
   and pads it 0.5rem; a margin of the same size, which the inline style does not set, keeps that
   padding, the button's tap area, out of the row's height. The row's colour is the canvas's colour for
   the link, and it turns to the heading colour while the pointer is on the button; the copyright keeps
   its own. The button is at least the canvas's 32px link button (run 8 F4i: 29.5px with its padding);
   a block margin of -6.25px leaves the row's 19.5px line, so the row keeps its height. Phones make it
   36px ("conformance: phone" below). */
[data-cp-consent-portal]{min-height:32px;margin:-.5rem;margin-block:-6.25px;text-underline-offset:3px}
.cp-footer-in:has(>[data-cp-consent-portal]:hover){color:var(--cp-heading)}
@media (max-width:767.98px){
.cp-footer-in{padding:20px 16px}
}

/* ======================================================================= buttons */
/* --cp-ctl-r is a control's corner radius; input and button groups square their inner corners with it. */

.btn{--cp-ctl-r:var(--cp-radius-md);padding:11px 16px;font-size:14px;line-height:20px;font-weight:600;border:1px solid var(--cp-border-strong);border-radius:var(--cp-ctl-r);background-color:var(--cp-surface);background-image:none;color:var(--cp-ink);text-shadow:none;box-shadow:none;transition:background-color .2s var(--cp-ease),border-color .2s var(--cp-ease),box-shadow .2s var(--cp-ease),color .2s var(--cp-ease),transform .2s var(--cp-ease)}
.btn:hover,.btn:focus,.btn.focus{color:var(--cp-heading)}
.btn:focus,.btn.focus,.btn:active:focus,.btn.active:focus,.btn:active.focus,.btn.active.focus{outline:0}
.btn:focus-visible{outline:2px solid var(--cp-focus);outline-offset:2px}
.btn:active,.btn.active{box-shadow:none}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{opacity:.55;box-shadow:none;transform:none}
.btn .badge{top:-1px;margin-inline-start:4px}

.btn-default{color:var(--cp-ink);background-color:var(--cp-surface);border-color:var(--cp-border-strong)}
.btn-default:hover,.btn-default:focus,.btn-default.focus{color:var(--cp-heading);background-color:var(--cp-surface-2);border-color:var(--cp-border-hover)}
.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default,
.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,
.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus{color:var(--cp-heading);background-color:var(--cp-surface-3);border-color:var(--cp-border-hover)}
.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus{background-color:var(--cp-surface);border-color:var(--cp-border-strong)}
.btn-default .badge{color:var(--cp-on-accent);background-color:var(--cp-ink)}

/* Primary and success are ColdProxy's one call to action: indigo, as the canvas draws Pay now and Sign in. */
.btn-primary,.btn-success{color:var(--cp-on-accent);background-color:var(--cp-accent);border-color:var(--cp-accent);box-shadow:var(--cp-shadow-primary)}
.btn-primary:hover,.btn-primary:focus,.btn-primary.focus,.btn-success:hover,.btn-success:focus,.btn-success.focus{color:var(--cp-on-accent);background-color:var(--cp-accent-hover);border-color:var(--cp-accent-hover);box-shadow:var(--cp-shadow-primary-hover);transform:translateY(-1px)}
.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary,
.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,
.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success,
.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,
.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus{color:var(--cp-on-accent);background-color:var(--cp-accent-hover);border-color:var(--cp-accent-hover);box-shadow:var(--cp-shadow-primary);transform:none}
.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,
.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus{background-color:var(--cp-accent);border-color:var(--cp-accent);box-shadow:none;transform:none}
.btn-primary .badge,.btn-success .badge{color:var(--cp-accent-ink);background-color:var(--cp-surface)}

/* Info and warning are soft tints; danger is the canvas's quiet red (Remove all, Request cancellation). */
.btn-info{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-color:var(--cp-accent-line)}
.btn-info:hover,.btn-info:focus,.btn-info.focus,.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info,
.btn-info:active:hover,.btn-info.active:hover,.btn-info:active:focus,.btn-info.active:focus{color:var(--cp-info);background-color:var(--cp-accent-soft);border-color:var(--cp-focus)}
.btn-warning{color:var(--cp-wait);background-color:var(--cp-wait-soft);border-color:var(--cp-wait-line)}
.btn-warning:hover,.btn-warning:focus,.btn-warning.focus,.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning,
.btn-warning:active:hover,.btn-warning.active:hover,.btn-warning:active:focus,.btn-warning.active:focus{color:var(--cp-wait-strong);background-color:var(--cp-wait-soft);border-color:var(--cp-wait-dot)}
.btn-danger{color:var(--cp-bad);background-color:transparent;border-color:transparent}
.btn-danger:hover,.btn-danger:focus,.btn-danger.focus,.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger,
.btn-danger:active:hover,.btn-danger.active:hover,.btn-danger:active:focus,.btn-danger.active:focus{color:var(--cp-bad-hover);background-color:var(--cp-bad-soft);border-color:transparent}
/* A disabled button keeps its resting look under the pointer. */
.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-color:var(--cp-accent-line)}
.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover{color:var(--cp-wait);background-color:var(--cp-wait-soft);border-color:var(--cp-wait-line)}
.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover{color:var(--cp-bad);background-color:transparent;border-color:transparent}
.btn-info .badge{color:var(--cp-surface);background-color:var(--cp-accent-ink)}
.btn-warning .badge{color:var(--cp-surface);background-color:var(--cp-wait)}
.btn-danger .badge{color:var(--cp-surface);background-color:var(--cp-bad)}

.btn-link{color:var(--cp-accent);font-weight:600;border-color:transparent;background-color:transparent;box-shadow:none}
.btn-link:hover,.btn-link:focus{color:var(--cp-accent-hover);background-color:var(--cp-accent-soft);text-decoration:none}
.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:var(--cp-faint);background-color:transparent}

.btn-lg,.btn-group-lg>.btn{--cp-ctl-r:14px;padding:13px 22px;font-size:16px;line-height:24px}
.btn-sm,.btn-group-sm>.btn{--cp-ctl-r:10px;padding:8px 12px;font-size:13px;line-height:18px}
.btn-xs,.btn-group-xs>.btn{--cp-ctl-r:8px;padding:4px 8px;font-size:12px;line-height:16px}

/* Groups and toolbars: inner corners square, outer corners round, in either direction. */
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,
.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-radius:var(--cp-ctl-r);border-start-end-radius:0;border-end-end-radius:0}
.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child),
.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-radius:var(--cp-ctl-r);border-start-start-radius:0;border-end-start-radius:0}
.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:0;margin-inline-start:-1px}
.btn-group>.btn:first-child{margin-left:0;margin-inline-start:0}
.btn-toolbar{margin-left:0;margin-inline-start:-5px}
.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:0;margin-inline-start:5px}
.btn-group>.btn-primary,.btn-group>.btn-success{box-shadow:none}
.btn-group>.btn-primary:hover,.btn-group>.btn-success:hover{transform:none;box-shadow:none}
.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}
.btn-group-vertical>.btn:first-child:not(:last-child){border-radius:var(--cp-ctl-r) var(--cp-ctl-r) 0 0}
.btn-group-vertical>.btn:last-child:not(:first-child){border-radius:0 0 var(--cp-ctl-r) var(--cp-ctl-r)}

/* ======================================================================= forms */

label{margin-bottom:6px;font-size:13px;font-weight:600;color:var(--cp-ink)}
legend{border-bottom-color:var(--cp-border);color:var(--cp-heading);font-size:16px;font-weight:700}

.form-control{--cp-ctl-r:var(--cp-radius-md);height:44px;padding:10px 14px;font-size:14px;line-height:22px;color:var(--cp-heading);background-color:var(--cp-surface);border:1px solid var(--cp-border-strong);border-radius:var(--cp-ctl-r);box-shadow:none;caret-color:var(--cp-accent);transition:border-color .2s var(--cp-ease),box-shadow .2s var(--cp-ease)}
.form-control:focus{border-color:var(--cp-focus);outline:0;box-shadow:0 0 0 4px var(--cp-focus-ring)}
.form-control::placeholder{color:var(--cp-muted);opacity:1}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:var(--cp-surface-3);color:var(--cp-muted);opacity:1}
.form-control[readonly]:focus{box-shadow:none;border-color:var(--cp-border-strong)}
textarea.form-control{padding-top:10px;padding-bottom:10px}
/* Selects draw the canvas's chevron instead of the browser's arrow. */
select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:40px;background-image:var(--cp-icon-chevron);background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;cursor:pointer}
select.form-control::-ms-expand{display:none}
select[multiple].form-control,select[size].form-control:not([size="1"]){padding-right:14px;background-image:none;cursor:default}

.input-sm,.form-group-sm .form-control,
.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{--cp-ctl-r:10px;height:36px;padding:7px 12px;font-size:13px;line-height:20px;border-radius:var(--cp-ctl-r)}
select.input-sm,.form-group-sm select.form-control,.input-group-sm>select.form-control{height:36px;line-height:20px;padding-right:36px;background-position:right 12px center}
.input-lg,.form-group-lg .form-control,
.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{--cp-ctl-r:14px;height:52px;padding:13px 16px;font-size:16px;line-height:24px;border-radius:var(--cp-ctl-r)}
select.input-lg,.form-group-lg select.form-control,.input-group-lg>select.form-control{height:52px;line-height:24px;padding-right:40px}
textarea.input-sm,textarea.input-lg,.input-group-sm>textarea.form-control,.input-group-lg>textarea.form-control,
select[multiple].input-sm,select[multiple].input-lg{height:auto}

.form-group{margin-bottom:16px}
.help-block{margin-top:6px;color:var(--cp-muted);font-size:13px}
.form-control-static{color:var(--cp-ink);padding-top:11px;padding-bottom:11px;min-height:44px}
@media (min-width:768px){.form-horizontal .control-label{padding-top:12px}}

/* Six's registration form styles its fields by id (#registration). They take the theme's field look,
   with room for the field icon on the side the icon sits: the left, or the right on a right-to-left
   page (also for e-mail fields, whose text runs left to right). When the phone country selector
   is on, WHMCS's script swaps the phone field's .field class for .form-control and hides its icon,
   so the selector's own padding applies there. */
#registration .field,#registration .form-control{height:44px;font-size:14px;line-height:22px;color:var(--cp-heading);background-color:var(--cp-surface);border:1px solid var(--cp-border-strong);border-radius:var(--cp-radius-md)}
#registration .field{padding:10px 14px}
#registration .field:focus,#registration .form-control:focus{border-color:var(--cp-focus);box-shadow:0 0 0 4px var(--cp-focus-ring)}
#registration textarea.field,#registration textarea.form-control{height:auto}
#registration select.field,#registration select.form-control{padding-inline-end:40px;background-image:var(--cp-icon-chevron);background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}
#registration .prepend-icon .field:not(select){padding-left:40px;padding-right:14px}
#registration .prepend-icon select.field{padding-left:40px;padding-right:40px}
#registration .prepend-icon .field-icon{width:40px;height:44px;margin:0;line-height:44px}
#registration .field::placeholder{color:var(--cp-muted);opacity:1}
#registration .field-icon i{color:var(--cp-faint)}
#registration .field[disabled],#registration .field[readonly],#registration .form-control[disabled],#registration .form-control[readonly]{background-color:var(--cp-surface-3);color:var(--cp-muted)}
/* Section headings: the title sits on the page background, over a line across the form. */
#registration .sub-heading{border-top-color:var(--cp-border)}
#registration .sub-heading span{font-weight:700;color:var(--cp-heading);background-color:var(--cp-page)}
#registration .sub-heading span small{color:var(--cp-muted)}
/* The mailing-list opt-in (registration and account details) is a card. */
.marketing-email-optin{padding:18px 24px 20px;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow)}

/* The markdown editor (tickets): the emoji addon's button takes the size of the toolbar's small buttons. */
.md-editor #emojiMenuButton{--cp-ctl-r:10px;width:36px;height:36px;padding:0;line-height:34px}

/* Checkboxes and radios: native controls in the brand colour, at the canvas's size. The rule has no
   specificity, so a class a module gives its own control wins (RipTide's and Auto Terminate's switches). */
:where(input[type="checkbox"],input[type="radio"]){width:16px;height:16px;accent-color:var(--cp-accent);cursor:pointer}
.checkbox label,.radio label,.checkbox-inline,.radio-inline{padding-left:0;padding-inline-start:24px;font-size:14px;font-weight:400;color:var(--cp-ink)}
.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"],.radio input[type="radio"],.radio-inline input[type="radio"]{margin-left:0;margin-inline-start:-24px;margin-top:2px}
.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-left:0;margin-inline-start:16px}

/* Six's iCheck boxes (.icheck-button) drawn as the same controls. */
.icheckbox_square-blue,.iradio_square-blue{width:18px;height:18px;background:var(--cp-surface);border:1px solid var(--cp-border-strong);transition:background-color .2s,border-color .2s}
.icheckbox_square-blue{border-radius:5px}
.iradio_square-blue{border-radius:50%}
.icheckbox_square-blue.hover,.iradio_square-blue.hover{border-color:var(--cp-border-hover)}
.icheckbox_square-blue.checked{background:var(--cp-accent) var(--cp-icon-check) center/12px 12px no-repeat;border-color:var(--cp-accent)}
.iradio_square-blue.checked{background:var(--cp-surface);border-color:var(--cp-accent);box-shadow:inset 0 0 0 4px var(--cp-accent)}
.icheckbox_square-blue.disabled,.iradio_square-blue.disabled{opacity:.5;cursor:default}

/* Bootstrap Switch (Six's security and SSO toggles): a pill in the brand colour. */
.bootstrap-switch{border-color:var(--cp-border-strong);border-radius:999px}
.bootstrap-switch.bootstrap-switch-focused{border-color:var(--cp-focus);box-shadow:0 0 0 4px var(--cp-focus-ring)}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info{color:var(--cp-on-accent);background:var(--cp-accent)}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{color:var(--cp-text);background:var(--cp-surface-3)}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger{color:var(--cp-bad);background:var(--cp-bad-soft)}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning{color:var(--cp-wait);background:var(--cp-wait-soft)}
.bootstrap-switch .bootstrap-switch-label{color:var(--cp-ink);background:var(--cp-surface)}
.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-label{font-weight:600}

/* Validation: the field's border and message take the state's colour. */
.has-error .form-control,.has-error button{border-color:var(--cp-bad);box-shadow:none}
.has-error .form-control:focus{border-color:var(--cp-bad);box-shadow:0 0 0 4px var(--cp-bad-ring)}
.has-error .help-block,.has-error .control-label,.has-error .radio,.has-error .checkbox,.has-error .radio-inline,.has-error .checkbox-inline,
.has-error.radio label,.has-error.checkbox label,.has-error.radio-inline label,.has-error.checkbox-inline label,.has-error .form-control-feedback,
.form-group .field-error-msg{color:var(--cp-bad)}
.has-error .input-group-addon{--cp-addon-border:var(--cp-bad);color:var(--cp-bad);background-color:var(--cp-bad-soft)}
.has-warning .form-control{border-color:var(--cp-wait-dot);box-shadow:none}
.has-warning .form-control:focus{border-color:var(--cp-wait-dot);box-shadow:0 0 0 4px var(--cp-wait-ring)}
.has-warning .help-block,.has-warning .control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline,
.has-warning.radio label,.has-warning.checkbox label,.has-warning.radio-inline label,.has-warning.checkbox-inline label,.has-warning .form-control-feedback{color:var(--cp-wait)}
.has-warning .input-group-addon{--cp-addon-border:var(--cp-wait-dot);color:var(--cp-wait);background-color:var(--cp-wait-soft)}
.has-success .form-control{border-color:var(--cp-ok-dot);box-shadow:none}
.has-success .form-control:focus{border-color:var(--cp-ok-dot);box-shadow:0 0 0 4px var(--cp-ok-ring)}
.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,
.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label,.has-success .form-control-feedback{color:var(--cp-ok)}
.has-success .input-group-addon{--cp-addon-border:var(--cp-ok-dot);color:var(--cp-ok);background-color:var(--cp-ok-soft)}
.has-feedback .form-control{padding-right:14px;padding-inline-end:44px}
.form-control-feedback{width:44px;height:44px;line-height:44px}
.has-feedback label~.form-control-feedback{top:26px !important}
.has-feedback label.sr-only~.form-control-feedback{top:0 !important}

/* The CAPTCHA box, for a page that opts in (phase 2). Six's includes/captcha.tpl prints its
   containerClass in place of Bootstrap's .row on the box's container, so the page includes it with
   containerClass=" cp-captcha". Six centres the reCAPTCHA box (#google-recaptcha-domainchecker, on
   every form) with 15px above and below it, and pads it 2.5% from the left below 992px; here it
   starts the form's line, as on the canvas's forms, and the container keeps the form's 16px rhythm.
   Six's fixed 304 by 78 size, which holds the box's place while Google's script loads, and its
   shrinking below 321px stay. Pages that do not opt in keep Six's centred box. */
.cp-captcha{margin:0 0 16px;text-align:start}
.cp-captcha #google-recaptcha-domainchecker{display:block;margin:0;padding:0}

/* Six's password-strength meter, for a page that opts in (phase 2) by wrapping the include
   (includes/pwstrength.tpl) in .cp-pwstrength. The include prints a <br>, #passwordStrengthBar, which
   its script widens and colours with Bootstrap's progress-bar-danger, -warning or -success, and the
   password tips. The meter is the canvas's: a 6px bar on the line colour, under the field. */
.cp-pwstrength>br{display:none}
.cp-pwstrength #passwordStrengthBar{height:6px;margin:8px 0 12px;background-color:var(--cp-border)}
.cp-pwstrength #passwordStrengthBar .progress-bar{transition:width .2s var(--cp-ease),background-color .2s var(--cp-ease)}

/* ======================================================================= input groups */
/* Inner corners and the shared border are squared on the inline-end of the first piece and the
   inline-start of the last, so the group joins up in both directions. */

.input-group-addon{--cp-ctl-r:var(--cp-radius-md);--cp-addon-border:var(--cp-border-strong);padding:10px 14px;font-size:14px;line-height:22px;font-weight:500;color:var(--cp-muted);background-color:var(--cp-surface-2);border:1px solid var(--cp-addon-border);border-radius:var(--cp-ctl-r)}
.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"]{margin-top:0}
.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,
.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-radius:var(--cp-ctl-r);border-start-end-radius:0;border-end-end-radius:0}
.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,
.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),
.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-radius:var(--cp-ctl-r);border-start-start-radius:0;border-end-start-radius:0}
.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child)>.btn{border-radius:0}
.input-group-addon:first-child{border:1px solid var(--cp-addon-border);border-inline-end:0}
.input-group-addon:last-child{border:1px solid var(--cp-addon-border);border-inline-start:0}
.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:0;margin-inline-end:-1px}
.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{margin-left:0;margin-inline-start:-1px}
.input-group-btn>.btn+.btn{margin-left:0;margin-inline-start:-1px}
.input-group-btn>.btn{box-shadow:none}
.input-group-btn>.btn:hover,.input-group-btn>.btn:focus{transform:none;box-shadow:none}
.input-group .form-control:focus{z-index:3}

/* ======================================================================= tables */

.table{margin-bottom:20px;color:var(--cp-ink);font-size:14px}
.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:14px 16px;border-top:1px solid var(--cp-border-soft);vertical-align:middle;line-height:1.5}
.table>thead>tr>th{padding-top:10px;padding-bottom:10px;font-size:12px;font-weight:600;color:var(--cp-muted);background-color:var(--cp-surface-2);border-bottom:1px solid var(--cp-border);white-space:nowrap;vertical-align:bottom}
.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td{border-top:0}
.table>tbody+tbody{border-top:1px solid var(--cp-border)}
.table>tfoot>tr>th,.table>tfoot>tr>td{font-weight:600;color:var(--cp-heading)}
.table .table{background-color:var(--cp-surface)}
.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:8px 12px}
.table-bordered{border:1px solid var(--cp-border)}
.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid var(--cp-border-soft)}
.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-color:var(--cp-border)}
.table-striped>tbody>tr:nth-of-type(odd){background-color:var(--cp-surface-2)}
.table-hover>tbody>tr{transition:background-color .2s}
.table-hover>tbody>tr:hover{background-color:var(--cp-row-hover)}
.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,
.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:var(--cp-surface-3)}
.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,
.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:var(--cp-ok-soft)}
.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,
.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:var(--cp-accent-soft)}
.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,
.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:var(--cp-wait-soft)}
.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,
.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:var(--cp-bad-soft)}
.table-responsive{border-radius:var(--cp-radius-md);scrollbar-color:var(--cp-border-strong) transparent}
@media screen and (max-width:767.98px){.table-responsive{border-color:var(--cp-border)}}

/* Six's list tables (DataTables): white bars, neutral heads, the canvas's search field and pager. */
.table-container{padding-bottom:24px}
.dataTables_wrapper{border:1px solid var(--cp-border);border-radius:var(--cp-radius);background-color:var(--cp-surface);box-shadow:var(--cp-shadow);overflow-x:auto}
.dataTables_wrapper .dataTables_info,div.dataTables_wrapper div.dataTables_info{padding:18px 24px !important;font-size:13px;font-weight:400;color:var(--cp-muted);background-color:var(--cp-surface);border-bottom:1px solid var(--cp-border-soft);text-align:start !important}
.dataTables_wrapper .dataTables_filter label{padding:10px 16px}
.dataTables_wrapper .dataTables_filter label .form-control{width:240px;height:40px;padding:8px 12px 8px 38px !important;font-size:14px;line-height:22px;border:1px solid var(--cp-border-strong);border-radius:10px;background:var(--cp-surface) var(--cp-icon-search) no-repeat left 12px center/16px 16px;color:var(--cp-heading)}
.dataTables_wrapper .dataTables_filter label .form-control:focus{border-color:var(--cp-focus);box-shadow:0 0 0 4px var(--cp-focus-ring)}
.dataTables_wrapper table.table-list{margin-bottom:0 !important;border-bottom:1px solid var(--cp-border-soft)}
/* Six centres the heads (table.table-list thead th); they start where their cells start. */
table.table-list thead th,.dataTables_wrapper table.table-list thead th,.dataTables_wrapper table.table-list thead th:nth-child(even){padding:10px 16px;font-size:12px;font-weight:600;color:var(--cp-muted);background-color:var(--cp-surface-2);border-bottom:1px solid var(--cp-border);text-align:start}
.dataTables_wrapper table.table-list thead th.sorting_asc,.dataTables_wrapper table.table-list thead th.sorting_desc{background-color:var(--cp-surface-3);color:var(--cp-ink)}
table.table-list tbody td{padding:14px 16px;font-size:14px;color:var(--cp-ink)}
.table-list>tbody>tr>td,.table-list>tbody>tr:nth-child(even)>td{background-color:var(--cp-surface);border-top-color:var(--cp-border-soft)}
.table-list>tbody>tr:hover>td{background-color:var(--cp-row-hover)}
.dataTables_wrapper .dataTables_length{padding:0;background-color:var(--cp-surface);font-size:13px;color:var(--cp-muted)}
.dataTables_wrapper .dataTables_length label{padding:16px 24px;margin:0;font-weight:400;color:var(--cp-muted)}
.dataTables_wrapper .dataTables_length label .form-control{width:auto;height:32px;padding:4px 30px 4px 10px;font-size:13px;line-height:22px;border:1px solid var(--cp-border-strong);border-radius:8px;background-position:right 8px center;background-size:14px 14px}
.dataTables_wrapper .dataTables_paginate{padding:10px 24px}
.dataTables_wrapper .dataTables_paginate .pagination{margin:0}
.dataTables_wrapper .dataTables_paginate .pagination>li>a,.dataTables_wrapper .dataTables_paginate .pagination>li>span{padding:8px 10px}
@media (max-width:600px){.dataTables_wrapper .dataTables_filter label .form-control{width:100%}}
/* Six's list pages link the DataTables sheets after this one, so these rules name the wrapper to outrank them. */
.dataTables_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,.dataTables_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{background-color:var(--cp-accent);border-color:var(--cp-surface)}
/* The tickets list's ticket number: Six's teal read 3.1:1 on the white row. */
.ticket-number{color:var(--cp-ink)}

/* ======================================================================= panels (cards) */

.panel{margin-bottom:20px;font-size:14px;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow)}
.panel-heading{padding:18px 24px 14px;border-bottom:1px solid var(--cp-border-soft);border-radius:calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px) 0 0}
.panel-title{font-size:16px;line-height:1.4;font-weight:700;color:var(--cp-heading)}
.panel-title>a,.panel-title>small,.panel-title>.small,.panel-title>small>a,.panel-title>.small>a{color:inherit}
.panel-body{padding:20px 24px}
.panel-footer{padding:14px 24px;background-color:var(--cp-surface-2);border-top:1px solid var(--cp-border-soft);border-radius:0 0 calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px);color:var(--cp-text)}
.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-radius:calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px) 0 0}
.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-radius:0 0 calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px)}
.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{padding:12px 24px;border-color:var(--cp-border-soft)}
.panel>.table:first-child,.panel>.table-responsive:first-child>.table:first-child{border-radius:calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px) 0 0}
.panel>.table:last-child,.panel>.table-responsive:last-child>.table:last-child{border-radius:0 0 calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px)}
/* Corner cells: the physical corner Bootstrap rounds is cleared first, then the logical one rounds, so the right corner rounds in either direction. */
.panel>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,
.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:0;border-start-start-radius:calc(var(--cp-radius) - 1px)}
.panel>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,
.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:0;border-start-end-radius:calc(var(--cp-radius) - 1px)}
.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child{border-bottom-left-radius:0;border-end-start-radius:calc(var(--cp-radius) - 1px)}
.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child{border-bottom-right-radius:0;border-end-end-radius:calc(var(--cp-radius) - 1px)}
.panel>.table>thead>tr>th:first-child,.panel>.table>tbody>tr>td:first-child,.panel>.table>tfoot>tr>td:first-child,
.panel>.table-responsive>.table>thead>tr>th:first-child,.panel>.table-responsive>.table>tbody>tr>td:first-child{padding-inline-start:24px}
.panel>.table>thead>tr>th:last-child,.panel>.table>tbody>tr>td:last-child,.panel>.table>tfoot>tr>td:last-child,
.panel>.table-responsive>.table>thead>tr>th:last-child,.panel>.table-responsive>.table>tbody>tr>td:last-child{padding-inline-end:24px}
.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid var(--cp-border-soft)}
.panel-group .panel{border-radius:var(--cp-radius)}
.panel-group .panel+.panel{margin-top:10px}
.panel-group .panel-heading+.panel-collapse>.panel-body,.panel-group .panel-heading+.panel-collapse>.list-group{border-top:1px solid var(--cp-border-soft)}
.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid var(--cp-border-soft)}

/* Default and primary cards are white; the state cards tint their heading. */
.panel-default,.panel-primary,.panel-success,.panel-info,.panel-warning,.panel-danger{border-color:var(--cp-border)}
.panel-default>.panel-heading,.panel-primary>.panel-heading{color:var(--cp-heading);background-color:var(--cp-surface);border-color:var(--cp-border-soft)}
.panel-success>.panel-heading{color:var(--cp-ok-strong);background-color:var(--cp-ok-soft);border-color:var(--cp-ok-line)}
.panel-info>.panel-heading{color:var(--cp-info);background-color:var(--cp-accent-soft);border-color:var(--cp-accent-line)}
.panel-warning>.panel-heading{color:var(--cp-wait-strong);background-color:var(--cp-wait-soft);border-color:var(--cp-wait-line)}
.panel-danger>.panel-heading{color:var(--cp-bad-hover);background-color:var(--cp-bad-soft);border-color:var(--cp-bad-line)}
.panel-success>.panel-heading .panel-title,.panel-info>.panel-heading .panel-title,.panel-warning>.panel-heading .panel-title,.panel-danger>.panel-heading .panel-title{color:inherit}
.panel-default>.panel-heading .badge,.panel-primary>.panel-heading .badge{color:var(--cp-text);background-color:var(--cp-surface-3)}
.panel-default>.panel-heading+.panel-collapse>.panel-body,.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:var(--cp-border-soft)}
/* Six's coloured top accents give way to the plain card. */
.panel[class*="panel-accent-"]{border-top:1px solid var(--cp-border)}

/* Six's home panels, before phase 2 redesigns the home page. */
.client-home-panels .panel>.panel-heading{background-color:var(--cp-surface);font-weight:700}
.client-home-panels .panel>.panel-heading .panel-title .btn{color:var(--cp-ink)}
.client-home-panels .panel>.panel-heading .panel-title .btn:hover{color:var(--cp-heading)}
.client-home-panels .panel small{color:var(--cp-muted)}
.client-home-panels .panel>.list-group{border-top:1px solid var(--cp-border-soft);border-bottom:1px solid var(--cp-border-soft)}
.client-home-panels .panel>.list-group .list-group-item{padding:10px 24px}
.client-home-panels .panel>.panel-body p{padding:12px 24px}
/* The knowledgebase search above them: the field look, with room for the search icon Six floats into it. */
.home-kb-search .form-control{padding-left:16px;padding-inline-start:48px;font-weight:400;color:var(--cp-heading);background-color:var(--cp-surface);border-color:var(--cp-border-strong)}
.home-kb-search .form-control:focus{border-color:var(--cp-focus);box-shadow:0 0 0 4px var(--cp-focus-ring)}
.home-kb-search i{margin-top:-33px;color:var(--cp-muted)}

/* Six's sidebar panels, which a service's pages keep: RipTide turns a RipTide service's panels into the
   tabs of its title block (RiptideClientRail::applyTabs()). Other pages show their panels as section
   tabs and side cards (ticket #12). */
.panel-sidebar{border-color:var(--cp-border);font-size:14px}
.panel-sidebar>.panel-heading{padding:14px 18px 6px;color:var(--cp-muted);background-color:transparent;border-bottom:0}
.panel-sidebar .panel-title{font-size:13px;font-weight:600;line-height:20px;color:var(--cp-muted)}
.panel-sidebar .panel-minimise{color:var(--cp-faint)}
.panel-sidebar>.panel-body{padding:8px 18px 14px;color:var(--cp-text)}
.panel-sidebar>.panel-footer{padding:0 18px 16px;color:var(--cp-text);background-color:transparent;border-top:0}
.panel-sidebar>.list-group{padding:0 8px 8px}
.panel-sidebar .list-group-item,.panel-sidebar>.list-group .list-group-item{padding:9px 10px;margin:0;border:0;border-radius:10px;line-height:22px;color:var(--cp-ink);background-color:transparent}
.panel-sidebar>.list-group .list-group-item:first-child,.panel-sidebar>.list-group .list-group-item:last-child{border-radius:10px}
.panel-sidebar a.list-group-item:hover,.panel-sidebar a.list-group-item:focus{color:var(--cp-heading);background-color:var(--cp-surface-3)}
.panel-sidebar a.list-group-item.active,.panel-sidebar a.list-group-item.active:focus,.panel-sidebar a.list-group-item.active:hover{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-color:transparent;font-weight:600}
.panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform){color:var(--cp-faint)}
.panel-sidebar a.list-group-item:hover i.fas,.panel-sidebar a.list-group-item:hover i.far{color:var(--cp-text) !important}
.panel-sidebar a.list-group-item.active i,.panel-sidebar a.list-group-item.active:focus i,.panel-sidebar a.list-group-item.active:hover i{color:var(--cp-accent)}
.panel-sidebar.view-filter-btns .list-group-item.active,.panel-sidebar.view-filter-btns .list-group-item.active:focus,.panel-sidebar.view-filter-btns .list-group-item.active:hover{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-color:transparent}
.panel-sidebar .list-group-item.disabled,.panel-sidebar .list-group-item.disabled:focus,.panel-sidebar .list-group-item.disabled:hover{background-color:transparent;color:var(--cp-faint)}
.list-group-item>i.far.fa-circle{color:var(--cp-faint)}

/* Six's product details: the tab content sits on a card under the tabs. */
div.product-details-tab-container{margin-top:20px;padding:20px 24px;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius)}
div.product-details div.product-icon{background-color:var(--cp-accent-soft);color:var(--cp-accent-ink);border-radius:var(--cp-radius)}
.product-status{border-radius:var(--cp-radius-md);background-color:var(--cp-surface-3)}
.product-status-text{color:var(--cp-text);font-size:13px;font-weight:600;letter-spacing:.02em}
.product-status-active{background-color:var(--cp-ok-soft)}
.product-status-active .product-status-text{color:var(--cp-ok)}
.product-status-pending{background-color:var(--cp-wait-soft)}
.product-status-pending .product-status-text{color:var(--cp-wait)}
.product-status-suspended,.product-status-fraud{background-color:var(--cp-bad-soft)}
.product-status-suspended .product-status-text,.product-status-fraud .product-status-text{color:var(--cp-bad)}
.product-status-terminated,.product-status-cancelled{background-color:var(--cp-surface-3)}

.well{padding:16px;background-color:var(--cp-surface-2);border:1px solid var(--cp-border);border-radius:14px;box-shadow:none}
.well-sm{padding:10px 12px;border-radius:var(--cp-radius-md)}
.well-lg{padding:24px}

/* ======================================================================= cards */
/* The canvas's cards, for the theme's own markup (phase 2): .cp-card, with .cp-card-head holding a
   .cp-card-title at the start and a .cp-card-link at the end. A flush card (.cp-card-flush) has no
   padding, so a table inside runs edge to edge under the padded head. Bootstrap 3 has no .card, but
   the order form prints it beside .panel, so the theme's names carry the prefix. RipTide's service
   pages print .cp-card-head too: its stylesheet comes later and sets every property that rule sets, so
   those pages keep RipTide's values. Since RipTide #243 its cards are the theme's .panel. */

.cp-card{min-width:0;padding:20px 24px 22px;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow)}
.cp-card-flush{padding:0;overflow:hidden}
.cp-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.cp-card-flush>.cp-card-head{padding:18px 24px 14px}
.cp-card-title{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;line-height:1.4;font-weight:700;color:var(--cp-heading)}
.cp-card-title>svg,.cp-card-title>i{flex:none;color:var(--cp-muted)}
.cp-card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;text-decoration:none}
@media (max-width:767.98px){
.cp-card{padding:18px 16px 20px}
.cp-card-flush{padding:0}
.cp-card-flush>.cp-card-head{padding:16px 16px 12px}
}

/* ======================================================================= alerts (notices) */

.alert{padding:14px 16px;margin-bottom:20px;border:1px solid transparent;border-radius:14px;font-size:14px;line-height:1.55}
.alert h4{color:inherit}
.alert .alert-link,.alert-success .alert-link,.alert-info .alert-link,.alert-warning .alert-link,.alert-danger .alert-link{font-weight:600;color:inherit;text-decoration:underline}
.alert-success{color:var(--cp-ok-strong);background-color:var(--cp-ok-soft);border-color:var(--cp-ok-line)}
.alert-info{color:var(--cp-info);background-color:var(--cp-accent-soft);border-color:var(--cp-accent-line)}
.alert-info .alert-link{color:var(--cp-info-link)}
.alert-warning{color:var(--cp-wait-strong);background-color:var(--cp-wait-soft);border-color:var(--cp-wait-line)}
.alert-danger{color:var(--cp-bad-hover);background-color:var(--cp-bad-soft);border-color:var(--cp-bad-line)}
.alert-success hr{border-top-color:var(--cp-ok-line)}
.alert-info hr{border-top-color:var(--cp-accent-line)}
.alert-warning hr{border-top-color:var(--cp-wait-line)}
.alert-danger hr{border-top-color:var(--cp-bad-line)}
.alert-dismissable,.alert-dismissible{padding-right:16px;padding-inline-end:40px}
.alert-bordered-left{border:1px solid transparent;border-inline-start:3px solid;border-radius:14px;text-align:start}

/* ======================================================================= labels, badges and statuses (pills) */

.label{display:inline-block;padding:3px 10px;font-size:12px;font-weight:600;line-height:18px;color:var(--cp-text);background-color:var(--cp-surface-3);border-radius:999px;vertical-align:middle;white-space:nowrap}
a.label:hover,a.label:focus{color:var(--cp-heading)}
.label-default,.label-default[href]:hover,.label-default[href]:focus{color:var(--cp-text);background-color:var(--cp-surface-3)}
.label-primary,.label-primary[href]:hover,.label-primary[href]:focus,.label-info,.label-info[href]:hover,.label-info[href]:focus{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft)}
.label-success,.label-success[href]:hover,.label-success[href]:focus{color:var(--cp-ok);background-color:var(--cp-ok-soft)}
.label-warning,.label-warning[href]:hover,.label-warning[href]:focus{color:var(--cp-wait);background-color:var(--cp-wait-soft)}
.label-danger,.label-danger[href]:hover,.label-danger[href]:focus{color:var(--cp-bad);background-color:var(--cp-bad-soft)}
/* The home page's service list: Six writes its labels white and cuts them to 3rem on phones. These
   rules come before the status labels below, which take over for a .label.status-* label. */
.div-service-status .label{color:var(--cp-text)}
.div-service-status .label-primary,.div-service-status .label-info{color:var(--cp-accent-ink)}
.div-service-status .label-success{color:var(--cp-ok)}
.div-service-status .label-warning{color:var(--cp-wait)}
.div-service-status .label-danger{color:var(--cp-bad)}
.div-service-status .label:not(.label-placeholder){width:auto}

.badge{min-width:22px;padding:3px 7px;font-size:12px;font-weight:600;line-height:14px;color:var(--cp-text);background-color:var(--cp-surface-3);border-radius:999px;font-variant-numeric:tabular-nums}
a.badge:hover,a.badge:focus{color:var(--cp-heading)}
.list-group-item .badge{color:var(--cp-text);background-color:var(--cp-surface-3)}
.list-group-item.active>.badge,.nav-pills>.active>a>.badge,.nav-tabs>.active>a>.badge{color:var(--cp-accent-ink);background-color:var(--cp-surface)}

/* Six's status labels: ok, waiting, attention, done. Active carries the canvas's live dot. */
.label.status{display:inline-block;padding:3px 10px;font-size:12px;font-weight:600;line-height:18px;border:0;border-radius:999px;color:var(--cp-text);background-color:var(--cp-surface-3)}
.status-active,.status-completed,.status-paid,.status-accepted,.status-delivered{color:var(--cp-ok)}
.status-open,.status-answered,.status-inprogress{color:var(--cp-accent-ink)}
.status-pending,.status-unpaid,.status-payment-pending,.status-pending-transfer,.status-pending-registration,.status-customer-reply,.status-grace,.status-redemption{color:var(--cp-wait)}
.status-suspended,.status-fraud,.status-collections{color:var(--cp-bad)}
.status-cancelled,.status-terminated,.status-closed,.status-expired,.status-transferred-away,.status-onhold,.status-refunded,.status-draft,.status-dead,.status-lost{color:var(--cp-text)}
/* The status pill map: the canvas's pill tones (.cp-pill--ok, tint, wait, bad and muted, the names and
   values RipTide's service pages printed until RipTide #243) and the WHMCS statuses that take each one.
   A theme template prints WHMCS's status as Six does, .label.status-<status>, and a pill of its own as
   .cp-pill with a tone; Auto Terminate prints its billing-cycle badge as .cp-pill--tint. */
.cp-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.cp-pill--ok,.label.status-active,.label.status-completed,.label.status-paid,.label.status-accepted,.label.status-delivered{color:var(--cp-ok);background-color:var(--cp-ok-soft)}
.label.status-active:before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:6px;border-radius:50%;background-color:var(--cp-ok-dot);vertical-align:1px}
.cp-pill--tint,.label.status-open,.label.status-answered,.label.status-inprogress{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft)}
.cp-pill--wait,.label.status-pending,.label.status-unpaid,.label.status-payment-pending,.label.status-pending-transfer,.label.status-pending-registration,.label.status-customer-reply,.label.status-grace,.label.status-redemption{color:var(--cp-wait);background-color:var(--cp-wait-soft)}
.cp-pill--bad,.label.status-suspended,.label.status-fraud,.label.status-collections{color:var(--cp-bad);background-color:var(--cp-bad-soft)}
.cp-pill--muted,.label.status-cancelled,.label.status-terminated,.label.status-closed,.label.status-expired,.label.status-transferred-away,.label.status-onhold,.label.status-refunded,.label.status-draft,.label.status-dead,.label.status-lost{color:var(--cp-text);background-color:var(--cp-surface-3)}
/* Labels WHMCS colours inline with the admin's status colour (#16 C12c): the home page's recent
   tickets and a ticket's Status/Priority fill a label with it, and a custom ticket status writes it as
   the text and the border (Six's ticket list). Each becomes the canvas's soft pill: the colour under a
   veil of --cp-label-veil, a background image the inline style does not set, with ink text, which
   reads at 4.5:1 or more whatever the colour (tests/cases/ThemeComponentsTest.php). The custom
   status's text is painted in ink through -webkit-text-fill-color, which its inline color does not
   reach, so no rule needs !important. */
.label[style*="background-color"]{color:var(--cp-ink);background-image:linear-gradient(var(--cp-label-veil),var(--cp-label-veil))}
.label.status-custom{padding:2px 9px;background-color:currentColor;background-image:linear-gradient(var(--cp-label-veil),var(--cp-label-veil));-webkit-text-fill-color:var(--cp-ink)}
/* Auto Terminate's billing-cycle badge, <span style="background:#5bc0de;color:#fff">, on the services
   list and a service's page: white on that blue reads 2.09:1. The inline background shorthand leaves no
   room for a veil, so the text is painted in the heading colour (9.4:1). The badge's own fix belongs in
   Auto Terminate: drop this rule once Auto Terminate prints the badge in the theme's pill tokens. */
[style*="background:#5bc0de"]{-webkit-text-fill-color:var(--cp-heading)}
/* Open Ticket's "Your Recent Tickets" card writes each status as text in the admin's status colour,
   <span style="color:#888888">Closed</span>, 3.54:1 on the card (#16 run 6A D3). The text is painted in
   that colour mixed with 60% of the heading colour, which keeps its hue and reads at 4.5:1 or more
   whatever the colour, white included (tests/cases/ThemeComponentsTest.php). */
.recent-ticket span[style*="color"]{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,var(--cp-heading))}

/* ======================================================================= tabs and pills */

.nav>li>a{color:var(--cp-text)}
.nav>li>a:hover,.nav>li>a:focus{color:var(--cp-heading);background-color:var(--cp-surface-3)}
.nav>li.disabled>a,.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{color:var(--cp-faint);background-color:transparent}
.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:var(--cp-surface-3);border-color:transparent}
.nav .nav-divider{background-color:var(--cp-border-soft)}

.nav-tabs{border-bottom:1px solid var(--cp-border)}
.nav-tabs>li>a{margin-right:0;margin-inline-end:4px;padding:12px 14px;line-height:22px;font-size:14px;font-weight:500;color:var(--cp-text);background-color:transparent;border:0;border-radius:0;box-shadow:inset 0 -2px 0 transparent;transition:color .2s var(--cp-ease),box-shadow .2s var(--cp-ease)}
.nav-tabs>li>a:hover,.nav-tabs>li>a:focus{color:var(--cp-heading);background-color:transparent;box-shadow:inset 0 -2px 0 var(--cp-border-strong)}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:var(--cp-accent-ink);font-weight:600;background-color:transparent;border:0;box-shadow:inset 0 -2px 0 var(--cp-accent)}
.nav-tabs>li>a .badge{margin-inline-start:6px}
.nav-tabs.nav-justified>li>a{margin-inline-end:0;border:0;border-radius:0}
.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:0}
@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:0;border-radius:0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:transparent}}

.nav-pills>li>a{padding:9px 14px;line-height:22px;border-radius:10px;font-weight:500}
.nav-pills>li+li{margin-left:0;margin-inline-start:4px}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);font-weight:600}
.nav-stacked>li+li{margin-top:2px;margin-inline-start:0}

/* ======================================================================= pagination and pager */

.pagination{margin:20px 0;font-size:14px;border-radius:0}
.pagination>li>a,.pagination>li>span{min-width:36px;height:36px;padding:8px 10px;margin-left:0;margin-inline-start:4px;line-height:20px;font-weight:600;text-align:center;color:var(--cp-text);background-color:transparent;border:0;border-radius:10px;transition:background-color .2s,color .2s}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-inline-start:0;border-radius:10px}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-radius:10px}
.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{z-index:2;color:var(--cp-heading);background-color:var(--cp-surface-3);border-color:transparent}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:3;color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-color:transparent}
.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:var(--cp-faint);background-color:transparent;border-color:transparent}
.pagination-lg>li>a,.pagination-lg>li>span{min-width:44px;height:44px;padding:11px 14px;font-size:16px;line-height:22px;border-radius:12px}
.pagination-sm>li>a,.pagination-sm>li>span{min-width:30px;height:30px;padding:5px 8px;font-size:13px;line-height:20px;border-radius:8px}

.pager li>a,.pager li>span{padding:8px 14px;font-weight:600;color:var(--cp-ink);background-color:var(--cp-surface);border:1px solid var(--cp-border-strong);border-radius:10px}
.pager li>a:hover,.pager li>a:focus{color:var(--cp-heading);background-color:var(--cp-surface-2);border-color:var(--cp-border-hover)}
.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:var(--cp-faint);background-color:var(--cp-surface)}

/* ======================================================================= dropdowns (menus) */

.dropdown-menu{min-width:220px;padding:8px;margin-top:8px;font-size:14px;text-align:start;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:14px;box-shadow:var(--cp-shadow-menu)}
.dropdown-menu>li>a{padding:9px 10px;line-height:22px;font-weight:500;color:var(--cp-ink);border-radius:10px;transition:background-color .2s,color .2s}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{color:var(--cp-heading);background-color:var(--cp-surface-3);text-decoration:none}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);font-weight:600}
.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:var(--cp-faint);background-color:transparent}
.dropdown-menu .divider{height:1px;margin:6px 4px;background-color:var(--cp-border-soft)}
.dropdown-header{padding:8px 10px 4px;font-size:12px;font-weight:600;color:var(--cp-muted)}
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{margin-top:0;margin-bottom:8px}
.dropdown-menu>li>a>i:first-child{width:18px;margin-inline-end:6px;color:var(--cp-muted);text-align:center}
.dropdown-menu>li>a.text-danger,.dropdown-menu>li>a.text-danger>i:first-child{color:var(--cp-bad)}
.dropdown-menu>li>a.text-danger:hover,.dropdown-menu>li>a.text-danger:focus{color:var(--cp-bad-hover);background-color:var(--cp-bad-soft)}
/* Bootstrap navbars (Six's MarketConnect store pages) open their dropdowns flush under the bar, with
   square top corners; from 768px, where the bar is a row, they take the menu look too. */
@media (min-width:768px){
.navbar-nav>li>.dropdown-menu{padding:8px;margin-top:0;border:1px solid var(--cp-border);border-radius:14px}
}

/* ======================================================================= popovers and tooltips */

.popover{max-width:340px;padding:0;font-size:14px;color:var(--cp-ink);background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:14px;box-shadow:var(--cp-shadow-menu)}
.popover-title{padding:12px 16px 10px;margin:0;font-size:13px;font-weight:700;color:var(--cp-heading);background-color:transparent;border-bottom:1px solid var(--cp-border-soft);border-radius:13px 13px 0 0}
.popover-content{padding:12px 16px}
.popover.top>.arrow{border-top-color:var(--cp-border)}
.popover.top>.arrow:after{border-top-color:var(--cp-surface)}
.popover.right>.arrow{border-right-color:var(--cp-border)}
.popover.right>.arrow:after{border-right-color:var(--cp-surface)}
.popover.bottom>.arrow{border-bottom-color:var(--cp-border)}
.popover.bottom>.arrow:after{border-bottom-color:var(--cp-surface)}
.popover.left>.arrow{border-left-color:var(--cp-border)}
.popover.left>.arrow:after{border-left-color:var(--cp-surface)}

.tooltip{font-size:12px}
.tooltip-inner{padding:6px 10px;color:var(--cp-on-accent);background-color:var(--cp-console);border-radius:8px;font-weight:500;line-height:1.5}
.tooltip.top .tooltip-arrow,.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow{border-top-color:var(--cp-console)}
.tooltip.right .tooltip-arrow{border-right-color:var(--cp-console)}
.tooltip.left .tooltip-arrow{border-left-color:var(--cp-console)}
.tooltip.bottom .tooltip-arrow,.tooltip.bottom-left .tooltip-arrow,.tooltip.bottom-right .tooltip-arrow{border-bottom-color:var(--cp-console)}
.tooltip.in{opacity:1}

/* ======================================================================= modals */

.modal-backdrop{background-color:var(--cp-console)}
.modal-backdrop.in{opacity:.5}
.modal-content{background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow-modal)}
.modal-header{padding:18px 24px 14px;border-bottom:1px solid var(--cp-border-soft)}
.modal-title{font-size:16px;line-height:1.4;font-weight:700;color:var(--cp-heading)}
.modal-body{padding:20px 24px}
.modal-footer{padding:14px 24px;text-align:end;background-color:var(--cp-surface-2);border-top:1px solid var(--cp-border-soft);border-radius:0 0 calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px)}
.modal-footer .btn+.btn{margin-left:0;margin-inline-start:8px}
.modal-footer .btn-group .btn+.btn{margin-inline-start:-1px}
/* Six's system modal (#modalAjax) is also a primary panel: keep it a plain dialog. */
.modal-content.panel-primary>.modal-header.panel-heading{color:var(--cp-heading);background-color:var(--cp-surface);border-radius:calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px) 0 0}
.modal-content.panel-primary>.modal-footer.panel-footer{background-color:var(--cp-surface-2)}
.close{font-size:22px;font-weight:400;line-height:1;color:var(--cp-muted);text-shadow:none;opacity:1}
.close:hover,.close:focus{color:var(--cp-heading);opacity:1}
.modal-header .close{margin-top:-1px}

/* ======================================================================= list groups */

.list-group{margin-bottom:20px;font-size:14px;border-radius:var(--cp-radius-md)}
.list-group-item{padding:12px 16px;color:var(--cp-ink);background-color:var(--cp-surface);border:1px solid var(--cp-border)}
.list-group-item:first-child{border-top-left-radius:var(--cp-radius-md);border-top-right-radius:var(--cp-radius-md)}
.list-group-item:last-child{border-bottom-left-radius:var(--cp-radius-md);border-bottom-right-radius:var(--cp-radius-md)}
a.list-group-item,button.list-group-item{color:var(--cp-ink);transition:background-color .2s,color .2s}
a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:var(--cp-heading)}
a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{color:var(--cp-heading);background-color:var(--cp-surface-2)}
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus,
a.list-group-item.active,a.list-group-item.active:hover,a.list-group-item.active:focus{z-index:2;color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-color:var(--cp-accent-line)}
.list-group-item.active .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading{color:var(--cp-accent-ink)}
.list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text{color:var(--cp-accent-ink)}
.list-group-item.disabled,.list-group-item.disabled:hover,.list-group-item.disabled:focus{color:var(--cp-faint);background-color:var(--cp-surface-2)}
.list-group-item-heading{font-weight:600;color:var(--cp-heading)}
.list-group-item-text{color:var(--cp-text)}
.list-group-item-success,a.list-group-item-success,button.list-group-item-success{color:var(--cp-ok-strong);background-color:var(--cp-ok-soft)}
.list-group-item-info,a.list-group-item-info,button.list-group-item-info{color:var(--cp-info);background-color:var(--cp-accent-soft)}
.list-group-item-warning,a.list-group-item-warning,button.list-group-item-warning{color:var(--cp-wait-strong);background-color:var(--cp-wait-soft)}
.list-group-item-danger,a.list-group-item-danger,button.list-group-item-danger{color:var(--cp-bad-hover);background-color:var(--cp-bad-soft)}

/* ======================================================================= section tabs and side cards */
/* A section page (header.tpl, ticket #12): the title and the rows of tabs across the page, then the
   content beside the side cards, which drop under it in windows 1100px wide or narrower. A page without side cards gives
   its content the whole width. includes/coldproxy-section-panels.tpl prints the tabs and cards from
   WHMCS's sidebars; their links keep Six's .list-group-item, which WHMCS's scripts look for. */

.cp-section{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:24px}
.cp-section-head{flex:0 0 100%;min-width:0}
/* The content column is .main-content too, without Six's bottom margin and minimum height ("page shell"). */
.cp-section-main{flex:1 1 0;min-width:0}
.cp-section>.clearfix{display:none}

/* The title row (the canvas's .pg-head): Six's page title at the start, and at the end the page's
   actions, which includes/coldproxy-section-actions.tpl prints for the pages that have any, bottom-
   aligned with the title. The row has the margins the title had: 20px above a row of tabs, 24px
   otherwise. On phones the actions share a line of their own. */
.cp-section-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.cp-section-head>.cp-section-title:not(:last-child){margin-bottom:20px}
.cp-section-title>.header-lined{flex:1 1 320px;min-width:0;margin-bottom:0}
.cp-section-actions{display:flex;flex-wrap:wrap;gap:10px}
/* WHMCS's action lists print there as buttons (#16 C-D1), each with the icon WHMCS gives its link. */
.cp-section-actions>.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* On phones the buttons share their line while their labels fit; a pair that does not fit takes a line
   each, and a label too long for a line wraps inside its button. */
@media (max-width:767.98px){
.cp-section-actions{flex:1 1 100%}
.cp-section-actions>.btn{flex:1 1 auto;white-space:normal}
}

/* A row of tabs: the canvas's .tabs, scrolling sideways when it is wider than the page. */
.cp-tabs{margin-bottom:24px;border-bottom:1px solid var(--cp-border)}
.cp-tabs+.cp-tabs{margin-top:-12px}
.cp-tabs-list{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none}
.cp-tabs-list::-webkit-scrollbar{display:none}
/* A row wider than the page fades out at each end that hides tabs, as the canvas's phone tabs do.
   header.tpl's script scrolls the current tab into view, clear of the fades, and marks those ends
   with .cp-more-start and .cp-more-end as the row scrolls; without it, the row only scrolls.
   A mask reads only alpha, so the opaque currentColor draws the solid part. A tab that takes the
   keyboard's focus scrolls in clear of the fades too (scroll-padding). */
[dir="rtl"] .cp-tabs-list{--cp-tabs-fade-dir:to left}
.cp-tabs-list.cp-more-start{--cp-tabs-fade-start:transparent}
.cp-tabs-list.cp-more-end{--cp-tabs-fade-end:transparent}
.cp-tabs-list.cp-more-start,.cp-tabs-list.cp-more-end{scroll-padding-inline:48px;-webkit-mask-image:linear-gradient(var(--cp-tabs-fade-dir,to right),var(--cp-tabs-fade-start,currentColor),currentColor 48px,currentColor calc(100% - 48px),var(--cp-tabs-fade-end,currentColor));mask-image:linear-gradient(var(--cp-tabs-fade-dir,to right),var(--cp-tabs-fade-start,currentColor),currentColor 48px,currentColor calc(100% - 48px),var(--cp-tabs-fade-end,currentColor))}
.cp-tabs .list-group-item{display:inline-flex;align-items:center;flex:none;gap:8px;height:46px;margin:0;padding:0 14px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;color:var(--cp-text);background-color:transparent;border:0;border-radius:0;box-shadow:inset 0 -2px 0 transparent;transition:color .2s var(--cp-ease),box-shadow .2s var(--cp-ease)}
.cp-tabs a.list-group-item:hover,.cp-tabs a.list-group-item:focus{color:var(--cp-heading);background-color:transparent;box-shadow:inset 0 -2px 0 var(--cp-border-strong)}
/* Inside the scrolling row, the focus ring is drawn inside the tab, where the row does not cut it off. */
.cp-tabs a.list-group-item:focus-visible{outline-offset:-2px}
.cp-tabs .list-group-item.active,.cp-tabs .list-group-item.active:hover,.cp-tabs .list-group-item.active:focus{color:var(--cp-accent-ink);font-weight:600;background-color:transparent;box-shadow:inset 0 -2px 0 var(--cp-accent)}
.cp-tabs .list-group-item.disabled,.cp-tabs .list-group-item.disabled:hover,.cp-tabs .list-group-item.disabled:focus{color:var(--cp-faint);background-color:transparent;box-shadow:none}
/* WHMCS prints the count before the label; it shows after it, as the canvas's count. */
.cp-tabs .list-group-item>.badge{order:1;float:none;min-width:22px;height:20px;margin:0;padding:0 6px;line-height:20px;color:var(--cp-text);background-color:var(--cp-surface-3)}
.cp-tabs .list-group-item.active>.badge{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft)}
/* The canvas's tabs have no icons. They stay in the page: the status filter script swaps them. */
.cp-tabs .list-group-item>i{display:none}

/* The side cards: WHMCS's panels on the theme's cards, their links as rows. */
.cp-side-cards{display:flex;flex-direction:column;gap:20px;flex:0 0 clamp(280px,22%,360px);min-width:0}
/* A name with no place to break, such as an attachment's file name, breaks anywhere rather than
   leaving the card. */
.cp-side-card{margin-bottom:0;overflow-wrap:anywhere}
.cp-side-card>.panel-heading{padding:18px 20px 12px;border-bottom:0}
.cp-side-card>.panel-heading .panel-title>i{color:var(--cp-muted)}
.cp-side-card>.panel-heading+.panel-body{padding:0 20px 18px}
.cp-side-card>.panel-footer{padding:12px 20px}
.cp-side-card>.list-group .list-group-item{padding:11px 20px}
@media (max-width:1100px){
.cp-side-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:start;flex:0 0 100%;margin-top:24px}
}

/* ======================================================================= progress */

.progress{height:10px;margin-bottom:20px;background-color:var(--cp-surface-3);border-radius:999px;box-shadow:none}
.progress-bar{font-size:10px;line-height:10px;background-color:var(--cp-accent);box-shadow:none}
.progress-bar-success{background-color:var(--cp-ok-dot)}
.progress-bar-info{background-color:var(--cp-focus)}
.progress-bar-warning{background-color:var(--cp-wait-dot)}
.progress-bar-danger{background-color:var(--cp-bad)}

/* ======================================================================= phones */
/* The canvas's phone spacing: 16px card edges and tighter cells, so tables and cards keep to the screen. */

@media (max-width:767.98px){
.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:10px}
.table>thead>tr>th{padding-top:8px;padding-bottom:8px}
.panel>.table>thead>tr>th:first-child,.panel>.table>tbody>tr>td:first-child,.panel>.table>tfoot>tr>td:first-child,
.panel>.table-responsive>.table>thead>tr>th:first-child,.panel>.table-responsive>.table>tbody>tr>td:first-child{padding-inline-start:16px}
.panel>.table>thead>tr>th:last-child,.panel>.table>tbody>tr>td:last-child,.panel>.table>tfoot>tr>td:last-child,
.panel>.table-responsive>.table>thead>tr>th:last-child,.panel>.table-responsive>.table>tbody>tr>td:last-child{padding-inline-end:16px}
.panel-heading{padding:16px 16px 12px}
.panel-body{padding:16px}
.panel-footer{padding:12px 16px}
.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{padding:12px 16px}
.modal-header{padding:16px 16px 12px}
.modal-body{padding:16px}
.modal-footer{padding:12px 16px}
.dataTables_wrapper .dataTables_info,div.dataTables_wrapper div.dataTables_info{padding:14px 16px !important}
.dataTables_wrapper .dataTables_length label{padding:12px 16px}
.dataTables_wrapper .dataTables_paginate{padding:8px 16px}
table.table-list tbody td{padding:12px 10px}
}

/* ======================================================================= list tables on phones */
/* Phase 2's list tables (services, invoices, quotes, tickets, e-mail history): below 768px a table
   that carries .cp-rtable shows each row as a block, as the canvas's .rtable. Each cell is a line: a
   cell with data-label shows the label at the line's start and its value at the end, and a cell
   without one, such as the service's name, takes the whole line; .cp-rtable-act holds the row's
   button, at full width. The label floats, so a value of several lines or tags stays as it is.
   A DataTables list keeps Six's includes/tablelist.tpl, which turns DataTables Responsive on. Each
   <th> of the table carries Responsive's class "all", so Responsive hides no column: it then writes
   no inline display:none on a cell, and never marks the table .collapsed, on which Six's
   clickableSafeRedirect stops following a row's link. A table without .cp-rtable keeps its layout.
   Only on screens: a printed page is narrower than 768px too, and invoice.css prints the invoice
   750px wide, so a printed table stays a table. */
@media screen and (max-width:767.98px){
table.cp-rtable,table.cp-rtable>tbody,table.cp-rtable>tbody>tr{display:block;width:100%}
table.cp-rtable>thead{display:none}
table.cp-rtable>tbody>tr{padding:14px 16px;border-top:1px solid var(--cp-border-soft);background-color:var(--cp-surface)}
table.cp-rtable>tbody>tr:first-child{border-top:0}
table.cp-rtable>tbody>tr:hover{background-color:var(--cp-row-hover)}
table.cp-rtable>tbody>tr>td{display:block;padding:5px 0;border:0;white-space:normal;text-align:start}
table.cp-rtable>tbody>tr>td[data-label]{display:flow-root;text-align:end}
table.cp-rtable>tbody>tr>td[data-label]::before{content:attr(data-label);float:inline-start;margin-inline-end:12px;font-size:12px;font-weight:600;line-height:21px;color:var(--cp-muted);text-align:start}
table.cp-rtable>tbody>tr>td.cp-rtable-act{display:block;padding-top:10px}
table.cp-rtable>tbody>tr>td.cp-rtable-act .btn{width:100%}
}

/* ======================================================================= right to left */
/* Mirrors what Bootstrap 3 and Six place by physical side. The rules above that use logical
   properties already mirror themselves. */

[dir="rtl"] .pull-right{float:left !important}
[dir="rtl"] .pull-left{float:right !important}
[dir="rtl"] .text-right{text-align:left}
[dir="rtl"] .text-left{text-align:right}
[dir="rtl"] .nav,[dir="rtl"] .pagination,[dir="rtl"] .pager,[dir="rtl"] .list-group,[dir="rtl"] .list-unstyled,[dir="rtl"] .list-inline,
[dir="rtl"] .media-list{padding-right:0}
[dir="rtl"] .list-inline{margin-left:0;margin-right:-5px}
@media (min-width:768px){[dir="rtl"] .dl-horizontal dt{float:right;clear:right;text-align:left}[dir="rtl"] .dl-horizontal dd{margin-left:0;margin-right:180px}}
.blockquote-reverse,blockquote.pull-right{border-right-color:var(--cp-border)}
[dir="rtl"] .blockquote-reverse,[dir="rtl"] blockquote.pull-right{padding-left:15px;padding-right:0;border-left:4px solid var(--cp-border);border-right:0;text-align:left}
[dir="rtl"] .media-left,[dir="rtl"] .media>.pull-left{padding-right:0;padding-left:10px}
[dir="rtl"] .media-right,[dir="rtl"] .media>.pull-right{padding-left:0;padding-right:10px}
/* Directional icons point the other way. */
[dir="rtl"] .fa-chevron-right,[dir="rtl"] .fa-chevron-left,[dir="rtl"] .fa-angle-right,[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-double-right,[dir="rtl"] .fa-angle-double-left,[dir="rtl"] .fa-arrow-right,[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-long-arrow-alt-right,[dir="rtl"] .fa-long-arrow-alt-left,[dir="rtl"] .fa-caret-right,[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-arrow-circle-right,[dir="rtl"] .fa-arrow-circle-left,[dir="rtl"] .fa-chevron-circle-right,[dir="rtl"] .fa-chevron-circle-left,
[dir="rtl"] .fa-sign-out-alt,[dir="rtl"] .fa-sign-in-alt,[dir="rtl"] .fa-reply,[dir="rtl"] .fa-share{transform:scaleX(-1)}
/* Fields whose content is written left to right: addresses, numbers, phone numbers, and the generated
   password. The field types weigh nothing, so a module's class on its own field wins. */
[dir="rtl"] :where(input[type="email"],input[type="url"],input[type="tel"],input[type="number"]),[dir="rtl"] #inputGeneratePasswordOutput{direction:ltr;text-align:right}
[dir="rtl"] :where(input[type="email"],input[type="url"],input[type="tel"])::placeholder{text-align:right}
[dir="rtl"] .intl-tel-input{direction:ltr}
[dir="rtl"] .intl-tel-input input[type="tel"],[dir="rtl"] .intl-tel-input input[type="tel"]::placeholder{text-align:left}
/* An addon such as ".com" or "USD" keeps its own direction. */
[dir="rtl"] .input-group-addon{unicode-bidi:plaintext}

/* Buttons, button groups and toolbars */
[dir="rtl"] .btn-group>.btn,[dir="rtl"] .btn-group>.btn-group,[dir="rtl"] .btn-toolbar .btn,[dir="rtl"] .btn-toolbar .btn-group,[dir="rtl"] .btn-toolbar .input-group{float:right}
/* Justified groups lay their buttons out as table cells, which a float would undo. */
[dir="rtl"] .btn-group-justified>.btn,[dir="rtl"] .btn-group-justified>.btn-group{float:none}

/* Forms */
[dir="rtl"] select.form-control{padding-right:14px;padding-left:40px;background-position:left 14px center}
[dir="rtl"] select[multiple].form-control,[dir="rtl"] select[size].form-control:not([size="1"]){padding-left:14px}
[dir="rtl"] select.input-sm,[dir="rtl"] .form-group-sm select.form-control,[dir="rtl"] .input-group-sm>select.form-control{padding-right:12px;padding-left:36px;background-position:left 12px center}
@media (min-width:768px){[dir="rtl"] .form-horizontal .control-label{text-align:left}}
[dir="rtl"] #registration select.field,[dir="rtl"] #registration select.form-control{background-position:left 14px center}
[dir="rtl"] #registration .prepend-icon .field:not(select){padding-left:14px;padding-right:40px}
/* The order form (standard_cart) pads its icon fields 36px on the left, but right to left the icon
   sits at the field's right. A select keeps 40px on the left for its arrow. The form's
   margin-right:10px on every label would hold the icon 10px in from the field's edge. */
[dir="rtl"] #order-standard_cart .prepend-icon .field-icon{margin-right:0}
[dir="rtl"] #order-standard_cart .prepend-icon .field:not(select){padding-left:14px;padding-right:36px}
[dir="rtl"] #order-standard_cart .prepend-icon select.field{padding-left:40px;padding-right:36px}
/* Its option labels and feature bullets are often English ("15 Mbps $3.80 USD"), which a right-to-left
   line reorders. Each keeps the direction of its own text, beside its radio or bullet on the right;
   the radio would otherwise follow left-to-right text to the left. The store cards' feature list is a
   <ul> of no class (run 7 R7-3). */
[dir="rtl"] #order-standard_cart .product-configurable-options label,[dir="rtl"] #order-standard_cart ul.product-features li,
[dir="rtl"] #order-standard_cart .product li{unicode-bidi:plaintext;text-align:right}
[dir="rtl"] #order-standard_cart .product-configurable-options label>.iradio_square-blue,[dir="rtl"] #order-standard_cart .product-configurable-options label>.icheckbox_square-blue{float:right;margin-left:6px}
/* An amount ("$3.80 USD", which a right-to-left line shows as "USD $3.80") and the product group's English
   tagline keep the order of their own text (#16 run 6 S10, S12), as does each amount on the order
   summary's lines (run 7 R7-1); the tagline stays at the right. */
[dir="rtl"] #order-standard_cart .price,[dir="rtl"] #order-standard_cart .item-price>span,[dir="rtl"] #order-standard_cart #subtotal,
[dir="rtl"] #order-standard_cart .amt,[dir="rtl"] #order-standard_cart .cost,
[dir="rtl"] #order-standard_cart .summary-container .pull-right{unicode-bidi:plaintext}
/* Checkout's total box: for a payment method with a fee, the PaymentGatewayCharges addon rewrites it as
   three lines, "Total:" and "Gateway Fee :" in English, then the total's label in the page's language,
   each amount in a <strong>. After an Arabic label the amount read "USD 4.24$" (run 7 R7-1). Each line
   takes the direction of its own text, and each amount its own, so the English lines keep "Total:"
   where an isolated amount alone would show ":Total". */
[dir="rtl"] #order-standard_cart #totalDueToday,[dir="rtl"] #order-standard_cart #totalDueToday strong{unicode-bidi:plaintext}
[dir="rtl"] #order-standard_cart .header-lined p{unicode-bidi:plaintext;text-align:right}
[dir="rtl"] .form-control-feedback{right:auto;left:0}

/* Input groups: the field floats with the line. */
[dir="rtl"] .input-group .form-control{float:right}

/* Tables */
[dir="rtl"] .dataTables_wrapper .dataTables_filter,[dir="rtl"] .dataTables_wrapper .dataTables_paginate{float:left}
[dir="rtl"] .dataTables_wrapper .dataTables_info,[dir="rtl"] div.dataTables_wrapper div.dataTables_info{text-align:right !important}
[dir="rtl"] .dataTables_wrapper .dataTables_filter label .form-control{padding:8px 38px 8px 12px !important;background-position:right 12px center}
[dir="rtl"] .dataTables_wrapper .dataTables_length label .form-control{padding:4px 10px 4px 30px;background-position:left 8px center}
[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate,[dir="rtl"] div.dataTables_wrapper div.dataTables_filter,[dir="rtl"] div.dataTables_wrapper div.dataTables_length label,[dir="rtl"] div.dataTables_wrapper div.dataTables_filter label{text-align:left}
[dir="rtl"] .dataTables_wrapper table.dataTable thead>tr>th.sorting,[dir="rtl"] .dataTables_wrapper table.dataTable thead>tr>th.sorting_asc,[dir="rtl"] .dataTables_wrapper table.dataTable thead>tr>th.sorting_desc{padding-right:16px;padding-left:30px}
[dir="rtl"] .dataTables_wrapper table.dataTable thead .sorting:after,[dir="rtl"] .dataTables_wrapper table.dataTable thead .sorting_asc:after,[dir="rtl"] .dataTables_wrapper table.dataTable thead .sorting_desc:after{right:auto;left:8px}
[dir="rtl"] .dataTables_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,[dir="rtl"] .dataTables_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{padding-left:16px;padding-right:30px}
[dir="rtl"] .dataTables_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,[dir="rtl"] .dataTables_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{left:auto;right:4px}

/* Tabs and pills */
[dir="rtl"] .nav-tabs>li,[dir="rtl"] .nav-pills>li{float:right}
[dir="rtl"] .nav-stacked>li,[dir="rtl"] .nav-justified>li{float:none}

/* Pagination and pager */
[dir="rtl"] .pagination>li>a,[dir="rtl"] .pagination>li>span{float:right}
[dir="rtl"] .pager .next>a,[dir="rtl"] .pager .next>span{float:left}
[dir="rtl"] .pager .previous>a,[dir="rtl"] .pager .previous>span{float:right}

/* Dropdowns open toward the line's end. */
[dir="rtl"] .dropdown-menu{left:auto;right:0;float:right}
[dir="rtl"] .dropdown-menu-right,[dir="rtl"] .pull-right>.dropdown-menu,[dir="rtl"] .navbar-right .dropdown-menu,[dir="rtl"] .cp-header-account .dropdown-menu{left:0;right:auto}
[dir="rtl"] .dropdown-menu-left,[dir="rtl"] .navbar-right .dropdown-menu-left{left:auto;right:0}

/* Alerts, modals and list groups */
[dir="rtl"] .close{float:left}
[dir="rtl"] .alert-dismissable .close,[dir="rtl"] .alert-dismissible .close{right:auto;left:-21px}
[dir="rtl"] .list-group-item>.badge{float:left}
[dir="rtl"] .list-group-item>.badge+.badge{margin-right:0;margin-left:5px}
[dir="rtl"] .nav-pills>li>a>.badge{margin-left:0;margin-right:3px}
[dir="rtl"] .progress-bar{float:right}

/* Bootstrap navbars (Six's MarketConnect store pages; Bootstrap collapses them below 768px) */
@media (min-width:768px){
[dir="rtl"] .navbar-header,[dir="rtl"] .navbar-nav,[dir="rtl"] .navbar-nav>li,[dir="rtl"] .navbar-brand{float:right}
[dir="rtl"] .navbar-left{float:right !important}
[dir="rtl"] .navbar-right{float:left !important;margin-left:-15px;margin-right:0}
[dir="rtl"] .navbar-right~.navbar-right{margin-left:0}
[dir="rtl"] .navbar>.container .navbar-brand,[dir="rtl"] .navbar>.container-fluid .navbar-brand{margin-left:0;margin-right:-15px}
}
[dir="rtl"] .navbar-toggle{float:left;margin-right:0;margin-left:15px}

/* The header's icons that point along the line: the cart and the way out to the admin area. */
[dir="rtl"] .cp-header-cart svg,[dir="rtl"] .cp-header-admin svg{transform:scaleX(-1)}

/* The grid: columns run from the right, and offsets, pushes and pulls are measured from the right. */
[dir="rtl"] [class*="col-xs-"]{float:right}
[dir="rtl"] .col-xs-offset-0{margin-left:0;margin-right:0}
[dir="rtl"] .col-xs-push-0{left:auto;right:auto}
[dir="rtl"] .col-xs-pull-0{right:auto;left:auto}
[dir="rtl"] .col-xs-offset-1{margin-left:0;margin-right:8.33333333%}
[dir="rtl"] .col-xs-push-1{left:auto;right:8.33333333%}
[dir="rtl"] .col-xs-pull-1{right:auto;left:8.33333333%}
[dir="rtl"] .col-xs-offset-2{margin-left:0;margin-right:16.66666667%}
[dir="rtl"] .col-xs-push-2{left:auto;right:16.66666667%}
[dir="rtl"] .col-xs-pull-2{right:auto;left:16.66666667%}
[dir="rtl"] .col-xs-offset-3{margin-left:0;margin-right:25%}
[dir="rtl"] .col-xs-push-3{left:auto;right:25%}
[dir="rtl"] .col-xs-pull-3{right:auto;left:25%}
[dir="rtl"] .col-xs-offset-4{margin-left:0;margin-right:33.33333333%}
[dir="rtl"] .col-xs-push-4{left:auto;right:33.33333333%}
[dir="rtl"] .col-xs-pull-4{right:auto;left:33.33333333%}
[dir="rtl"] .col-xs-offset-5{margin-left:0;margin-right:41.66666667%}
[dir="rtl"] .col-xs-push-5{left:auto;right:41.66666667%}
[dir="rtl"] .col-xs-pull-5{right:auto;left:41.66666667%}
[dir="rtl"] .col-xs-offset-6{margin-left:0;margin-right:50%}
[dir="rtl"] .col-xs-push-6{left:auto;right:50%}
[dir="rtl"] .col-xs-pull-6{right:auto;left:50%}
[dir="rtl"] .col-xs-offset-7{margin-left:0;margin-right:58.33333333%}
[dir="rtl"] .col-xs-push-7{left:auto;right:58.33333333%}
[dir="rtl"] .col-xs-pull-7{right:auto;left:58.33333333%}
[dir="rtl"] .col-xs-offset-8{margin-left:0;margin-right:66.66666667%}
[dir="rtl"] .col-xs-push-8{left:auto;right:66.66666667%}
[dir="rtl"] .col-xs-pull-8{right:auto;left:66.66666667%}
[dir="rtl"] .col-xs-offset-9{margin-left:0;margin-right:75%}
[dir="rtl"] .col-xs-push-9{left:auto;right:75%}
[dir="rtl"] .col-xs-pull-9{right:auto;left:75%}
[dir="rtl"] .col-xs-offset-10{margin-left:0;margin-right:83.33333333%}
[dir="rtl"] .col-xs-push-10{left:auto;right:83.33333333%}
[dir="rtl"] .col-xs-pull-10{right:auto;left:83.33333333%}
[dir="rtl"] .col-xs-offset-11{margin-left:0;margin-right:91.66666667%}
[dir="rtl"] .col-xs-push-11{left:auto;right:91.66666667%}
[dir="rtl"] .col-xs-pull-11{right:auto;left:91.66666667%}
[dir="rtl"] .col-xs-offset-12{margin-left:0;margin-right:100%}
[dir="rtl"] .col-xs-push-12{left:auto;right:100%}
[dir="rtl"] .col-xs-pull-12{right:auto;left:100%}
@media (min-width:768px){
[dir="rtl"] [class*="col-sm-"]{float:right}
[dir="rtl"] .col-sm-offset-0{margin-left:0;margin-right:0}
[dir="rtl"] .col-sm-push-0{left:auto;right:auto}
[dir="rtl"] .col-sm-pull-0{right:auto;left:auto}
[dir="rtl"] .col-sm-offset-1{margin-left:0;margin-right:8.33333333%}
[dir="rtl"] .col-sm-push-1{left:auto;right:8.33333333%}
[dir="rtl"] .col-sm-pull-1{right:auto;left:8.33333333%}
[dir="rtl"] .col-sm-offset-2{margin-left:0;margin-right:16.66666667%}
[dir="rtl"] .col-sm-push-2{left:auto;right:16.66666667%}
[dir="rtl"] .col-sm-pull-2{right:auto;left:16.66666667%}
[dir="rtl"] .col-sm-offset-3{margin-left:0;margin-right:25%}
[dir="rtl"] .col-sm-push-3{left:auto;right:25%}
[dir="rtl"] .col-sm-pull-3{right:auto;left:25%}
[dir="rtl"] .col-sm-offset-4{margin-left:0;margin-right:33.33333333%}
[dir="rtl"] .col-sm-push-4{left:auto;right:33.33333333%}
[dir="rtl"] .col-sm-pull-4{right:auto;left:33.33333333%}
[dir="rtl"] .col-sm-offset-5{margin-left:0;margin-right:41.66666667%}
[dir="rtl"] .col-sm-push-5{left:auto;right:41.66666667%}
[dir="rtl"] .col-sm-pull-5{right:auto;left:41.66666667%}
[dir="rtl"] .col-sm-offset-6{margin-left:0;margin-right:50%}
[dir="rtl"] .col-sm-push-6{left:auto;right:50%}
[dir="rtl"] .col-sm-pull-6{right:auto;left:50%}
[dir="rtl"] .col-sm-offset-7{margin-left:0;margin-right:58.33333333%}
[dir="rtl"] .col-sm-push-7{left:auto;right:58.33333333%}
[dir="rtl"] .col-sm-pull-7{right:auto;left:58.33333333%}
[dir="rtl"] .col-sm-offset-8{margin-left:0;margin-right:66.66666667%}
[dir="rtl"] .col-sm-push-8{left:auto;right:66.66666667%}
[dir="rtl"] .col-sm-pull-8{right:auto;left:66.66666667%}
[dir="rtl"] .col-sm-offset-9{margin-left:0;margin-right:75%}
[dir="rtl"] .col-sm-push-9{left:auto;right:75%}
[dir="rtl"] .col-sm-pull-9{right:auto;left:75%}
[dir="rtl"] .col-sm-offset-10{margin-left:0;margin-right:83.33333333%}
[dir="rtl"] .col-sm-push-10{left:auto;right:83.33333333%}
[dir="rtl"] .col-sm-pull-10{right:auto;left:83.33333333%}
[dir="rtl"] .col-sm-offset-11{margin-left:0;margin-right:91.66666667%}
[dir="rtl"] .col-sm-push-11{left:auto;right:91.66666667%}
[dir="rtl"] .col-sm-pull-11{right:auto;left:91.66666667%}
[dir="rtl"] .col-sm-offset-12{margin-left:0;margin-right:100%}
[dir="rtl"] .col-sm-push-12{left:auto;right:100%}
[dir="rtl"] .col-sm-pull-12{right:auto;left:100%}
}
@media (min-width:992px){
[dir="rtl"] [class*="col-md-"]{float:right}
[dir="rtl"] .col-md-offset-0{margin-left:0;margin-right:0}
[dir="rtl"] .col-md-push-0{left:auto;right:auto}
[dir="rtl"] .col-md-pull-0{right:auto;left:auto}
[dir="rtl"] .col-md-offset-1{margin-left:0;margin-right:8.33333333%}
[dir="rtl"] .col-md-push-1{left:auto;right:8.33333333%}
[dir="rtl"] .col-md-pull-1{right:auto;left:8.33333333%}
[dir="rtl"] .col-md-offset-2{margin-left:0;margin-right:16.66666667%}
[dir="rtl"] .col-md-push-2{left:auto;right:16.66666667%}
[dir="rtl"] .col-md-pull-2{right:auto;left:16.66666667%}
[dir="rtl"] .col-md-offset-3{margin-left:0;margin-right:25%}
[dir="rtl"] .col-md-push-3{left:auto;right:25%}
[dir="rtl"] .col-md-pull-3{right:auto;left:25%}
[dir="rtl"] .col-md-offset-4{margin-left:0;margin-right:33.33333333%}
[dir="rtl"] .col-md-push-4{left:auto;right:33.33333333%}
[dir="rtl"] .col-md-pull-4{right:auto;left:33.33333333%}
[dir="rtl"] .col-md-offset-5{margin-left:0;margin-right:41.66666667%}
[dir="rtl"] .col-md-push-5{left:auto;right:41.66666667%}
[dir="rtl"] .col-md-pull-5{right:auto;left:41.66666667%}
[dir="rtl"] .col-md-offset-6{margin-left:0;margin-right:50%}
[dir="rtl"] .col-md-push-6{left:auto;right:50%}
[dir="rtl"] .col-md-pull-6{right:auto;left:50%}
[dir="rtl"] .col-md-offset-7{margin-left:0;margin-right:58.33333333%}
[dir="rtl"] .col-md-push-7{left:auto;right:58.33333333%}
[dir="rtl"] .col-md-pull-7{right:auto;left:58.33333333%}
[dir="rtl"] .col-md-offset-8{margin-left:0;margin-right:66.66666667%}
[dir="rtl"] .col-md-push-8{left:auto;right:66.66666667%}
[dir="rtl"] .col-md-pull-8{right:auto;left:66.66666667%}
[dir="rtl"] .col-md-offset-9{margin-left:0;margin-right:75%}
[dir="rtl"] .col-md-push-9{left:auto;right:75%}
[dir="rtl"] .col-md-pull-9{right:auto;left:75%}
[dir="rtl"] .col-md-offset-10{margin-left:0;margin-right:83.33333333%}
[dir="rtl"] .col-md-push-10{left:auto;right:83.33333333%}
[dir="rtl"] .col-md-pull-10{right:auto;left:83.33333333%}
[dir="rtl"] .col-md-offset-11{margin-left:0;margin-right:91.66666667%}
[dir="rtl"] .col-md-push-11{left:auto;right:91.66666667%}
[dir="rtl"] .col-md-pull-11{right:auto;left:91.66666667%}
[dir="rtl"] .col-md-offset-12{margin-left:0;margin-right:100%}
[dir="rtl"] .col-md-push-12{left:auto;right:100%}
[dir="rtl"] .col-md-pull-12{right:auto;left:100%}
}
@media (min-width:1200px){
[dir="rtl"] [class*="col-lg-"]{float:right}
[dir="rtl"] .col-lg-offset-0{margin-left:0;margin-right:0}
[dir="rtl"] .col-lg-push-0{left:auto;right:auto}
[dir="rtl"] .col-lg-pull-0{right:auto;left:auto}
[dir="rtl"] .col-lg-offset-1{margin-left:0;margin-right:8.33333333%}
[dir="rtl"] .col-lg-push-1{left:auto;right:8.33333333%}
[dir="rtl"] .col-lg-pull-1{right:auto;left:8.33333333%}
[dir="rtl"] .col-lg-offset-2{margin-left:0;margin-right:16.66666667%}
[dir="rtl"] .col-lg-push-2{left:auto;right:16.66666667%}
[dir="rtl"] .col-lg-pull-2{right:auto;left:16.66666667%}
[dir="rtl"] .col-lg-offset-3{margin-left:0;margin-right:25%}
[dir="rtl"] .col-lg-push-3{left:auto;right:25%}
[dir="rtl"] .col-lg-pull-3{right:auto;left:25%}
[dir="rtl"] .col-lg-offset-4{margin-left:0;margin-right:33.33333333%}
[dir="rtl"] .col-lg-push-4{left:auto;right:33.33333333%}
[dir="rtl"] .col-lg-pull-4{right:auto;left:33.33333333%}
[dir="rtl"] .col-lg-offset-5{margin-left:0;margin-right:41.66666667%}
[dir="rtl"] .col-lg-push-5{left:auto;right:41.66666667%}
[dir="rtl"] .col-lg-pull-5{right:auto;left:41.66666667%}
[dir="rtl"] .col-lg-offset-6{margin-left:0;margin-right:50%}
[dir="rtl"] .col-lg-push-6{left:auto;right:50%}
[dir="rtl"] .col-lg-pull-6{right:auto;left:50%}
[dir="rtl"] .col-lg-offset-7{margin-left:0;margin-right:58.33333333%}
[dir="rtl"] .col-lg-push-7{left:auto;right:58.33333333%}
[dir="rtl"] .col-lg-pull-7{right:auto;left:58.33333333%}
[dir="rtl"] .col-lg-offset-8{margin-left:0;margin-right:66.66666667%}
[dir="rtl"] .col-lg-push-8{left:auto;right:66.66666667%}
[dir="rtl"] .col-lg-pull-8{right:auto;left:66.66666667%}
[dir="rtl"] .col-lg-offset-9{margin-left:0;margin-right:75%}
[dir="rtl"] .col-lg-push-9{left:auto;right:75%}
[dir="rtl"] .col-lg-pull-9{right:auto;left:75%}
[dir="rtl"] .col-lg-offset-10{margin-left:0;margin-right:83.33333333%}
[dir="rtl"] .col-lg-push-10{left:auto;right:83.33333333%}
[dir="rtl"] .col-lg-pull-10{right:auto;left:83.33333333%}
[dir="rtl"] .col-lg-offset-11{margin-left:0;margin-right:91.66666667%}
[dir="rtl"] .col-lg-push-11{left:auto;right:91.66666667%}
[dir="rtl"] .col-lg-pull-11{right:auto;left:91.66666667%}
[dir="rtl"] .col-lg-offset-12{margin-left:0;margin-right:100%}
[dir="rtl"] .col-lg-push-12{left:auto;right:100%}
[dir="rtl"] .col-lg-pull-12{right:auto;left:100%}
}

/* Six's own placements */
@media (min-width:992px){
[dir="rtl"] .pull-md-left{float:right}
[dir="rtl"] .pull-md-right{float:left}
}
@media (min-width:768px){
[dir="rtl"] .pull-sm-left{float:right}
[dir="rtl"] .pull-sm-right{float:left}
[dir="rtl"] .text-right-sm{text-align:left}
[dir="rtl"] .logincontainer.with-social .login-form{padding-right:0;padding-left:29px;border-right:0;border-left:1px solid var(--cp-border)}
}
/* The secondary sidebar stacks under the primary one, which floats right on these pages. */
[dir="rtl"] .sidebar.sidebar-secondary{clear:right}
[dir="rtl"] .panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform){float:left}
[dir="rtl"] .tile .icon{right:auto;left:10px}
[dir="rtl"] .ticket-reply .date{float:left}
[dir="rtl"] .ticket-reply .user i{float:right}
[dir="rtl"] .ticket-reply .attachments ul{padding:0 15px 0 0}
/* Ticket messages keep the page's direction. The server's bidi_text_fix.php and bidi_ticket_fix.php
   print, after this file, unicode-bidi:plaintext with direction:ltr on these selectors; plaintext
   still gives each paragraph the direction of its own text. */
[dir="rtl"] div.message,[dir="rtl"] div.message p,[dir="rtl"] div.message span,[dir="rtl"] div.message div,[dir="rtl"] div.message li{direction:rtl}
[dir="rtl"] .captchaimage{text-align:left}
[dir="rtl"] .home-kb-search i{float:right;margin-left:0;margin-right:20px}
[dir="rtl"] .kb-article-title .btn-print{float:left}
[dir="rtl"] .kb-article-details li{float:right;padding-right:0;padding-left:30px}
[dir="rtl"] .affiliate-stat i{float:right}
[dir="rtl"] .verification-banner .fas,[dir="rtl"] .verification-banner .fal,[dir="rtl"] .verification-banner .far{float:right;padding:2px 0 0 10px}
[dir="rtl"] .verification-banner .btn.close{margin-left:0;margin-right:10px}
/* The markdown editor's fullscreen control sits at the toolbar's end. */
[dir="rtl"] .md-editor .md-controls{float:left}
[dir="rtl"] .md-editor.md-fullscreen-mode .md-fullscreen-controls{right:auto;left:20px;text-align:left}
[dir="rtl"] .col-button-left{padding-left:7px;padding-right:0}
[dir="rtl"] .col-button-right{padding-left:0;padding-right:7px}

/* ======================================================================= conformance: layout (#16) */
/* Phase 1's layout brought to the canvas and the spec (#16, the conformance release of design phase 2). */

/* The main menu from 768px (C5): one 48px row at every width, as the canvas's .ph-nav. A row wider
   than the window scrolls sideways, without a scrollbar, and fades out at each end that hides items,
   as a section's rows of tabs do. A scrolling row cuts what overflows it, so the menus that open from
   it are positioned from the nav, outside the row: they open under the row, and header.tpl's script
   puts each under its item, wherever the row is scrolled. The nav draws the fades over the row with
   ::before and ::after, bands of the header's white: a mask on the row would hide the open menus too.
   An item that takes the keyboard's focus scrolls in clear of the bands (scroll-padding). */
@media (min-width:768px){
.cp-header-nav{position:relative}
.cp-header-menu{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:48px}
.cp-header-menu::-webkit-scrollbar{display:none}
.cp-header-menu>li{position:static}
.cp-header-menu>li>.dropdown-menu{top:100%;left:auto;right:auto}
.cp-header-nav::before,.cp-header-nav::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:48px;pointer-events:none;opacity:0;transition:opacity .2s var(--cp-ease)}
.cp-header-nav::before{inset-inline-start:0;background:linear-gradient(var(--cp-row-fade-start,to right),var(--cp-surface),transparent)}
.cp-header-nav::after{inset-inline-end:0;background:linear-gradient(var(--cp-row-fade-end,to left),var(--cp-surface),transparent)}
.cp-header-nav.cp-more-start::before,.cp-header-nav.cp-more-end::after{opacity:1}
}
[dir="rtl"] .cp-header-nav{--cp-row-fade-start:to left;--cp-row-fade-end:to right}

/* Phones (C10): a row of tabs runs to the screen's edges, as the canvas's board 13 draws it, its line
   included; the first tab keeps the page's 16px gutter. */
@media (max-width:767.98px){
.cp-tabs{margin-inline:-16px}
.cp-tabs-list{padding-inline:16px}
}

/* ======================================================================= conformance: phone (#16) */
/* Phase 1's phone defects, found in real phone viewports (#16, layer 3 run 5) and fixed in the
   conformance release of design phase 2. Size changes for touch hold on phones (below 768px); a rule
   that fixes what is broken at every width holds at every width. docs/theme-styles.md, "Phones". */

/* The header panel (S2). Outside .navbar-nav, Bootstrap 3 puts a full-window .dropdown-backdrop
   (z-index 990) after an open menu's toggle on touch screens, to close the menu on a tap elsewhere. In
   the panel it lay over the panel's other items, so a tap on another item only closed the open menu.
   The panel's menus open in place, and a tap on another toggle closes the open menu anyway (Bootstrap
   clears open menus before it opens one), so the panel has no backdrop. The bell keeps its own. */
@media (max-width:767.98px){
.cp-header-fold .dropdown-backdrop{display:none}
/* The bell (S3): its list spans the header, which positions it, because the bell is static; at the
   header's top:100% it opened under the open panel. At top:auto it keeps its place in the flow, under
   the bell, with the panel open or closed. */
.cp-header .cp-header-bell .dropdown-menu{top:auto}
}

/* The phone country list (S9). On a phone, intl-tel-input puts the list in a fixed .iti-container, 30px
   in from each edge of the screen, but Six's .intl-tel-input{width:100%} reaches the container too, so
   it was the screen's width from 30px in. */
.iti-mobile .intl-tel-input.iti-container{width:auto}
/* Without a phone's user agent the list opens under the field from the flag's box at the field's
   start, and a field in a right-hand column ran its list past the screen at 768px. The box spans the
   field, so the list is never wider than the field; the field is painted above the box, and the flag
   and the list above the field, as before. */
.intl-tel-input.allow-dropdown .flag-container,.intl-tel-input.separate-dial-code .flag-container{right:0}
.intl-tel-input .country-list{max-width:100%}

/* DataTables' sort icon sits 8px from a head's end (S10): the end padding keeps the text clear of it.
   Right to left the rule at the end of "right to left" above does the same. */
.dataTables_wrapper table.dataTable thead>tr>th.sorting,.dataTables_wrapper table.dataTable thead>tr>th.sorting_asc,.dataTables_wrapper table.dataTable thead>tr>th.sorting_desc{padding-inline-end:30px}

/* Text Six writes too light for 4.5:1 on its own backgrounds (S11): the home tiles' titles on Six's
   #f8f8f8 tile, a ticket's Requestor, Department... captions, the markdown editor's line and word
   count on its #f5f5f5 footer, an article's tags and "Users Found This Useful", and "Was this answer
   helpful?" on Six's #eff7ff box. */
.tile .title{color:var(--cp-text)}
.panel>.list-group .ticket-details-children .title{color:var(--cp-muted)}
.markdown-editor-status{color:var(--cp-text)}
.kb-article-details{color:var(--cp-text)}
.kb-rate-article{color:var(--cp-info)}

/* The markdown editor's fullscreen control (S12): a 36px square like the toolbar's small buttons, its
   icon in the middle, in either direction. */
.md-editor .md-controls{padding:0}
.md-editor .md-controls .md-control{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--cp-muted)}
/* An article's Yes and No are the canvas's 36px small buttons at every width: Six's
   .kb-rate-article .btn-lg{padding:0 16px} left them their 24px line and border, 26px, from 768px
   (run 8 F4e). They stay inside the box's 38px line. */
.kb-rate-article .btn{display:inline-flex;align-items:center;gap:6px;min-height:36px}

/* The knowledgebase tag cloud (S13): WHMCS prints each tag as an inline link with its own font-size, 12px
   to 20px, whose box ran over the lines above and below. As a wrapping row the tags never overlap, and
   each is at least WCAG's 24px wide, its name in the middle ("id" was 10px; run 6 S8). */
[menuItemName="Support Knowledgebase Tag Cloud"]>.panel-body{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
[menuItemName="Support Knowledgebase Tag Cloud"]>.panel-body>a{display:inline-flex;align-items:center;justify-content:center;min-width:24px}

/* Cut text (S8). A home service's name wraps instead of ending in Six's ellipsis, and takes the direction
   of its own text, so an English name on a right-to-left page keeps its order (R1); right to left it
   still lines up at the row's right. A search field's hint that no phone's field can hold, and a closed
   select's chosen option, which cannot wrap, end with an ellipsis, which shows the text goes on; the
   select opens to the full text. */
.client-home-panels .div-service-name>span{white-space:normal;overflow-wrap:anywhere;unicode-bidi:plaintext}
[dir="rtl"] .client-home-panels .div-service-name>span{text-align:right}
/* Six pushes the View Details button to the row's end with margin-left:auto: right to left, the end is the left. */
[dir="rtl"] .client-home-panels .div-service-buttons{margin-left:0;margin-right:auto}
.kb-search .form-control,.home-kb-search .form-control,select.form-control{text-overflow:ellipsis}

/* Text written left to right on a right-to-left page (run 5B). Credit History's amounts ("$-4.99 USD",
   the Credit Manager addon's #tableCreditsList, third column) keep their order at the cell's right (R6).
   The reseller addon's pages, all English, stay left to right inside the page (R7). The affiliate
   referral link reads left to right and wraps anywhere, whole, where Six cut its end, or right to
   left its start (R8). */
[dir="rtl"] #tableCreditsList>tbody>tr>td:nth-child(3){direction:ltr;text-align:right}
[dir="rtl"] .api-docs-wrapper,[dir="rtl"] .api-wrapper{direction:ltr}
.affiliate-referral-link span{direction:ltr;overflow-wrap:anywhere}
/* The knowledgebase's articles, often English, take the direction of their own text, and with it their
   alignment, as dir="auto" would: an English article reads left to right on an Arabic page, where its
   ":There are two ways" and "Home Page .1" were reordered (run 6 S10). Its lists' titles and excerpts,
   and a custom field's label ("?How did you find us"), keep the order of their own text at the right,
   in line with the page. */
[dir="rtl"] .kb-article-title h2,[dir="rtl"] .kb-article-content,[dir="rtl"] .kb-article-content :is(p,li,div,h1,h2,h3,h4,h5,h6,blockquote,td,th){unicode-bidi:plaintext}
[dir="rtl"] .kbarticles a,[dir="rtl"] .kbarticles p,[dir="rtl"] .kbcategories p,[dir="rtl"] label[for^="customfield"]{unicode-bidi:plaintext;text-align:right}
/* So do the mailing-list opt-in's English text, whose full stop started its last line (run 7 R7-2),
   and the cells of the PaymentGatewayCharges addon's fee table, which read
   "USD $0.31 + 3.25% +" and "USD $0.44" (R7-1). */
[dir="rtl"] .marketing-email-optin p,[dir="rtl"] #mg-charge-table td{unicode-bidi:plaintext;text-align:right}
/* The Cookie settings dialog of coldproxy-frontend's consent integration is all English, so right to left
   each full stop moved to the start of its line (6B S12). Until it is translated it reads left to right,
   isolated from the page; its markup and behaviour stay the integration's. */
[dir="rtl"] #cp-consent-root .cpc-dialog{direction:ltr;unicode-bidi:isolate;text-align:left}

@media (max-width:767.98px){
/* Standalone controls are at least the canvas's 36px small-button height (S12); inline links in running
   text stay as they are. A breadcrumb link grows its tap area with padding that a negative margin of
   the same size keeps out of the line. The footer's Cookie settings button, 29.5px with its inline
   0.5rem padding (Six's root is 10px), grows to 36px the same way, so the footer row keeps its height. */
.breadcrumb>li>a{display:inline-block;padding-block:10px;margin-block:-10px}
[data-cp-consent-portal]{min-height:36px;margin-block:-8px}
.client-home-panels .panel-heading .btn,.client-home-panels .panel-footer .btn,.btn-view-more,
.kbcategories a,.kbarticles a,.ticket-reply .attachments a,a[href*="step=2&deptid="]{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.dataTables_wrapper .dataTables_length label .form-control{height:36px}
[menuItemName="Support Knowledgebase Tag Cloud"]>.panel-body>a{min-height:36px}
/* Run 6 (S2, S3, S12; 6A D8): the logo's link takes the bar's 40px, as its buttons, around its 26px
   image. A checkbox row (Remember Me, the Terms of Service, the e-mail preferences) grows from Bootstrap's
   20px line to 36px with 8px above and below, a row of two lines with it; the checkbox, which Bootstrap
   places absolutely, stays on the first line. A dialog's close button is a 36px square whose negative
   margins keep the dialog's head as tall as before. The invoice's "Back to Client Area" and the cart's
   Edit, Remove and Empty Cart reach 36px too. */
.cp-header-logo{min-height:40px}
.checkbox>label,label.checkbox{padding-block:8px}
.modal-header .close{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;margin-block:-8px;margin-inline-end:-10px}
.invoice-container~p.hidden-print>a{display:inline-flex;align-items:center;min-height:36px}
#order-standard_cart .btn-link.btn-xs{display:inline-flex;align-items:center;gap:4px;min-height:36px}
/* A small switch (the mailing-list opt-in, a checkbox custom field) grows from 30px to 36px, 8px above
   and below its 18px line (6B S16). The Cookie settings dialog's category rows, its label beside a 22px
   checkbox, are 36px (6B S12; coldproxy-frontend's consent integration, whose rule this outweighs). */
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding-block:8px}
#cp-consent-root .cpc-dialog label{display:flex;align-items:center;min-height:36px}
/* A breadcrumb trail that wraps leaves 20px between its lines, as far as each link's tap area reaches out
   of its 20px line, so the tap areas of two lines never overlap (run 6 S9; 6A D2). */
.breadcrumb{display:flex;flex-wrap:wrap;row-gap:20px}
/* The home service's name takes a line of its own, under its label and button. */
.client-home-panels .div-service-item{flex-wrap:wrap}
.client-home-panels .div-service-name{flex:1 0 100%;order:1;margin:8px 0 0}
/* The Knowledgebase search's button keeps its padding to the field's room. */
.kb-search .btn-input-padded-responsive{padding-inline:16px}
/* The Knowledgebase's Search button goes under its field, which takes the whole width (R14), and so
   does a ticket's CC Recipients card's Add button: beside it the field had 149px for the Arabic hint's
   160px at 320px (run 7 N2). */
.input-group.kb-search,#containerAddCcEmail{display:flex;flex-direction:column;gap:8px}
.input-group.kb-search>.input-group-btn,#containerAddCcEmail>.input-group-btn{width:auto}
.input-group.kb-search>.form-control:first-child,#containerAddCcEmail>.form-control:first-child{border-radius:var(--cp-ctl-r)}
.input-group.kb-search>.input-group-btn:last-child>.btn,#containerAddCcEmail>.input-group-btn:last-child>.btn{width:100%;margin-inline-start:0;border-radius:var(--cp-ctl-r)}
}
/* At 340px and narrower a select keeps 12px before its text and 34px after it, its arrow 10px from the
   edge and 8px clear of the text, either way round: the cart's "- Choose Another Category -" fits at
   320px (run 6 S12). The cart's promotion field writes its hint ("Enter promo code if you have one") at
   13px with 8px at its end, and Security Settings' question select its question at 13px: "What was your
   childhood nickname?" needed 243px of 240 at 14px (run 7 N3). The select's padding is physical, as in
   the select rules above, whose [dir="rtl"] twins a logical padding of this weight would lose to. */
@media (max-width:340px){
select.form-control{padding-left:12px;padding-right:34px;background-position:right 10px center}
[dir="rtl"] select.form-control{padding-right:12px;padding-left:34px;background-position:left 10px center}
#order-standard_cart #inputPromotionCode{font-size:13px;padding-inline-end:8px}
#inputSecurityQid{font-size:13px}
}

/* The Emoji addon's picker (B5). The addon appends a 437px .emojiMenu to the body and places it with an
   inline position, left and top: from the reply card (its left + 30px, 129px above it) or from its
   button (its left - 400px, 282px above it). On a phone it ran up to 164px past the screen, or off its
   start, and opened far above its button. On phones it is fixed to the screen with the 16px gutters,
   at most 437px wide (right to left at the screen's right), and ends just above its button, where the
   browser anchors (CSS anchor positioning): its top is the button's top less the addon's 250px
   maximum height and 8px, but never less than 16px, so where the room above is short it starts 16px
   from the screen's top, over the button. A browser that cannot anchor drops the second top, which it
   cannot read, and keeps the picker 16px from the screen's top; so does anchor()'s fallback where the
   button has no box. From 768px,
   right to left, the button sits at the toolbar's left end, where the addon's - 400px put the picker off
   the screen's start, so it opens from the right-hand gutter. Only !important outweighs the inline
   position, left and top; the width is the addon's stylesheet rule, which body> outweighs. Its search
   field takes the editor's width inline, which can be wider than the picker. */
body>.emojiMenu #emojiMenuSearchInput{max-width:100%}
@media (max-width:767.98px){
#emojiMenuButton{anchor-name:--cp-emoji-button}
body>.emojiMenu{position:fixed !important;top:16px !important;left:16px !important;right:16px;width:auto;max-width:437px;position-anchor:--cp-emoji-button}
body>.emojiMenu{top:max(16px,calc(anchor(top, 274px) - 258px)) !important}
}
@media (min-width:768px){
[dir="rtl"] body>.emojiMenu{left:auto !important;right:24px}
}

/* The reseller addon's pages (coldproxy_product_reseller, docs/hook-and-addon-inventory.md, "Theme
   styling of addon markup"). Its templates and client.css read their colours from --api-* variables;
   on the addon's own wrappers they read the theme's tokens, so its badges, amounts, relative times and
   white-on-colour buttons read at 4.5:1 (S11). The addon's stylesheet and its templates' <style> come
   after this file, so these rules name the wrapper to outweigh them. */
.api-docs-wrapper,.api-wrapper{--api-primary:var(--cp-accent);--api-primary-dark:var(--cp-accent-hover);--api-success:var(--cp-ok);--api-success-dark:var(--cp-ok-strong);--api-warning:var(--cp-wait);--api-warning-dark:var(--cp-wait-strong);--api-danger:var(--cp-bad);--api-danger-dark:var(--cp-bad-hover);--api-info:var(--cp-accent-ink);--api-info-dark:var(--cp-info);--api-gray-light:var(--cp-muted)}
/* The hero's title is white on its indigo gradient, as the addon writes the hero, not the theme's
   heading colour. */
.api-docs-wrapper .api-hero :is(h1,h2),.api-wrapper .api-hero :is(h1,h2){color:inherit}
/* API Settings' code blocks label themselves ("JSON", "Headers") and their Copy button in #94a3b8 on their
   #334155 head, 4.04:1 (#16 run 6A D4): they take the console's ink, 8.4:1. The addon's hover keeps its white. */
.api-docs-wrapper .code-block-header,.api-docs-wrapper .code-block-copy{color:var(--cp-console-ink)}
/* Its grids' columns no longer grow to their widest table (B3), and a table wider than its section or
   endpoint card scrolls inside it instead of being cut off (B4). */
.api-docs-wrapper .api-row>*{min-width:0}
.api-docs-wrapper .api-section-body,.api-docs-wrapper .endpoint-tab-content{overflow-x:auto}
/* Recent Activity lays each entry out as a row with its icon first, but client.css places .activity-icon
   30px before its entry, for the dashboard's timeline, where the section cut it off. */
.api-wrapper .activity-icon{position:static}
@media (max-width:767.98px){
/* API Logs and My Orders write their stat cards' columns inline, three or five at every width (B4):
   on phones the cards wrap, at least 200px wide. Only !important outweighs the inline style. */
.api-docs-wrapper .api-stats[style*="grid-template-columns"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important}
/* API Settings (S8): an error code's 200px name column and the endpoint's title and tabs wrap. */
.api-docs-wrapper .error-code-item{flex-direction:column;gap:4px}
.api-docs-wrapper .error-code-name{min-width:0;overflow-wrap:anywhere}
.api-docs-wrapper .endpoint-header>div{min-width:0}
.api-docs-wrapper .endpoint-title,.api-docs-wrapper .endpoint-tabs{flex-wrap:wrap}
.api-docs-wrapper .endpoint-name{overflow-wrap:anywhere}
/* Its small buttons, filters, pager and code blocks' Copy button are at least 36px tall (S12). */
.api-docs-wrapper .btn-api-sm,.api-wrapper .api-filter-btn,.api-docs-wrapper .api-pagination-btn,.api-wrapper .api-pagination-btn,.api-docs-wrapper .code-block-copy{min-height:36px}
.api-docs-wrapper .api-pagination-btn,.api-wrapper .api-pagination-btn{display:inline-flex;align-items:center;justify-content:center}
}
/* ======================================================================= conformance: tables (#16) */
/* Story 41: on a phone, tables fit the screen. The list pages, Payment Methods, Affiliates and the
   invoice and quote views stack their rows (.cp-rtable, "list tables on phones" above); the addon
   tables the theme cannot override scroll in their own box and show where more columns are. */

@media screen and (max-width:767.98px){
/* A long word, such as a transaction id or a domain, breaks instead of widening its line. Bootstrap
   keeps the cells of a .table-responsive table on one line on phones (0,2,3), as the invoice's are. */
table.cp-rtable>tbody>tr>td{overflow-wrap:anywhere}
.table-responsive>table.cp-rtable>tbody>tr>td{white-space:normal}
/* A total row (.cp-rtable-sum), the invoice's Sub Total or Balance: its label cell and its amount on
   one line, the amount at the end, on the totals' tint. */
table.cp-rtable>tbody>tr.cp-rtable-sum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px;background-color:var(--cp-surface-2)}
table.cp-rtable>tbody>tr.cp-rtable-sum>td{background-color:transparent;text-align:start}
table.cp-rtable>tbody>tr.cp-rtable-sum>td:last-child{margin-inline-start:auto;text-align:end}
/* The ticket list's subject: Six draws a rule and an indent before it, which belong to a row of cells. */
table.cp-rtable>tbody>tr>td a.border-left{padding-left:0;border-left:0}
/* Payment Methods: Six cuts the name and description at 15em with an ellipsis (1,1,2), which left them
   mid-line; Set as default, Edit and Delete share their line where they fit. */
#payMethodList.cp-rtable>tbody>tr>td{max-width:none;white-space:normal}
#payMethodList.cp-rtable>tbody>tr>td.cp-rtable-act{display:flex;flex-wrap:wrap;gap:8px}
#payMethodList.cp-rtable>tbody>tr>td.cp-rtable-act .btn{flex:1 1 auto;width:auto;white-space:normal}
/* DataTables keeps its entry count on one line, "Showing 1 to 3 of 3 entries (filtered from 16 total
   entries)", which widened the list's box. WHMCS's dataTables.bootstrap.css, which Six's
   includes/tablelist.tpl links after this file, sets it at (0,2,2); the list's div.listtable outranks it. */
div.dataTables_wrapper div.listtable div.dataTables_info{white-space:normal}
}

/* The invoice and quote views (viewinvoice.tpl, viewquote.tpl) are documents of their own, whose body
   holds invoice.css's sheet, .invoice-container. Its margins are auto, so in the page shell's flex
   column it would shrink to its content: their body stays a block, as in Six. */
body:has(>.invoice-container){display:block}
/* The gateway list's options are long; in invoice.css's half-width column it ran past the window. */
.invoice-container .form-control{max-width:100%}
@media screen and (max-width:767.98px){
/* invoice.css pads the sheet 45px on phones; the canvas's phone gutter is 16px. */
.invoice-container{margin:16px;padding:24px 16px 32px}
/* The item lines run to the edges of their panel, as a table in the canvas's flush card; without
   :has() they keep the panel's padding. */
.invoice-container .panel-body:has(>.table-responsive>table.cp-rtable){padding:0}
.invoice-container .panel-body>.table-responsive{margin-bottom:0;border:0}
}
/* invoice.css floats the sheet's columns left and right from 500px; right to left they mirror. */
@media (min-width:500px){
[dir="rtl"] .invoice-col{float:right}
[dir="rtl"] .invoice-col.right{float:left;text-align:left}
}

/* AffiliatesPlus's lists (its commission.tpl, template.tpl, directlist.tpl and vouchers.tpl print
   #tableAffiliatesList, as Six's Affiliates page does, whose list stacks instead), Credit Manager's
   credit history and the reseller addon's orders scroll sideways in their own box on a narrow screen,
   and so do the tables of the addon's API Logs and Dashboard in their white section (run 8 F5).
   A shadow at an edge of the box shows that columns are hidden there: the shadows stay at the box's
   edges (scroll), and covers in the box's colour sit at the table's ends and scroll with it (local),
   so a shadow shows only while its end hides columns. The list's cells let the box's background
   through; the addon's tables' heads keep their own grey. */
#tableAffiliatesList_wrapper,#tableCreditsList_wrapper,.api-docs-wrapper .table-responsive,.api-docs-wrapper .api-section-body{background:linear-gradient(to right,var(--cp-surface) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(to left,var(--cp-surface) 30%,transparent) right center/40px 100% no-repeat local,linear-gradient(to right,var(--cp-scroll-shadow),transparent) left center/16px 100% no-repeat scroll,linear-gradient(to left,var(--cp-scroll-shadow),transparent) right center/16px 100% no-repeat scroll,var(--cp-surface)}
#tableAffiliatesList_wrapper .table-list>tbody>tr>td,#tableCreditsList_wrapper .table-list>tbody>tr>td{background-color:transparent}
/* The addon's API Settings code samples, dark boxes, scroll the same way (run 8 F5): the covers take the
   samples' own background and the shadows the console's ink, which shows on it. The theme's selector
   outweighs the addon's .code-block, which its page prints after this file. */
.api-docs-wrapper pre.code-block{background:linear-gradient(to right,var(--api-code-bg) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(to left,var(--api-code-bg) 30%,transparent) right center/40px 100% no-repeat local,linear-gradient(to right,var(--cp-console-scroll-shadow),transparent) left center/16px 100% no-repeat scroll,linear-gradient(to left,var(--cp-console-scroll-shadow),transparent) right center/16px 100% no-repeat scroll,var(--api-code-bg)}

/* ======================================================================= conformance: header menus */
/* The header's menus as canvas boards 07 and 08 draw them (#16). includes/coldproxy-navbar.tpl prints
   both navbars; includes/hooks/coldproxy_theme_menus.php marks the current section and moves the
   Support PIN addon's panel into the Account menu. */

/* The main menu's current section: indigo, 600, a 2px indigo underline. */
.cp-header-menu>li>a[aria-current="page"]{color:var(--cp-accent-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--cp-accent)}
/* An account page's section is the Account menu (#16 run 6A): its trigger takes the indigo tint. */
.cp-header-account>li>a[aria-current="page"]{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);font-weight:600}
/* A section keeps WHMCS's submenu, where addon items live (#16). Its caret is the chevron the canvas
   gives a menu with a submenu (the visitor's Store), in the faint colour, as a mask: its 1.75 stroke,
   as on the header's other chevrons, is thinner than the 2 of the select chevron's token. */
.cp-header-menu>li>a>.caret{--cp-caret-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background:var(--cp-faint);-webkit-mask-image:var(--cp-caret-mask);mask-image:var(--cp-caret-mask);-webkit-mask-size:14px 14px;mask-size:14px 14px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* The signed-in Account menu (board 07): 300px wide, a head row, an icon before each item, the PIN row. */
.cp-header-account .cp-account-menu{width:300px;max-width:calc(100vw - 32px)}
.cp-account-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
/* The avatar holds the Account item's label: its text is hidden, and a photo an addon prints there
   shows as a 36px circle, else the theme's avatar. Only !important outweighs the photo's inline
   max-width and margins. */
.cp-account-avatar{display:block;flex:none;width:36px;height:36px;overflow:hidden;border-radius:50%;font-size:0;line-height:0;background:var(--cp-icon-user) center/18px 18px no-repeat var(--cp-accent-soft)}
.cp-account-avatar:has(img){background:none}
.cp-account-avatar img{display:block;width:36px;height:36px;max-width:none !important;margin:0 !important;border-radius:50%;object-fit:cover}
.cp-account-who{min-width:0}
.cp-account-name{display:block;color:var(--cp-heading);font-size:14px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.cp-account-note{display:block;color:var(--cp-muted);font-size:12px;line-height:1.4}
/* Each item's 16px icon, muted, Log out's in its red. An item a hook gave its own icon shows only that. */
.cp-account-menu>li>a{display:flex;align-items:center;gap:10px}
.cp-account-menu>li>a::before{content:"";flex:none;width:16px;height:16px;background-color:var(--cp-muted);-webkit-mask-image:var(--cp-menu-icon);mask-image:var(--cp-menu-icon);-webkit-mask-size:16px 16px;mask-size:16px 16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.cp-account-menu>[menuItemName="Logout"]>a::before{background-color:currentColor}
/* Right to left, Log out's arrow points out at the page's start, as the return to the admin area's does. */
[dir="rtl"] .cp-account-menu>[menuItemName="Logout"]>a::before{transform:scaleX(-1)}
.cp-account-menu>li>a:has(>i)::before{display:none}
.cp-account-menu>li>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Edit Account Details"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 9h10M7 13h6'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Profile"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="User Management"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Security Settings"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E")}
/* "uniqueMenuItemName" is the real name Social Media Login gives its Account menu link to its Linkages page. */
.cp-account-menu>[menuItemName="uniqueMenuItemName"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Email History"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Payment Methods"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Contacts"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M7 22v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2M8 2v2M16 2v2'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Change Password"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Switch Account"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="activitylog"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="profilephotos"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="coldproxySupportPin"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m4.93 4.93 4.24 4.24M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24'/%3E%3C/svg%3E")}
.cp-account-menu>[menuItemName="Logout"]>a{--cp-menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
/* A submenu item that holds content, such as the Support PIN addon's panel: a row under a separator,
   the label and the content at its start and the footer at its end. Only !important outweighs the
   inline centring and 15px padding the addon gives its PIN. Its Generate New Pin button is a link
   button, without the addon's plus icon. */
.cp-menu-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;padding:6px 10px}
.cp-menu-row::before{content:"";position:absolute;top:-7px;inset-inline:4px;height:1px;background-color:var(--cp-border-soft)}
.divider+.cp-menu-row,.nav-divider+.cp-menu-row{margin-top:0}
.divider+.cp-menu-row::before,.nav-divider+.cp-menu-row::before{display:none}
.cp-menu-row-main{min-width:0}
.cp-menu-row-label{display:block;color:var(--cp-muted);font-size:12px;line-height:1.5}
.cp-menu-row-item h4{margin:0;color:var(--cp-heading);font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.08em;font-variant-numeric:tabular-nums;text-align:start !important}
.cp-menu-row-item h4>div{padding:0 !important}
.cp-menu-row-foot{flex:none}
.cp-menu-row-foot center{display:block;text-align:end}
.cp-header .cp-menu-row-foot .btn{display:inline-flex;align-items:center;width:auto;height:32px;padding:0 6px;border:0;border-radius:8px;background-color:transparent;color:var(--cp-accent);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:none;transform:none}
.cp-header .cp-menu-row-foot .btn:hover,.cp-header .cp-menu-row-foot .btn:focus,.cp-header .cp-menu-row-foot .btn:active{background-color:var(--cp-accent-soft);color:var(--cp-accent-hover);box-shadow:none;transform:none}
.cp-menu-row-foot .btn>i{display:none}
/* Phones: the panel's links have no underline, so the current section takes the tint. The PIN row's
   Generate New Pin is a standalone control, 36px tall (run 7 N1). */
@media (max-width:767.98px){
.cp-header-menu>li>a[aria-current="page"]{background-color:var(--cp-accent-soft);box-shadow:none}
.cp-header .cp-menu-row-foot .btn{height:36px}
}

/* ======================================================================= conformance: forms (#16) */
/* The guest forms as layer 3 run 6 found them on the preview of the conformance release: sign-in,
   registration, password reset, contact and checkout. docs/theme-styles.md, "Forms". */

/* The sign-in box ends where its content ends, at the main body's 56px bottom padding as on every page
   ("page shell"): Six gave it a 30px (up to 600px wide) or 100px bottom margin (S5). On phones it drops Six's 10px side padding inside the
   page's 16px gutters, so its fields and the CAPTCHA have the width of every other form (S4). */
.logincontainer{margin-bottom:0}
@media (max-width:767.98px){
.logincontainer{padding-inline:0}
}

/* reCAPTCHA's box is 304px wide, wider than the 288px column between the gutters at 320px (S4). WHMCS's
   script renames its container (#google-recaptcha-domainchecker becomes ...1), so Six's scaling rules,
   which name the id, never apply: below 336px the container scales to 288px, from its top centre, where
   Six centres it, or, on a page that opts in (.cp-captcha), from the start of the line it starts. */
@media (max-width:335.98px){
.recaptcha-container{transform:scale(.947);transform-origin:50% 0}
.cp-captcha .recaptcha-container{transform-origin:0 0}
[dir="rtl"] .cp-captcha .recaptcha-container{transform-origin:100% 0}
}

/* The Social Media Login buttons (S6, phase 2 decision 11): the canvas's plain white buttons in a wrapping
   row, 10px apart, at least 150px wide, the label in ink and the icon in the label's colour. The addon
   prints a <style> per provider after this file, a[href="?module_provider=..."] at (0,1,1) and its :hover
   at (0,2,1), and colours each icon by its class; these rules outweigh them without naming a provider,
   so a provider the owner adds takes the same look, and the addon's markup, order and links stay. Its
   stylesheet writes the row's margins with !important (a 32px bottom margin, part of S5), which only
   !important overrides; Bootstrap's clearfix pseudo-elements would be items of the row. */
.row-media.row-centered{display:flex;flex-wrap:wrap;gap:10px;top:auto;max-width:none;margin:24px 0 0 !important;padding:0;overflow:visible}
.row-media.row-centered::before,.row-media.row-centered::after{display:none}
.row-media>a.btn-media{position:static;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 150px;min-width:0;height:44px;margin:0;padding:0 16px;font-size:14px;font-weight:600;line-height:20px;color:var(--cp-ink);background-color:var(--cp-surface);border:1px solid var(--cp-border-strong);border-radius:var(--cp-radius-md);box-shadow:none}
.row-media>a.btn-media:hover,.row-media>a.btn-media:focus{color:var(--cp-heading);background-color:var(--cp-surface-2);border-color:var(--cp-border-hover)}
.row-media>a.btn-media>i{position:static;flex:none;width:auto;font-size:18px;line-height:1;color:inherit;border:0}

/* The ticket form's department and priority take half the row each between 768 and 991px, where Six's
   col-sm-3 cut "General Enquiries" (S7); a signed-in client's related service takes a half too. */
@media (min-width:768px) and (max-width:991.98px){
.row:has(>.form-group>#inputDepartment)>.form-group{width:50%}
}

/*
 * Phase 2's pages. Each page ticket of spec #1 writes its page's rules, right-to-left ones included,
 * under its own banner below, so branches built side by side change different parts of this file;
 * a banner stays empty until its ticket fills it. The pages come last, so a page's rule outranks a
 * shared rule of the same weight. After a merge or a rebase, run php tools/theme/stamp.php again.
 */

/* ======================================================================= page: home (#17) */

/* ======================================================================= page: services (#18) */

/* ======================================================================= page: invoices (#19) */

/* ======================================================================= page: other billing pages (#20) */

/* ======================================================================= page: support tickets (#21) */

/* ======================================================================= page: open a ticket and contact (#22) */

/* ======================================================================= page: sign in, two-factor and password reset (#23) */

/* ======================================================================= page: create account (#24) */

/* ======================================================================= page: account (#25) */