/**************************************************/
/*                    WebFonts                    */
/**************************************************/



/**************************************************/
/*                     Layout                     */
/**************************************************/
body {
}

/*Contains all elements within the body*/
.wrapper {
	/*Fix for iPhones width */min-width:initial;
	/* Never make webpage less than 1100px wide */
	padding:0;
	max-width: inherit;
	color:#fff;
}

/*Contain all data area items other than Transactions on Account Page*/
main{
	padding-left:5%;
	padding-right:5%;
}

/*Contain all Transactions items, if needed copy the same styles from 'main' here*/
section div#transactions {

}

/*Contains the Utility Navigation, Banner, and Primary Navigation*/
header {

}

/*Banner*/
header div.grid__unit ~ div.grid__unit:nth-child(2) {

}

/*Define Logo Here*/
.bank-branding {
	/*Resets positioning left in by Development - kept in for In House banks*/
	position:relative;
	border-bottom:5px solid transparent;
	border-image:linear-gradient(90deg,#00843D 0%, #00843D 9%, #fff 9%, #fff 9.25%, #00A1DE 9.25%, #00A1DE 100%) 30;
	width:100%;
}

#logo{
	width:155px;
	margin:20px 50px;
}

/*Banner Ad*/
.cycle-slideshow, .carousel-fade{
	margin-top: 5px;
	width:100%;
	max-width: 1500px;
}

/*Used around data areas*/
.content--block{
    background-color:#ffffff;
	color:#000;
}

/*Additional Selectors For Data Tables*/
.content--block, #table--transactions, .checkfree-widget-container{

}
div[data-bind*="hasFinishedProcessing"], #tranLegend {

}
#transfer .content--block, #download .content--block, div.dropdown  .content--block{

}
div.dropdown  .content--block {

}

/*Padding For Checkfree Widget*/
.checkfree-widget-container {
	margin:0px;
	padding: 10px 0px 5px 0px;
}

/*Home Page Advertisement*/
.ad-container iframe{
	display:none;
}
.ad-container {
	width:100%;
	height:;
	background-image:;
	background-repeat:no-repeat;
	background-size:contain;
}

/**************************************************/
/*                     Font                       */
/**************************************************/
/*Fonts should only be defined as pixels on the html element. Other elements should use REM units.*/
html {
	font-size:14px;
}
body {
	font-family: "Helvetica Neue" ,Helvetica ,Arial, sans-serif ;
	font-size:1rem;
}

/*Link colors. To target data section only add main in front of the selector*/
a, a:visited {
	color:#018752;
}
a:hover, a:active {
	color:#3b8;
}
p {
    color:#000;
}
a.btn--acctCreate {
	font-size:1rem;
	color:#018752;
}
a.btn--acctCreate:hover {
	font-size:1.1rem;
	color:#777;
}

/*Negative Account Balance*/
.neg--balance {
	color:#ff0000;
}

/*Action Buttons*/
.btn--default{
	border:none;
	background-color:#00A1DE;
	border-radius:4px;
	color:#fff;
	transition:all .5s;
}
.btn--default:hover{
	background-color:#00b9ff;
	border-radius: 100px;
}

.btn--primary {
	border:none;
	background-color:#8cc63e;
	border-radius:4px;
	color:#fff;
	transition:all .5s;
}
.btn--primary:hover{
	border-radius: 100px;
}

.btn--link {
	color:#000;
}
.btn--link:hover {
	color:#777;
}

.btn--thead, .header--non-sortable, .table--underlined th {
	color:#ffffff;
}

/*Alerts*/
.badge {
	background:#fff;
	color:#000;
}

/*MFA*/
.mfa-divider {
	background:#dfdfdf;
}
.mfa-divider:before {
	background:#ffffff;
}

/*Data Tables*/
.text--plain {
	color:#000;
}
.slat {
	border-color:#555;
}
.table--underlined>thead>tr>th, .table--underlined>tbody>tr>th, .table--underlined>tbody>tr>td {
	border-bottom:1px solid #555;
}
.table--underlined>thead tr:last-child th {
	border-bottom-width:2px;
}
.table--underlined>tbody tr:last-child td, .table--underlined .no-border {
	border-bottom-width:0;
}
.table--underlined>tfoot td {
	border-top:1px solid #555;
}
thead th {
	background: #018752;
	color:#fff;
}

/*Data Table Odd/Even Row Background Colors*/
#table--transactions tbody tr:nth-child(odd), .table--trans-recent tbody tr:nth-child(odd), #scheduled-transfers .table--underlined tbody tr:nth-child(odd), #stopPaymentList .table--underlined tbody tr:nth-child(odd), .table--underlined tbody tr:nth-child(odd) {
	background:#fff;
}
#table--transactions tbody tr:nth-child(even), .table--trans-recent tbody tr:nth-child(even), #scheduled-transfers .table--underlined tbody tr:nth-child(even), #stopPaymentList .table--underlined tbody tr:nth-child(even), .table--underlined tbody tr:nth-child(even) {
	background:#dff;
}

.arrow {
	border-color:#dfdfdf;
}
.arrow--top-right:after {
	border-bottom-color:#dfdfdf;
}

/*OPTIONAL FONTS*/
/*Data Area Header Dropdown - Account page*/
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li , main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li a {

}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li , main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li a:hover {

}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li {

}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li:hover {

}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li:hover a{

}
input, select {

}
h1, h2, h3, .h1, .h2, .h3 {
	color:#018752;
}
h4, h5, h6, .h4, .h5, .h6 {
	color:#000;
}
h1, .h1 {
	font-size:1.71rem;
}
h2, .h2 {
	font-size:1.43rem;
}
h3, .h3 {
	font-size:1.28rem;
}
h4, .h4 {
	font-size:1.14rem;
}
h5, .h5 {
	font-size:1rem;
}
h6, .h6 {
	font-size:.86rem;
}

/*Various alerts messages */
.alert--error {
	background:#fbeae9;
	border-color:#f7d6d3;
	color:#ad3123;
}
.alert--info {
	background:#d9edf7;
	border-color:#bce8f1;
	color:#2e6a87;
}
.alert--success {
	background:#dff0d8;
	border-color:#d6e9c6;
	color:#3a703c;
}
.alert--warning {
	background:#fffdd5;
	border-color:#ffe89e;
	color:#8c6b33;
}
.text--error {
	color:#ad3123;
}
.text--info {
	color:#2e6a87;
}
.text--muted {
	color:#999;
}
.text--success {
	color:#3a703c;
}
.text--warning {
	color:#8c6b33;
}

/***** use this section when you need to target the eStatement Terms and Conditions link *****/
section a[href*="ElectronicStatements"] {}


/**************************************************/
/*            Utility Navigation                  */
/**************************************************/
/*Position of Utility Section*/
header div.grid:nth-child(1)  div.grid__unit:nth-child(1) {
	background:#018752;
}

/*Welcome Message*/
.message--welcome {
	position: absolute;
	top:55px;
	right:15px;
}
.message--welcome p {

}
.nav--utility ul{
	display:flex-box;
	display:flex;
	justify-content: flex-end;

}
/*Utility Navigation Buttons*/
#utilitySection, .nav--utility, .nav--utility > ul{
	width:100%;
}
.nav--utility li {

}
.nav--utility a{
	padding:3px 15px;
	color:#fff;
}
.nav--utility a:hover {
	/*color:#aaa;*/
	opacity: .5;
}

/**************************************************/
/*            Primary Navigation                  */
/**************************************************/
/*Primary Navigation Positioning*/
header div.grid__unit ~ div.grid__unit:nth-child(3) {
	position:absolute;
    right: 15px;
    top: 55px;
    max-width: calc(100% - 500px);
    float: right;
    margin-right: 230px;
}

/*Navigation Buttons*/
.nav--primary li {

}
.nav--primary li a{
	color:#868f98;
}
.nav--primary li a:hover, .nav--primary li.is--selected a {
	color:#000;
}
.nav--primary a {

}

/**************************************************/
/*            Account Navigation                  */
/**************************************************/
.nav--account {

}
.nav--account li a {
	background:#8CC63E;
	border-radius: 100px !important;
	box-shadow: 2px 2px 2px #555;
	transition: all .5s;
	text-align: center;
	color:#fff;
}
.nav--account li a:hover, .nav--account li.is--selected a {
	box-shadow: none;
	background:#590
}
/**************************************************/
/*                   Footer                       */
/**************************************************/
.page--footer {
	background: #868F98;
	border-top:15px solid #9DC664;
}
footer nav{

}
footer p {
	color:#fff;
}
footer a {
	color:#fff !important;
	text-decoration: underline !important;
}
footer a:hover{
	text-decoration: none !important;
	color:#ddd !important;
}
#footerText{
	padding:15px;
}
#footerText:before{
	width:110px;
	height:40px;
	margin-bottom:-30px;
	background:url('fdic.png') no-repeat;
	background-size: contain;
}


/**************************************************/
/*                Media Queries                   */
/**************************************************/
@media screen and (min-width:1500px){
	.cycle-slideshow, .carousel-fade{
		margin-right:calc(50% - 750px);
	}
}
@media screen and (max-width:1100px){
	header div.grid__unit ~ div.grid__unit:nth-child(3) {
		max-width: calc(100% - 450px);
	}
}
@media screen and (max-width:1500px){
	header div.grid__unit ~ div.grid__unit:nth-child(3) {
		max-width: calc(100% - 400px);
	}
	.nav--primary li a{
		padding: 6px 20px !important;
	}
	#logo{
		margin-left:15px;
	}
}
@media screen and (max-width:950px){
	.nav--primary li a{
		padding: 6px 15px !important;
	}
}
@media screen and (max-width:900px){
	main{
		padding-left:1%;
		padding-right:1%;
	}
	.nav--utility ul{
		display: flex;
		justify-content: space-around;
	}
	header div.grid__unit ~ div.grid__unit:nth-child(3) {
		margin-right: 0;
	    width: 100%;
	    max-width: unset;
	    position: initial;
	}
	.nav--primary li{
		width:100%;
	}
	.nav--primary li:not(:last-of-type){
		border-bottom:1px solid #fff;
	}
	.nav--primary li a{
		width:100%;
		text-align: center;
		color:#fff;
		font-weight: bold;
		background:#9DC664;
	}
	.nav--primary li a:hover{
		background:#8b5;
	}
}
@media screen and (max-width: 599px) {
	html {
		font-size:12px;
	}
	
	/*Add "mobile" logo here*/
	.bank-branding {

	}
	.wrapper {
		min-width:90%;
		padding:0px;
	}
	main {
		padding:10px;
	}
	.nav--primary li {
		border-bottom: 1px solid #ffffff;
	}
}
@media screen and (max-width: 430px) {
	#logo{
		width:155px;
		margin:20px 15px;
	}
}
@media screen and (max-width: 380px) {
	#logo{
		width:155px;
		margin:20px 5px;
	}
	.message--welcome {
		right:0;
		top:50px;
	}
	.nav--utility li a{
		width:45px;
	}
}
@media screen and (max-width: 360px) {
	html {
		font-size:10px;
	}
	thead th, td {
		padding: 0px 2px;
		font-size: 1rem;
	}
}
@media screen and (max-width: 330px) {
	#logo{
		margin-bottom: 50px;
	}
	.bank-branding{
		text-align: center;
	}
	.message--welcome {
	    top: 95px;
	    width: 100%;
	    text-align: center;
	}
}
@media screen and (max-width: 300px) {
	.nav--utility li a{
    	width: 43px;
	}
}

/* Print CSS */
@media print {
	html, body, h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6 {margin:0; padding:0; border:none;}
  /* Font Adjustments */
	html {font-size:9pt;}
	body {font-family:Arial, Helvetica, Verdana, sans-serif;	font-size:1rem; line-height:1.5rem;}
	h1, .h1 {font-size:1.3rem;}
	h2, .h2  {font-size:1.2rem;}
	h3, .h3 {font-size:1.1rem;}
	h4, .h4, h5, .h5, h6, .h6  {font-size:1rem;}
	a , a:visited {color:#000; text-decoration:underline;}
	p {font-size:1rem;}
	a.btn--acctCreate {font-size:1rem;}
	.btn--default {font-size:1rem; border:1px #888 solid;}
	.btn--link {font-size:1rem;}
	.btn--primary, a.btn--primary {font-size:1rem; border:1px #888 solid;}
	th, td {padding:3px 6px;}
  /* Elements */
	/* Header (Hides Logo and Banner Ads) */header{/*display:none;*/} 
	/* Logo */.bank-branding {position:initial; margin:0; padding:0 0 5px 0;}
	/* Enables Logo for Print Page */#logo {display:inherit;}
	/* Banner Ads */.slides {display:none;} 
	/* Footer */.page--footer{display:none;}  
	
  /* Additional Customizations */
	div#transactions {padding:0;} /* Remove padding for Transactions Div */
	[data-ui-component="account-details"] {margin:0;} /* Remove bottom margin for Account Info */
}

/**************************************************/
/*                 Icons Utility nav               */
/**************************************************/
@media screen and (min-width: 900px){   
	.nav--utility li:nth-child(1) a{
		background: transparent url('contact.png') left no-repeat; padding-left:20px;
	}
	.nav--utility li:nth-child(2) a{
		background: transparent url('location.png') left no-repeat; padding-left:20px;
	}
	.nav--utility a[href*="Alert"] {
	    background: transparent url('alert.png') left no-repeat; padding-left:20px;
	}
	.nav--utility a[href*="Mail"] {
	    background: transparent url('mail.png') left no-repeat; padding-left:20px;
	}
	.nav--utility a[href*="Chat"] {
	    background: transparent url('chat.png') left no-repeat; padding-left:20px;
	}
	.nav--utility a[href*="Profile"] {
	    background: transparent url('profile.png') left no-repeat; padding-left:20px;
	}
	.nav--utility a[href*="Logout"] {
	    background: transparent url('logout.png') left no-repeat; padding-left:20px;
	}
	.nav--utility a[href*="Login"] {
	    background: transparent url('login.png') left no-repeat; padding-left:20px;
	}
}
@media screen and (max-width: 900px){   
	.nav--utility li:nth-child(1) a{
		content:url('contact32.png');
	}
	.nav--utility li:nth-child(2) a{
		content:url('location32.png');
	}
	.nav--utility a[href*="Alert"] {
	    content:url('alert32.png');
	}
	.nav--utility a[href*="Mail"] {
	   content:url('mail32.png');
	}
	.nav--utility a[href*="Chat"] {
	   content:url('chat32.png');
	}
	.nav--utility a[href*="Profile"] {
	    content:url('profile32.png');
	}
	.nav--utility a[href*="Logout"] {
	    content:url('logout32.png');
	}
	.nav--utility a[href*="Login"] {
	    content:url('login32.png');
	}
}