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

1.0 PAGE LAYOUT
    1.1 header
        1.1.1 silver navigation bar
    1.2 tables
        1.2.1 confirmation message
    1.3 error messages
    1.4 lightbox
    1.5 footer
2.0 TEXT
    2.1 links
    2.2 tooltips

3.0 INPUTS
    3.1 highlighted error input fields
    3.2 input field help text
    3.3 user id step1 - user id availability

4.0 BUTTONS

5.0 IMAGES
    5.1 icons
        5.1.1 home icon
        5.1.2 go back icon
        5.1.3 error icons
    5.2 Progress Bar with Steps

6.0 UTILITIES

7.0 OVERIDES

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

/* ---------------------------------------------
*************  1.0 PAGE LAYOUT *****************
------------------------------------------------ */
.MFA_layout .contentWrap{
    padding: 20px 15px;
    margin-bottom: 15px;
}

a, a:focus, a:visited, a:active{
    outline: none;
}

.BIL_layout a:focus {
    color: #C3CF21;
    text-decoration: underline;
}

.MFA_layout .columnLeft{
    margin-right: 0;
}
.columnRight{
    width: 283px;
    padding: 20px 15px 20px 0;
    margin-bottom: 15px;
}

.acctInfoCtr .containerContent{
    padding-top: 0;
}

.MFA_layout .acctInfoCtr.accountStatus{ line-height: 21px;}

th.required {
    padding-left: 20px;
    position: absolute;
}
th.required .star {
    color: #FF0000;
    font-size: 20px;
    left: 7px;
    position: absolute;
    top: 0;
}


/*    1.1 header*/
.MFA_layout h4 {
    font-size: 13px;
}

.header{
    background-color:#0079c1; padding:1px;
    height: 75px;
}
.topHeaderNav{ vertical-align: top; text-align:right;}
.bmoIlLogo{ float: left;}
.headerContent{ float: right; margin-right: 10px;}
.headerContent table{ height: 75px; }

.BIL_layout #toolsMenu a:focus {
    color: #C3CF21;
    text-decoration: underline;
}

/*        1.1.1 silver navigation bar*/
.navigation{
    width: 100%;
    background-color: #F1F1F1; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */        
    padding:2px 15px;
    *padding:2px 15px 0 15px; /* IE7 and below */
    height: 30px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #0079C1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ieBrowser .navigation {
    *width: auto; /* IE7 and below */
}


.navigation .mainNavLink{
    display: inline;
    display: inline-block;
    height: 100%;
    float: left;
}
.navigation .mainNavLink .linkCentered {
    display: block;
    float: left;
    height: 25px;
    padding-left: 5px;
    padding-top: 5px; 
    *padding-top: 5px; /* IE7 and below */
}
@media all and (-ms-high-contrast:none)
 {
 .navigation .mainNavLink .linkCentered { padding-top: 7px; } /* IE10 */
 *::-ms-backdrop, .navigation .mainNavLink .linkCentered { padding-top: 7px; } /* IE11 */
 }
.navigation .mainNavLink a{
    font-size: 13px;
    font-weight: bold;
}
.navigation .mainNavAcctBlock{
    display: block;
    height: 100%;
    float: right;
}

.navigation .mainNavAcctBlock .navInfo { display: inline; padding-left: 10px; line-height: 26px;}
.navigation .mainNavAcctBlock .userIDname{ line-height: 30px; font-weight: bold; }
.navigation .navInfo.accountSel select{
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 6px;
}


/*    1.2 tables*/
.MFA_layout .tableHeader th {
    height: 20px;
    line-height: 20px;
}

.BIL_layout .dataTable th {
    text-align: left;
}

.MFA_layout .dataTable tr td {
    height: 15px;
    line-height: 15px;
}

.MFA_layout .dataTable tr.empty td {
height: 0;
}

.dataTable.outlined {
    border: 1px solid #DDDDDD;
}
.MFA_layout .dataTable.outlined tbody tr {
    border-top: 1px dotted #DDDDDD;
}

.BIL_layout.MFA_layout .dataTable.outlined td:last-child, .BIL_layout.MFA_layout .dataTable.outlined th:last-child {
    border-right: 1px solid #DDDDDD;
}

.MFA_layout .dataTable tr:nth-child(2n){
    background-color: #F7F4EE;
}

/*        1.2.1 confirmation message*/
table.confirmation_msg {
    background-color: #CCFFCC;
    border: 1px solid #B8EAB8;
    margin-bottom: 19px;
    width: 100%;
}

.confirmation_msg td.confMsgText{
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}
.confirmation_msg td.confMsgIcon{
    width: 30px;
}

/*    1.3 error messages*/
.MFA_layout .errorMessageContainer {
    background: none;
    background-repeat: repeat;
    background-position:0 0;
    background-color: #E8F3F9;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 10px 10px 40px;
    background-color: #E8F3F9;
    border: 1px solid #C7E4FF;
    margin-bottom: 15px;
    line-height:35px;
    min-height: 35px;
}

.errorFieldIconCtr {
    position: relative;
    width: 100%;
}

.alertMessageContainer {
    padding: 10px 10px 10px 10px;
    background-color: #FFF9D1;
    border: 1px solid #FFE42D;
    font-size: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.errorMessageText{
    padding-left: 20px;
}
.errorMessageText ul {
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    list-style: disc outside none;
    padding-left: 15px;
}

.errorMessageText .errorDesc {
  font-weight: normal;
  line-height: 14px;
  font-size: 12px;
}

/*    1.4 lightbox*/
.lightboxBG.hide{display: none;}
.lightbox.hide{display: none;}

.lightboxBG {
    position: fixed;}
.MFA_layout .lightbox {
    position: fixed;
    border-radius: 0;
    overflow-y: auto;
    padding: 0;
    border: 5px solid #0079c1;
    max-height: 80%;
}
.MFA_layout .closelightbox {
    background-color: #0079c1;
    text-align: right;
    width: 100%;
}
.MFA_layout .closelightbox a:link, .MFA_layout .closelightbox a:visited{
    color: #FFFFFF;
    font-weight: bold;
}


.MFA_layout .lightbox .contentWrap {
    padding: 20px;
}


.lbTitle {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}


p.lbText {
    margin-bottom: 20px;
}

#clearDevicesAlert{
    width:400px;
    margin-left: -200px;
    top: 25%;
}

#removeAcctAlert{
    width:500px;
    margin-left: -250px;
    top: 25%;
}

/* IE 8 fixes for the lightbox */
.ieBrowser .lightboxBG {
    position: absolute;
}
.ieBrowser .lightbox {
    position: absolute;
}

.ieBrowser.showDialogue, .ieBrowser.showDialogue body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


body.fixed {
    height: 100%;
    overflow: hidden;
}

/*    1.5 footer */
.pageFooter { 
    width: 984px;
    margin: 0 auto;
    padding: 5px 7px;
    text-align: left;
    font-size: 12px;
}
.pageFooter a{
    text-decoration: none;
}
.pageFooter a:hover, .pageFooter a:focus {
    color: #C3CF21;
}
.pageFooter a:focus {
    text-decoration: underline;
}
#headerQuickLinks, ul.footLinks { display: inline;}

.pageFooter ul.footLinks{
    display: block;
    list-style-type: none;
    font-size: 11px;
    padding: 0;
}

.pageFooter ul.footLinks.secondLine{
    margin-top: -10px;
    *margin-top: -7px;
}

.ieBrowser .footLinks{
    *margin-left: 0;
}

ul.footLinks li{
    display: inline;
    border-right: 1px solid #999999;
    padding: 0 8px;
}

ul.footLinks li a{ text-decoration: none;}

.footLinks li.first{ padding: 0 8px 0 0; }
.footLinks li.last{ border: none;}
/* ---------------------------------------------
****************  2.0 TEXT *******************
------------------------------------------------ */
h1.pageTitle{ 
    font-size: 20px;
    margin-top: 0;
}

.header{
    clear: both;
}
.disabled, .disabled td{
    color: #999999;
}

.small-text {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal; 
    color: #444444;
}

.normal-text {
    font-weight: normal;
    font-size: 12px;
}

.BMOBlue{
    color: #0079C1;
}
/*    2.1 links*/
a.uLine, .MFA_layout a.uLine {text-decoration: underline;}

.MFA_layout .topHeaderNav, .MFA_layout .topHeaderNav td, .MFA_layout .headerContent a { color: #FFFFFF; font-size: 12px;}
a, .wpsLink, a:visited, .wpsLink:visited {
    color: #0079C1;
    text-decoration: none;
}
.MFA_layout .goBackLink{
    margin: 8px 15px -8px;
}
.pageFooter .footLinks {
    float: left;
    margin-top: 7px;
}

/*    2.2 tooltips*/
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span { 
    z-index:10;
    display:none;
    padding:14px 20px;
    margin-top:-30px;
    margin-left:28px;
    line-height:16px;
    }
a.tooltip:hover span, a.tooltip:focus span{
    display:inline;
    position:absolute;
    color:#111;
    border:1px solid #fab900;
    background-color:#fffcd1;
}
.callout {
    background-image: url("/Images/callout.png");
    border: 0 none;
    height: 22px;
    left: -11px;
    position: absolute;
    top: 24px;
    width: 12px;
    z-index: 20;
}
.tooltip.above .callout {
    background-position: -54px 0;
    left: 156px;
    top: 72px;
    width: 22px;
}
.below .callout {
    background-position: 62px 0;
    left: 131px;
    top: -17px;
    width: 22px;
}
.left .callout {
    background-position: 38px 0;
    left: 219px;
}
a.tooltip.helpTip span {
    width:180px;
    margin-left: 12px;
    text-align: left;
}
a.tooltip.helpTip.above span {
    height: 50px;
    margin-left: -175px;
    margin-top: -95px;
    vertical-align: bottom;
    width: 350px;
}
a.tooltip.helpTip.below span {
    margin-left: -150px;
    margin-top: 30px;
    width: 300px;
}
a.tooltip.helpTip.left span {
    margin-left: -250px;
}
/*CSS3 extras*/ 
a.tooltip span { 
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC; 
    box-shadow: 5px 5px 8px #CCC;
}

/* ---------------------------------------------
****************  3.0 INPUTS *******************
------------------------------------------------ */
input:focus{
    outline: 1px dotted #999999;
}
.MFA_layout td input[type="text"], .MFA_layout td input[type="password"], .MFA_layout td select {
    margin-top: 0;
}
.MFA_layout input[type="radio"], input[type="checkbox"], input[type="text"], input[type="password"] {
    margin-right: 5px;
    box-sizing: border-box;
    -box-sizing: border-box;
}
.MFA_layout input[type="text"]:disabled{
    background-color:#ececec
}

.MFA_layout input[type="text"], .MFA_layout input[type="password"] {
    border: 1px solid #BBBBBB;
}

.MFA_layout input[type="text"]:hover, .MFA_layout input[type="password"]:hover{
    box-shadow: 1px 0 3px #999999; outline: none;
}
.MFA_layout input[type="text"]:focus, .MFA_layout input[type="password"]:focus {
    border: 1px solid #0079C1; outline: none;
}

.MFA_layout input[type="button"] {
    padding: 0 6px;
}

.MFA_layout .checkboxGroup{
    margin-bottom: 8px;
}
.MFA_layout .checkboxGroup input {
    position: relative;
    top: 2px;
}
.MFA_layout input[type="text"], .MFA_layout input[type="password"], .MFA_layout select{
    margin-top: 3px;
    padding: 2px;
    vertical-align: middle;
}

.MFA_layout select option{
    padding: 2px;
}

.MFA_layout .intlInputCtr input[type="text"] {
    margin-top: 3px;
}
.dmtcNumCtr{
    width: 137px;
}
.intlInputCtr{
    width: 214px;
}

.tblToTop .intlContactRow td, .intlContactRow td {
    padding: 0 5px 2px;
    vertical-align: bottom;
}

.MFA_layout .dataTable td.intlNumCtr {
  height: 25px;
}

.intlSelCtr{
    display: block;
    overflow: visible;
    position: absolute;
    width: 214px;
}


.intlSelCtr.shorter {
    width: 186px;
}

.intlSelCtr.showRemove, .intlSelCtr.hideRemove.other {
    width: 210px;
}

select.selectCountry {
    margin-right: 5px;
}

.intlSelCtr.showRemove select.selectCountry{
    width: calc(100% - 25px);
}

.intlSelCtr.hideRemove select.selectCountry{
    width: 100%;
}

input.intlNumber{
    width: 75%;
    margin-right: 0;
}

div.intlCode {
    background-color: #ECECEC;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    height: 21px;
    padding: 3px 3px 2px;
    position: relative;
    text-align: center;    
    width: 25%;
    float:left;    
}

/* 3.1 INPUT ERRORS */
.errorField input[type="text"], .errorField input[type="password"],
.errorField input[type="text"]:focus, .errorField input[type="password"]:focus{
    border: 1px solid #FF0000;
    padding-right: 27px;
}

.errorField select{ border: 1px solid #FF0000; }


div.errorField input[type="text"], div.errorField input[type="password"],
div.errorField input[type="text"]:focus, div.errorField input[type="password"]:focus {
    padding-right: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.errorField.checkbox .errorFieldIconCtr {
    top: -4px;
}
td.errorField.checkbox {
    padding-right: 25px;
}

.errorField.checkbox input[type="checkbox"] {
    left: 25px;
    position: relative;
    opacity: 0;
    z-index: 1000;
}

.errorField.checkbox input[type="checkbox"] + span{
    background-image: url(/Images/errorCheckbox.jpg);
    display: block;
    float: left;
    height: 13px;
    left: 38px;
    margin-left: -13px;
    position: relative;
    width: 13px;
    background-position: 26px 0;
}
.errorField.checkbox input[type="checkbox"]:hover + span{ background-position: 0 0; }
.errorField.checkbox input[type="checkbox"]:checked + span{ background-position: 13px 0; }
 .errorField.Checkbox input[type="checkbox"]:checked:hover + span{ background-position: 39px 0; }



/* 3.2 INPUT FIELD HELP TEXT */
.fieldHelpCtr{ position: absolute; width: 800px; }
.fieldHelpText{ position: absolute; left: 141px; top: 4px; }

/* 3.3 USER ID STEP1 - USER ID AVAILABILITY */
.availabilityConfirm {
  line-height: 21px;
}

.availabilityConfirm.greenText {
  background-image: url("/Images/greenCheck.png");
  background-position: 10px 16px;
  background-repeat: no-repeat;
  padding: 15px 10px 15px 33px;
}

.availabilityConfirm.redText {
  padding: 15px 10px;
}

/* ---------------------------------------------
****&&&*********  4.0 BUTTONS ******************
------------------------------------------------ */
.btnFooter {
    text-align: right;
}


input[type="button"]:focus {
    outline: medium none;
}
input[type="button"]::-moz-focus-inner {
    border: 0;
}

/*update-02122015*/
.BIL_layout input.blueButton, .BIL_layout button.blueButton{
    background: #6eafd8; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlYWZkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlYWZkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwNzljMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDc5YzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #6eafd8 0%, #6eafd8 50%, #0079c1 51%, #0079c1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6eafd8), color-stop(50%,#6eafd8), color-stop(51%,#0079c1), color-stop(100%,#0079c1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6eafd8 0%,#6eafd8 50%,#0079c1 51%,#0079c1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6eafd8 0%,#6eafd8 50%,#0079c1 51%,#0079c1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6eafd8 0%,#6eafd8 50%,#0079c1 51%,#0079c1 100%); /* IE10+ */
    background: linear-gradient(to bottom, #6eafd8 0%,#6eafd8 50%,#0079c1 51%,#0079c1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6eafd8', endColorstr='#0079c1',GradientType=0 ); /* IE6-8 */       
    border: none; 
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 1px 10px;
    cursor: pointer;  
    min-width: 50px;  
    *min-width: auto; /*IE7 and below*/
    font-size: 12px;
    height: 20px;
}

.BIL_layout .blueButton:active, .BIL_layout .blueButton:focus{
    -moz-box-shadow:    inset 0 0 10px #444444;
    -webkit-box-shadow: inset 0 0 10px #444444;
    box-shadow:         inset 0 0 10px #444444;
}

.BIL_layout .blueButton.disabledBtn:active{
    -moz-box-shadow:    none;
    -webkit-box-shadow: none;
    box-shadow:         none;
}

.BIL_layout .blueButton:hover{
    background: #b8c9d3; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4YzlkMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzdlYWVkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNlOGFjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3M2ExYmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #b8c9d3 0%, #7eaed6 50%, #3e8ac9 51%, #73a1bc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8c9d3), color-stop(50%,#7eaed6), color-stop(51%,#3e8ac9), color-stop(100%,#73a1bc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b8c9d3 0%,#7eaed6 50%,#3e8ac9 51%,#73a1bc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b8c9d3 0%,#7eaed6 50%,#3e8ac9 51%,#73a1bc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b8c9d3 0%,#7eaed6 50%,#3e8ac9 51%,#73a1bc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #b8c9d3 0%,#7eaed6 50%,#3e8ac9 51%,#73a1bc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8c9d3', endColorstr='#73a1bc',GradientType=0 ); /* IE6-8 */
}

.BIL_layout .blueButton.disabledBtn{
    background: #cccccc; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlYWZkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlYWZkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwNzljMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDc5YzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #cccccc 0%, #aaaaaa 50%, #888888 51%, #888888 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(50%,#aaaaaa), color-stop(51%,#888888), color-stop(100%,#888888)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cccccc 0%,#aaaaaa 50%,#888888 51%,#888888 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cccccc 0%,#aaaaaa 50%,#888888 51%,#888888 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cccccc 0%,#aaaaaa 50%,#888888 51%,#888888 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cccccc 0%, #aaaaaa 50%, #888888 51%, #888888 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-8 */       
}

.btn-remove{
    display: inline-block;
    background-image: url("/Images/bkg_image.png"); 
    background-repeat: no-repeat;
    background-position: -311px -412px;
    height: 16px;
    width: 15px;
    cursor: pointer;
}

.intlSelCtr.hideRemove .btn-remove{ display: none; }
.btn-help{
    cursor: pointer;
}

.intlNumCtr .btn-help, .intlNumCtr .btn-remove {
    position: relative;
    top: 2px;
}

/*green outline page navigation tabs*/
.BIL_layout .tabs .selected, .BIL_layout .page_navigation .tabs .selected {
    border-bottom: 3px solid #FFFFFF;
}

/* ---------------------------------------------
*****************  5.0 IMAGES ******************
------------------------------------------------ */
div.image{
    display: inline-block;
}
.ieBrowser div.image{
    display: block;
    float: left;
}

#bmoIlLogo{ /* BMO IL Header logo */
    height: 35px;
    width: 173px;
    float: left;
    padding-top: 4px;
    margin-left: 19px;
}
#adLogo{ /* AD Logo */
    height: 66px;
    float: right;
    margin-right: 10px;
}
#bmoFooterLogo{ /* BMO footer logo */
    float: right;
}

/*    5.1 icons */
.MFA_layout .hide .titleIcon {
    background-position: 0 -63px;
}
.MFA_layout .show .titleIcon {
    background-position: 0 -82px;
}


/* -        5.1.1 home icon - */
div.homeLinkIcon{
    display: block;
    float: left;
    background-image: url("/Images/arrow-back.svg");
    height: 19px;
    aspect-ratio: auto 20 / 19;
    width: 20px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
.home_link_centered{
    margin-top: -20px;
    color: #001928!important;
    font-family: "heebo";
    font-size: 14px;
    letter-spacing: 0;
    line-height: 24px;
    margin-left: 24px;
}
#homeLinkIcon img {
    *margin-top: 3px; /* IE7 and below */
}

.BIL_layout #homeLinkIcon:focus {
    outline: 1px dotted #C3CF21;
}

a#homeLinkIcon:hover .image.homeLinkIcon{
    background-image: url("/Images/ADhomeIconHover.png")
}

/* -         5.1.2 go back icon - */
div.goBackIcon{
    position: relative;
    top: 3px;
    width: 15px;
    height: 16px;
    background-image: url("/Images/goBack.png");
    margin-right: 5px;
}
a#goBackIcon:hover .image.goBackIcon{
    background-image: url("/Images/goBackHover.png")
}

/*         5.1.3 error icons - */
/*large page header error icon*/
.errorIconLG{
    height: 32px;
    margin-left: -30px;
    float: left;
}
/*small field level error icon*/
.errorFieldIconCtr .errorFieldIcon {
    position: absolute;
    right: 3px;
    top: 4px;
}

/*small field level error icon on select*/
.select.errorField .errorFieldIconCtr .errorFieldIcon {
    position: absolute;
    right: -20px;
    top: 5px;
}
td.intlInputCtr .errorField .errorFieldIconCtr .errorFieldIcon {
    right: 3px;
}

div.errorField .errorFieldIconCtr .errorFieldIcon {
    right: 11px;
    top: 7px;
}

/*    5.2 Progress Bar with Steps*/

.progressStepsBar{
    margin-left: 50%;
    position: relative;
    float:left;
}
.twoSteps.progressStepsBar {
    left: -120px;
    width: 240px;
}
.threeSteps.progressStepsBar {
    left: -180px;
    width: 360px;
}
.fourSteps.progressStepsBar {
    left: -240px;
    width: 480px;
}
.sixSteps.progressStepsBar {
    left: -360px;
    width: 720px;
}

.progressStep {
    float: left;
    text-align: center;
}
.progressStepLine {
    padding: 0 60px;
    position: relative;
    top:35px;
    z-index:200;
}
.progressStepLine div {
    border-top:5px solid #ccc;
}
.progressStepIcon {
    background-image: url("/Images/steps_sprite.png");
    background-repeat: no-repeat;
    height: 34px;
    width: 120px;
    background-position: center 0;
    color:#fff;
    line-height:34px;
    font-size:26px;
    font-weight:bold;
    z-index:500;
    position: relative;
}
.select .progressStepIcon{
    background-position: center bottom;
}
.progressStepLabel {
    font-size: 11px;
    font-weight: bold;
    color: #CCCCCC;
    padding:5px 0;
    width: 120px;
}
.select .progressStepLabel{
    color: #444444;
}
/* ---------------------------------------------
**************  6.0 UTILITIES ******************
------------------------------------------------ */
.bold{ font-family: Arial,Helvetica,sans-serif;}
span.strong, p.strong{ font-weight: bold;}
.w100p{ width: 100%; }
.w165{ width: 165px; }
.w200{ width: 200px; }
.w300{ width: 300px; }
.noPadding, td.noPadding { padding: 0; }
.paddingBtm15, p.paddingBtm15{ padding-bottom: 15px;}
.paddingLeft15, p.paddingLeft15 { padding-left: 15px; }
.MFA_layout .noTopBtmPadd, .MFA_layout td.noTopBtmPadd {padding-top: 0; padding-bottom: 0;}
.MFA_layout .marginTop0, .MFA_layout input.marginTop0 {margin-top: 0;}
p.marginTop3 { margin-top: 3px; }
.marginTop5, p.marginTop5 { margin-top: 5px; }
.marginTop10, p.marginTop10 { margin-top: 10px; }
.marginTop15, p.marginTop15{ margin-top: 15px; }
.MFA_layout .marginBtm0, p.marginBtm0{ margin-bottom: 0;}
.MFA_layout p.marginBtm5, .MFA_layout .marginBtm5{ margin-bottom: 5px}
.MFA_layout .marginBtm15{ margin-bottom: 15px; }
.MFA_layout .marginBtm30, table.marginBtm30{ margin-bottom: 30px; }
.MFA_layout .leftNeg5, table.leftNeg5 {margin-left: -5px;}
.MFA_layout .marginLeft17 {margin-left: 17px;}
.MFA_layout .marginRt10 { margin-right: 10px;}
.MFA_layout .marginLt10 {margin-left: 10px;}
.MFA_layout .marginRt20, .marginRt20 { margin-right: 20px;}
.MFA_layout .marginLt20 {margin-left: 20px;}
.dotBtmBorderLG{ border-bottom: 2px dotted #999999; }
.dotBtmBorder{ border-bottom: 1px dotted #999999; }
.solidBtmBorder {border-bottom: 1px solid #999999; }
.tblToTop td, .tblToTop th{ vertical-align: top;}
.toLeft, td.toLeft{ text-align: left;}
.toRight, td.toRight{ text-align: right; }
.toCenter, td.toCenter, .BIL_layout th.toCenter{ text-align: center;}
td.toMiddle{ vertical-align: middle; }
td.toBtm {vertical-align: bottom;}
.box{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
table.box input{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-right: 0;  
}
.skipMenuLink, .offScreen, .altText, caption{
    position: absolute;    top: -9999px;
}
.skipMenuLink:focus, .offScreen:focus, .altText:focus, caption:focus{
    position: relative;    top: 0px;
}
/* ---------------------------------------------
**************  7.0 OVERIDES ******************
------------------------------------------------ */

/*IE9 and older CSS*/
/*enrol1.html*/
th.contactLabel {width: 60px;}
td.nickname {
    width: 135px;
}
td.actions {
    padding: 5px 2px;
    background-color:#FFFFFF;
}
td.actions.contactMinRule {
    width: 165px;
    position: relative;
}
div.contactMinText{ width: 165px; position: absolute; top: -2px;}

}td.otherActions {
    padding: 2px;
    background-color:#FFFFFF;
}


.MFA_layout table tr.whiteCellBG td{ background-color: #FFFFFF; padding: 0;}
.enrolContacts td {
    padding: 3px 5px;
}
th.contactLabel {
    padding-top: 6px;
    background-color: #FFFFFF;
}
td.extCtr{
    width:70px;
}

/*enrol2.html*/
ul.contactList{
    padding: 0 10px;
}

.MFA_layout td.acctNumCtr {
    padding-top: 5px;
}
.MFA_layout table.acctsList input[type="text"] {
    margin-top: 1px;
}
.MFA_layout th.checkboxCell, .MFA_layout td.checkboxCell {
    padding: 5px 0 5px 5px;
    text-align: center;
}
/*redoc - step 5*/
.redocSecurityForm .short .firstRow .actions {
    padding: 0;
}

.MFA_layout .intlInputCtr input.intlNumber {
width: 75% !important;
margin: 0;
}

.MFA_layout .hide{
display:none !important;
}


.redocSecurityForm .intlSelCtr.showRemove, .redocSecurityForm .intlSelCtr.hideRemove.shorter.other {
    width: 203px;
}
.ieBrowser .redocSecurityForm .intlSelCtr.showRemove, .redocSecurityForm .intlSelCtr.hideRemove.shorter.other {
    width: 198px;
}

.redocSecurityForm .intlSelCtr.shorter.hideRemove {
    width: 179px;
}


/*IE8 FIXES*/

.ieBrowser .ie_w200, .ieBrowser .ie_w200.w100p{ width: 100%;}
.ieBrowser .ie_w200{ width: 200px;}

.ieBrowser .redocSecurityForm .hideRemove.shorter.intlSelCtr {
    width: 188px;
}

.ieBrowser .MFA_layout Select{
    padding: 0;
}

.ieBrowser td .MFA_layout input[type="radio"], .ieBrowser td input[type="checkbox"], .ieBrowser td input[type="text"], .ieBrowser td input[type="password"] {
    margin-right: 0;
}

.ieBrowser td input.w100p { 
    width: 97%; 
    *width: 95%; /* IE7 and below */
}

.ieBrowser .intlNumCtr .btn-remove.ie_removeIconCtr{ display: block; background-image: none; margin-top: -14px;}
.ieBrowser .hideRemove.intlSelCtr .btn-remove {    display: none; }
.ieBrowser .intlNumCtr .btn-remove.ie_removeIconCtr div{ position: absolute; }
.ieBrowser .intlNumCtr .btn-remove.ie_removeIconCtr .ie_removeIcon{
    background-image: url("https://bmo.lipperweb.com/images/bkg_image.png");
    background-repeat: no-repeat;
    background-position: -311px -412px;
    height: 16px;
    width: 15px;
    position: absolute;
    left: 184px;
    top: -9px;
}

.ieBrowser div.intlCode{
    display: inline; 
    width: 14%;
    top: 3px;
    height: 16px;
    padding: 4px 3px 2px;
}
.ieBrowser .MFA_layout .intlInputCtr input[type="text"]{
    margin-top: 0;
}
.ieBrowser td.intlNumCtr { height: auto; }
.ieBrowser input.intlNumber{ width: 80%;}

.ieBrowser .MFA_layout .intlNumCtr select{ margin-bottom: 2px;}

.ieBrowser td.warningCell .warningText { width: auto; }

/*notification screen*/
.ieBrowser .button.marginRt10{
    margin-right: 0;
}
.ieBrowser .MFA_layout .accountPW{
    width: 150px;
    border-right: 1px solid #DDDDDD;
}
.ieBrowser .MFA_layout td.ie_cellOutlineRight, .ieBrowser .MFA_layout th.ie_cellOutlineRight{ border-right: 1px solid #DDDDDD;}
.ieBrowser .wpsPageBarFirstRow .AccountSel{
    margin-top: 6px;
}
.ieBrowser .MFA_layout .nickname .w100p{ width: 125px;}
.ieBrowser .MFA_layout td.nickname { width: 125px;}
.ieBrowser .inputCtr100{
    width: 100px;
}
.ieBrowser .inputCtr100 input{
    width: 100px;
}
.ieBrowser .errorField input[type="text"], .ieBrowser .errorField input[type="password"],
.ieBrowser .errorField input[type="text"]:focus, .ieBrowser .errorField input[type="password"]:focus {
    border: 1px solid #FF0000;
    padding-right: 0;
}

.ieBrowser .errorFieldIcon {display: none;}
.ieBrowser .checkbox.errorField .errorFieldIcon {
    display: inline;
    right: -4px;
    *right: 0px; /* IE7 and below */
    *top: 8px; /* IE7 and below */
}

.ieBrowser .errorField.checkbox input[type="checkbox"] + span{
    display: none;
}


.CMSkey {background-color:yellow}

/*IE10 and IE11 CSS */   
@media all and (-ms-high-contrast:none)
    {

        /*input text field padding*/
        .MFA_layout input[type="text"], .MFA_layout input[type="password"]{
            margin-top: 2px;
            padding: 3px;
        } /* IE10 */
        *::-ms-backdrop, .MFA_layout input[type="text"], .MFA_layout input[type="password"]{
            margin-top: 2px;
            padding: 3px;
        }/* IE11 */

        /*international code background*/
        div.intlCode{ height: 22px;   top: 0; } /* IE10 */
        *::-ms-backdrop, div.intlCode{ height: 22px;   top: 0; } /* IE11 */

        td.intlNumCtr { height: 21px; } /* IE10 */
        *::-ms-backdrop, td.intlNumCtr { height: 21px; } /* IE11 */

        /*select country select*/
        div.intlCode{ height: 22px;   top: 0; } /* IE10 */
        *::-ms-backdrop, div.intlCode{ height: 22px;   top: 0; } /* IE11 */

        td.extCtr{ width: 70px } /* IE10 */
        *::-ms-backdrop, td.extCtr{ width: 70px; } /* IE11 */

        .intlContactRow td.extCtr{ width: 70px } /* IE10 */
        *::-ms-backdrop, intlContactRow td.extCtr{ width: 70px; } /* IE11 */

        .intlContactRow td.nickname{ width: 170px } /* IE10 */
        *::-ms-backdrop, .intlContactRow td.nickname{ width: 170px; } /* IE11 */

        td.nickname{ width: 94px } /* IE10 */
        *::-ms-backdrop, td.nickname{ width: 94px; } /* IE11 */

        td.nickname.shorter{ width: 113px; } /* IE10 */
        *::-ms-backdrop, td.nickname.shorter{ width: 113px; } /* IE11 */

        td.contactMinRule{ max-width: 50% } /* IE10 */
        *::-ms-backdrop, td.contactMinRule{ max-width: 50%; } /* IE11 */

        td.warningCell.wide{ width: 450px } /* IE10 */
        *::-ms-backdrop, td.warningCell.wide{ width: 450px; } /* IE11 */

        .intlSelCtr.showRemove { width: 186px; } /* IE10 */
        *::-ms-backdrop, .intlSelCtr.showRemove { width: 186px; } /* IE11 */

        .intlSelCtr.showRemove.shorter { width: 220px; } /* IE10 */
        *::-ms-backdrop, .intlSelCtr.showRemove.shorter { width: 220px; } /* IE11 */

        .shorter.intlSelCtr { width: 190px; } /* IE10 */
        *::-ms-backdrop, .shorter.intlSelCtr { width: 190px; } /* IE11 */

        .intlSelCtr.hideRemove.other{ width: 166px;} /* IE10 */
        *::-ms-backdrop, .intlSelCtr.hideRemove.other{ width: 166px;} /* IE11 */

        .intlSelCtr.hideRemove.other.shorter{ width: 183px;} /* IE10 */
        *::-ms-backdrop, .intlSelCtr.hideRemove.other.shorter{ width: 183px;} /* IE11 */

        .intlSelCtr.hideRemove.other.wide{ width: 167px;} /* IE10 */
        *::-ms-backdrop, .intlSelCtr.hideRemove.other.wide{ width: 167px;} /* IE11 */

        .dmtcNumCtr { width: 115px; } /* IE10 */
        *::-ms-backdrop, .dmtcNumCtr { width: 115px; } /* IE11 */

        .dmtcNumCtr.shorter { width: 137px; } /* IE10 */
        *::-ms-backdrop, .dmtcNumCtr.shorter { width: 137px; } /* IE11 */

        .MFA_layout .wpsPageBarFirstRow .AccountSel select { margin-top: 5px;}
        .MFA_layout select{height: 21px; padding: 0;}


    }

/*Chrome only CSS*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
}

/*Firefox only CSS*/
@-moz-document url-prefix() {

    /*select input padding*/
    .MFA_layout select {
        padding-bottom: 0;
        padding-top: 3px;
    }

}

@media (max-width: 430px) {
	  .pageFooter {
		  width: 430px;
	  }
  }