input[type=checkbox] {
    width: 18px;
    height: 18px;
}

.paddingLeftTen {
    padding-left:10px;
}

.widthEighteen {
    width:18px !important;
}

.input-group-append {
    width:0px !important;
}

.comboBoxBtn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ---- Image lightbox for ul.popup-gallery (replaces Magnific Popup; see Scripts/js/site.js) ---- */

.wb-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Above the Polimorphic chat button, which Site.Master places at z-index 10000000. */
    z-index: 10000001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
    background: rgba(0, 0, 0, 0.85);
}

.wb-lightbox[hidden] {
    display: none;
}

.wb-lightbox-figure {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    text-align: center;
}

.wb-lightbox-image {
    display: block;
    max-width: 100%;
    /* Leaves room for the caption below the image and the padding around it. */
    max-height: calc(100vh - 120px);
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.wb-lightbox-caption {
    padding: 8px 0 0;
    color: #f3f3f3;
    font-size: 14px;
    line-height: 1.4;
}

.wb-lightbox-close,
.wb-lightbox-prev,
.wb-lightbox-next {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0.8;
}

.wb-lightbox-close:hover,
.wb-lightbox-close:focus,
.wb-lightbox-prev:hover,
.wb-lightbox-prev:focus,
.wb-lightbox-next:hover,
.wb-lightbox-next:focus {
    opacity: 1;
    outline: none;
}

.wb-lightbox-close {
    top: 0;
    right: 10px;
    font-size: 44px;
    line-height: 1;
}

/* Same arrow images the theme used for its Magnific Popup arrows. */
.wb-lightbox-prev,
.wb-lightbox-next {
    top: 50%;
    width: 40px;
    height: 50px;
    margin-top: -25px;
    background: rgba(0, 0, 0, 0.7) no-repeat center center;
}

.wb-lightbox-prev {
    left: 10px;
    background-image: url(../images/prev.png);
}

.wb-lightbox-next {
    right: 10px;
    background-image: url(../images/next.png);
}

.wb-lightbox-prev[hidden],
.wb-lightbox-next[hidden],
.wb-lightbox-caption[hidden] {
    display: none;
}

/* Hide the sticky header behind the lightbox and stop the page scrolling underneath it. */
.wb-lightbox-open {
    overflow: hidden;
}

.wb-lightbox-open .bb-fixed-header {
    display: none;
    visibility: hidden;
}

@media (max-width: 767px) {
    .wb-lightbox {
        padding: 50px 10px;
    }

    .wb-lightbox-prev,
    .wb-lightbox-next {
        top: auto;
        bottom: 0;
        margin-top: 0;
    }
}

/* ---- Fade-in on scroll (replaces WOW + animate.css; only fadeIn was ever used) ---- */

.wb-js .wow {
    opacity: 0;
}

.wb-js .wow.wb-fade-in {
    animation: wb-fade-in 1s ease both;
}

@keyframes wb-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-js .wow {
        opacity: 1;
        animation: none;
    }
}

/* ---- Fixed widths for Font Awesome glyphs that sit beside text ----
   Until the icon font arrives the browser lays these out with a fallback font of a different width, and the
   text next to them moves when the real glyphs replace it. Each width is the loaded glyph's own width in em,
   so the layout is the same before and after the font loads. */

.navbar-collapse ul.navbar-nav > li.dropdown > a:after {
    width: 0.643em;
}

.topbar .fa-envelope {
    width: 1em;
}

/* The theme's 7px right padding is inside the width because Bootstrap uses border-box sizing. */
.topbar .fa-phone {
    width: calc(0.786em + 7px);
}

/* ---- Polimorphic chat window (created by js/chat.js) ---- */

/* Global rather than in ChatWidget.razor.css because the iframe is created by script, so it never gets the scope
   attribute. Closed, it stays loaded but shrinks to nothing so the conversation survives a close and reopen, and
   visibility keeps it out of the tab order. */
.chat-frame {
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 10000000;
    width: 0;
    height: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    visibility: hidden;
}

.chat-frame--open {
    width: min(100vw - 40px, 550px);
    height: min(100vh - 160px, 800px);
    visibility: visible;
}

/* ---- Heading levels that keep another level's look ---- */

/* The old pages picked heading tags by size, which skips levels. These let a page use the right tag without
   changing how it looks. The h2 selector outranks the theme's .custom h2 size and line height. */
h2.heading-h3 {
    font-size: 22px;
    line-height: 1.1;
    color: #1857A5;
}

@media (min-width: 768px) {
    h2.heading-h3 {
        font-size: 18px;
    }
}

@media (min-width: 992px) {
    h2.heading-h3 {
        font-size: 22px;
    }
}

.heading-h4 {
    font-size: 20px;
    color: inherit;
}

.heading-h4:hover {
    color: blue;
}

/* For a line under a name, such as a job title, that is not a heading of its own. */
.heading-h5 {
    margin: 0;
    color: #282428;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
}

/* ---- Images from the ResponsiveImage component ---- */

/* They carry width and height attributes for their shape; this lets max-width shrink them without stretching. */
.responsive-image {
    height: auto;
}