/* *****************************************************

    ServWise fluid layer

    Loaded after Bootstrap 3 (all.min.css) and before custom.css.
    Bootstrap stays in charge of layout and components; this file adds:

    0. Fonts: Open Sans and Raleway, hosted on this site.
    1. Settings: brand colours, fonts, and a fluid type and spacing scale.
    2. Fluid text: body text and headings grow smoothly with the screen
       instead of jumping at breakpoints.
    3. A few helper classes for spacing and readable line length.

    The fluid sizes are clamp(smallest, preferred, largest). They are at
    their smallest on a 360px phone and their largest from 1240px up, and
    grow in a straight line in between. Each line notes the px range.

***************************************************** */

/* -----------------------------------------------------
   0. Fonts
   ----------------------------------------------------- */

/* Open Sans and Raleway, hosted here instead of loaded from Google, so
   visitors' browsers don't contact Google (GDPR) and text appears sooner.
   Files: ../fonts/, from Google Fonts (SIL Open Font Licence).

   Each file holds every weight. Each weight the site used before (Open Sans
   300, 400, 600; Raleway 400, 700) gets its own rule pointing at the same
   file, so weights in between snap to the nearest one as they did before,
   and the text looks exactly the same. The browser downloads each file once.

   "latin" covers English, Italian and the € sign. "latin-ext" is only
   downloaded when a page has other accented letters, such as Polish names.
   While a font loads, text shows in the fallback font (font-display: swap). */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/open-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/open-sans-latin.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; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin.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; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-latin.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; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/raleway-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/raleway-latin.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; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/raleway-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/raleway-latin.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; }

/* -----------------------------------------------------
   1. Settings
   ----------------------------------------------------- */
:root {
    /* Brand colours */
    --sw-blue: #006687;
    --sw-blue-dark: #00526C;
    --sw-orange: #E24002;
    --sw-orange-light: #FD5211;
    --sw-orange-dark: #A22E02;
    --sw-green: #8BC71D;
    --sw-green-light: #9DDF24;
    --sw-slate: #2E363F;
    --sw-slate-light: #4F5B6A;
    --sw-text: #333;
    --sw-text-muted: #777;
    --sw-heading: #20252B;
    --sw-white: #fff;

    /* Fonts */
    --sw-font-body: "Open Sans", Verdana, Tahoma, sans-serif;
    --sw-font-heading: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Type scale */
    --sw-step--2: clamp(0.75rem, 0.7372rem + 0.0568vw, 0.7812rem);     /* 12 - 12.5px */
    --sw-step--1: clamp(0.875rem, 0.8622rem + 0.0568vw, 0.9062rem);    /* 14 - 14.5px */
    --sw-step-0: clamp(1rem, 0.9744rem + 0.1136vw, 1.0625rem);         /* 16 - 17px: body text */
    --sw-step-1: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);       /* 18 - 20px: h4, lead */
    --sw-step-2: clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);         /* 20 - 24px: h3 */
    --sw-step-3: clamp(1.4375rem, 1.2585rem + 0.7955vw, 1.875rem);     /* 23 - 30px: h2 */
    --sw-step-4: clamp(1.625rem, 1.3693rem + 1.1364vw, 2.25rem);       /* 26 - 36px: h1 */
    --sw-step-5: clamp(1.875rem, 1.517rem + 1.5909vw, 2.75rem);        /* 30 - 44px: big headlines */

    /* Spacing scale */
    --sw-space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);   /*  4 -  5px */
    --sw-space-2xs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);    /*  8 -  9px */
    --sw-space-xs: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);     /* 12 - 14px */
    --sw-space-s: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);         /* 16 - 18px */
    --sw-space-m: clamp(1.5rem, 1.3977rem + 0.4545vw, 1.75rem);        /* 24 - 28px */
    --sw-space-l: clamp(2rem, 1.7955rem + 0.9091vw, 2.5rem);           /* 32 - 40px */
    --sw-space-xl: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);            /* 48 - 64px */
    --sw-space-2xl: clamp(4rem, 3.1818rem + 3.6364vw, 6rem);           /* 64 - 96px */

    /* Other */
    --sw-radius: 3px;
    --sw-radius-l: 10px;
    --sw-measure: 70ch;
    --sw-shadow: 0 0 10px 0 rgba(173, 173, 173, 0.52);
}

/* -----------------------------------------------------
   2. Fluid text
   ----------------------------------------------------- */

/* Bootstrap 3 sets html to 10px; 100% respects the visitor's browser setting
   (normally 16px), so rem sizes follow it. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--sw-font-body);
    font-size: var(--sw-step-0);
    line-height: 1.5;
    color: var(--sw-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--sw-font-heading);
    line-height: 1.2;
}

/* Also replaces the theme's smaller phone sizes for headings, since these
   already shrink on their own. */
h1, .h1 { font-size: var(--sw-step-4); }
h2, .h2 { font-size: var(--sw-step-3); }
h3, .h3 { font-size: var(--sw-step-2); }
h4, .h4 { font-size: var(--sw-step-1); }
h5, .h5 { font-size: var(--sw-step-0); }
h6, .h6 { font-size: var(--sw-step--1); }

.lead {
    font-size: var(--sw-step-1);
}

/* Headlines wrap into balanced lines instead of leaving one word alone.
   Browsers without support just wrap normally. */
h1, h2, h3, .h1, .h2, .h3 {
    text-wrap: balance;
}

p, li, dd, blockquote {
    text-wrap: pretty;
}

/* Form fields stay at least 16px, so iPhones don't zoom in when tapped. */
@media (max-width: 767px) {
    .form-control,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="number"],
    select, textarea {
        font-size: 16px;
    }
}

/* -----------------------------------------------------
   3. Helper classes
   ----------------------------------------------------- */

/* Text sizes: sw-text-sm, sw-text-lg and so on */
.sw-text-xs { font-size: var(--sw-step--2); }
.sw-text-sm { font-size: var(--sw-step--1); }
.sw-text-md { font-size: var(--sw-step-0); }
.sw-text-lg { font-size: var(--sw-step-1); }
.sw-text-xl { font-size: var(--sw-step-2); }
.sw-text-2xl { font-size: var(--sw-step-3); }
.sw-text-3xl { font-size: var(--sw-step-5); }

/* Keeps long text to a comfortable reading width */
.sw-measure { max-width: var(--sw-measure); }
.sw-measure-center { max-width: var(--sw-measure); margin-left: auto; margin-right: auto; }

/* Vertical space between direct children: <div class="sw-flow"> */
.sw-flow > * + * { margin-top: var(--sw-space-s); }
.sw-flow-l > * + * { margin-top: var(--sw-space-l); }

/* Section padding: top and bottom */
.sw-section { padding-top: var(--sw-space-xl); padding-bottom: var(--sw-space-xl); }
.sw-section-s { padding-top: var(--sw-space-l); padding-bottom: var(--sw-space-l); }

/* Margins */
.sw-mt-0 { margin-top: 0 !important; }
.sw-mt-s { margin-top: var(--sw-space-s) !important; }
.sw-mt-m { margin-top: var(--sw-space-m) !important; }
.sw-mt-l { margin-top: var(--sw-space-l) !important; }
.sw-mb-0 { margin-bottom: 0 !important; }
.sw-mb-s { margin-bottom: var(--sw-space-s) !important; }
.sw-mb-m { margin-bottom: var(--sw-space-m) !important; }
.sw-mb-l { margin-bottom: var(--sw-space-l) !important; }

/* Responsive grid that fits as many columns as there's room for:
   <div class="sw-grid" style="--sw-grid-min: 250px"> */
.sw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sw-grid-min, 280px), 100%), 1fr));
    gap: var(--sw-space-m);
}

/* Images that never overflow their box */
.sw-img { max-width: 100%; height: auto; }
.sw-shadow { box-shadow: var(--sw-shadow); }
.sw-rounded { border-radius: var(--sw-radius-l); }

/* -----------------------------------------------------
   4. Bootstrap 3 components
   ----------------------------------------------------- */

/* Page width: Bootstrap jumps the .container between fixed widths (750px,
   970px, 1170px). Instead it now grows smoothly with the screen: full width
   at 768px (as on phones), with a side margin that widens gradually, up to
   the same 1170px maximum from about 1250px. */
@media (min-width: 768px) {
    .container {
        width: min(1170px, calc(100% - (100vw - 768px) / 10));
    }
}

/* Space for the fixed header. header.tpl measures the real header height
   into --sw-header-h; 139px is what it measures today. */
body {
    padding-top: var(--sw-header-h, 139px);
}
/* Links to #anchors stop below the header instead of under it */
html {
    scroll-padding-top: calc(var(--sw-header-h, 139px) + 10px);
}

/* Buttons and form fields: Bootstrap fixes these at 14px with a 34px
   height. They're now 16px (fixed, not fluid, so controls stay steady) and
   38px high, with buttons and fields still lining up in input groups. */
.btn,
.form-control,
.input-group-addon {
    font-size: 1rem;
    line-height: 1.5;
}
.form-control {
    height: calc(1.5em + 14px);
}

/* Large and small sizes keep Bootstrap's own values */
.btn-lg, .btn-group-lg > .btn {
    font-size: 18px;
    line-height: 1.3333333;
}
.btn-sm, .btn-group-sm > .btn,
.btn-xs, .btn-group-xs > .btn {
    font-size: 12px;
    line-height: 1.5;
}
.input-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.form-group-lg .form-control {
    height: 46px;
    font-size: 18px;
    line-height: 1.3333333;
}
.input-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.form-group-sm .form-control {
    height: 30px;
    font-size: 12px;
    line-height: 1.5;
}
textarea.form-control,
select[multiple].form-control {
    height: auto;
}

/* Bootstrap gives tooltips and popovers Helvetica; use the body font so the
   site sticks to its two fonts (Open Sans for text, Raleway for headings). */
.tooltip,
.popover {
    font-family: var(--sw-font-body);
}

/* Table column headings (client area lists: services, domains, invoices,
   tickets and so on). These inherited the body size and wrapped in narrow
   columns; 14px keeps them on one line where there's room, and wraps
   evenly where there isn't. */
table.table-list thead th,
.table > thead > tr > th {
    font-size: var(--sw-step--1);
    line-height: 1.3;
    text-wrap: balance;
}
/* The sortable lists (DataTables) fix each column's width when the page
   loads, which left "Next Due Date" too narrow and wrapping. On tablets and
   up, headings stay on one line and their columns widen to fit. Phones keep
   wrapping, where DataTables hides columns that don't fit. */
@media (min-width: 768px) {
    table.table-list thead th {
        white-space: nowrap;
    }
}

/* The sidebar's Support panel stays in view while scrolling on desktop
   (header.tpl adds the class). 116px = the header once it has shrunk on
   scroll (96px) plus a 20px gap. */
@media (min-width: 992px) {
    .sw-sticky {
        position: sticky;
        top: 116px;
    }
}

/* Knowledgebase articles: WHMCS makes these 1.2 times the body text, which
   is too big now the body text is larger. */
.kb-article-content {
    font-size: clamp(1.0625rem, 1.0369rem + 0.1136vw, 1.125rem);   /* 17 - 18px */
}

/* Article and announcement content: wide images shrink to fit, and wide
   tables scroll sideways instead of stretching the page on phones. */
.main-content img {
    max-width: 100%;
    height: auto;
}
.kb-article-content table,
.announcement-single table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Bootstrap draws the browser's focus ring on every focused link and button,
   so a mouse click leaves a dark ring around it. Remove it for clicks only. */
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn.active:focus:not(:focus-visible) {
    outline: none;
}

/* A clear outline when moving around with the keyboard (not on mouse clicks) */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--sw-blue);
    outline-offset: 2px;
}

/* Visitors who've asked their device for less motion get no hover zooms or
   slides. The Lottie animation on the homepage isn't affected. */
@media (prefers-reduced-motion: reduce) {
    *:not(lottie-player),
    *:not(lottie-player)::before,
    *:not(lottie-player)::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    a.hButton:hover,
    a.ssl-plans:hover {
        transform: none;
    }
}