/***** myBI.css *****/
/***** This is the stylesheet for the My Business Income Consultation app. *****/

/* Fallback footer height reserved at the bottom of the page, used until myBI.js measures
   the footer's actual rendered height (which varies by breakpoint/content) and overrides this. */
:root {
    --footer-height: 60px;
}

/*** Fonts ***/
@font-face {
	font-family: "Conv_Chubb Publico Text-Roman";
	src: url("../fonts/chubb-publico-text-roman.eot");
	src: url("../fonts/chubb-publico-text-roman.woff") format("woff"),
         url("../fonts/chubb-publico-text-roman.ttf") format("truetype");                     
    font-weight: normal;
    font-style: normal;
}

/*url('../fonts/chubb-publico-text-roman.svg') format('svg');*/

@font-face {
    font-family: "PublicoText-Roman";
    src: url("../fonts/PublicoText-Roman-Web.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/PublicoText-Roman-Web.eot?#iefix") format("embedded-opentype"),
         url("../fonts/PublicoText-Roman-Web.woff") format("woff"),
         url("../fonts/PublicoText-Roman-Web.ttf") format("truetype"),
         url("../fonts/PublicoText-Roman-Web.svg#5058f1af8388633f609cadb75a75dc9d") format("svg");
    /* Legacy iOS */
    font-weight: 400;
    font-style: normal;
}
/***** end Font styles *****/

body {
    font-family: "Conv_Chubb Publico Text-Roman", "PublicoText-Roman", "Times New Roman", Times, serif;
    font-size: 14px;
    color: #4B4E53; /* Chubb blackish-gray text style */

    /* Reserve space for the fixed footer so page content never renders underneath it. */
    padding-bottom: var(--footer-height);
}

/***** Top Navbar/Header Styles. *****/
.navbar-default .navbar-nav > li > a {
    color: #FFF;
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
}
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: #FFF;
        opacity: 1;
    }
    .navbar-default .navbar-nav > li > a:hover {
        text-decoration: underline;
    }

/* navbar-brand is the Chubb logo in the header. */
a.navbar-brand:hover {
    opacity: 1;
}

.navbar > .container-fluid .navbar-brand {
    width: 144px;
    height: 16px;
    background: url(../images/chubb_logo_white.png) center center no-repeat;
    background-size: contain !important;
    margin-left: 15px;
    cursor: default;
}

/* non-mobile style */
@media (min-width: 768px) {
    .navbar-right {
        margin-right: 0px;
    }
}
/***** end Top Navbar/Header Styles *****/

/* Tabs on the Step page. */
#stepTabs {
    padding-left: 15px;
}

@media (min-width: 768px) {
    #stepTabs {
        padding-top: 10px;
    }
}

.nav-tabs > li > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #150f96;
}
    .nav-tabs > li > a {
        font-size: 18px;
        padding-right:5px;
        padding-left: 6px;
        text-align: center;
    }

[id^='stepTabDescrip'] {
    font-size: 14px;
}

#industryBox {
    border-bottom: 1px solid #ddd;
}

#industryBoxName {
    color: #150f96; /* Chubb dark blue text style */
}

@media (min-width: 768px) and (max-width: 991px) {
    .nav-tabs > li > a {
        font-size: 16px;
    }

    #industryBox {
        padding-left: 0px;
    }

    #industryBoxSVG {
        padding-top: 3px;
    }
}

@media (min-width: 992px) {
    #industryBoxSVG {
        padding-top: 7px;
        padding-left: 5px;
    }
}

/* Hamburger Icon (menu icon) in the header is displayed at extra-small and small device sizes. */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }

    /* navbar-toggle is the "Hamburger Icon" (3 vertical lines) representing the menu in the header for mobiles. */
    .navbar-default .navbar-toggle {
        display: block;
        background-color: transparent;
        border-color: transparent;
        padding: 0px 0px 1px 6px;
        margin-bottom: 0;
    }
        .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
            background-color: transparent;
        }
        .navbar-default .navbar-toggle .icon-bar {
            background-color: #FFF;
        }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
        .navbar-collapse.collapse {
            display: none!important;
        }
            .navbar-collapse.collapse.in {
                display: block!important;
            }

    .collapsing {
        overflow: hidden!important;
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
        .navbar-nav > li {
            float: none;
        }
            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
}

/***** Small device size. *****/
@media (min-width:768px) and (max-width: 991px) {
    .navbar-default .navbar-toggle {
        margin-top: 15px;
        margin-right: 5px;
    }

    .navbar-collapse {
        margin-right: -15px !important;
        margin-left: -15px !important;
        padding-right: 19px !important;
        padding-left: 19px !important;
    }

    #appTitle {
        padding-top: 15px !important;
    }
} /***** end Small device size styles *****/

/***** For mobile (xs) devices only. *****/
@media (max-width: 767px) {
    /***** Header styles (mobile) *****/
    .navbar-text {
        margin-top: 0px;
        margin-bottom: 7px;
    }

    /* Chubb logo in the header. */
    .navbar > .container-fluid .navbar-brand {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 7px;
    }

    /* Industry icon container on the Start page. */
    #BI_step0 {
        padding-bottom: 20px;
    }

    /* Top Navigation Tab Styles (Mobile). */
    .nav-tabs > li > a {
        font-size: 16px;
        padding-right: 5px;
        padding-left: 5px;
    }

    /* Green checkmark (Font Awesome icon) added to the left of the tab's Step numbers on completion. */
    .fa-check {
        margin-left: -5px;
    }

    #stepName {
        font-size: 15px;
    }

    /* Line separating mobile header from content on each step. */
    .mobileStepHR {
        border-top-color: #cccccc;
        margin-top: -15px;
    }

    /***** Additional Information (i) icon for mobiles only at the top of each step *****/
    #additionalInfoIcon:hover, #additionalInfoIcon:focus {
        color: #150f96;
    }
}
/***** end Mobile styles *****/


/***** Popover styles. *****/
/*.popover {
     border: 1px solid #150f96;
     width: 500px;
     max-width: 100%;
     font-family: "Conv_Chubb Publico Text-Roman";
}*/

    /* Popover Arrow */
    /*.popover.top .arrow:after {
        border-top-color: #150f96;
    }
    .popover.right .arrow:after {
        border-right-color: #150f96;
    }
    .popover.bottom .arrow:after {
        border-bottom-color: #150f96;
    }
    .popover.right .arrow:after {
        border-left-color: #150f96;
    }*/

/* Popover Body. */
/*.popover-content {
     max-height: 200px; 
     overflow: auto; 
     background-color: #FFF; 
     color: #150f96; 
}*/

/* Popover Title. */
/*.popover-title {
    color: #FFF;
    background-color: #150f96;
}
    .popover-title div {
        display: table;
        width: 100%;
    }
    .popover-title button.close {
        color: white;
        opacity: 1;
        vertical-align: top;
    }
    .popover-title span {
        display: table-cell;
        vertical-align: middle;
    }

.popover {
    position: relative;
}

    .popover .popover-close {
        position: absolute;
        top: 4px;
        right: 8px;
        background: transparent;
        border: 0;
        padding: 0;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        z-index: 2;
    }*/

/***** Popover styles. *****/
.popover {
    border: 1px solid #150f96;
    width: 500px;
    max-width: 100%;
    font-family: "Conv_Chubb Publico Text-Roman";
}

    /* Popover Arrow */
    .popover.top .arrow:after {
        border-top-color: #150f96;
    }

    .popover.right .arrow:after {
        border-right-color: #150f96;
    }

    .popover.bottom .arrow:after {
        border-bottom-color: #150f96;
    }

    .popover.left .arrow:after {
        border-left-color: #150f96;
    }

/* Popover Body. */
.popover-content {
    max-height: 200px;
    overflow: auto;
    background-color: #FFF;
    color: #150f96;
}

/* Popover Title. */
.popover-title {
    color: #FFF;
    background-color: #150f96;
    padding: 8px 12px;
    position: relative; /* ensures close button alignment */
}

    .popover-title .popover-title-wrap {
        display: table;
        width: 100%;
    }

        .popover-title .popover-title-wrap span {
            display: table-cell;
            vertical-align: middle;
        }

        .popover-title .popover-title-wrap button.close {
            color: white;
            opacity: 1;
            vertical-align: top;
            float: none;
            display: table-cell;
            width: 1%;
            text-align: right;
            padding-left: 8px;
            line-height: 1;
        }

   
.popover-title .close.popover-close {
    color: #fff !important;      /* Highest priority white */
    background: transparent !important;
    border: none !important;
    opacity: 1 !important;
    font-size: 22px !important;
    font-weight: bold !important;
    float: right !important;
    margin-left: 8px !important;
    margin-top: -6px !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
    position: relative;
    z-index: 10;
    text-shadow: 0px 0px 4px #150f96; /* Adds readability over dark bg */
}
.popover-title .close.popover-close:focus {
    outline: none;
}
/***** end Popover styles *****/



/***** Tooltip styles. *****/

.tooltip.in {
    opacity: 1;
    z-index: 99999;
}

.tooltip {
    z-index: 99999999;
}

/* Tooltips should have a white background, Chubb purple text with Chubb font, and a purple border. */
.tooltip-inner {
    background-color: #fff !important;
    color: #150f96;
    font-family: "Conv_Chubb Publico Text-Roman";
    border: 1px solid #150f96;
    max-width: 100px;
    width: 100px;
}

/* Tooltip arrow should be Chubb purple. */
.tooltip.top .tooltip-arrow { border-top-color: #150f96; }
.tooltip.right .tooltip-arrow { border-right-color: #150f96; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #150f96; }
.tooltip.left .tooltip-arrow { border-left-color: #150f96; }

/* Tooltip for header links (that have a purple background color) should have a white border. */
.tooltip.custom-tooltip .tooltip-inner {
  border: 1px solid #fff;
}

/* Tooltip for FAQs link should have a purple border. */
.tooltip.faq-tooltip .tooltip-inner, .tooltip.footer-tooltip .tooltip-inner {
  border: 1px solid #150f96;
}

/* Tooltip for FAQs link. */
.tooltip.bottom.faq-tooltip .tooltip-arrow {
    padding-bottom: 1px;
}

/* Tooltip on top for footer links. */
.tooltip.top.footer-tooltip .tooltip-arrow {
    padding-top: 1px;
}

/* Tooltip on top for header links (should have a white border). */
.tooltip.top.custom-tooltip .tooltip-arrow {
  border-top-color: #fff;
}

/* Tooltip on right for header links. */
.tooltip.right.custom-tooltip .tooltip-arrow {
  border-right-color: #fff;
}

/* Tooltip on bottom for header links. */
.tooltip.bottom.custom-tooltip .tooltip-arrow {
  border-bottom-color: #fff;
}

/* Tooltip on left for header links. */
.tooltip.left.custom-tooltip .tooltip-arrow {
  border-left-color: #fff;
}

/* Tooltip for longer text content. */
.tooltip.long-tooltip .tooltip-inner {
    max-width: 200px;
    width: 200px;
}

/***** end Tooltip styles *****/



/***** For non-mobile devices only. *****/
@media (min-width:768px) {
    /* Chubb logo in the header. */
    .navbar > .container-fluid .navbar-brand {
        padding: 0px;
        margin-top: 15px;
        margin-left: 0px;
    }

    /* Put a rounded corner border around the entire page contents and each step's contents. */
    #BI_step0, #fullPageSteps, .contentsPanel {
        border: 1px solid #cccccc;
        border-radius: 4px;
    }

    /* The Industry Selection page grows to fit its content (e.g. wrapped icon labels at
       narrower widths) instead of being capped to the viewport height, so it never needs
       its own internal scrollbar; the page itself scrolls if the content is tall. */
    #BI_step0 {
        width: calc(100vw - 40px);
        margin-bottom: 20px;
    }

    /* The Step pages keep a capped, internally-scrollable height so the tab navigation stays in view. */
    #fullPageSteps {
        width: calc(100vw - 40px);
        height: calc(100vh - 150px);
        overflow-y: auto;
    }

    /* Box around each step's contents (right side). */
    .contentsPanel {
        height: auto;
        padding: 15px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
/***** end Non-mobile styles *****/

/* Calculate the height of the rounded box around the Step pages. */
@media (min-width: 992px) {
    #fullPageSteps {
        height: calc(100vh - 160px);
    }
}


/***** Navigation Styles. *****/
.nav > li > a {
    color: #150f96;
}
    .nav > li > a:focus, .nav > li > a:hover {
        background-color: #FFF;
    }
/***** end Navigation Styles *****/


a:hover {
    background-color: #FFF;
    opacity: 0.50;
}

.displayNone {
    display: none;
}

.displayInline {
    display: inline !important;
}

.displayInlineBlock {
    display: inline-block !important;
}

.borderNone {
    border: none;
}

.nopaddingleft {
    padding-left: 0px;
}

.nopaddingright {
    padding-right: 0px;
}

.paddingLeft2 {
    padding-left: 2px;
}

.paddingLeft15 {
    padding-left: 15px;
}

.paddingTop0 {
    padding-top: 0px !important;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingTop15 {
    padding-top: 15px;
}

.paddingTop20 {
    padding-top: 20px;
}

.paddingTop50 {
    padding-top: 50px;
}

.paddingTop70 {
    padding-top: 70px;
}

.paddingTop100 {
    padding-top: 100px;
}

.paddingBottom0 {
    padding-bottom: 0px;
}

.paddingBottom10 {
    padding-bottom: 10px;
}

.paddingBottom20 {
    padding-bottom: 20px;
}

.marginTop0 {
    margin-top: 0px !important;
}

.marginTop5 {
    margin-top: 5px !important;
}
.marginTop3 {
    margin-top: 3px !important;
}

.marginTop10 {
     margin-top: 10px !important;
}

.marginTop11 {
    margin-top: 11px !important;
}

.marginTop15 {
    margin-top: 15px !important;
}

.marginBottom0 {
    margin-bottom: 0px !important;
}

.marginBottom5 {
    margin-bottom: 5px !important;
}

.marginBottom10 {
    margin-bottom: 15px !important;
}

.marginBottom15 {
    margin-bottom: 15px !important;
}

.marginLeft0 {
    margin-left: 0px !important;
}

.noSideMargins {
    margin-left: 0px;
    margin-right: 0px;
}

.verticalAlignMiddle {
    vertical-align: middle !important;
}

.width100 {
    width: 100% !important;
}

.height45 {
    height: 45px;
}

.lineHeight45 {
    line-height: 45px;
}

.lineHeight18 {
    line-height: 18px;
}

.lineHeight1em {
    line-height: 1em !important;
}

.container {
    height: 100%;
}

.text-left {
    text-align: left !important;
}

/* Dark blue Chubb logo at the top of the printed Final Results page. */
#printLogo {
    width: 144px;
    height: 16px;
    margin-top: 12px;
    vertical-align: middle;
}


/***** For mobile (xs) devices only. *****/
@media (max-width:767px) {
    .btn {
        margin-bottom: 5px;
    }

    .modalPop {
        margin-bottom: 0px;
    }

    .xs-nopaddingleft {
        padding-left: 0px;
    }

    #fullPageSteps {
        padding-bottom: 30px;
    }

    /* Additional Information (i) icon for mobiles only at the top of each step. */
    #additionalInfoIcon:hover, #additionalInfoIcon:focus {
        color: #150f96;
    }
}
/***** end Mobile styles *****/
    

a:hover {
    cursor: pointer;
}

/* Chubb dark blue text color. */
.chubbDkBlueColor {
    color: #150f96; 
}

/* Chubb dark blue background color with white text. */
.dkBlueBGWhiteTxt {
    background-color: #150f96;
    color: #FFF;
}

.btn:hover, .btn:focus {
     color: #FFF; 
     opacity: 0.50; 
}

/* Previous buttons on each Step page. */
.prevButton {
    color: #150f96;
    border: 1px solid #150f96;
    background-color: #FFF;
}
    .prevButton:hover, .prevButton:focus {
        color: #150f96;
    }
    .prevButton:hover {
        opacity: 0.50;
    }


/* Warning text for those using Internet Explorer 8 or below that the app might not work well (or at all). */
.warningText {
    color: red;
    font-size: 18px;
}

.boldFont {
    font-weight: bold;
}

/* Horizontal separator line. */
hr {
    border-top: 1px solid #150f96; /* Chubb Dark Blue color */
    margin-top: 10px;
    margin-bottom: 10px;
}


/**** These Industry SVG/icon styles are from custom.css on the Chubb.com website. ****/
/* Flexbox (instead of floats) so a wrapped trailing row of icons centers correctly
   at every width, instead of relying on a fixed-percentage margin hack. */
.iconsHolder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 4%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: 100%;
}
    .iconsHolder li {
        width: 48%;
    }
        .iconsHolder li img, .iconsHolder li svg {
            box-shadow: 0 0 1px #ccc;
            display: block;
            max-width: 100%;
            border-bottom-width: 5px;
            border-bottom-style: solid;
        }
        .iconsHolder li a {
            cursor: pointer;
            color: #4B4E53; /* Chubb blackish-gray text style */
        }
            .iconsHolder li a:hover,
            .iconsHolder li a:focus {
                text-decoration: none;
            }
/**** end Industry SVG/icon styles from chubb.com custom.css. ****/


/***** Industry Icon Start Page styles. *****/
.iconsHolder {
    padding-top: 0px;
}
    .iconsHolder li span.text-center {
        display: block;
        margin: 15px 0px;
        max-width: 100%;
        font-size: 17px;
    }
        .iconsHolder li span.text-center:hover {
            opacity: 0.5;
        }
        .iconsHolder li span.text-center.inactive {
            opacity: 0.5;
            font-weight: 400;
        }
    .iconsHolder li a.inactive {
        cursor: default;
    }


/***** For mobile (xs) devices only. *****/
@media screen and (max-width: 767px) {
    /* Industry icons on the Start page */
    .iconsHolder li span.text-center {
        font-size: 15px;
        margin: 10px 0;
    }
}
/***** End mobile styles *****/

/***** For non-mobile devices only. *****/
@media screen and (min-width: 768px) {
    /* Industry icons on the Start page */
    .iconsHolder {
        width: 100%;
        column-gap: 2%;
    }
        .iconsHolder li {
            width: 23.5%;
            min-height: 290px;
        }
            .iconsHolder li a, .iconsHolder li span {
                font-size: 16px;
            }
}

/* Laptop sized screens and bigger. */
@media screen and (min-width: 1024px) {
    /* Bottom row of industry icons */
    .iconsHolder li:nth-child(n+5) {
        min-height: 270px;
    }
}
/* End non-mobile styles */

.clearfix:after {
    content: ".";
    display: block;
    font-size: 0;
    line-height: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
.cus-grid {
    max-width: 950px;
    margin: auto;
    padding-left: 0;
}


/* Colorize classes (from Chubb.com website) to add color to the Industry icons on the Start page. */
.colorize-1 svg:hover path,
.colorize-2 svg:hover path,
.colorize-3 svg:hover path,
.colorize-4 svg:hover path,
.colorize-5 svg:hover path,
.colorize-6 svg:hover path,
.colorize-7 svg:hover path,
.colorize-8 svg:hover path {
    fill: #fff;
}

.colorize-1 svg, .colorize-1 img {
    border-bottom-color: #150f96 !important;
}
    .colorize-1 svg:hover {
        background-color: #150f96;
        border-bottom-color: #150f96;
    }
    .colorize-1 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-1 svg path, .colorize-1.inactive svg:hover path {
        fill: #150f96;
    }

.colorize-2 svg, .colorize-2 img {
    border-bottom-color: #01c1d6 !important;
}
    .colorize-2 svg:hover {
        background-color: #01c1d6;
        border-bottom-color: #01c1d6;
    }
    .colorize-2 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-2 svg path, .colorize-2.inactive svg:hover path {
        fill: #01c1d6;
    }

.colorize-3 svg, .colorize-3 img {
    border-bottom-color: #ff0198 !important;
}
    .colorize-3 svg:hover {
        background-color: #ff0198;
        border-bottom-color: #ff0198;
    }
    .colorize-3 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-3 svg path, .colorize-3.inactive svg:hover path {
        fill: #ff0198;
    }

.colorize-4 svg, .colorize-4 img {
    border-bottom-color: #6e27c5 !important;
}
    .colorize-4 svg:hover {
        background-color: #6e27c5;
        border-bottom-color: #6e27c5;
    }
    .colorize-4 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-4 svg path, .colorize-4.inactive svg:hover path {
        fill: #6e27c5;
    }

.colorize-5 svg, .colorize-5 img {
    border-bottom-color: #f1352b !important;
}
    .colorize-5 svg:hover {
        background-color: #f1352b;
        border-bottom-color: #f1352b;
    }
    .colorize-5 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-5 svg path, .colorize-5.inactive svg:hover path {
        fill: #f1352b;
    }

.colorize-6 svg, .colorize-6 img {
    border-bottom-color: #ff6600 !important;
}
    .colorize-6 svg:hover {
        background-color: #ff6600;
        border-bottom-color: #ff6600;
    }
    .colorize-6 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-6 svg path, .colorize-6.inactive svg:hover path {
        fill: #ff6600;
    }

.colorize-7 svg, .colorize-7 img {
    border-bottom-color: #ffb617 !important;
}
    .colorize-7 svg:hover {
        background-color: #ffb617;
        border-bottom-color: #ffb617;
    }
    .colorize-7 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-7 svg path, .colorize-7.inactive svg:hover path {
        fill: #ffb617;
    }

.colorize-8 svg, .colorize-8 img {
    border-bottom-color: #7acb00 !important;
}
    .colorize-8 svg:hover {
        background-color: #7acb00;
        border-bottom-color: #7acb00;
    }
    .colorize-8 svg.inactive:hover {
        background-color: transparent !important;
    }
    .colorize-8 svg path, .colorize-8.inactive svg:hover path {
        fill: #7acb00;
    }
    
/* Inactive identifies the Industries that are "Coming Soon" on the Start page (grayed out). */
.colorize svg.inactive {
    opacity: 0.2;
}
/* end Industry icons Colorize styles */

.industryImage {
    width: 139px;
    vertical-align: middle;
}

/***** Industry icon styles *****/
.selectedIndustryIcon svg, .selectedIndustryIcon img {
    display: inline;
    width: 44px;
    height: 44px;
}

/* "Industry:" label at the top of each Step page */
#selectedIndustryLabel {
    font-size: 16px;
    float: left;
    height: 45px;
    line-height: 45px;
}

/* Icon/SVG representing the industry selected at the top of each Step page */
.selectedIndustryIcon {
    display: inline;
    padding: 0px;
    margin-bottom: 0px;
}
/***** end Industry icon styles *****/


/* These three Start Page (Industry Selection) divs are animated when the page opens. */
#welcomeText {
    display: none;
}
#textSeparator, #industrySVGs {
    display: none;
    padding-top: 0px;
}

/* Welcome intro text on Start page */
#welcomeIntro {
    text-align: center;
    font-size: 16px;
    font-weight: 400;    
}

/***** For non-mobile devices only *****/
@media (min-width: 768px) {
    #welcomeIntro {
        font-size: 19px;
    }
    #welcomeText {
        font-size: 16px;
    }
}
/***** end non-mobile styles *****/

@media (min-width: 455px) {
    /* On extra-small devices, add a line break after "Welcome to" on the Start page */
    #welcomeBrk {
        display: none;
    }
}

/* Welcome text on Start page */
#welcomeBody1, #welcomeBody2 {
    text-align: justify;
}


/* Main Page with Navigation */
#fullPageSteps {
    position: relative;
    padding-top: 0px;
    display: none;
}

/* Sets the duration of the animation for displaying each Step */
.animated {
    -webkit-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    -moz-backface-visibility: hidden; /* Mozilla */
    backface-visibility: hidden;
}

/* App title ("My Business Income Consultation") */
#appTitle {
    font-size: 18px;
    clear: left;
    color: #FFF;
    padding-top: 3px;
    padding-left: 15px;
}

/* Industry Selection Page style for "Get Started By Selecting an Industry" label */
#industrySelectLabel {
    font-size: 15px;
    font-weight: 400;
}

/***** For non-mobile devices only *****/
@media all and (min-width: 768px) {
    /* Industry Selection Page style for "Get Started By Selecting an Industry" label */
    #industrySelectLabel {
        font-size: 18px;
    }

    .text-sm-right {
        text-align: right;
    }

    /* App title ("My Business Income Consultation") */
    #appTitle {
        margin-left: 4px;
        padding-top: 0px;
        padding-left: 0px;
    }

    #textSeparator {
        padding-top: 0px;
    }

    #industrySVGs {
        padding-top: 0px;
    }

    /***** Additional Help Panel styles (non-mobile devices) *****/
    #addlInfoRow {
        padding-top: 10px;
    }

    #addlInfoHeading {
        color: #150f96;
        background-color: #FFF;
    }
        
    #addlInfoPanel {
        max-height: 350px;
        overflow-y: auto;
    }
        
    /***** end Additional Help styles *****/

    #stepNumberLabel {
        font-size: 18px;
        line-height: 45px;
        vertical-align: middle;
    }

    #selectedIndustryIconLabel {
        float: left;
        font-size: 18px;
        line-height: 45px;
        vertical-align: middle;
    }
}
/***** end Non-mobile styles *****/

/* Bullets in lists in the Additional Info panel & popover are discs, not open circles. */
#addlInfoPanel ul li, .popover-content ul li {
    list-style-type: disc;
}

/* Title/Heading for Additional Information panel. */
.panel-title {
    font-size: 14px;
}

/* Title/Heading for Addl Info panel - bigger screen size, bigger font. */
@media (min-width: 992px) {
     .panel-title {
        font-size: 16px;
    }
}

/* These elements in Bootstrap are bold, so they have to be reset here. */
label, .modal, .modal th {
    font-weight: 400;
}

/* Remove the yellow background that Webkit browsers (Chrome, Safari...) add
   to an input when user elects to "auto-fill" the field. */
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


/*****/
/***** Font Awesome icon styles *****/
/*****/

/* Font Awesome icons ("i", "?", Calculator, up/down arrows) are dark blue. */
.fa-solid {
    color: #150f96;
}

/* Print and Download Font Awesome icons are white (they're on dark blue background). */
.fa-print, .fa-download {
    color: #FFFFFF;
}

/* Green checkmark (Font Awesome icon) added on the left of the navigation tab when user fills in all fields on a Step. */
.fa-check {
    color: #33CC00; /* green */
    top: 3px;
}

/* Don't underline the Font Awesome icons when hovering or focusing on them. */
a.fa, a.fa:focus, a.fa:hover, a[data-toggle="modal"] {    
    text-decoration: none;
}

/* Don't add an outline around the up/down arrow or the question mark icons in the modal when they're clicked on. */
[class^="fa-circle-chevron-"]:focus, 
[class*=" fa-circle-chevron-"]:focus, 
[class*=" fa-circle-question"]:focus {
    outline: none;
}

/* Contextual (i) help Font Awesome icon. */
.form-group .fa-circle-info:hover {
    opacity: 0.50;
    cursor: pointer;
}

/* The left side of the input fields on Step 1 contain a plus or minus
   (or nothing if it's the first input field on the page).  */
.inputLeftSide {
    background-color: #eee;
}
.inputPlusMinus {
    margin-top: 2px;
    color: #150f96;
}

/***** Non-mobile device styles *****/
@media (min-width: 768px) {
    /* Contextual (i) help Font Awesome icon. */
    .form-group .fa-circle-info {
        margin-left: 5px;
        margin-top: 12px;
    }

    /* Checkmark (Font Awesome icon) added to the navigation tab when user fills in all required fields on a Step. */
    .fa-check {
        margin-right: 5px;
    }
}
/***** End Font Awesome icon styles *****/



/*****/
/***** Modal styles *****/
/*****/

/* Step 1 or Step 2 modal label/input fields need to line up if a long label wraps to a 2nd line. */
@media (min-width: 768px) {
    .modal-body .form-group {
        height: 55px;
        margin-bottom: 0px;
    }

    .modal-body div.lab {
        height: 55px;
        display: table;
    }

    .modal-body div.lab label, .modal-body div.lab .lab2 {
        padding-top: 0px;
        display: table-cell;
        vertical-align: middle;
    }

    .modal-body .lab2 .fa-circle-info {
        margin-top: 5px;
    }

    .modal-body .panel-collapse {
        /*margin-top: -10px;*/
    }

    .modal-body .panel {
        margin-bottom: 10px;
    }

    .modal-body .panel-body {
        padding: 5px;
    }

    .biModal .modal-body, #extraExpenseModal .modal-body {
        padding-bottom: 0px;
    }
}

/* Modal header font size increases with the device screen size. */
@media (min-width: 430px) {
    .modal-title {
        font-size: 16px;
    }
}

/* Extra Expense Modal - the "?" and "x" on the right side of the header. */
@media (max-width: 768px) {
    .modalHeaderRight {
        padding-left: 0px;
    }
}

/* "X" at the top right corner of the Extra Expense and confirmation modals (pop-ups) */
.modal-header button.close {
    font-size: 26px;
    font-weight: 900;
    padding-left: 5px;
}

@media (min-width: 375px) {
    .modal-header button.close {
        padding-left: 10px;
    }
}

/*.modal-header, .modal-footer {
    padding: 10px 15px;
}*/

/* The "TOTAL" label at the bottom of the Extra Expense input modal. */
.modalTotalLabel {
    font-size: 16px;
}

/* The grayish background color in the sub-panel on the Extra Expense input modal. */
.subPanelBackground {
    background-color: #f3f3f3;
}

/* The border color around the sub-panel on the Extra Expense input modal. */
.modal .panel-default {
    border-color: #cccccc;
}
/***** end Modal styles *****/


/*****/
/***** Footer styles (bottom of the main app screen) *****/
/*****/

footer {
    background: #150f96;
    padding: 5px 0px;
}

.footerText {
    font-size: 11px;
    line-height: 1.4;
    color: #FFF;
}

@media (min-width: 768px) {
    footer {
        padding: 10px 0px;
    }

    .footerText {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    footer {
        padding: 15px 0px;
    }
}

.footerText a {
    color: #FFF !important;
    text-decoration: underline;
    margin-left: 5px;
}
    .footerText a:hover {
        color: #FFF !important;
        opacity: inherit !important;
        background-color: inherit !important;
    }
/***** end Footer styles *****/


/*****/
/***** Final Results Page styles *****/
/*****/

/* Final Results page - Column containing the Industry icon/svg. */
#industryImgCol {
    display: inline;
    height: 45px;
    max-height: 45px;
    line-height: 45px;
}

/***** For SMALL (tablet) sized devices *****/
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Final Results page - Column containing the Industry icon/svg. */
    #industryImgCol {
        margin-left: 10px;
        margin-right: -10px;
    }
}
/***** end small/tablet styles *****/


/* Final Results page - Column containing the name of the selected Industry (small devices).  */
@media screen and (min-width: 768px) and (max-width:1023px) {
    #industryNameCol {
        padding-left: 0px;
        max-height: 45px;
        height: 45px;
    }

    #industryNameFinal {
        max-height: 45px;
    }
}

/* Final Results page - Industry name. */
#industryNameFinal {
    color: #4B4E53; /* Chubb blackish-gray text style */
    display:inline-block;
    vertical-align:middle;
    line-height:normal;
}

/* Final Results page - Rows containing the label/description and underlined amount. */
.rowEqual {
    display: flex;
    /*display: -webkit-flex;*/
    flex-wrap: wrap;
    position: relative;
}

/* Final Results page - Amount on the right side. */
.bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Final Results page - Some industries (e.g., Financial Institutions) have Business Income section headings. */
.sectionHdng {
    font-size: 16px;
}

/* Final Results page - Gray lines under the amounts on the right side.  */
.blankline {
    border-bottom: 2px solid #aaaaaa;
    text-align: right;
    min-width: 140px;
    padding-right: 0px;
    padding-left: 0px;
    float: right;
}

/* Final Results page - Final Business Income amount at the bottom right corner.  */
#finalBusinessIncomeField {
    border: 2px solid #aaaaaa;
    text-align: right;
    min-width: 140px;
    margin-left: 15px;
    float: right;
}

/***** For xs-sized screens (mobiles) only *****/
@media screen and (max-width: 767px) {
    /* Final Results page - Set the width of the gray lines below the amounts on the right side,
       and Final Business Income at the bottom. */
    .blankline, #finalBusinessIncomeField {
        min-width: 130px;
        max-width: 130px;
    }
}
/***** end Mobile styles *****/

/* Plus or Minus icon on the Final Results page Business Income fields */
.plusMinus {
    float: left;
}

/***** End Final Results Page styles *****/


/*****/
/***** Styles for the Business Income and Extra Expense Summary Modal tables on the Final Results page *****/
/*****/

/* Table Header and Footer font size. */
.table > thead > tr, .table > tfoot > tr {
    font-size: 16px;
}
    /* Border around the last row (footer) of the table. */
    .table > tfoot > tr > th, .table > tfoot > tr > td {
        border: 1px solid #150f96;
        border-style: double;
        color: #150f96;
    }

/* Table rows containing Main Business Income or Extra Expense fields have white background. */
.table > tbody > tr {
    background-color: #ffffff;
}
    /* Main fields in the Summary table have a slightly bigger font than the sub-fields. */
    .table > tbody > tr.mainExpense {
        font-size: 15px;
    }
    
    /* Table rows containing Itemized/sub-fields are shaded. */
    .table > tbody > tr.subPanel {
        background-color: #f3f3f3;
    }

    /* Empty cell in Business Income Summary table. */
    .table > tbody > tr.subPanel > td.emptyCell {
        background-color: #ffffff;
        border: none !important;
    }

    /* Background color to show when hovering over a table row. */
    .table > tbody > tr:hover, .table > tfoot > tr:hover {
        background-color: #e2e2e2;
    }

    /* Padding inside table cells. */
    .table > tbody > tr > th, .table > tbody > tr > td {
        padding: 3px 5px 3px 5px;
    }

    /* Right-justify sub-field labels, and all amounts. */
    .table > tbody > tr.subPanel > th, .table > tbody > tr > td, .table > tfoot > tr > td {
        text-align: right;
    }



.whiteSpaceNormal {
    white-space: normal;
}


/* When not printing, don't display the page break. */
.page-break	{
    display: none;
}



/*****/
/***** Print Media Styles to use for the Final Results page *****/
/*****/
@media print {
    /* When printing, put a page break between the Final Results page and
        the Extra Expense Summary page. */
    .page-break	{
        display: block;
        page-break-before: always;
    }

    /* If Final Results page goes onto page 2, add a page break. */
    .page-break-maybe  {
        display: block;
        page-break-before: auto;
        page-break-inside: avoid;
    }

    /* Set text color and margins/padding for whole page when printed. */
    * {
        color: black !important;
        font-weight: 400;
        margin: 0mm;
        padding: 0mm;
        border: none;
        border-collapse: collapse;
    }
    
    @page {
        size: auto;
        margin: 20mm 0mm 0mm 0mm;
    }

    @page :first {
        size: auto;
        margin: 0;
    }

    html {
        margin: 0mm 0mm 0mm 0mm !important;
    }
    body {
        margin: 5mm 5mm 5mm 5mm !important;
        font-size: 100%;
    }

    /* Set print margins to 0 for Internet Explorer only (less than IE 10). */
    html.has-IE body {
        margin: 0 !important;
    }

    .container {
        width: auto;
    }
    
    /* Div containing the Chubb logo on the printed Final Results page. */
    #printLogoDiv {
        float: left;
        width: 33.33333333%;
        line-height: 40px;
    }

    /* Chubb logo on the printed Final Results page. */
    #printLogo {
        margin-top: 0px !important;
    }

    /* "My Business Income Consultation" title on the printed Final Results page. */
    #printAppTitle {
        text-align: right;
        float: right;
        width: 66.66666667%;
        font-size: 20px;
        line-height: 40px;
    }

    /* Industry SVG/image and its name need to be on the same line when printing the Final Results page. */
    #industryCol {
        width: 30%;
        max-height: 45px;
        height: 45px;
        line-height: 45px;
    }
    #industryNameCol {
        width: 65%;
        max-height: 45px;
        text-align: left;
    }

    /* Name of the Industry on the printed Final Results page. */
    #industryNameFinal {
        font-size: 15px;
    }

    /* Label/description on the left of the Final Results page. */
    .rowLabel {
        width: 75%;
        white-space: nowrap;
    }

    /* Plus or minus before a Business Income field. */
    .plusMinus .fa-solid .fa-plus, .plusMinus .fa-solid .fa-minus {
        color: #150f96 !important;
    }

    /* Hide tooltips when printing. */
    .tooltip {
        display: none !important;
    }

    /* Business Income and Extra Expense Summary Table header and footer font size. */
    .table > thead > tr, .table > tfoot > tr {
        font-size: 14px;
    }

    /* Business Income and Extra Expense Summary Table main field font size. */
    .table > tbody > tr.mainExpense {
        font-size: 12px;
    }

    #biSummaryForm .table > tbody > tr.subPanel {
        width: 100% !important;
    }
    #biSummaryForm .table > tbody > tr.subPanel > th {
        width: 58.33333333% !important;
    }
    #biSummaryForm .table > tbody > tr.subPanel td.subAmt {
        width: 16.66666667% !important;
    }
    #biSummaryForm .table > tbody > tr.subPanel td.emptyCell {
        width: 25% !important;
    }

    /* Don't display the text of the Chubb industry link when printing. */
    a[href]:after {
        content: none !important;
    }

    /* Name, Company, and Date at the bottom of the Final Results page. */
    #yourNameDiv, #compNameDiv {
        width: 40%;
    }
    #theDateDiv {
        width: 20%;
    }

    /* Don't display the app footer (Copyright, Terms, etc.) when printing. */
    footer {
        display: none !important;
    }

    /* This at-rule "feature query" targets Internet Explorer Edge only (removes print margins). */
    /* (Note: Visual Studio can't handle @supports and keeps trying to reformat it). */
    @supports (-ms-ime-align:auto) {
        body {
            margin: 0mm !important;
        }
    }
} /* end Print styles */


/* This print media query targets Internet Explorer 10+ only (removes print margins). */
@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body {
        margin: 0mm !important;
    }
}

/***** End Print Media Styles *****/

.popover-title .close.popover-close {
    color: #fff !important;      /* Highest priority white */
    background: transparent !important;
    border: none !important;
    opacity: 1 !important;
    font-size: 22px !important;
    font-weight: bold !important;
    float: right !important;
    margin-left: 8px !important;
    margin-top: -6px !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
    position: relative;
    z-index: 10;
    text-shadow: 0px 0px 4px #150f96; /* Adds readability over dark bg */
}

/* Fix: Prevent custom popover validation messages from being cut off *//* Keep popover above panels/modals, if necessary 

/* Format the custom form validation popover nicely */
.validity-alert {
  overflow: visible !important;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 99999;
}

/* Specificity 0,3,0 beats .ws-popover.ws-po-visible { display: block } (0,2,0) — keeps popover
   shrink-to-fit so arrow centers over content and text naturally fits on one line */
.ws-popover.validity-alert.ws-po-visible {
  display: inline-block;
}

.validity-alert .ws-po-box {
  border-radius: 5px;
  font-size: 13px;
  white-space: nowrap;
  width: -webkit-max-content;
  width: max-content;
  border: .07692em solid #ccc;
  border-top: none;
  background: #fff;
  color: #000;
  padding: .38462em .38462em .23077em;
}

/* Limit outerbox transition to opacity+transform only — removing width prevents the 400ms
   animation from making the outerbox narrower than the box while JS resizes the popover. */
.validity-alert .ws-po-outerbox {
  -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms ease-in-out !important;
  transition: opacity 400ms ease-in-out, transform 400ms ease-in-out !important;
}

.ws-po-arrow .ws-po-arrowbox {
    position: relative;
    top: .07692em;
    left: -.53846em;
    display: block;
    width: 0;
    height: 0;
    border-left: .53846em solid transparent;
    border-right: .53846em solid transparent;
    /*border-bottom: .53846em solid #fefefe;*/
    border-top: 0;
    z-index: 999999999;
}

html .ws-po-arrow .ws-po-arrowbox
 {
    border-left-color: transparent;
    border-right-color: transparent;
}

/* Arrow centering is handled in myBI.js via wspopovershow event. */