/* ===================================================================
   Roboto web font (self-hosted)
   =================================================================== */

@font-face { font-family: 'Roboto'; font-weight: 100; font-style: normal;  src: url('/fonts/Roboto-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 300; font-style: normal;  src: url('/fonts/Roboto-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal;  src: url('/fonts/Roboto-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: italic;  src: url('/fonts/Roboto-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal;  src: url('/fonts/Roboto-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal;  src: url('/fonts/Roboto-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: italic;  src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 900; font-style: normal;  src: url('/fonts/Roboto-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: FontAwesome; font-weight: normal; font-style: normal;
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.woff') format('woff'),
         url('../fonts/fontawesome-webfont.ttf') format('truetype'); }
@font-face { font-family: SocialIco; font-weight: normal; font-style: normal;
    src: url('../../dundasblog/fonts/socialico.eot');
    src: url('../../dundasblog/fonts/socialico.eot?#iefix') format('embedded-opentype'),
         url('../../dundasblog/fonts/socialico.ttf') format('truetype'); }

/*
 * Dundas J6 Template — Custom styles
 *
 * Bootstrap 5 is loaded separately via Joomla's media vendor directory.
 * Add site-specific overrides and custom component styles here.
 * UIkit/Warp-era classes from the old theme.css are NOT included;
 * rebuild visual components using Bootstrap 5 utilities as needed.
 */

/* ===================================================================
   Base typography
   =================================================================== */

body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #444;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #444;
    margin-bottom: 20px;
}

h1 {
    color: #000;
}

a              { color: #026DA8; text-decoration: none; }
a:hover        { color: #014a72; text-decoration: underline; }
a:focus-visible { outline: 2px solid #026DA8; outline-offset: 2px; }

.com-content-article__body {
    margin: 0 40px;
}

/* Article body lists — arrow bullets via FontAwesome; ul.arrows also works outside article context.
   :not(.autotoc *) excluded so structural widget lists are unaffected. */
ul.arrows,
.com-content-article__body ul:not(.autotoc ul),
.uk-article ul:not(.autotoc ul) {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

ul.arrows > li,
.com-content-article__body ul:not(.autotoc ul) > li,
.uk-article ul:not(.autotoc ul) > li {
    padding: 3px 0 3px 20px;
    position: relative;
    margin-bottom: 0.2rem;
}

ul.arrows > li::before,
.com-content-article__body ul:not(.autotoc ul) > li::before,
.uk-article ul:not(.autotoc ul) > li::before {
    font-family: FontAwesome;
    content: "\f105";
    text-align: center;
    width: 20px;
    position: absolute;
    left: 0;
}

.com-content-article__body ol:not(.autotoc ol),
.uk-article ol:not(.autotoc ol) {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.com-content-article__body li:not(.autotoc li),
.uk-article li:not(.autotoc li) {
    margin-bottom: 0.2rem;
}

/* Nested lists */
.com-content-article__body ul:not(.autotoc ul) ul,
.com-content-article__body ol:not(.autotoc ul) ol,
.com-content-article__body ul:not(.autotoc ul) ol,
.com-content-article__body ol:not(.autotoc ul) ul {
    margin-bottom: 0;
}

/* ===================================================================
   Layout
   =================================================================== */

#site-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

#toolbar {
    background: #f5f5f5;
    font-size: 0.875rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #e0e0e0;
}

#header-inner {
    padding: 1rem !important;
}

#logo img,
#logo-mobile img {
    max-width: 200px;
    height: auto;
}

#headerbar {
    font-size: 0.8125rem;
    color: #666;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    align-self: flex-start;
}

#headerbar a {
    color: #444;
    padding: 0 0.5rem;
    border-right: 1px solid #ccc;
    line-height: 1;
}

#headerbar a:first-of-type {
    padding-left: 0;
}

#headerbar a:last-of-type {
    border-right: none;
}

#headerbar a:hover {
    color: #026DA8;
    text-decoration: none;
}

/* If headerbar uses a ul */
#headerbar ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

#headerbar ul li a {
    padding: 0 1.25rem;
    border-right: 1px solid #ccc;
    color: #000;
    font-size: 0.8125rem;
    text-decoration: none;
}

#headerbar ul li:last-child a {
    border-right: none;
}

#header-search form {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

#header-search label {
    font-size: 13px;
    white-space: nowrap;
    margin: 0;
    color: #444;
}

#header-search input[type="text"],
#header-search input[type="search"] {
    font-size: 13px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 160px;
}

#header-search input[type="submit"],
#header-search button[type="submit"] {
    font-size: 13px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

#site-nav {
    background: #fff;
    border-top: 1px solid #e0e0e0;
    min-height: 40px;
}

/* Hamburger toggle button — mobile only (hidden via d-md-none in HTML) */
#nav-toggle {
    background: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 36px;
    height: 30px;
    gap: 4px;
}

#nav-toggle span {
    display: block;
    height: 2px;
    background: #444;
    border-radius: 1px;
}

#nav-toggle:hover span { background: #026DA8; }
#nav-toggle:hover      { border-color: #026DA8; }

/* Offcanvas mobile nav */
#offcanvas .offcanvas-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

#offcanvas .offcanvas-body {
    padding: 1rem;
}

#offcanvas ul.mod-menu {
    flex-direction: column;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#offcanvas .nav-item {
    display: block;
    border-bottom: 1px solid #f0f0f0;
}

#offcanvas .nav-item > a {
    display: block;
    padding: 0.6rem 0;
    color: #444;
    font-size: 14px;
    text-decoration: none;
}

#offcanvas .nav-item > a:hover { color: #026DA8; }

/* Sub-menus in offcanvas: always visible, indented */
#offcanvas .mod-menu__sub {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0.25rem 1rem;
    list-style: none;
    margin: 0;
}

#offcanvas .mod-menu__sub .nav-item {
    border: none;
}

#offcanvas .mod-menu__sub .nav-item a {
    padding: 0.3rem 0;
    font-size: 13px;
    color: #555;
}

/* Top-level nav list: horizontal flex.
   Only targets .mod-menu to avoid overriding mod-menu.css display:none on .mod-menu__sub */
#site-nav ul.mod-menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

#site-nav .nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

#site-nav .nav-item > a,
#site-nav ul.mod-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

#site-nav .nav-item > a:hover,
#site-nav ul.mod-menu > li > a:hover {
    color: #026DA8;
    text-decoration: none;
}

#site-nav .nav-item.active > a,
#site-nav .nav-item.current > a {
    color: #026DA8;
    font-weight: 500;
}

/* Dropdown sub-menus: hidden by default, shown on hover */
#site-nav .mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 9999;
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
}

#site-nav .nav-item:hover > .mod-menu__sub {
    display: block;
}

#site-nav .mod-menu__sub .nav-item {
    display: block;
}

#site-nav .mod-menu__sub .nav-item a {
    display: block;
    padding: 0.4rem 1rem;
    color: #000;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
}

#site-nav .mod-menu__sub .nav-item a:hover {
    color: #026DA8;
}

/* Breadcrumbs are in top-a (col-md-4) alongside the Documentation module in top-b.
   Override Bootstrap columns so every top-row item stacks full-width. */
#top > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

#top .breadcrumb-nav,
#top .breadcrumb {
    padding: 0.5rem 0;
    margin-bottom: 0;
}

#breadcrumbs {
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

#content {
    padding: 1.5rem 0;
    min-height: 60vh;
}

#sidebar-a,
#sidebar-b {
    font-size: 14px;
}

#sidebar-a .mod-list,
#sidebar-b .mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar-a .mod-list li,
#sidebar-b .mod-list li {
    padding: 3px 0 3px 22px;
}

#sidebar-a .mod-list a,
#sidebar-b .mod-list a {
    color: #444;
}

#sidebar-a .mod-list a:hover,
#sidebar-b .mod-list a:hover {
    color: #026DA8;
    text-decoration: none;
}

/* Sidebar navigation — override Bootstrap .nav flex so items stack vertically */
#sidebar-a ul.mod-menu,
#sidebar-b ul.mod-menu {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: 1px solid #e0e0e0;
}

#sidebar-a ul.mod-menu > .nav-item,
#sidebar-b ul.mod-menu > .nav-item {
    display: block;
    position: relative;
}

/* All sidebar links indented 22px to leave room for the arrow on parent items */
#sidebar-a .mod-menu .nav-item > a,
#sidebar-b .mod-menu .nav-item > a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: #444;
    text-decoration: none;
    line-height: 1.4;
}

#sidebar-a .mod-menu .nav-item > a:hover,
#sidebar-b .mod-menu .nav-item > a:hover,
#sidebar-a .mod-menu .nav-item.current > a,
#sidebar-b .mod-menu .nav-item.current > a,
#sidebar-a .mod-menu .nav-item.active > a,
#sidebar-b .mod-menu .nav-item.active > a,
#sidebar-a .mod-menu .nav-item.alias-parent-active > a,
#sidebar-b .mod-menu .nav-item.alias-parent-active > a {
    color: #026DA8;
}

/* Toggle button: fixed to the top-left of the item row, does not grow when submenu opens */
#sidebar-a .mod-menu__toggle-sub,
#sidebar-b .mod-menu__toggle-sub {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: auto;
    background: none;
    border: none;
    padding: 7px 0 5px;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide the Joomla-rendered icon span — button ::before provides the glyph instead */
#sidebar-a .mod-menu__toggle-sub .icon-chevron-down,
#sidebar-b .mod-menu__toggle-sub .icon-chevron-down {
    display: none;
}

#sidebar-a .mod-menu__toggle-sub::before,
#sidebar-b .mod-menu__toggle-sub::before {
    font-family: FontAwesome;
    content: "\f105"; /* fa-angle-right */
}

#sidebar-a .mod-menu__toggle-sub[aria-expanded="true"]::before,
#sidebar-b .mod-menu__toggle-sub[aria-expanded="true"]::before {
    content: "\f107"; /* fa-angle-down */
}

#sidebar-a .mod-menu__toggle-sub:hover::before,
#sidebar-b .mod-menu__toggle-sub:hover::before {
    content: "\f107"; /* fa-angle-down on hover */
    color: #026DA8;
}

/* Submenus */
#sidebar-a .mod-menu__sub,
#sidebar-b .mod-menu__sub {
    display: block;
    list-style: none;
    padding: 0 0 4px;
    margin: 0;
}

#sidebar-a .mod-menu__sub[aria-hidden="true"],
#sidebar-b .mod-menu__sub[aria-hidden="true"] {
    display: none;
}

#sidebar-a .mod-menu__sub[aria-hidden="false"],
#sidebar-b .mod-menu__sub[aria-hidden="false"] {
    display: block;
}

#sidebar-a .mod-menu__sub .nav-item,
#sidebar-b .mod-menu__sub .nav-item {
    display: block;
    border-bottom: none;
}

/* Submenu links don't need the extra left indent — they're already indented by the parent padding */
#sidebar-a .mod-menu__sub .nav-item > a,
#sidebar-b .mod-menu__sub .nav-item > a {
    padding-left: 0;
}


/* ===================================================================
   Bottom strip (#bottom — positions bottom-a through bottom-e)
   =================================================================== */

#bottom {
    border-top: 1px solid #d8d8d8;
    padding: 10px 0;
    font-size: 12px;
}

#bottom .row {
    --bs-gutter-x: 0;
}

/* Bottom nav — horizontal list */
#bottom ul.mod-menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

#bottom ul.mod-menu .nav-item {
    display: inline-block;
}

#bottom ul.mod-menu .nav-item > a {
    display: inline-block;
    padding: 2px 0;
    margin-right: 15px;
    color: #026DA8;
    font-size: 12px;
    text-decoration: none;
}

#bottom ul.mod-menu .nav-item > a:hover {
    text-decoration: underline;
}

/* Two-row layout on medium+ screens:
   Row 1 (full width): nav links left, social right
   Row 2 (full width): address left, phones/hours right */
@media (min-width: 768px) {
    #bottom .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Row 1: nav + social side by side */
    #bottom .col-md-6:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
    }

    /* Row 2: address + phones side by side */
    #bottom .col-md-6:last-child {
        display: flex;
        align-items: flex-start;
        gap: 3rem;
        padding-top: 15px;
        border-top: 1px solid #e0e0e0;
    }

    #mod-custom114 {
        flex: 1;
    }
}

/* "Talk to us" label + social icons inline */
#bottom .mod-custom {
    font-size: 12px;
}

#bottom .mod-custom p {
    margin: 0;
}

/* Social icons */
ul.socialFooter {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
    align-items: center;
}

ul.socialFooter li {
    display: inline-block;
}

ul.socialFooter li a {
    display: block;
    width: 20px;
    font-family: SocialIco;
    font-size: 25px;
    line-height: 1;
    text-align: center;
    color: #000;
    text-decoration: none;
}

ul.socialFooter li a:hover {
    color: #026DA8;
}

/* Address and contact text */
#bottom .mod-custom p {
    margin: 0 0 4px;
}

#bottom #mod-custom113 p,
#bottom #mod-custom114 p,
#bottom #mod-custom114 {
    font-size: 12px;
    line-height: 1.6;
}

/* ===================================================================
   Footer dark bar (#site-footer — position: footer)
   =================================================================== */

#site-footer {
    background: transparent;
    color: #444;
    font-size: 11px;
    padding: 12px 0;
    border-top: 1px solid #d8d8d8;
}

#site-footer p {
    margin: 0;
}

#site-footer a {
    color: #000;
    text-decoration: none;
}

#site-footer a:hover {
    color: #026DA8;
}

/* Hide old com_search module — superseded by AddSearch */
.mod_search99 { display: none !important; }

/* ===================================================================
   Logo area
   =================================================================== */

/* Site name heading inside logo anchor */
#logo h2 {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

/* Logo anchor: no underline; h2 turns link-blue on hover */
#logo a {
    text-decoration: none;
    color: inherit;
}

#logo a:hover {
    text-decoration: none;
}

#logo a:hover h2 {
    color: #026DA8;
}

/* ===================================================================
   Mobile-only elements (hidden on desktop)
   =================================================================== */

.mobile-only { display: none !important; }

/* ===================================================================
   Sidebar — temporarily hidden; main content expands to fill
   =================================================================== */

body.view-article #sidebar-a { display: none; }

body.view-article #main-row > #component {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* ===================================================================
   Page-heading module (e.g. "Documentation")
   Only relevant on category pages, not article pages
   =================================================================== */

body.view-article #mod-custom125 { display: none; }

/* ===================================================================
   Breadcrumbs — Bootstrap 5 override
   =================================================================== */

nav.breadcrumb-nav .breadcrumb {
    background: transparent;
    padding: 0;
    --bs-breadcrumb-divider: ">";
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

.breadcrumb-item a {
    color: #026DA8;
}

.breadcrumb-item.active {
    color: #666;
}

/* ===================================================================
   Dundas Tabs
   =================================================================== */

.dundasTabs .dundasTabs-nav {
    border-bottom: 1px solid #d8d8d8;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.dundasTabs .dundasTabs-nav li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #555;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.dundasTabs .dundasTabs-nav li.dundasTabs-nav--active a,
.dundasTabs .dundasTabs-nav li a:hover {
    color: #026DA8;
    border-bottom-color: #026DA8;
}

.dundasTabs .dundasTabs-items > li {
    display: none;
}

.dundasTabs .dundasTabs-items > li.dundasTabs-item--active {
    display: block;
}

/* ===================================================================
   Pagination
   =================================================================== */

.pagination {
    margin-top: 1rem;
}

.pagination .page-link {
    color: #026DA8;
    border-color: #d8d8d8;
    padding: 0.375rem 0.75rem;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pagination .page-link:hover {
    color: #014a72;
    background-color: #f0f4f7;
    border-color: #b0c8d8;
    text-decoration: none;
}

.pagination .page-item.active .page-link {
    background-color: #026DA8;
    border-color: #026DA8;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #aaa;
    border-color: #e0e0e0;
}

/* FontAwesome glyphs for Joomla's IcoMoon icon-angle-* classes */
.pagination .icon-angle-left::before,
.pagination .icon-angle-right::before,
.pagination .icon-angle-double-left::before,
.pagination .icon-angle-double-right::before {
    font-family: FontAwesome;
    font-size: 13px;
    line-height: 1;
}

.pagination .icon-angle-left::before        { content: "\f104"; }
.pagination .icon-angle-right::before       { content: "\f105"; }
.pagination .icon-angle-double-left::before  { content: "\f100"; }
.pagination .icon-angle-double-right::before { content: "\f101"; }

/* ===================================================================
   Category blog layout (blog_item.php)
   =================================================================== */

.category-blog-item {
    padding: 1rem 0 1rem 60px;
    border-bottom: 1px solid #e0e0e0;
}

.category-blog-item__title {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 0.4rem;
}

.category-blog-item__title a {
    color: #026DA8;
    text-decoration: none;
    position: relative;
}

.category-blog-item__title a:hover {
    text-decoration: underline;
}

.category-blog-item__title a::before {
    content: '';
    position: absolute;
    left: -60px;
    background: left center / 50px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(132,142,151,1)'%3E%3Cpath d='M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    height: 50px;
    width: 50px;
}

.category-blog-item__intro {
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.category-blog-item__intro p:last-child {
    margin-bottom: 0;
}

.category-blog-links {
    margin: 0.5rem 0 0;
    padding: 0;
}

.category-blog-links li {
    padding: 0.3rem 0;
}

/* ===================================================================
   FAQ Items
   =================================================================== */

.faqItem {
    border-bottom: 1px solid #e0e0e0;
}

.faqItem-title {
    cursor: pointer;
    font-weight: 600;
    padding: 0.75rem 0;
    user-select: none;
}

.faqItem-title:hover {
    color: #026DA8;
}

.faqItem-text {
    padding: 0.5rem 0 0.75rem;
    /* theme.js sets display:none on init and toggles it */
}

/* Anchor jump-nav at top of FAQ page */
.faq-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.faq-anchors a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 1px solid #026DA8;
    color: #026DA8;
    text-decoration: none;
    font-size: 14px;
}

.faq-anchors a:hover {
    background: #026DA8;
    color: #fff;
}

.faq-totop {
    text-align: right;
    padding: 0.5rem 0 1rem;
    font-size: 12px;
}

/* ===================================================================
   Videos (ported from custom.css)
   =================================================================== */

/* Content: Video. */
.articleVideo { background-color: #f3f3f3; padding: 40px; margin-top: 20px; }
.articleVideo .articleVideo-iframe,
.articleVideo object,
.articleVideo embed { display: block; margin: auto; height: 480px; width: 100%; }
.articleVide-download { margin-top: 10px; }

/* Content: Training Video Category */
div.video-playlist-header {
    margin-top: 25px;
    margin-bottom: 25px;
}

#module-filter {
    font-size: 20px;
    width: 300px;
    background-color: white;
}

div.video-filter-container-set {
    min-width: 500px;
    display: inline-block;
}

div.video-filter-container {
    position: relative;
    display: inline-block;
}

div.video-filter-container div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    pointer-events: none;
}

div.video-filter-container input {
    background-color: white;
    color: black;
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    outline: none;
}

div.video-filter-container input:hover{
    background-color: lightgrey;
    color: black;
}

div.video-filter-container input:active{
    background-color: #e0e0e0;
}

div.video-filter-container select {
    width: 100px;
}

div.video-playlist-container {
    min-width: 500px;
}

div.video-playlist-item {
    padding-top: 25px;
    padding-left: 50px;
    background-color: #eaf5fb;
    margin-top: 2px;
    min-height: 81px;
}

div.video-icon {
    float: left;
    width: 100px;
    height: 56px;
    background-image: url("/support/images/videos/play-icon.png");
    background-repeat: no-repeat;
    background-position: 50% 10%;
    background-color: #bbc4c9;
    position: relative;
}

div.video-watched {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 3;
    color: darkgrey;
    text-align: center;
    background-color: rgba(220, 220, 220, 0.5);
    pointer-events: none;
}

div.category-container {
    display: inline-block;
}

span.clickableLink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
}

div.video-icon-progress {
    background-color: rgba(40,150,211, 0.5);
    height: 100%;
    float: left;
}

span.video-icon-text {
    position: absolute;
    top: 30px;
    left: 25px;
    font-size: 20px;
}

div.video-info {
    overflow: hidden;
    margin-left: 120px;
}

span.video-info-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 0.75em;
    margin-right: 20px;
}

span.video-info-length {
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}

span.video-info-audience {
    color: darkgrey;
    margin-left: 10px;
    padding-left: 10px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #2896d3;
}

span.video-info-description {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: darkgrey;
}

/* ===================================================================
   Version select dropdown
   =================================================================== */

.version-select-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.version-select-wrapper select {
    max-width: 220px;
}

/* ===================================================================
   Contact/support form
   =================================================================== */

.contactSupportForm fieldset {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ===================================================================
   Article
   =================================================================== */

.uk-article::before,
.uk-article::after { content: " "; display: table; }
.uk-article::after { clear: both; }
.uk-article > :last-child { margin-bottom: 0; }

.uk-article-title { margin-top: 20px; margin-bottom: 40px; }
.uk-article-title a { color: inherit; text-decoration: none; }

.uk-article-meta { font-size: 12px; line-height: 1.5; color: #999; margin: 5px 0; }

.uk-article h2,
.uk-article h3,
.uk-article h4 { color: #656565; }

.uk-article * + h2 { margin-top: 40px; }
.uk-article * + h3 { margin-top: 30px; }

.uk-article table { background: #fff; border: 1px solid #d8d8d8; border-collapse: collapse; }
.uk-article table thead { border-bottom: 1px solid #d8d8d8; }
.uk-article table thead th { font-weight: 500; text-align: left; vertical-align: top; }
.uk-article table th,
.uk-article table td { padding: 8px 20px 8px 0; vertical-align: top; }
.uk-article table th:first-child,
.uk-article table td:first-child { padding-left: 20px; }
.uk-article table tbody { font-size: 13px; line-height: 1.3; }
.uk-article table tbody tr { border-bottom: 1px solid #d8d8d8; }
.uk-article table tbody tr:last-child { border-bottom: 0; }
.uk-article table tbody tr td { padding-top: 10px; padding-bottom: 10px; }

/* ===================================================================
   Article image lightbox
   =================================================================== */
#dd-lightbox {
    background: transparent;
    border: none;
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
    overflow: visible;
}
#dd-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.dd-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    background-color: #fff;
}
.dd-lightbox-close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    z-index: 1;
    background: #fff;
    transition: background 0.15s;
    color: #000;
    border: 0.5px solid rgba(31, 30, 29, 0.3);
    border-radius: 50%;
    box-sizing: content-box;
    box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 14px;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    line-height: 2rem;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.dd-lightbox-close:hover {
    background: #eee;
}

/* ===================================================================
   Scroll to top (module)
   =================================================================== */

.scrollToTop {
    padding: 8px 16px;
    font-size: 14px;
    color: #026DA8;
    border: 0.5px solid #1f1e1d4d;
    border-radius: 8px;
    cursor: pointer;
    position: fixed;
    bottom: 5rem;
    right: 5rem;
    width: 36px;
    height: 36px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    background: center / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    background-color: white;
    transition: background 0.15s;
}

.scrollToTop:hover {
    background-color: #eee;
}

/* ===================================================================
   Table of contents
   =================================================================== */

.autotoc {
    float: right;
    min-width: 180px;
    max-width: 240px;
    margin: 0 0 30px 30px;
    padding: 15px;
    font-size: 13px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    box-sizing: content-box;
}

.autotoc > span + span { float: right; margin-left: 10px; }

.autotoc ul { margin-left: 20px; }
.autotoc > ul { margin-top: 5px; margin-left: 0; }
.autotoc > ul li { display: block; margin: 5px 0; }
.autotoc > ul li:last-of-type { margin-bottom: 0; }
.autotoc > ul li a { display: inline-block; color: #000; }
.autotoc a:hover { color: #026DA8; text-decoration: none; }

/* ===================================================================
   Buttons — brand colour for .btn-primary
   .mod-menu__toggle-sub is unaffected: it uses background:none/border:none
   and does not carry the .btn-primary class.
   =================================================================== */

.btn-primary {
    --bs-btn-bg:                 #026DA8;
    --bs-btn-border-color:       #026DA8;
    --bs-btn-hover-bg:           #014a72;
    --bs-btn-hover-border-color: #014a72;
    --bs-btn-active-bg:          #013d5e;
    --bs-btn-active-border-color:#013d5e;
    --bs-btn-disabled-bg:        #026DA8;
    --bs-btn-disabled-border-color:#026DA8;
    --bs-btn-focus-shadow-rgb:   2, 109, 168;
}

/* ===================================================================
   UIkit width compatibility shim
   Provides uk-width-* fractional grid classes used in article/module
   content. Breakpoints match UIkit v1 (small=480, medium=768, large=960).
   =================================================================== */

/* Base (all sizes) */
.uk-width-1-1  { width: 100%; }
.uk-width-1-2,
.uk-width-2-4,
.uk-width-3-6  { width: 50%; }
.uk-width-1-3,
.uk-width-2-6  { width: 33.333%; }
.uk-width-2-3,
.uk-width-4-6  { width: 66.666%; }
.uk-width-1-4  { width: 25%; }
.uk-width-3-4  { width: 75%; }
.uk-width-1-5  { width: 20%; }
.uk-width-2-5  { width: 40%; }
.uk-width-3-5  { width: 60%; }
.uk-width-4-5  { width: 80%; }
.uk-width-1-6  { width: 16.666%; }
.uk-width-5-6  { width: 83.333%; }
.uk-width-1-10 { width: 10%; }
.uk-width-3-10 { width: 30%; }
.uk-width-7-10 { width: 70%; }
.uk-width-9-10 { width: 90%; }

/* Small (480px+) */
@media (min-width: 480px) {
    .uk-width-small-1-1  { width: 100%; }
    .uk-width-small-1-2,
    .uk-width-small-2-4,
    .uk-width-small-3-6  { width: 50%; }
    .uk-width-small-1-3,
    .uk-width-small-2-6  { width: 33.333%; }
    .uk-width-small-2-3,
    .uk-width-small-4-6  { width: 66.666%; }
    .uk-width-small-1-4  { width: 25%; }
    .uk-width-small-3-4  { width: 75%; }
    .uk-width-small-1-5  { width: 20%; }
    .uk-width-small-2-5  { width: 40%; }
    .uk-width-small-3-5  { width: 60%; }
    .uk-width-small-4-5  { width: 80%; }
    .uk-width-small-1-6  { width: 16.666%; }
    .uk-width-small-5-6  { width: 83.333%; }
    .uk-width-small-1-10 { width: 10%; }
    .uk-width-small-3-10 { width: 30%; }
    .uk-width-small-7-10 { width: 70%; }
    .uk-width-small-9-10 { width: 90%; }
}

/* Medium (768px+) */
@media (min-width: 768px) {
    .uk-width-medium-1-1  { width: 100%; }
    .uk-width-medium-1-2,
    .uk-width-medium-2-4,
    .uk-width-medium-3-6  { width: 50%; }
    .uk-width-medium-1-3,
    .uk-width-medium-2-6  { width: 33.333%; }
    .uk-width-medium-2-3,
    .uk-width-medium-4-6  { width: 66.666%; }
    .uk-width-medium-1-4  { width: 25%; }
    .uk-width-medium-3-4  { width: 75%; }
    .uk-width-medium-1-5  { width: 20%; }
    .uk-width-medium-2-5  { width: 40%; }
    .uk-width-medium-3-5  { width: 60%; }
    .uk-width-medium-4-5  { width: 80%; }
    .uk-width-medium-1-6  { width: 16.666%; }
    .uk-width-medium-5-6  { width: 83.333%; }
    .uk-width-medium-1-10 { width: 10%; }
    .uk-width-medium-3-10 { width: 30%; }
    .uk-width-medium-7-10 { width: 70%; }
    .uk-width-medium-9-10 { width: 90%; }
}

/* Large (960px+) */
@media (min-width: 960px) {
    .uk-width-large-1-1  { width: 100%; }
    .uk-width-large-1-2,
    .uk-width-large-2-4,
    .uk-width-large-3-6  { width: 50%; }
    .uk-width-large-1-3,
    .uk-width-large-2-6  { width: 33.333%; }
    .uk-width-large-2-3,
    .uk-width-large-4-6  { width: 66.666%; }
    .uk-width-large-1-4  { width: 25%; }
    .uk-width-large-3-4  { width: 75%; }
    .uk-width-large-1-5  { width: 20%; }
    .uk-width-large-2-5  { width: 40%; }
    .uk-width-large-3-5  { width: 60%; }
    .uk-width-large-4-5  { width: 80%; }
    .uk-width-large-1-6  { width: 16.666%; }
    .uk-width-large-5-6  { width: 83.333%; }
    .uk-width-large-1-10 { width: 10%; }
    .uk-width-large-3-10 { width: 30%; }
    .uk-width-large-7-10 { width: 70%; }
    .uk-width-large-9-10 { width: 90%; }
}

/* UIkit visibility classes */
@media (max-width: 767px) {
    .uk-visible-medium,
    .uk-visible-large  { display: none !important; }
    .uk-hidden-small   { display: none !important; }
}
@media (min-width: 768px) and (max-width: 959px) {
    .uk-visible-small,
    .uk-visible-large  { display: none !important; }
    .uk-hidden-medium  { display: none !important; }
}
@media (min-width: 960px) {
    .uk-visible-small,
    .uk-visible-medium { display: none !important; }
    .uk-hidden-large   { display: none !important; }
}

.uk-visible-hover:hover .uk-hidden,
.uk-visible-hover:hover .uk-invisible        { display: block !important; }
.uk-visible-hover-inline:hover .uk-hidden,
.uk-visible-hover-inline:hover .uk-invisible { display: inline-block !important; }

/* ===================================================================
   Components (ported from theme.css)
   =================================================================== */

/* Banner Nav */
.dd-banner-nav { margin: 20px auto; padding: 20px 0; }
.dd-banner-nav li { display: inline-block; }
.dd-banner-nav li:not(:last-of-type) { margin-right: 20px; }
.dd-banner-nav li a { display: block; background-color: rgba(29,153,216,.7); padding: 20px 30px; color: #FFF; font-size: 15px; }
.dd-banner-nav li a:hover { text-decoration: none; background-color: rgba(29,153,216,1); color: #FFF; }

/* Home page */
.home .tm-top-a { margin-bottom: 0; }
.home div.uk-container { padding: 0; max-width: 960px; }
.home .tm-top-a .uk-panel-box { padding: 0; }
.home .tm-top-c { padding-top: 10px; border-top: 1px solid #cacaca; }
div.home-getStarted-container { margin-bottom: 30px; }
.home .tm-top-c h3 { text-align: center; margin: 40px; font-weight: 400; }

.home-ul-wrapper { text-align: center; }
.home-ul-wrapper ul { display: inline-block; margin: 0; padding: 0; list-style-type: none; }
.home-ul-wrapper li::before { content: "■ "; color: #c0c0c0; vertical-align: text-bottom; font-size: 18px; }
.home-ul-wrapper li { text-align: left; }
.home-ul-wrapper a { color: #2b95d2; font-size: 18px; text-decoration: none; font-weight: 500; margin-left: 5px; }

body.view-featured #main-top-row {
    max-width: 960px;
    margin: 20px auto 0;
}

/* Home: Widget */
.uk-panel.homeWidget { margin-top: 10px; }
a.homeWidget { color: inherit; text-align: center; width: 148px; height: 98px; display: block; margin: 0 auto; }
.uk-visible-small a.homeWidget { min-height: 40px; }
a.homeWidget:hover { text-decoration: none; }
a.homeWidget h4 { font-size: 16px; margin: 0; font-weight: 400; }
a.homeWidget p { display: none; }
a.homeWidget:hover p { margin: 0 auto 10px; display: block; height: 42px; width: 150px; }
.homeWidget-icon { margin: 0 auto; width: 65px; height: 52px; background-position: center top; background-repeat: no-repeat; }
.homeWidget--learning    .homeWidget-icon { background-image: url(../images/home/1.png); }
.homeWidget--tour        .homeWidget-icon { background-image: url(../images/home/2.png); }
.homeWidget--vip         .homeWidget-icon { background-image: url(../images/home/3.png); }
.homeWidget--otc         .homeWidget-icon { background-image: url(../images/home/OTC_Support_Site_Icon.png); }

/* Home: Get Started (this and following home content ported from custom.css) */
.getStarted h4 { margin:0 0 20px 0; padding:0; font-size:16px; }
.getStarted .item-separator { display:none; }
.getStarted--widgetContent.getStarted-videos ul { padding-left: 0; list-style: none; }
.getStarted .cols-1, .getStarted-videos li { padding:10px 0 10px 50px; background:url(../images/home/7.png) no-repeat 0 10px; }
.getStarted .cols-1.row-4 { border:0; }
.getStarted .recommendedContent { padding-right: 10px; }
.getStarted h3 { font-size: 26px; font-weight: 400; margin: 0; color: black; }
.getStarted .span0 { float: none; margin: 0; }
.getStarted .span0 .item { overflow: hidden; }
.getStarted .span0:last-of-type .item { margin-bottom: 0; }
.getStarted .listItem-image { float: left; width: 70px; }
.getStarted img { display: block; float: none; max-width: 100%; }
.getStarted .listItem-content { margin-left: 85px; line-height: 1.2; }
.getStarted span.title { margin-bottom: 5px; display: block;  font-weight: 400; }
.getStarted span.title a { margin:0; padding:0; font-size: 18px; display: block; color: black; text-decoration: none; }
.getStarted p { margin:0; padding:0; }
.getStarted span.category-name a { display:inline-block; color:#2b95d2; font-size:16px; padding:20px 0 0; text-decoration: underline; }

/* Home: What's New. */
.getStarted.whatsNew h3 { color: #000313; }
.getStarted.whatsNew .cols-1 { padding:5px 0 10px 25px; border-bottom:solid 1px #e7e7e7; background:url(../images/bluesquare.png) no-repeat 0 13px; background-size: 10px 10px; }
.getStarted.whatsNew span.title { margin:0; }

/* Home: Link Widgets */
.getStarted--widgetGrid {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.getStarted--widgets {
	padding: 0px;
	padding-left: 25px;
}
.getStarted--widgetContainer {
	padding-left: 5px;
	padding-right: 5px;
}
.getStarted--widgetContainer.lastWidget {
	padding-right: 0px;
}
.getStarted--widgetContainer.firstWidget {
	padding-left: 0px;
}

.offTheChartsWidget  {
	background: url(/support/images/home/ForumsWidgetIcon.png);
	background-position: center;
	background-size: cover;
	min-height: 186px;
	max-height: 186px;
}
.offTheChartsWidget:hover {
	background-image: url(/support/images/home/ForumsLearnMore.png);
	background-position: center;
	background-size: contain;
	min-height: 186px;
}
.offTheChartsWidget img {
	opacity: 0;
	padding-top: 60px;
}

.getStarted--widget {
	background-color: #f3f8fb;
	min-height: 186px;
    padding: 0.6rem 1rem;
}
@media (max-width: 767px) {
	.getStarted--widgets {
		padding-left: 0px;
	}
	.getStarted--widgetContainer {
		padding-right: 0px;
	}
	.getStarted--widget {
		min-height: 0px;
		margin-top: 25px;
	}
	.offTheChartsWidget  {
		background: url(/support/images/home/OTC720x144.jpg);
		background-position: center;
		max-height: 144px;
		min-height: 0px;
	}
	.offTheChartsWidget:hover  {
		background-color: #2897D3;
		background-image: url(/support/images/home/OTCWatch.jpg);
		background-position: center;
		background-repeat-x: no-repeat;
		max-height: 144px;
		min-height: 0px;
	}
}
div.getStarted--widgetTitle {
	/*text-align: center;*/
	background-repeat: no-repeat;
	background-position: left;
}
div.getStarted--widgetTitle.samples {
	/*background-image: url('../images/home/5.png');*/
}
div.getStarted--widgetTitle.webinars {
	/*background-image: url('../images/home/6.png');*/
	/*text-align: right;*/
}
.getStarted--widgetTitle {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #2b95d2;
	padding-bottom: 3px;
	width: 100%;
	margin: 0 auto;
}
.getStarted--widgetTitle img {
	display: inline-block;
	padding-right: 10px;
}
.getStarted--widgetTitle h3 {
	display: inline-block;
	vertical-align: middle;
	/*padding-left: 50px;*/
}

.getStarted--widgetContent img {
	display: inline;
	margin-left: 10px;
}

.getStarted--widgetContent span {
	font-weight: 400;
}

.getStarted--widgetContent span a {
	display:inline-block; 
	color:#2b95d2; 
	font-size:16px; 
	margin-top: 10px;
	margin-bottom: 10px; 
	text-decoration: underline;
}

.getStarted--widgetContent ul,
#sidebar-b .getStarted--widgetContent ul {
	padding-top: 15px;
	padding-left: 20px;
	list-style-image: url(../images/bluesquaresmall.png);
	margin-bottom: 0px;
}

.getStarted--widgetContent a {
	color: black;
	text-decoration: none;
	font-size: 16px;
}

.getStarted--widgetContent .mod-articles-title {
    margin-bottom: 3px;
}

.getStarted--widgetContent .mod-articles-title a,
#sidebar-b .getStarted--widgetContent .mod-articles-title a {
    font-size: 18px;
    color: black;
}

#sidebar-b .getStarted--widgetContent li {
    padding: 0;
}

#sidebar-b .getStarted--widgetContent li {
    padding-left: 10px;
}

#sidebar-b .getStarted--widgetContent li + li {
    margin-top: 10px;
}

/* Interior: Get Started. */
body.dundasCategoryBlog .uk-panel-box.getStartedInterior h3.uk-panel-title { margin:0; }
body.dundasCategoryBlog .uk-panel-box.getStartedInterior {  border:solid 1px #e5e5e5; background:white; }
body.dundasCategoryBlog .uk-panel-box.getStartedInterior.doc { float:right; }
body.dundasCategoryBlog .tm-main-bottom .uk-width-medium-1-2 { width: 49%; }
body.dundasCategoryBlog .tm-main-bottom .uk-width-medium-1-2:nth-child(2) { margin-left:1%; }
.getStartedInterior .item-separator { display:none; }
.getStartedInterior .row-separator { clear:both; }
.getStartedInterior p { margin:0; padding:0; }
.getStartedInterior ul { margin:0; padding:0; list-style:none; }
.getStartedInterior ul li { padding:25px 0 25px 60px; border-bottom:solid 1px #e5e5e5; background:url(../images/greyarrow.png) no-repeat 0 30px; }
.getStartedInterior.doc ul li { padding:25px 0 25px 60px; border-bottom:solid 1px #e5e5e5; background:url(../images/articles.png) no-repeat 0 30px; }
.getStartedInterior ul li:last-child { border:0; }
body.dundasCategoryBlog  .tm-main-bottom.uk-grid { margin:0; }
body.dundasCategoryBlog  .tm-main-bottom.uk-grid .uk-width-1-1 { padding: 0; }

/* Learning Center: Widget Buttons */
.learningWidgetButton { display: inline-block; color: inherit; text-decoration: none; text-align: center; margin: 0 30px; }
.learningWidgetButton:hover { text-decoration: none; }
.learningWidgetButton .learningWidgetButton-icon { margin: 20px auto; width: 75px; height: 75px; background-position: center top; background-repeat: no-repeat; opacity: .7; }
.learningWidgetButton:hover .learningWidgetButton-icon { opacity: 1; }
.learningWidgetButton.learningWidgetButton--videos-new        .learningWidgetButton-icon { background-image: url(../images/learning-videos-new.png); }
.learningWidgetButton.learningWidgetButton--documentation-new .learningWidgetButton-icon { background-image: url(../images/learning-documentation-new.png); }
.learningWidgetButton.learningWidgetButton--webinars          .learningWidgetButton-icon { background-image: url(../images/learning-webinars.png); }
.learningWidgetButton.learningWidgetButton--samples-new       .learningWidgetButton-icon { background-image: url(../images/learning-samples-new.png); }
.learningWidgetButton.learningWidgetButton--cube              .learningWidgetButton-icon { background-image: url(../images/learning-cube.png); }
.learningWidgetButton.learningWidgetButton--news              .learningWidgetButton-icon { background-image: url(../images/learning-news.png); }
.learningWidgetButton.learningWidgetButton--samples           .learningWidgetButton-icon { background-image: url(../images/learning-samples.png); }
.learningWidgetButton.learningWidgetButton--practices         .learningWidgetButton-icon { background-image: url(../images/learning-practices.png); }
.learningWidgetButton.learningWidgetButton--videos            .learningWidgetButton-icon { background-image: url(../images/learning-videos.png); }
.learningWidgetButton.learningWidgetButton--documentation     .learningWidgetButton-icon { background-image: url(../images/learning-documentation.png); }
.learningWidgetButton.learningWidgetButton--getstarted        .learningWidgetButton-icon { background-image: url(../images/learning-getstarted.png); }
.learningWidgetButton.learningWidgetButton--tour              .learningWidgetButton-icon { background-image: url(../images/learning-tour.png); }
.learningWidgetButton h3 { color: #026DA8; }
.learningWidgetButton:hover h3 { text-decoration: underline; }

/* Developer Center: Widget Buttons */
.developerWidgetButtons { list-style: none; margin: 0; padding: 0; text-align: center; }
.developerWidgetButton { display: inline-block; color: inherit; text-decoration: none; }
.developerWidgetButton a { display: block; float: left; width: 200px; color: inherit; text-decoration: none; }
.developerWidgetButton .developerWidgetButton-icon { margin: 20px auto; width: 80px; height: 80px; background-position: center top; background-repeat: no-repeat; opacity: .7; }
.developerWidgetButton a:hover .developerWidgetButton-icon { opacity: 1; }
.developerWidgetButton.developerWidgetButton--samples .developerWidgetButton-icon { background-image: url(../images/api_samples.png); }
.developerWidgetButton.developerWidgetButton--net     .developerWidgetButton-icon { background-image: url(../images/net_api.png); }
.developerWidgetButton.developerWidgetButton--rest    .developerWidgetButton-icon { background-image: url(../images/rest_api.png); }
.developerWidgetButton.developerWidgetButton--js      .developerWidgetButton-icon { background-image: url(../images/js_api.png); }
.developerWidgetButton h3 { color: #026DA8; }
.developerWidgetButton a:hover h3 { text-decoration: underline; }

/* Support Center: Widget Buttons */
.supportWidgetButtons { list-style: none; margin: 0; padding: 0; text-align: center; }
.supportWidgetButtons li { display: inline-block; width: 24%; vertical-align: top; }
.supportWidgetButton { display: block; color: inherit; text-decoration: none; padding: 10px; box-sizing: border-box; }
.supportWidgetButton:hover { text-decoration: none; }
.supportWidgetButton .supportWidgetButton-icon { margin: 20px auto; width: 80px; height: 80px; background-position: center top; background-repeat: no-repeat; opacity: .7; }
.supportWidgetButton:hover .supportWidgetButton-icon { opacity: 1; }
.supportWidgetButton.supportWidgetButton--trial           .supportWidgetButton-icon { background-image: url(../images/support-trial.png); }
.supportWidgetButton.supportWidgetButton--downloads       .supportWidgetButton-icon { background-image: url(../images/support-downloads.png); }
.supportWidgetButton.supportWidgetButton--articles        .supportWidgetButton-icon { background-image: url(../images/support-articles.png); }
.supportWidgetButton.supportWidgetButton--faq             .supportWidgetButton-icon { background-image: url(../images/support-faq.png); }
.supportWidgetButton.supportWidgetButton--troubleshooting .supportWidgetButton-icon { background-image: url(../images/support-troubleshooting.png); }
.supportWidgetButton h3 { color: #026DA8; }
.supportWidgetButton:hover h3 { text-decoration: underline; }

.support-title { text-align: center; font-size: 32px; }

/* Contact. */
.contactSupportItem { overflow: hidden; margin-top: 20px; }
.contactSupportItem .contactSupportItem-icon { display: block; float: left; width: 60px; height: 60px; background-position: center top; background-repeat: no-repeat; }
.contactSupportItem.contactSupportItem--call .contactSupportItem-icon { background-image: url(../images/call.png);}
.contactSupportItem.contactSupportItem--email .contactSupportItem-icon { background-image: url(../images/email.png); }
.contactSupportItem.contactSupportItem--issue .contactSupportItem-icon { background-image: url(../images/issue.png); }
.contactSupportItem .contactSupportItem-content { display: block; margin: 0; margin-left: 80px; }

/* ===================================================================
   Search (ported from custom.css)
   =================================================================== */

/* Google CSE Component */
.cse-search-button { margin-bottom: 10px; border-width: 0px; padding-top: 4px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; background-color: #2896d3; color: white;}
.cse-search-box { width: 100%; max-width: 350px; }
.cse-result-title { font-size: 18px; }
.cse-result-item { padding-bottom: 25px; }
.cse-nav { margin-top: 25px; }
.cse-nav-button { display: inline-block; margin-bottom: 5px; font-size: 18px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; margin-right: 5px; background-color: #2896d3; color: white; }
.cse-nav-button-current { display: inline-block; margin-bottom: 5px; font-size: 18px; padding-left: 10px; padding-right: 10px; margin-right: 5px; font-weight: 600; }

.cse-search-box-module:after {
    content: "\f002";
    position: absolute;
    
    top: 0;
    right: 18px;

    width: 30px;
    line-height: 30px;

    text-align: center;

    font-family: FontAwesome;
    font-size: 14px;

    color: #000;
}

/* ===================================================================
   Host indicator (staging banner)
   =================================================================== */

.hostIndicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    z-index: 9999;
}