/*COLORS*******************************************************************************************************************/
/**************************************************************************************************************************/
/**************************************************************************************************************************/

/*brown*/
a#personalbanking, .oboptions a, .content h1, .content h3, #welcome, .firstname a, .firstname a:hover, .firstname a:visited, #personalizationPopup h1 {
    color: #666666;
}

body, .content caption, .toc-active img, #personalizationPopupxy, .content a.btn:hover, form.contact .submit:hover, .styledtable caption {
    background-color: #666666;
}

.styledtable {
    border-bottom-color: #666666;
}
/*BLUE*/
a, a:hover {
    color: #0054A6;
}

.oboptions a.active, .oboptions a:hover, #topnav ul li, #topnav ul li a, #obContent h1, #oblinks a, .panel_content h2, #footerLinks ul li a, #footerLinks ul li, .content h2 {
    color: #0054A6 !important;
}

#submit, #submit1, #mainfeatures, .aim a span, .content a.btn, form.contact .submit {
    background-color: #0054A6;
}

.content h2, .panel_content {
    border-bottom-color: #0054A6;
}
/*yellow*/
#greeting {
    color: #FFCE34;
}

#mainnav ul.nav, .ca-menu li:hover {
    background-color: #FFCE34;
}
/**************************************************************************************************************************/
/**************************************************************************************************************************/

body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image: url('../images/bg.jpg');
    background-repeat: repeat-x;
    background-color: #FFFFFF;
}

:focus {
    outline: none;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#page {
    width: 978px;
    margin: 0px auto 0px auto;
    padding: 0px;
}

#header {
    position: relative;
    width: 932px;
    height: 190px;
    padding: 0px 58px 0px 58px;
    /*background-image: url('../images/bg_header.png');
	background-repeat: repeat-y;	*/
}

#logo {
    float: left;
    width: 340px;
    height: 115px;
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    margin: 25px 0px 0px 0px;
}

#topnav {
    position: relative;
    width: 579px;
    height: 35px;
    top: 13px;
    z-index: 1000;
    float: right;
    overflow: hidden;
}

    #topnav ul {
        float: right;
        margin: 5px 0px 0px 0px;
        width: 100%;
        width: 70%;
        list-style-type: none;
    }

        #topnav ul li {
            display: inline;
            font-size: 12px;
            line-height: 14px;
            padding: 4px 4px 4px 6px;
            margin: 0px;
            background-repeat: no-repeat;
            background-position: left center;
        }

            #topnav ul li:first-child {
                background: none;
            }
/*online banking*/
#login {
    width: 389px;
    margin: 0 auto;
}

input, select {
    margin: 5px 0px;
}
/*Default*/
.accessfieldxy.rob, #oblinks {
    display: none;
}

.accessfieldxy.bob, #oblinksBusiness {
    display: block;
}
/*Personal
#personalbanking.active .accessfieldxy.rob, #personalbanking.active #oblinks1 {
	display: block;
}
#personalbanking.active .accessfieldxy.bob, #personalbanking.active #oblinks2 {
	display: none;
}
Business
#businessbanking.active .accessfieldxy.bob, #businessbanking.active #oblinks2 {
	display: block;
}
#businessbanking.active .accessfieldxy.rob, #businessbanking.active #oblinks1 {
	display: none;
}*/
#obContainer {
    position: relative;
    float: right;
    width: 472px;
    padding: 0px 0px 0px 0px;
}

#obContent {
    display: none;
    position: relative;
    width: 472px;
    padding: 0px 0px 0px 0px;
}

    #obContent::after {
        content: "";
        display: block;
        clear: both;
    }

body.login #obContent {
    display: block;
}

#headerpromo {
    position: relative;
    width: 419px;
    height: 108px;
    padding: 0px 0px 0px 0px;
}

body.login div.headerpromo {
    display: none;
}

.headerpromo p {
    margin: 0px;
    padding: 0px;
}

#obContent h1 {
    float: left;
    display: block;
    margin: 50px 0px 0px 0px;
    padding: 0px 0px 0px 52px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 22px;
    font-weight: bold;
    letter-spacing: -0.055em;
}

#accessfieldxy {
    float: left;
    width: 188px;
    height: 27px;
    margin: 40px 0px 0px 0px;
    padding: 7px 0px 0px 13px;
}

.obaccess {
    float: left;
    background: url('../images/bg_accessfield.jpg') no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    font-style: italic;
    border-width: 0px;
    margin: 0px;
    width: 107px;
    padding: 9px 0px 6px 24px;
    color: #333333;
}

#submit {
    width: 57px;
    height: 27px;
    margin: 0px;
    padding: 0px;
    background-image: url('../images/btn_login.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position: absolute;
    top: 48px;
    left: 347px;
}

    #submit.personal {
        top: 76px;
        left: 347px;
    }

.btn_go {
    border-color: inherit;
    float: left;
    width: 57px;
    height: 27px;
    background-color: transparent;
    background-image: url('../images/btn_login.png');
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    border-width: medium;
    border-style: none;
    background-position: 0px -27px;
    cursor: pointer;
    filter: alpha(opacity=001);
    opacity: .01;
}

#oblinks, #oblinksBusiness, #sharedlinks {
    font-size: 12px;
    width: 240px;
    height: 6px;
    text-align: center;
    color: #FFFFFF;
    margin: 10px 0px 0px 170px;
    padding: 2px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
}

    #oblinks p {
        margin: 0px;
        padding: 7px 0px 7px 0px;
    }

    #oblinks a {
        text-decoration: none;
        padding: 0px;
        margin: 0px;
    }

        #oblinks a:hover {
            text-decoration: underline;
        }

    #oblinks ul {
        margin: 8px 0px 0px 45px;
        padding: 0px 0px 0px 0px;
        list-style-type: none;
    }

        #oblinks ul li {
            display: inline;
            float: left;
            padding: 0px 15px 0px 12px;
            margin: 0px;
        }

.oboptions {
    position: absolute;
    width: 195px;
    height: 40px;
    top: 7px;
    left: 205px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
}

    .oboptions a {
        text-decoration: none;
    }

    .oboptions ul {
        list-style-type: none;
        margin: 7px 0px 0px 0px;
        padding: 0px;
    }

        .oboptions ul li {
            display: block;
            margin: 0px;
            padding: 0px;
            float: left;
        }

            .oboptions ul li a {
                display: block;
                margin: 0px;
                padding: 8px 14px 7px 15px;
                background-image: url('../images/ob_divider.png');
                background-repeat: no-repeat;
                background-position: left bottom;
            }

            .oboptions ul li:first-child a {
                background: none;
            }

li.none a {
    background: none !important;
}

.oboptions ul li a:focus {
    outline: none;
}

#bodycontent {
    position: relative;
    width: 978px;
    min-height: 300px;
    /*background-image: url('../images/bg_maincontent.png');
	background-repeat: repeat-y;	*/
    clear: both;
}

/** Main Navigation Styles Start **/

#mainnav {
    position: absolute;
    width: 925px;
    height: 62px;
    top: 0px;
    left: 26px;
    padding: 0px;
    z-index: 1100;
    background-image: url('../images/bg_mainnav.png');
    background-repeat: no-repeat;
}

    #mainnav ul.navlist {
        position: absolute;
        margin: 0px;
        padding: 0px;
        z-index: 950;
        list-style-type: none;
    }

        #mainnav ul.navlist > li {
            display: block;
            float: left;
            color: #FFFFFF;
            overflow: hidden;
            text-decoration: none;
            text-align: center;
            font-size: 14px;
            line-height: 16px;
            padding: 12px 0px 12px 0px;
        }

    #mainnav ul.nav {
        position: absolute;
        margin: 1px 4px 0px 4px;
        padding: 0px;
        z-index: 1000;
        list-style-type: none;
    }

        #mainnav ul.nav > li {
            float: left;
            color: #FFFFFF;
            overflow: hidden;
            text-decoration: none;
        }

        #mainnav ul.nav li a.category {
            position: relative;
            float: left;
            font-size: 18px;
            color: #333333;
            height: 52px;
            line-height: 52px;
            text-decoration: none;
            text-align: center;
            background-repeat: no-repeat;
        }

        #mainnav ul.nav li.menupersonal > a {
            width: 220px;
        }

        #mainnav ul.nav li.menubusiness > a {
            width: 211px;
        }

        #mainnav ul.nav li.menuloans > a {
            width: 155px;
        }

        #mainnav ul.nav li.menuinsurance > a {
            width: 169px;
        }

        #mainnav ul.nav li.menuabout > a {
            width: 162px;
        }

        #mainnav ul.nav li:hover a {
            cursor: pointer;
            text-decoration: none;
            opacity: 1.0;
        }

    #mainnav ul li div.navpanel {
        position: absolute;
        overflow: hidden;
        top: 53px;
        margin: 0;
        padding: 0;
        opacity: 1;
        z-index: 1000;
    }

    #mainnav ul li div.personalpanel {
        left: 30px;
    }

    #mainnav ul li:hover div.personalpanel {
        left: 30px;
        height: 230px;
    }

    #mainnav ul li div.businesspanel {
        left: 30px;
    }

    #mainnav ul li:hover div.businesspanel {
        left: 30px;
        height: 265px;
    }

    #mainnav ul li div.loanspanel {
        left: 370px;
    }

    #mainnav ul li:hover div.menuloans {
        left: 370px;
        height: 145px;
    }

    #mainnav ul li div.insurancepanel {
        left: 570px;
    }

    #mainnav ul li:hover div.insurancepanel {
        left: 570px;
        height: 145px;
    }

    #mainnav ul li div.aboutpanel {
        left: 645px;
    }

    #mainnav ul li:hover div.aboutpanel {
        left: 645px;
        height: 240px;
    }

    #mainnav ul li div.navpanel table {
        margin: -200px 0px 0px 0px;
    }

    #mainnav ul li:hover div.navpanel table {
        margin: 0px 0px 0px 0px;
    }

.panel_content {
    padding: 0px 0px 0px 20px;
    border-bottom-width: 6px;
    border-bottom-style: solid;
    background-image: url('../images/bg_panel.jpg');
    background-repeat: repeat-x;
    background-position: 0px 0px;
}

    .panel_content h2 {
        font-size: 14px;
        line-height: 16px;
        padding: 10px 0px 2px 0px;
        margin: 2px 0px 2px 0px;
    }

    .panel_content table tr > td {
        background-image: url('../images/divider_navpanel.png');
        background-repeat: no-repeat;
        background-position: left bottom;
        padding: 0px 0px 0px 20px;
    }

        .panel_content table tr > td:first-child {
            padding: 0px;
            background: none;
        }

    .panel_content ul {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        list-style-type: none;
    }

        .panel_content ul li {
            font-size: 11px;
            line-height: 14px;
            margin: 3px 5px 0px 0px;
            padding: 3px 0px 3px 1px;
        }

            .panel_content ul li a {
                display: block;
                font-size: 14px;
                line-height: 16px;
                text-decoration: none;
                color: #333333;
            }

                .panel_content ul li a:hover {
                    font-weight: bold;
                }
/** Main Navigation Styles End **/

#contentContainer {
    width: 925px;
    min-height: 200px;
    padding: 62px 27px 0px 26px;
}

#mainimg {
    width: 925px;
    height: 285px;
    background-image: url('../images/bg_mainimg.png');
    background-repeat: no-repeat;
}
/**Slideshow Styles Start**/
/*************************
#mainimg {
	position: relative;
	width: 925px;
	height: 285px;
	background-image: url('../images/bg_mainimg.png');
	background-repeat: no-repeat;
}
#slideshow {
	position: absolute;
	z-index:5;
	top: 0px;
	left: 0px;
	width: 925px; 
	height: 285px; 
	overflow: hidden;
}
#slideshow-container, div.slideshow-outside-container { 
	position:relative; 
	width:925px; 
	height:285px; 
}
#slideshow-container p {
	margin: 0;
	padding: 0;
}
#slideshow-container img { 
	display:block; 
	position:absolute; 
	top:0; 
	left:0; 
	z-index:1; 
	border-width: 0px ;
}
#slideshow-container-controls { 
	position: absolute;
	margin: 0px;
	height: 43px;
	bottom: 15px; 
	right: 30px;
	z-index: 40;
}
#slideshow-container-controls div {
	background-image:url(../images/bg_thumb.png);
	background-position: -42px 0px;
	background-repeat:no-repeat;
	cursor:pointer; 
	height: 36px;
	width: 36px; 
	float:left; 
	margin:0 6px 0 0;
	padding: 3px 2px 4px 3px;;
	overflow:hidden;
}
#slideshow-container-controls div img {
	background-position: -42px 0px;
	cursor:pointer; 
	height: 40px;
	border-collapse: collapse;
	border-width: 0px ;
	margin: 0;
	margin-left: -50px;
}
#slideshow-container-controls div a {  
	display: block;
	height: 34px;
	width: 34px;
	overflow:hidden;
}
.toc-active { 
	background-position: 0 0 !important;
}
/************************/
/**Slideshow Styles End**/

#features {
    height: 234px;
    background-image: url('../images/bg_features.png');
    background-repeat: no-repeat;
    background-position: -3px 0px;
}

#mainfeatures {
    border-radius: 0 0 20px 20px;
    height: 228px;
    margin: 0 0 0 3px;
    width: 920px;
}

#quicklinks {
    float: left;
    width: 259px;
    height: 207px;
    padding: 27px 0px 0px 30px;
}

    #quicklinks h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        line-height: 24px;
        margin: 0px;
        padding: 0px;
        text-shadow: rgba(0,0,0,.5) 0 1px 1px;
        font-weight: normal;
        color: #FFFFFF;
    }

    #quicklinks ul {
        margin: 5px 16px 20px 20px;
        padding: 0px;
        color: #FFFFFF;
        list-style-type: none;
    }

        #quicklinks ul li {
            margin: 0px;
            padding: 5px 0px 5px 0px;
            font-size: 13px;
            line-height: 15px;
        }

    #quicklinks a {
        color: #FFFFFF;
    }

        #quicklinks a:hover {
            color: #000000;
        }

#promoL {
    float: left;
    width: 255px;
    height: 203px;
    padding: 23px 22px 8px 21px;
}

#promoR {
    float: left;
    width: 255px;
    height: 203px;
    padding: 23px 32px 8px 21px;
}

#promoM {
    float: left;
    width: 255px;
    height: 203px;
    padding: 23px 32px 8px 21px;
}

    #promoL p, #promoR p, #promoM p {
        margin: 0px;
        padding: 0px;
    }

#subpage {
    width: 925px;
    min-height: 400px;
    background-image: url('../images/bg_subcontent.png');
    background-repeat: repeat-y;
}

#subpagebottom {
    width: 925px;
    height: 29px;
    background-image: url('../images/bg_subcontentbottom.png');
    background-repeat: no-repeat;
}

body.fullpage #subpage {
    background-image: url('../images/bg_subpage.png');
}

body.fullpage #subpagebottom {
    background-image: url('../images/bg_subpagebottom.png');
}

#col_left {
    float: left;
    width: 284px;
    min-height: 300px;
}

#col_right {
    float: left;
    width: 611px;
    min-height: 300px;
    padding: 20px 30px 20px 0px;
}

body.fullpage #col_left {
    display: none;
}

body.fullpage #col_right {
    width: 785px;
    padding: 30px 70px 20px 70px;
}
/*commercial |  personal | lending | cards | about*/
#commercial, #personal, #lending, #cards, #about {
    display: none;
}

body.commercial #commercial, body.personal #personal, body.lending #lending, body.cards #cards, body.about #about {
    display: block;
}
/************Subnav *****************/
.subnav h1 {
    font-size: 18px;
    line-height: 20px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    margin: 0px;
    padding: 25px 0px 0px 30px;
}

.ca-menu {
    padding: 0;
    margin: 20px 0 0 5px;
    width: 242px;
}

    .ca-menu li {
        width: 235px;
        height: 50px;
        overflow: hidden;
        position: relative;
        display: block;
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

        .ca-menu li:last-child {
            margin-bottom: 0px;
        }

        .ca-menu li a {
            text-align: left;
            width: 100%;
            height: 100%;
            display: block;
            color: #333333;
            position: relative;
            padding-top: 5px;
        }

.ca-icon {
    width: 20px;
    height: 16px;
    position: absolute;
    left: 17px;
    top: 17px;
    background-image: url(../images/icon_checkmark.png);
    background-repeat: no-repeat;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.ca-content {
    position: absolute;
    left: 40px;
}

.ca-main {
    font-size: 16px;
    font-weight: normal;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.ca-menu li:hover .ca-icon {
    width: 80px;
    height: 100px;
    left: -10px;
    top: -12px;
    background-image: url(../images/icon_arrow.png);
    background-repeat: no-repeat;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}

.ca-menu li:hover .ca-main {
    color: #333333;
    font-weight: bold;
}

.subpromo {
    width: 234px;
    margin: 30px 0px 0px 0px;
}

#footer {
    position: relative;
    width: 978px;
    height: 98px;
    padding-bottom: 55px;
    /*background-image: url('../images/bg_footer.png');
	background-repeat: no-repeat;*/
}

#fdicnotice {
    position: absolute;
    width: 192px;
    height: 44px;
    left: 500px;
    top: 15px;
}

#seal {
    position: absolute;
    left: 690px;
}

#logos {
    position: absolute;
    width: 114px;
    height: 43px;
    right: 40px;
    top: 12px;
    background-image: url('../images/fdic_ehl_logos.png');
    background-repeat: no-repeat;
}

#social {
    position: absolute;
    width: 50px;
    height: 35px;
    top: 19px;
    left: 35px;
    background-image: url('../images/social.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

body.nologos #logos {
    display: none;
}

body.nologos #logos {
    display: none;
}

#footerLinks {
    width: auto;
    height: 36px;
    padding: 20px 0px 0px 40px;
}

    #footerLinks ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

        #footerLinks ul li {
            display: inline;
            font-size: 11px;
            line-height: 17px;
            padding: 0px 3px 0px 5px;
        }

            #footerLinks ul li:first-child {
                background: none;
            }

            #footerLinks ul li a {
                font-size: 13px;
                line-height: 17px;
                font-family: Arial, Helvetica, sans-serif;
            }

                #footerLinks ul li a:hover {
                    text-decoration: underline;
                }

.content {
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
}

    .content h1, .content h2, .content h3, .content h4, .content h5, .content p, .content ul, .content ol, .content blockquote, .content pre, .content dl, .content dt, .content dd {
        margin-top: 3px;
        padding-top: 3px;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .content ul {
        margin: 0px 0px 20px 25px;
        padding: 5px 0px 5px 20px;
    }

    .content ol {
        margin: 0px 0px 0px 16px;
        padding: 0px
    }

        .content ol li {
            padding: 3px 0px 3px 0px;
        }

    .content ul li {
        padding: 3px 0px 3px 10px;
    }

    .content ul ul, .content ol ul {
        margin: 0px 0px 0px 25px;
        padding: 5px 0px 5px 0px;
        list-style-type: circle;
    }

        .content ul ul li, .content ol ul li {
            padding: 6px 0px 6px 0px;
            background: none !important;
        }

        .content ul ul li {
            list-style-type: square;
        }

    .content h1 {
        font-size: 36px;
        line-height: 38px;
        margin: 0px;
        padding: 10px 0px 10px 0px;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }

    .content h2 {
        font-size: 24px;
        line-height: 26px;
        padding: 2px 0px 4px 0px;
        margin: 2px 0px 2px 0px;
        border-bottom: 1px solid;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }

    .content h3 {
        font-size: 16px;
        line-height: 18px;
        font-weight: bold;
        padding: 2px 0px 2px 0px;
        margin: 10px 0px 2px 0px;
    }

    .content h1 + h3 {
        padding: 0px;
        margin: 0px;
    }

    .content h4 {
        font-size: 14px;
        line-height: 16px;
        font-weight: bold;
    }

    .content h5 {
        font-size: 12px;
        line-height: 14px;
        font-weight: bold;
    }

    .content h6 {
        font-size: 10px;
        line-height: 12px;
        color: #666666;
        padding: 2px 0px 2px 0px;
        margin: 4px 0px 0px 0px;
        font-weight: normal;
    }

    .content p {
        font-size: 12px;
        line-height: 18px;
        color: #333333;
        padding: 4px 0px 4px 0px;
        margin: 4px 0px 4px 0px;
    }

        .content p + h2 {
            padding: 0px;
            margin: 20px 0px 0px 0px;
        }

    .content sup, .content sub, .styledtable sup, .styledtable sub {
        line-height: 0px !important;
        vertical-align: baseline;
        position: relative;
        bottom: .33em;
    }

    .content a.btn {
        text-decoration: none;
        display: inline-block;
        padding: 7px 12px;
        color: #ffffff;
        border-radius: 5px;
    }

p.dropcap:first-letter {
    float: left;
    font-size: 52px;
    line-height: 40px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    margin: 0px 5px 0px 0px;
    padding: 0px;
    height: 52px;
    color: #000000;
    font-weight: normal;
}

p.dropcap {
    margin: 4px 0px 10px 0px;
}

p.small, .small {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: normal !important;
    color: #666666 !important;
    padding: 2px 0px 2px 0px;
    margin: 2px 0px 2px 0px;
}

ol.small, ul.small {
    font-size: 11px !important;
    line-height: 12px !important;
    font-weight: normal !important;
    color: #666666 !important;
    padding: 2px 0px 2px 0px;
    margin: 2px 0px 2px 15px;
}

    ol.small li, ul.small li {
        padding: 2px 0px 2px 0px;
        margin: 2px 0px 2px 0px;
        line-height: 15px;
    }

fieldset {
    padding: 10px;
    border: 1px #000000 solid;
}

    fieldset legend {
        color: #000000;
        padding: 5px;
    }

.clearfloat {
    clear: both;
    height: 0px;
}

/** Table Styles **/

.styledtable {
    margin: 5px 0px 20px 0px;
    border-bottom: 3px solid;
    color: #000000;
    font-size: 11px;
    line-height: 13px;
}

    .styledtable caption, .content caption {
        padding: 15px 7px 15px 7px;
        font-size: 16px !important;
        font-family: Arial, Helvetica, sans-serif;
        color: #ffffff;
        text-align: left;
        margin: 0;
        caption-side: top;
        font-weight: bold;
    }

    .styledtable th, .content th {
        padding: 12px 5px 12px 5px;
        border-right: 1px solid #dddddd;
        background-color: #eeeeee;
        text-align: center;
        color: #000000;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }

        .styledtable th a, .content th a {
            color: #000000;
        }

            .styledtable th a:hover, .content th a:hover {
                color: #FFFFFF;
            }

        .styledtable th p {
            color: #000000;
            text-align: center;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .styledtable th:first-child {
            border-left: 1px solid #dddddd;
        }

table.styledtable tr.odd td:first-child {
}

table.styledtable tr.even td:first-child {
}

.styledtable td {
    border-collapse: collapse;
    padding: 12px 5px 12px 5px;
    border-right: 1px solid #D3D3D4;
    border-top: 1px solid #D3D3D4;
}

    .styledtable td:first-child {
        border-left: 1px solid #D3D3D4;
        text-align: right;
        font-weight: bold;
        color: #000000;
        padding-left: 10px;
        padding-right: 10px;
    }

    .styledtable td:last-child {
        border-right: none;
        border-right: 1px solid #D3D3D4;
    }

.styledtable tr:hover {
    background-color: #ECF1F7;
}

.styledtable tr:last-child td {
    border-bottom: 1px solid #D3D3D4;
}

.styledtable p {
    color: #000000;
    font-size: 11px;
    line-height: 13px;
    margin: 0px;
    padding: 0px;
}

.styledtable ul {
    margin: 0px;
    padding: 8px 0px 0px 0px;
    list-style-type: none;
}

    .styledtable ul li {
        text-align: left;
        padding: 3px 0px 3px 10px;
    }

.odd {
    background-color: #FAFAFA;
}

.even {
    background-color: #FFFFFF;
}

p.normal {
    font-size: 12px;
    line-height: 14px;
    font-weight: normal !important;
    color: #FFFFFF !important;
}

/** Table Styles End **/

body.nologos .logos {
    display: none;
}

.reflect {
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
/** Toggle Tabs **/
ul.toggletabs {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}

.content .toggletabs li {
    margin: 0px;
    padding: 0px 29px;
    float: left;
}

.content .toggletabscontainer p {
    font-size: 14px;
    line-height: 20px;
}

.toggletabs li a {
    background-color: transparent;
    padding: 20px;
    color: #666666;
    text-decoration: none;
    font-size: 25px;
    line-height: 30px;
    display: block;
    outline: none;
    text-align: center;
    opacity: .3;
}

    .toggletabs li a:hover {
        opacity: .6;
    }

    .toggletabs li a.active, .toggletabs li a.selected:hover {
        color: #333333;
        opacity: 1;
    }

    .toggletabs li a.selected {
        color: #333333;
        opacity: 1;
    }

.toggletabscontainer {
    margin: 0px;
    padding: 30px;
    background-color: transparent;
    overflow: auto;
}

.toggletabsdiv {
    display: none;
}

    .toggletabsdiv:first-child {
        display: block;
    }
/******************Contact Form************************/
form.contact {
    margin: 0;
    padding: 0px;
    width: 100%;
}

    form.contact input[type=text], form.contact textarea, form.contact select {
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #eeeeee;
        color: #666666;
        font-style: italic;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        background-color: #eeeeee;
        width: 95%;
    }

    form.contact select {
        width: 98%;
    }

    form.contact .submit {
        border: none;
        text-decoration: none;
        display: inline-block;
        padding: 7px 12px;
        color: #ffffff;
        border-radius: 5px;
        cursor: pointer;
    }
/*********************************************/
/*********************************************/
/*********************************************/

.featureInactive {
    height: 0px;
    overflow: hidden;
}

.featureActive {
    height: auto;
    padding-bottom: 0px;
    margin-bottom: 0px;
}


/** Background Selector Styles **/

#bgContainer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 0px;
    z-index: 2500;
    background: #372F2D;
}

#bgselector {
    position: relative;
    height: 49px;
    width: 970px;
    margin: 0px auto;
    background-image: url('../images/btn_bgselector.png');
    background-repeat: no-repeat;
    background-position: right top;
}

    #bgselector.active {
        background-position: right bottom;
    }

#bgthumbnails {
    position: fixed;
    bottom: 49px;
    left: 0;
    z-index: 200;
    padding: 0;
    width: 100%;
    height: 0px;
    text-align: center;
    overflow: hidden;
    background-image: url('../images/bgthumbnails.png');
    background-repeat: repeat-x;
}

    #bgthumbnails a {
        position: relative;
        display: inline-block;
        _display: inline;
        overflow: hidden;
        max-width: 175px;
        height: 110px;
        background-color: #000;
        background-image: url('../images/loading.gif');
        background-position: center center;
        background-repeat: no-repeat;
        margin: 8px 5px 5px 5px;
        border: 2px #000 solid;
        -webkit-transition: border-color .5s ease-in-out;
        -moz-transition: border-color .5s ease-in-out;
        -ms-transition: border-color .5s ease-in-out;
        -o-transition: border-color .5s ease-in-out;
    }

        #bgthumbnails a:hover {
            border: 2px #2382E2 solid;
        }

    #bgthumbnails img {
        height: 131px;
    }

    #bgthumbnails p {
        margin: 0px;
        padding: 0px;
    }

.thumbnailContainer {
    position: relative;
    height: 131px;
}

/** Toolbar Styles **/

#toolbarxy {
    width: 100%;
    height: 0px;
    background-image: url('../images/bg_toolbar.jpg');
    background-repeat: repeat-x;
    background-position: 0px 0px;
    overflow: hidden;
    background-color: #372F2D;
}

#toolbar {
    width: 965px;
    height: 235px;
    margin: 2px auto 0px auto;
    padding: 0px;
}

#toolbarlinks {
    width: 665px;
    height: 30px;
    padding: 0px 0px 0px 300px;
    margin: 0px;
    color: #e3e3e3;
}

    #toolbarlinks h2 {
        border-style: none;
        border-color: inherit;
        border-width: medium;
        display: block;
        font-size: 14px;
        line-height: 30px;
        width: 170px;
        height: 30px;
        font-weight: normal;
        color: #e3e3e3;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        background-image: url('../images/icon_gear.png');
        background-repeat: no-repeat;
        background-position: right 6px;
        cursor: pointer;
    }

    #toolbarlinks ul {
        width: 483px;
        margin: 8px 0px 0px 12px;
        padding: 0px;
        list-style-type: none;
        color: #ededed;
    }

        #toolbarlinks ul li {
            display: inline;
            font-size: 12px;
            line-height: 14px;
            padding: 8px 15px 7px 14px;
        }

            #toolbarlinks ul li:first-child {
                background-image: url('../images/divider_toolbarlinks.png');
                background-repeat: no-repeat;
                background-position: left center;
            }

            #toolbarlinks ul li:hover {
                color: #FFFFFF;
                text-decoration: underline;
                cursor: pointer;
            }

#tools {
    width: 965px;
    height: 205px;
    margin: 0px auto 0px auto;
    padding: 0px;
}

.toolsset {
    float: left;
    width: 241px;
    height: 205px;
    background-image: url('../images/divider_tools.png');
    background-position: right center;
    background-repeat: no-repeat;
}

.toolscontent {
    width: 241px;
    height: 171px;
    overflow: hidden;
}

    .toolscontent h2 {
        margin: 0px;
        padding: 0px;
        color: #FFFFFF;
        font-size: 12px;
        line-height: 14px;
        font-weight: normal;
    }

    .toolscontent a {
        color: #dbdbdb !important;
        text-decoration: none !important;
    }

        .toolscontent a:hover {
            color: #dbdbdb !important;
            text-decoration: underline !important;
        }

#mycontent {
    width: 223px;
    height: 151px;
    padding: 20px 10px 0px 8px;
}

    #mycontent ul {
        list-style-type: none;
    }

        #mycontent ul li {
            font-size: 12px;
            line-height: 13px;
            color: #dbdbdb;
            margin: 5px 0px 5px 0px;
            padding: 2px 0px 2px 17px;
            background-image: url('../images/arrows.png');
            background-position: 0px 6px;
            background-repeat: no-repeat;
        }

a.morenews {
    font-size: 11px;
    float: right;
    color: #ffffff;
}

.toolstitle {
    width: 241px;
    height: 21px;
}

    .toolstitle h2 {
        margin: 0px;
        padding: 0 0 0 10px;
        color: #ffffff;
        font-size: 18px;
        line-height: 20px;
        float: left;
        border: none;
        letter-spacing: normal;
        font-weight: normal;
    }

    .toolstitle img {
        float: left;
        border: none;
        height: 20px;
        padding-left: 25px;
    }

#promoLweather {
    display: none;
}

#promoMstocks {
    padding-left: 10px;
}

    #promoMstocks h2 {
        margin-top: 0px;
        margin-bottom: 0px;
        max-height: 75px;
        overflow: hidden;
        padding-top: 12px;
        font-size: 24px;
        line-height: 26px;
        font-family: 'Open Sans', sans-serif;
        color: #FFFFFF;
        font-weight: normal;
    }

#promoMpromo {
    display: none;
}

#weather {
    float: left;
    width: 255px;
    height: 203px;
    padding: 12px 22px 8px 38px;
}

#stock {
    float: left;
    width: 255px;
    height: 203px;
    padding: 23px 32px 8px 21px;
    display: none;
}

#search {
    position: relative;
    height: 23px;
    width: 135px;
    padding-left: 10px;
    margin-top: -4px;
    margin-right: 6px;
    float: right;
    background: #EFEFEF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.searchStyle {
    float: right;
    background-color: transparent;
    background-image: url('../images/icon_search.png');
    background-repeat: no-repeat;
    background-position: 0px 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #372F2D;
    line-height: 12px;
    height: 12px;
    width: 115px;
    border-width: 0px;
    margin: 0px 0px 0px 5px;
    padding: 6px 0px 5px 15px;
}

/* Personalization Styles */

#personalization {
    display: none;
}

#welcome {
    font-size: 20px;
    padding: 0px 0px 5px 0px;
}

#greeting {
    font-size: 16px;
}

#personalizationPopupxy {
    position: fixed;
    width: 322px;
    z-index: 5000;
    top: 60px;
    left: 50%;
    margin: -5000px 0px 0px -161px;
    padding: 0px 1px 5px 1px;
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.75);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    overflow: auto;
    color: #F1F1F1;
}

    #personalizationPopupxy a {
        color: #F1F1F1;
        text-decoration: none;
    }

        #personalizationPopupxy a:hover {
            color: #FFFFFF;
            text-decoration: underline;
        }

.personalizationPopupTitle {
    font-size: 14px;
    text-align: center;
    margin-bottom: 14px;
    margin-top: 14px;
}

#personalizationPopup p {
    margin: 3px 10px 3px 10px;
    padding: 3px 0px 3px 0px;
}

#personalizationPopupx {
    position: absolute;
    width: 16px;
    z-index: 40;
    top: 0px;
    right: 0px;
    display: block;
    padding: 3px;
    font-weight: bold;
    margin-top: -2px;
    font-size: 14px;
}

    #personalizationPopupx a:hover {
        background-position: 0px -16px;
    }

#personalizationPopup {
    padding: 5px 30px 15px 30px;
    background: #FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    overflow: auto;
    color: #000000;
}

    #personalizationPopup h1 {
        display: block;
        font-size: 20px;
        padding: 5px 0px 3px 0px;
        margin: 0px 0px 2px 0px !important;
        text-transform: uppercase;
        font-weight: normal;
        text-align: left;
    }

    #personalizationPopup p {
        font-size: 12px;
        line-height: 14px;
        padding: 3px 0px 3px 0px;
        margin: 2px 0px 7px 0px;
        text-align: left;
    }

    #personalizationPopup label {
        display: inline-block;
        margin: 0px 15px 0px 0px;
    }

    #personalizationPopup a {
        font-size: 12px;
        text-decoration: none;
        color: #666666;
    }

        #personalizationPopup a:hover {
            text-decoration: underline;
            color: #666666;
        }

#personalizationName {
    width: 250px;
}

#personalizationForm {
    margin: 0;
    padding: 0;
}

#personalizationPopupSubmitBtn {
    padding: 2px 10px 2px 10px;
}

.personalizationPopupClosePerm {
    display: block;
    margin-top: 8px;
}

/************Image Accordion ***********************/
.aim {
    position: relative;
    overflow: hidden;
    margin: 0;
    clear: both;
    padding: 0
}

    .aim a {
        background-position: center center;
        cursor: pointer;
        display: block;
        overflow: hidden;
        position: relative;
        float: left;
        text-decoration: none
    }

        .aim a:hover, .aim a:visited {
            text-decoration: none
        }

    .aim ul {
        list-style: none
    }

    .aim li {
        display: block;
        overflow: hidden;
        float: left;
    }

    .aim a span {
        color: #FFFFFF;
        bottom: 10px;
        left: 20px;
        width: 100%;
        display: block;
        padding: 5px 15px;
        position: absolute;
        font-size: 18px;
        font-weight: bold;
        border-radius: 5px;
    }
/**  Site Notice **/
#notice {
    font-size: 14px;
    color: #fff;
    background-color: #ff6600;
    overflow: hidden;
    height: auto;
    -webkit-transition: max-height .75s ease-in-out;
    -moz-transition: max-height .75s ease-in-out;
    -ms-transition: max-height .75s ease-in-out;
    -o-transition: max-height .75s ease-in-out;
    transition: max-height .75s ease-in-out;
    max-height: 0px;
}

    #notice.active {
        -webkit-transition: max-height .75s ease-in-out;
        -moz-transition: max-height .75s ease-in-out;
        -ms-transition: max-height .75s ease-in-out;
        -o-transition: max-height .75s ease-in-out;
        transition: max-height .75s ease-in-out;
        max-height: 300px;
    }

    #notice table {
        margin: 0 auto;
    }

        #notice table tr td {
            border: none;
        }

#noticeHtml table td {
    padding: 10px;
    text-align: center;
    /*box-shadow:inset 0px -1px 0px rgba(0,0,0,.25), inset 0px 1px 0px rgba(255,255,255,.5);*/
}

#noticeHtml p {
    padding: 5px 0;
    margin: 3px 0;
}

#noticeHtml {
    overflow: hidden;
    color: #fffff4;
}

#notice.active #noticeHtml {
    box-shadow: 0px 1px 10px rgba(0,0,0,.25);
}

#noticeHtml a {
    color: rgba(255,255,255,.5);
    font-family: 'Open Sans Bold', Arial, Helvetica, sans-serif;
    text-decoration: none;
}

    #noticeHtml a:hover {
        color: rgba(255,255,255,.75);
    }

#noticeHtml td.rev {
    background-color: transparent;
}

#noticecloser, #noticeclosersession {
    display: block;
    float: right;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

    #noticecloser:before {
        content: "x";
        font-size: 24px;
        font-family: sans-serif;
        font-weight: bold;
    }

    #noticeclosersession:before {
        content: "_";
        font-size: 24px;
        font-family: sans-serif;
        font-weight: bold;
    }

.sitenoticetable {
    padding: 10px 0 5px 0;
    background-color: #FFCE34;
    color: #615A55;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}
/** Captcha Styles ***/

.captchaField.default {
    overflow: auto;
    margin: 0 auto;
}

    .captchaField.default .captchaFieldNumbers {
        height: 44px;
        padding: 0px 20px;
        text-align: center;
        background-image: url(../images/captcha/securityBg.jpg);
    }

    .captchaField.default .captchaFieldBoxLeft {
        height: 73px;
        width: 39px;
        background-image: url(../images/captcha/capFrameLeft.png);
        float: left;
    }

    .captchaField.default .captchaFieldBoxMid {
        height: 73px;
        padding: 14px 0 0 0;
        float: left;
        position: relative;
    }

    .captchaField.default .captchaFieldBoxMidOverlay {
        width: 100%;
        height: 73px;
        padding: 14px 0 0 0;
        background-image: url(../images/captcha/capFrameMid.png);
        background-repeat: repeat-x;
        position: absolute;
        top: 0;
        left: 0;
    }

    .captchaField.default .captchaFieldBoxMidOverlaySecure {
        width: 100%;
        height: 44px;
        margin: 14px 0 0 0;
        background-image: url(../images/captcha/SO1.gif);
        position: absolute;
        top: 0;
        left: 0;
        opacity: .25;
    }

    .captchaField.default .captchaFieldBoxRight {
        height: 68px;
        width: 78px;
        padding: 5px 0 0 9px;
        background-image: url(../images/captcha/capFrameRight.png);
        float: left;
    }

    .captchaField.default .captchaFieldRefresh {
        display: block;
        height: 29px;
        width: 34px;
        padding: 5px 0 0 9px;
        background-image: url(../images/captcha/capFrameBtn.png);
        background-position: 0 0;
        cursor: pointer;
        float: left;
    }

        .captchaField.default .captchaFieldRefresh:hover {
            background-position: -43px 0;
        }

input#captchaAnswer {
    margin-top: 5px;
}
/** Plain **/

.captchaField.plain {
    margin: 0 auto 8px auto;
    border-radius: 2px;
    overflow: hidden;
}

    .captchaField.plain .captchaFieldNumbers {
        height: 44px;
        padding: 0px 20px;
        text-align: center;
        background-image: url(../images/captcha/securityBg.jpg);
        width: 100%;
        box-sizing: border-box;
    }

    .captchaField.plain .captchaFieldBoxLeft {
        display: none;
    }

    .captchaField.plain .captchaFieldBoxMid {
        height: 44px;
        position: relative;
    }

    .captchaField.plain .captchaFieldBoxMidOverlay {
        display: none;
    }

    .captchaField.plain .captchaFieldBoxMidOverlaySecure {
        width: 100%;
        height: 44px;
        margin: 0;
        background-image: url(../images/captcha/SO1.gif);
        position: absolute;
        top: 0;
        left: 0;
        opacity: .25;
    }

    .captchaField.plain .captchaFieldBoxRight {
        width: 0;
        padding: 0;
    }

    .captchaField.plain .captchaFieldRefresh {
        position: absolute;
        top: 3px;
        left: 0;
        display: block;
        height: 44px;
        width: 100%;
        padding: 0;
        background-image: url(../images/captcha/spacer.gif);
        background-position: 0 0;
        cursor: pointer;
    }

        .captchaField.plain .captchaFieldRefresh:hover {
            background-position: -43px 0;
        }

/* Online Banking 1.4.0 by JP Larson, Copyright 2018 Fiserv. All rights reserved. */
#login,
#login form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#login {
    padding: 1em 0;
    box-sizing: border-box;
    font-size: 0.75rem;
    position: relative;
    z-index: 340;
    align-content: center;
    width: 100%;
    justify-content: flex-end;
}

@media only screen and (min-width: 670px) {
    #login {
    }
}

#login form {
    margin-bottom: 0.5em;
    justify-content: flex-end;
}

#login h2 {
    margin: 0 0.5em 0.5em 0;
    font-size: 1.667em;
    color: #0054A6;
}

#login label {
    margin: 0 0 0.25em 0;
    border-right: solid 1px #eee;
    position: relative;
    line-height: inherit;
    box-sizing: border-box;
    font-size: inherit;
}

#login form label {
}

#login label,
#login button {
    height: 3em;
}

#login button {
    border: none;
    margin: 0 0 0.25em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    padding: 0 0.75em;
    cursor: pointer;
    transition: background-color 0.25s ease;
    background-color: #0054A6;
    color: #fff;
    border: solid 1px #fff;
    margin-left: 0.5em;
}

    #login button span {
        display: block;
    }

    #login button:hover {
        background-color: rgba(0, 84, 166, 0.7);
    }

#login label span {
    display: none;
    font-size: 1.3333em;
    color: #666;
}

#login.personal [value="personal"] + span,
#login.business [value="business"] + span {
    color: #0054A6;
    font-weight: bold;
}

#login:not(.personal) .personal,
#login:not(.business) .business,
#login:not(.other) .other {
    display: none;
}

#login input:not([type=radio]):not([type=checkbox]),
#login select {
    border: none;
    box-sizing: border-box;
    border-radius: 0;
    padding: 0 1em;
    background-color: #fff;
    height: 100%;
    font-size: inherit;
    font-family: inherit;
    transition: background-color 0.25s ease;
    border: solid 1px #fff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    box-shadow: inset 0.25em 0.25em 0.25em #ccc;
    font-style: italic;
    padding-top: 0.25em;
    width: 10.5em;
}

#login label + label input:not([type=radio]):not([type=checkbox]) {
    border-left: none !important;
}

select::-ms-value {
    background: none;
    color: inherit;
}

#login select::-ms-expand {
    display: none;
}

#login input:not([type=radio]):not([type=checkbox]):focus {
    background-color: #eee;
}

#login ul {
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: center;
    width: calc(30.25em + 1px);
    margin: 0.25em 0;
}

    #login ul li {
        margin: 0;
        list-style-type: none;
    }

        #login ul li + li {
            margin-left: 1em;
            padding-left: 1em;
            border-left: solid 1px #0054A6;
        }

#login ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #333;
}

#login ::-moz-placeholder { /* Firefox 19+ */
    color: #333;
}

#login :-ms-input-placeholder { /* IE 10+ */
    color: #333;
}

#login :-moz-placeholder { /* Firefox 18- */
    color: #333;
}

#login fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    flex-grow: 0;
    width: calc(30.25em + 2px);
    text-align: center;
}

    #login fieldset legend {
        display: none;
        margin-bottom: 0.5em;
    }

    #login fieldset label {
        border: none;
        width: auto;
        display: inline-flex;
        flex-wrap: wrap;
        height: auto;
        overflow: hidden;
        cursor: pointer;
        padding: 0 0 0.5em 0;
        margin: 1em 0 0 0;
    }

        #login fieldset label + label {
            margin-left: 1em;
            padding-left: 1em;
            border-left: solid 1px #fff;
        }

        #login fieldset label:last-child {
            margin-right: 0;
        }

#login input[type=radio] {
    position: absolute;
    left: -12em;
    top: -12em;
    visibility: hidden;
}

    #login input[type=radio] + span::before {
        content: "";
        width: 1em;
        height: 1em;
        display: inline-flex;
        border-radius: 50%;
        border: solid 2px #666;
        margin-right: 0.5em;
        transition: background-color 0.25s ease;
        display: none;
    }

    #login input[type=radio]:checked + span::before {
        background-color: #666;
    }

    #login input[type=checkbox] + span,
    #login input[type=radio] + span {
        display: block;
    }

#login .valid::before {
    display: none;
}

#login label:last-of-type input:not([type=radio]):not([type=checkbox]) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

#login label {
    border: none;
}

#login input + span[class*=fa-],
#login select + span[class*=fa-] {
    position: absolute;
    display: flex;
    height: 100%;
    right: 0.5em;
    top: 0;
    align-items: center;
    font-size: 1.5em;
    pointer-events: none;
}
/* Border Radius */
#login.rounded-corners,
#login.rounded-corners.horizontal fieldset ~ form label:first-child input:not([type=radio]):not([type=checkbox]) {
    border-radius: 0.5em; /*Change the border-radius here. */
}

    #login.rounded-corners input:not([type=radio]):not([type=checkbox]),
    #login.rounded-corners select,
    #login.rounded-corners button {
        border-radius: 0.5em; /*Change the border-radius here. */
    }

    #login.rounded-corners button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #login.rounded-corners.horizontal fieldset ~ form label:first-child input:not([type=radio]):not([type=checkbox]) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
/* Hide Password */
#login.hide-password form label + label {
    display: none;
}

#login.hide-password form label.valid + label {
    display: flex;
}

#login.hide-password label:not(.valid):not(.invalid) input:not([type=radio]):not([type=checkbox]) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

/* Horizontal Layout */
@media (min-width: 768px) {
    #login.horizontal {
        flex-direction: row;
    }

        #login.horizontal label {
        }

        #login.horizontal form {
            flex-grow: 0;
            flex-wrap: nowrap;
        }

        #login.horizontal input:not([type=radio]):not([type=checkbox]) {
            border-left-width: 0;
            border-right-width: 0;
        }

        #login.horizontal label + label input:not([type=radio]):not([type=checkbox]),
        #login.horizontal fieldset ~ form label:first-child input:not([type=radio]):not([type=checkbox]) {
            border-left-width: 1px;
        }

        #login.horizontal.rounded-corners form input:not([type=radio]):not([type=checkbox]) {
            border-radius: 0;
        }

        #login.horizontal.rounded-corners select {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
}

/* Validate Form 1.2.0 by JP Larson, Copyright 2018 Fiserv. All rights reserved. */
label::after,
fieldset::after {
    content: "Please fill out this field.";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font-size: 0.875em;
    display: block;
    z-index: 10;
    background-color: #666;
    padding: 0.5em;
    box-sizing: border-box;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

[data-error]::after {
    content: attr(data-error);
}

.invalid {
    z-index: 100;
    animation-name: slideShake;
    animation-iteration-count: 2;
    animation-duration: 0.0833s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

    .invalid input,
    .invalid select,
    .invalid textarea {
        box-shadow: 0 0 0 2px rgba(102, 102, 102, 1);
        border-color: transparent !important;
    }

    .invalid::after {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

.required,
.valid {
    position: relative;
}

    .required::before,
    .valid::before {
        content: "required";
        position: absolute;
        right: 0;
        bottom: 0;
        color: rgb(255, 102, 0);
        font-size: 0.6em;
        padding: 0.5em 0.75em;
        text-transform: uppercase;
        pointer-events: none;
    }

    .valid::before {
        content: "valid";
        color: rgb(102, 102, 102);
    }

@keyframes rotateShake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-1deg);
    }

    75% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes slideShake {
    0% {
        transform: translateX(0em);
    }

    25% {
        transform: translateX(-0.125em);
    }

    75% {
        transform: translateX(0.125em);
    }

    100% {
        transform: translateX(0em);
    }
}