/* Easy Insight website: Bootstrap 5 bridge.
   Load order: bootstrap5-min.css, this file, then bootstrap-website-min.css.
   This file sits where Bootstrap 3 used to sit, so the site's own stylesheet overrides it the same way.
   Purpose: keep the Bootstrap 3 look (type, links, gutters, widths, buttons, menus) on Bootstrap 5. */

/* ---- base type and colour (Bootstrap 3 values) ---- */
:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333333;
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;
}
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
/* Bootstrap 5 greys out links that have no href (named anchors); Bootstrap 3 coloured them like any link */
a:not([href]):not([class]) { color: #337ab7; text-decoration: none; }
a:not([href]):not([class]):hover { color: #23527c; text-decoration: underline; }
/* Bootstrap 5 removes the browser's default iframe border; Bootstrap 3 left it alone */
iframe:not([frameborder]) { border: 2px inset; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
hr { margin: 20px 0; border: 0; border-top: 1px solid #eeeeee; opacity: 1; }

small { font-size: 85%; }
b, strong { font-weight: 700; }
label { max-width: 100%; margin-bottom: 5px; font-weight: 700; }
th { text-align: left; }
button, input, optgroup, select, textarea { color: inherit; }
:root { --bs-font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; scroll-behavior: auto; }
code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; word-wrap: normal; }
pre {
    display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333333;
    word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 4px;
}
pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; word-break: inherit; background-color: transparent; border-radius: 0; }
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eeeeee; }
blockquote p:last-child { margin-bottom: 0; }
.blockquote-reverse { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eeeeee; border-left: 0; }

/* ---- grid: Bootstrap 3 behaviour under Bootstrap 5 class names ----
   Bootstrap 5 lays columns out with flexbox; Bootstrap 3 floated them. The two stack and space
   content differently (margins collapse between stacked float columns, not between flex items),
   so pages shift by a few pixels to a few hundred. To keep every page identical, columns float
   here as they did before. Widths and offsets still come from Bootstrap 5 (same percentages).
   Delete this block to switch to the flex grid, then re-check page spacing. */
.container, .container-fluid, .row { --bs-gutter-x: 30px; }
.container::before, .container::after,
.container-fluid::before, .container-fluid::after,
.row::before, .row::after { display: table; content: " "; }
.container::after, .container-fluid::after, .row::after { clear: both; }
.row { display: block; }
/* undo what Bootstrap 5 puts on every direct child of a row, then give columns their float and width back */
.row > * { width: auto; max-width: none; }
.row > :not([class*="col-"]):not(.row) { --bs-gutter-x: 0; }
.row > .row { padding-right: 0; padding-left: 0; }
.row > :where(h1, h2, h3, hr) { margin-top: 20px; }
.row > :where(h4, h5, h6) { margin-top: 10px; }
[class^="col-"], [class*=" col-"] { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; }
.col-1 { width: 8.33333333%; }
.col-2 { width: 16.66666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }
@media (min-width: 576px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
    .col-sm-1 { width: 8.33333333%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
    .col-md-1 { width: 8.33333333%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
    .col-lg-1 { width: 8.33333333%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-12 { width: 100%; }
}
@media (min-width: 1200px) {
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { float: left; }
    .col-xl-1 { width: 8.33333333%; }
    .col-xl-2 { width: 16.66666667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.33333333%; }
    .col-xl-5 { width: 41.66666667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.33333333%; }
    .col-xl-8 { width: 66.66666667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.33333333%; }
    .col-xl-11 { width: 91.66666667%; }
    .col-xl-12 { width: 100%; }
}
@media (min-width: 1400px) {
    .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 { float: left; }
    .col-xxl-1 { width: 8.33333333%; }
    .col-xxl-2 { width: 16.66666667%; }
    .col-xxl-3 { width: 25%; }
    .col-xxl-4 { width: 33.33333333%; }
    .col-xxl-5 { width: 41.66666667%; }
    .col-xxl-6 { width: 50%; }
    .col-xxl-7 { width: 58.33333333%; }
    .col-xxl-8 { width: 66.66666667%; }
    .col-xxl-9 { width: 75%; }
    .col-xxl-10 { width: 83.33333333%; }
    .col-xxl-11 { width: 91.66666667%; }
    .col-xxl-12 { width: 100%; }
}
/* container widths: Bootstrap 3 used fixed widths, which matters when a container sits inside a column */
.container { width: auto; max-width: none; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---- buttons ---- */
.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
    --bs-btn-border-radius: 4px;
}
.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #449d44;
    --bs-btn-hover-border-color: #398439;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #449d44;
    --bs-btn-active-border-color: #398439;
    --bs-btn-focus-shadow-rgb: 92, 184, 92;
}

.btn { white-space: nowrap; }
.btn-primary {
    --bs-btn-color: #ffffff; --bs-btn-bg: #337ab7; --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #286090; --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #286090; --bs-btn-active-border-color: #204d74;
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}
.btn-info {
    --bs-btn-color: #ffffff; --bs-btn-bg: #5bc0de; --bs-btn-border-color: #46b8da;
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #31b0d5; --bs-btn-hover-border-color: #269abc;
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #31b0d5; --bs-btn-active-border-color: #269abc;
    --bs-btn-focus-shadow-rgb: 91, 192, 222;
}

/* ---- images, video boxes, forms, tables, badges (Bootstrap 3 values) ---- */
.img-responsive { display: block; max-width: 100%; height: auto; }
.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive-4by3 { padding-bottom: 75%; }
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe,
.embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.form-control {
    height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555555;
    border: 1px solid #cccccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.form-control:focus {
    color: #555555; border-color: #66afe9; outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::placeholder { color: #999999; opacity: 1; }
textarea.form-control { height: auto; }
.form-control-lg { height: 46px; min-height: 0; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.table { --bs-table-bg: transparent; --bs-table-color: inherit; max-width: 100%; margin-bottom: 20px; border-color: #dddddd; }
.table > :not(caption) > * > * {
    padding: 8px; line-height: 1.42857143; vertical-align: top; color: inherit; background-color: transparent;
    border: 0; border-top: 1px solid #dddddd; box-shadow: none;
}
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #dddddd; }
.table > thead:first-child > tr:first-child > * { border-top: 0; }
.table-sm > :not(caption) > * > * { padding: 5px; }
.table-bordered { border: 1px solid #dddddd; }
.table-bordered > :not(caption) > * { border-width: 0; }
.table-bordered > :not(caption) > * > * { border: 1px solid #dddddd; }
.table-bordered > thead > tr > * { border-bottom-width: 2px; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }
.badge {
    display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: 700; line-height: 1;
    color: #ffffff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777777; border-radius: 10px;
}
/* The old custom Bootstrap build had no alert styles, so alerts were plain text. Kept plain so pages look the same. */
.alert { position: static; padding: 0; margin-bottom: 0; color: inherit; background-color: transparent; border: 0; border-radius: 0; }

/* ---- top bar, desktop (was .navbar.navbar-default.navbar-fixed-top) ---- */
.site-navbar-bar {
    border-bottom: 1px solid #e7e7e7;
    min-height: 36px;
}
.site-nav {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
.site-nav-right { float: right; margin-right: -15px; }
.site-nav-right ~ .site-nav-right { margin-right: 0; }
.site-nav > li { position: relative; display: block; }
.site-nav > li > a { position: relative; display: block; padding: 10px 14px; line-height: 20px; }
@media (min-width: 768px) { .site-nav > li > a { padding-top: 15px; padding-bottom: 15px; } }
.site-navbar-bar .site-nav > li > a { color: #777777; }
.site-navbar-bar .site-nav > li > a:hover, .site-navbar-bar .site-nav > li > a:focus { color: #333333; }

/* dropdown menus: open on hover or keyboard focus (CSS), or on tap/click (Bootstrap) */
.dropdown-menu {
    --bs-dropdown-min-width: 160px;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-spacer: 0;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-border-radius: 4px;
    --bs-dropdown-border-color: rgba(0, 0, 0, .15);
    --bs-dropdown-item-padding-x: 20px;
    --bs-dropdown-item-padding-y: 3px;
    --bs-dropdown-link-hover-bg: #f5f5f5;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    line-height: 1.42857143;
}
.dropdown-menu > li > .dropdown-item { font-weight: 400; }
.hover-dropdown:hover > .dropdown-menu,
.hover-dropdown:focus-within > .dropdown-menu {
    display: block;
    top: 100%;
    left: 0;
    margin-top: 0;
}

/* ---- top bar, phone (was .navbar-header / .navbar-toggle / .navbar-collapse) ---- */
.site-nav-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin: 8px 15px 8px 0;
    background-color: transparent;
    border: 1px solid #333333;
    border-radius: 4px;
}
.site-nav-header::after { display: table; clear: both; content: " "; }
.site-nav-toggle:hover, .site-nav-toggle:focus { background-color: #333333; }
.site-nav-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #666666;
}
.site-nav-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.site-nav-collapse { padding: 0 15px; border-top: 1px solid transparent; }
.site-nav-stacked { margin: 7.5px -15px; padding-left: 0; list-style: none; }
.site-nav-stacked > li > a { position: relative; display: block; padding: 10px 14px; line-height: 20px; }

/* ---- site rules that name a grid class: same rule under the class's new name ---- */
#newFooter .col-md-12 { padding-top: 5px; padding-bottom: 5px; }
.docsDiv > .row > .col-lg-2, .docsDiv > .row > .col-lg-3 { padding-top: 15px; }
.helpBody > .col-lg-3 > .row { margin-top: 5px; margin-bottom: 5px; }

/* ---- lightbox (js/lightbox-bs5.js), sized and spaced like the old ekko-lightbox ---- */
.site-lightbox {
    --bs-modal-margin: 10px;
    --bs-modal-padding: 15px;
    --bs-modal-header-padding: 15px;
    --bs-modal-border-radius: 6px;
    --bs-modal-inner-border-radius: 5px;
    --bs-modal-border-color: rgba(0, 0, 0, .2);
    --bs-modal-header-border-color: #e5e5e5;
    --bs-modal-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    text-align: left;
}
.site-lightbox .modal-dialog { width: auto; max-width: none; margin: 10px; }
@media (min-width: 768px) {
    .site-lightbox { --bs-modal-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); }
    .site-lightbox .modal-dialog { margin: 30px auto; }
}
.site-lightbox .modal-content { box-shadow: var(--bs-modal-box-shadow); }
.site-lightbox .modal-header { display: block; }
.site-lightbox .modal-title { margin: 0; font-size: 18px; line-height: 1.42857143; }
.site-lightbox-close {
    float: right;
    margin-top: -2px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: .2;
    cursor: pointer;
}
.site-lightbox-close:hover, .site-lightbox-close:focus { opacity: .5; }
.site-lightbox-img { display: block; max-width: 100%; height: auto; }
.site-lightbox-loading { padding: 40px 0; text-align: center; }