/*
    EXTERNAL MASTER STYLE - Pages whom inherit from external master page.
*/

/*****************************************************************/
/* Layout - Begin                                                */
/*****************************************************************/


/*The default with applies to all text boxes*/
INPUT[type="text"], select,INPUT[type="password"]{
    width: 240px !important;
}

select {
    width: 246px !important;
}

#main_content {
	z-index: -1;
	border-radius: 8px;
    behavior: url( /Scripts/PIE.htc );
}

#print_content {
    position: relative;
    border-radius: 8px;
    behavior: url( /Scripts/PIE.htc );
}

.viewportContent {
    width: 650px;
    margin: 110px auto;
    background: #f2f2f2; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#dad9d9), color-stop(8%,#F1F1F1), color-stop(50%,#FFFFFF), color-stop(92%,#F1F1F1),color-stop(100%,#e5e4e4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dad9d9 1%,#F1F1F1 8%,#FFFFFF 50%,#F1F1F1 92%,#dad9d9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dad9d9 1%,#F1F1F1 8%,#FFFFFF 50%,#F1F1F1 92%,#dad9d9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dad9d9 1%,#F1F1F1 8%,#FFFFFF 50%,#F1F1F1 92%,#dad9d9 100%); /* IE10+ */
    background: -moz-linear-gradient(top, #dad9d9 1%,#F1F1F1 8%,#FFFFFF 50%,#F1F1F1 92%,#dad9d9 100%); /* FF3.6+ */
    background: linear-gradient(0, #dad9d9 1%,#F1F1F1 8%,#FFFFFF 50%,#F1F1F1 92%,#dad9d9 100%); /* W3C */
    -pie-background: transparent linear-gradient( -90deg, #dad9d9 1%,#F1F1F1 8%,#FFFFFF 50%,#F1F1F1 92%,#dad9d9 100%);
    behavior: url( /Scripts/PIE.htc );
}

#contentSection {
    margin: 10px;
    padding: 20px 5px;
}

#headerSection {
	padding: 0 0 0 0;
}

/* the GroupBox style instruction section on External login - begin */
#innerSection {
	border: 2px solid #fff;
	font-family: Lato;
}

/* Force horizontal layout in this section (i.e. the radio buttons that reveal the bottom sections) */
#innerSection .lbl_input {
	display: inline;
}

.innerFrame {
    height: 110px;
    width: 100%;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #contentSection {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    } 
    [class*="viewportContent"] {
        max-width: 350px;
        margin: 5px auto;
        z-index: 0;
    }
    [class*="viewportFrame"] {
        padding: 12px 0 8px 15px;
        border-left: 0px !important;
    }
    [class*="innerFrame"] {
        width: 100%;
        height: 100%;
    }
    .returningUsersHeader{
        font-size: 12pt;
        padding-bottom: .5em;
        color: #767676;
    }
    .newUsersHeader{
        font-size: 12pt;
        padding-bottom: .5em;
        color: #767676;
    }
    .header1 {
        font-size: 14pt !important;
    }
    .lbl_input {
        font-size: 10pt !important;
    }
    .lbl_input input {
        font-size: 10pt !important;
    } 
    .selectedBlock {
        height: 175px;
        padding: 0 0 5px 10px;
        clear: both;
    }
    .viewportCredentials {
        float: right;
        padding: .5em 0 0 0 !important;
        margin-top: 0px !important;
        margin-left: auto;
        margin-right: 0;
    }
    .btnContinue {
        background-size: 100%;
        font-size: 14pt !important;
        width: 180px !important;
        height: 50px !important;
        float: right;
    }
    .viewportThirdOptionContainer {
        max-width: 275px;
    }
    .viewportThirdOption {
        text-align: center;
        font-size: 10pt !important;
    }
    [class*="applicationErrors"] {
        left: 100px !important;
    }
    .applicationErrorsCloseButton {
        position: unset !important;
    }
    .hint {
        left: 90px !important;
    }
    .fieldErrors {
        left: 90px !important;
    }
    .tooltipPopup {
        left: 10px !important;
        max-width: 90% !important;
        top: 110px !important;
    }
    #bottom_content_outer {
        margin:auto;
        width: 100%;
        bottom: 0;
        position: fixed;
        overflow: hidden;
        height: 80px;
        z-index: 1;
        background: #fdfdfd;
        -pie-background: transparent linear-gradient( -90deg,  #fdfdfd 0, #C3C3C3 100%); 
        background: -moz-linear-gradient(top, #fdfdfd 0, #C3C3C3 100%);
        background: -webkit-gradient(linear, top, color-stop(0,rgba(253,253,253,255)), color-stop(100%,rgba(195,195,195,255)));
        background: -webkit-linear-gradient(top,  rgba(253,253,253,1) 0, rgba(195,195,195,1) 100%);
        background: -o-linear-gradient(top,  #fdfdfd 0, #C3C3C3 100%);
        background: -ms-linear-gradient(top,  #fdfdfd 0, #C3C3C3 100%);
        background: transparent linear-gradient(180deg,  #fdfdfd 0, #C3C3C3 100%);
        behavior: url( /Scripts/PIE.htc );	
    }
    #bottom_content_inner {
        position: fixed;
        bottom: 0;
        left: 15% !important;
        z-index: 2;
        height: 16% !important;
        margin: 0;
        margin-left: unset !important;
        width: 70%;
        background-size: 100% !important;
        background-position-y: bottom !important;
    }
    #siteBodyContent {
        min-height: 600px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    [class*="viewportContent"] {
        width: 575px;
    }
    .viewportFrame {
        float: left;
        height: 80px;
        padding: 1.5em .5em .75em 1.5em;
    }
    .viewportFrame-Right {
        float: right;
        width: 50%;
        height: 80px;
        padding: 1.5em .75em .75em 2em;
    }
    .returningUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }
    .newUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }   
    .selectedBlock {	
        padding: 20px;
        text-align: right;
        clear: both;
    }
    .viewportThirdOption {
        margin-top: 10px;
        width: 580px;
        text-align: center;
    }
    #ctl00_bodyContentPlaceHolder_txtPassword{
        margin-right: -4px;
    }
    #bottom_content_outer {
        margin:auto;
        width: 100%;
        bottom: 0;
        position: fixed;
        overflow: hidden;
        height:100px;
        z-index:1;
        background: #fdfdfd;
        -pie-background:transparent linear-gradient( -90deg,  #fdfdfd 0, #C3C3C3 100%); 
        background: -moz-linear-gradient(top, #fdfdfd 0, #C3C3C3 100%);
        background: -webkit-gradient(linear, top, color-stop(0,rgba(253,253,253,255)), color-stop(100%,rgba(195,195,195,255)));
        background: -webkit-linear-gradient(top,  rgba(253,253,253,1) 0, rgba(195,195,195,1) 100%);
        background: -o-linear-gradient(top,  #fdfdfd 0, #C3C3C3 100%);
        background: -ms-linear-gradient(top,  #fdfdfd 0, #C3C3C3 100%);
        background: transparent linear-gradient(180deg,  #fdfdfd 0, #C3C3C3 100%);
        behavior: url( /Scripts/PIE.htc );	
    }
    #bottom_content_inner {
        position:fixed;
        bottom:0;
        left: 50%;
        z-index: 1;
        height: 119px;
        margin: 0;
        margin-left: -159.5px;
        background-repeat: no-repeat;
        width: 320px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    [class*="viewportContent"] {
        width: 575px;
    }
    .viewportFrame {
        float: left;
        height: 80px;
        padding: 1.5em .5em .75em 1.5em;
    }
    .viewportFrame-Right {
        float: right;
        width: 50%;
        height: 80px;
        padding: 1.5em .75em .75em 2em;
    }
    .returningUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }
    .newUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }  
    .selectedBlock {	
        padding: 20px;
        text-align: right;
        clear: both;
    }
    .viewportThirdOption {
        margin-top: 10px;
        width: 580px;
        text-align: center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    [class*="viewportContent"] {
        width: 575px;
    }
    .viewportFrame {
        float: left;
        height: 80px;
        padding: 1.5em .5em .75em 1.5em;
    }
    .viewportFrame-Right {
        float: right;
        width: 50%;
        height: 80px;
        padding: 1.5em .75em .75em 2em;
    }
    .returningUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }
    .newUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }  
    .selectedBlock {	
        padding: 20px;
        text-align: right;
        clear: both;
    }
    .viewportThirdOption {
        margin-top: 10px;
        width: 580px;
        text-align: center;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    [class*="viewportContent"] {
        width: 575px;
    }
    .viewportFrame {
        float: left;
        height: 80px;
        padding: 1.5em .5em .75em 1.5em;
    }
    .viewportFrame-Right {
        float: right;
        width: 50%;
        height: 80px;
        padding: 1.5em .75em .75em 2em;
    }
    .returningUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }
    .newUsersHeader {
        font-size: 11pt;
        padding-bottom: 1.5em;
        color: #767676;
    }    
    .selectedBlock {	
        padding: 20px;
        text-align: right;
        clear: both;
    }
    .viewportThirdOption {
        margin-top: 10px;
        width: 580px;
        text-align: center;
    }
}

.sectionSelection {    
    font-size: 10pt;
    text-transform: initial;
}

#topSectionWrapper 
{
    margin: auto;
    position: absolute;
    top: 0;
    width: 100%;
    min-width: 350px;
    z-index: 0;
    height: 90px;
    background: #fdfdfd;
    background: -moz-linear-gradient(top, #e3e3e3 0, #fdfdfd 100%);
    background: -webkit-gradient(linear, top, color-stop(0,rgba(227,227,227,1)), color-stop(100%,rgba(253,253,253,1)));
    background: -webkit-linear-gradient(top,  rgba(227,227,227,1) 0, rgba(253,253,253,1) 100%);
    background: -o-linear-gradient(top,  #e3e3e3 0, #fdfdfd 100%);
    background: -ms-linear-gradient(top,  #e3e3e3 0, #fdfdfd 100%);
    background: linear-gradient(180deg,  #e3e3e3 0, #fdfdfd 100%);
    -pie-background:linear-gradient( -90deg,  #e3e3e3 0, #fdfdfd 100%); 
    behavior: url( /Scripts/PIE.htc );	
}

/* the GroupBox style instruction section on External login - end */
	

/*****************************************************************/
/* Layout - End                                                  */
/*****************************************************************/

/*****************************************************************/
/* EXTERNAL HOME (No Snow Cone) - BEGIN                          */
/*****************************************************************/
.enrollOptionDescription {
    float: left;
    width: 300px;
    margin-left: 20px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 15px;
    margin-top: 4px;
    height: auto;
    min-height: 100%;
}

.enrollOptionButton {
    float: left;
    width: 175px;
    margin-top: 5px;
    clear: right;
    height: auto;
    min-height: 100%;
    margin-left: 20px;
}

.continueEnrollmentGroupNameEnrollmentPeriod {	
	text-align:center;
	font-weight: bold;
    font-size: large;
	padding: 10px 0;
	margin: 0 auto;
	background: url(../images/Backgrounds/ContactInfoShadow/footer-shadow-blue.png) no-repeat;
	background-position: center bottom;
}

.continueEnrollmentEnrollmentPeriod {
    padding-top: 5px;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 5px;
}

/*****************************************************************/
/* EXTERNAL HOME (No Snow Cone) - END                            */
/*****************************************************************/

/*****************************************************************/
/* EXTERNAL HOME  - BEGIN                                        */
/*****************************************************************/

.homeCenter {
    position:absolute;
    top:15%;
    right:5%;
    left:10%;
    }

.homeTopRight{
    text-align: right;
    position:absolute;
    bottom:0;
    right:0;
    top: 5%;
    padding-right: 50px;    
    font-weight: bold;
    color: #6E6E6E;
  }

.homeBottomRight{
    text-align: right;
    position:absolute;
    bottom:0;
    right:0;
    padding-right: 50px;
    padding-bottom: 50px;
  }
  
.homeBottomLeft{
    position:absolute;
    bottom:0;
    right:0;
    left: 0;
    padding-left: 50px;
    padding-bottom: 50px;
  }
  
/*Opaque Setting*/
.opaque {
    opacity: .4;
    filter: alpha(opacity=40);
}

/*-----------------------*/ 
/* Info Popup - Begin    */
/*-----------------------*/ 

.infoPopUpTitle {
    text-align: left;
    color: #6e6e6e;
}

.infoPopUp 	
{
    overflow:auto;
    height:200px; 
    width:400px;
    padding: 30px;
	margin: 110px auto;
	background: #F1F1F1; /* Old browsers */
	background: -webkit-linear-gradient(top,  #F1F1F1 1%,#FFFFFF 50%,#F1F1F1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #F1F1F1 1%,#FFFFFF 50%,#F1F1F1 100%); /* Opera 11.10+ */	     
	background: -ms-linear-gradient(top,  #F1F1F1 1%,#FFFFFF 50%,#F1F1F1 100%); /* IE10+ */
	background: -moz-linear-gradient(top,  #F1F1F1 1%, #FFFFFF 50%, #F1F1F1 100%); /* FF3.6+ */
	background: linear-gradient(0,  #F1F1F1 1%,#FFFFFF 50%,#F1F1F1 100%); /* W3C */	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F1F1F1), color-stop(50%,#FFFFFF), color-stop(100%,#F1F1F1)); /* Chrome,Safari4+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#F1F1F1',GradientType=0 );  /* IE6-9 */
}

/*-----------------------*/ 
/* Info Popup - End      */
/*-----------------------*/ 

/*-------------------------*/
/* SnowCone Buttons - Begin*/
/*-------------------------*/	
.snowConeButton {
    height: 174px;
}

/*-------------------------*/
/* SnowCone Buttons - End*/
/*-------------------------*/	

/*****************************************************************/
/* EXTERNAL HOME  - END                                          */
/*****************************************************************/

/*****************************************************************/
/* Headers - begin                                               */
/*****************************************************************/

.loginToYourBenefits {
    background-repeat: no-repeat;
    width: 300px;
    height: 32px;
    margin-bottom: 10px;
}

.gettingStarted {
    background-repeat: no-repeat;
    width: 300px;
    height: 32px;
    margin-bottom: 10px;
}

.accountConfirmation {
    background-repeat: no-repeat;
    width: 300px;
    height: 32px;
    margin-bottom: 10px;
}

.continueEnrollment {
    background-repeat: no-repeat;
    width: 159px;
    height: 27px;
    margin-bottom: 10px;
}

.continueEnrollmentGroupNameEnrollmentPeriod {
    background-repeat: no-repeat;
}

.termsOfUseHeaderImage {
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.forgotUserNameOrPassword {
    background-repeat: no-repeat;
    width: 415px;
    height: 32px;
    margin-bottom: 10px;
}

.forgotUserName {
    background-repeat: no-repeat;
    width: 245px;
    height: 32px;
    margin-bottom: 10px;
}

.forgotPassword {
    background-repeat: no-repeat;
    width: 225px;
    height: 32px;
    margin-bottom: 10px;
}

/*****************************************************************/
/* Headers - end                                                 */
/*****************************************************************/

/*****************************************************************/
/* Terms of Use - Begin                             			 */
/*****************************************************************/	

.InputLabel
{
	margin:.25em .25em .25em .25em;
	cursor:pointer;
	text-align:left;
}

.LegalJargon, .LegalJargon li
{
	color: #616161;
	font-family: 'Lato', sans-serif;
	font-size: 9pt;
	line-height: 1.5;
}

.LegalJargon li {
    padding-bottom: 10px;
    list-style-type: none;
}

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.8
}

.termsOfUseTitle {
    text-align: right;
    color: #6e6e6e;
}

.termsOfUse 	
{
    overflow:auto;
    height:500px; 
    width:700px;
    padding: 30px;
	margin-top: 1em;
    margin-bottom: 1em;
	position: relative;
    border: 1px solid #c2c2c2;
    background-color: #F1F1F1;
    -webkit-border-radius: 8px;
	border-radius: 8px; 
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F1F1F1), color-stop(1, #C0C0C0)); /* Chrome10+,Safari5.1+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F1F1F1), color-stop(50%,#C0C0C0), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
	background: -moz-linear-gradient(top, #F1F1F1, #C0C0C0); /* FF3.6+ */
	background: -o-linear-gradient(top,  #F1F1F1 1%, #F1F1F1 50%, #C0C0C0 100%); /* Opera 11.10+ */	
	background: -ms-linear-gradient(top,  #F1F1F1 1%, #C0C0C0 50%, #F1F1F1 100%); /* IE10+ */
	background: linear-gradient(0, #F1F1F1 1%, #F1F1F1 50%, #C0C0C0 100%); /* W3C */
	-pie-background: linear-gradient(-90deg,  #F1F1F1 1%, #F1F1F1 85%, #C0C0C0 100%); /* ie 8 & 9 */
    box-shadow: #4a4949 0 0 30px;
	behavior: url( /Scripts/PIE.htc );
}

/*****************************************************************/
/* Terms of Use - End                                			 */
/*****************************************************************/

.multifactorPopup {
    overflow: auto;
    height: 250px;
    width: 700px;
    padding: 30px;
    margin-top: 1em;
    margin-bottom: 1em;
    position: relative;
    border: 1px solid #c2c2c2;
    background-color: #F1F1F1;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F1F1F1), color-stop(1, #C0C0C0)); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F1F1F1), color-stop(50%,#C0C0C0), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top, #F1F1F1, #C0C0C0); /* FF3.6+ */
    background: -o-linear-gradient(top, #F1F1F1 1%, #F1F1F1 50%, #C0C0C0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F1F1F1 1%, #C0C0C0 50%, #F1F1F1 100%); /* IE10+ */
    background: linear-gradient(0, #F1F1F1 1%, #F1F1F1 50%, #C0C0C0 100%); /* W3C */
    -pie-background: linear-gradient(-90deg, #F1F1F1 1%, #F1F1F1 85%, #C0C0C0 100%); /* ie 8 & 9 */
    box-shadow: #4a4949 0 0 30px;
    behavior: url( /Scripts/PIE.htc );
}

.pwa #bottom_content_inner {
    background-image: url("../Images/Footer/FBG-footer-image.png");
    background-repeat: no-repeat;
}

@media all and (display-mode: standalone) {
    #bottom_content_inner {
        background-image: url("../Images/Footer/FBG-footer-image.png") !important;
        background-repeat: no-repeat !important;
    }
}