/* *****************************************************************************
	ATTENTION!
	
	With responsive design we want to create some general rules for screen sizes
	and what that should mean in regards to layout.  The following thresholds
	will give us some consistency:
	
		Phone Views: 			0-640px 	 (max-width: 640px)
		Table Portrait Views: 	641px-790px  (max-width: 790px)
		Tablet Landscape Views: 791px-1024px (max-width: 1024px)
		
***************************************************************************** */
@import "../../chat-partners/chat.usb.css";

body {
	color: #666666;
}

/*************************** Header ***************************/

.topWrapper a:link {
	color:#19398a;
}

.topWrapper a:visited {
	color:#19398a;
}

.topWrapper a:hover {
	color:#19398a;
}

.topWrapper a.active {
	color:#19398a;
}

/*************************** Navigation Bar ***************************/

.navMenuWrapper,	
.authTopNav li,
.unauthTopNav li	{
	background: url("/onlineCard/static/elan/img/elanNavBG.png");
	background-repeat:repeat-x; 
	border-bottom:1px solid #999;
}

.activeMenuItem {
	background-color:#19398a; 
}
.inactiveTab {
	background-color: #EBEBEB;
}
ul.leftNav li.activeMenuItem a.activeMenuItem,
ul.leftNav li.activeMenuItem a.activeMenuItem:link,
ul.leftNav li.activeMenuItem a.activeMenuItem:hover,
ul.leftNav li.activeMenuItem a.activeMenuItem:visited,
ul.leftNav li.activeMenuItem a.activeMenuItem:active {
	color: #FFFFFF;
}
ul.leftNav li a,
ul.leftNav li a:link,
ul.leftNav li a:hover,
ul.leftNav li a:visited,
ul.leftNav li a:active {
	color:#4D4F53;
}

ul.leftNav li {
	border-right: 1px solid #cfcfcf; 
	cursor:pointer;
}
ul.leftNav li.leftMost {
	border-left: 1px solid #cfcfcf; 
}

/*************************** Footer ***************************/

.bottomWrapper {
    color:#FFFFFF;
    background-color:#666666;
}
.bottomWrapper a:link,
.bottomWrapper a:visited,
.bottomWrapper a:hover,
.bottomWrapper a:active {
	color: #FFFFFF;
}

.footer a:link,.footer a:active,.footer a:visited {
	color:#FFFFFF;
}

#layoutSecurityStandardsMessageArea {
	color: White;
}
#layoutCopyrightMessageArea {
	color: White;
}

a.securityStdLink:link,a.securityStdLink:active,a.securityStdLink:visited {
	color:#FFFFFF
}


/*************************** Button ***************************/


.tranCoreButton, btn,
button[data-svc-action].svc-btn,
input[type="button"][data-svc-action].svc-btn,
input[type="submit"].svc-btn,
.svc-btn-primary, 
.svc-btn-secondary,
.svc-layout-container .form-field > a[type="submit"],
 .svc-layout-container .form-field > a[type="submit"]:hover{
    border:0px;
    display:inline-block;
    font-weight: bold;
    vertical-align:middle;
    text-align:center; 
    /*white-space:pre;  -- causing buttons on the trancore transDetails to be huge.*/
    /* background: #2989d8;  Old browsers
	 IE9 SVG, needs conditional override of 'filter' to 'none' 
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	*/
	background-color:#19398a;
	color:White; 
  	-webkit-appearance: none;
  	-webkit-border-radius: 0;
  	text-transform: uppercase;
  	font-size:0.917em;
  	padding: 10px;
  	margin-right: 10px;
}

.tranCoreButton:hover {
    cursor:pointer;
}
 
.tranCoreButton:active {
	
}

.tranCoreButtonDisable, 
.tranCoreButton:disabled, 
.btn:disabled,
button[data-svc-action].svc-btn:disabled,
input[type="button"][data-svc-action].svc-btn:disabled,
input[type="submit"].svc-btn:disabled,
.svc-btn-primary:disabled, 
.svc-btn-secondary:disabled {
	
	color: #4D4F53;
		background-color:#ebebeb;
}

/*************************** Body Box ***************************/


.middleWrapper {
    background-color:#D7D7D7;
}

#layoutPageContent {
	background-color: White;	<!--stmxx-->
}

.middleWrapper a:link {
	color: #19398a;
}

button::-moz-focus-inner {
padding: 0;
border: 0;
}

.middleWrapper a.tranCoreButton,
input.tranCoreButton
button.tranCoreButton {
	line-height: inherit; }

.middleWrapper a.tranCoreButton:link, .middleWrapper a.tranCoreButton:visited, .middleWrapper a.tranCoreButton:hover, .middleWrapper a.tranCoreButton:active {
	color: #ffffff;
	text-decoration: none;
}
.middleWrapper #layoutContentBody a.tranCoreButton:link {
	color: #ffffff;
	text-decoration: none;
}
.middleWrapper a:visited {
	color: #19398a;
}
.middleWrapper #layoutContentBody a.tranCoreButton:visited {
	color: #ffffff;
	text-decoration: none;
}
.middleWrapper a:hover {
	color: #19398a;
}
.middleWrapper #layoutContentBody a.tranCoreButton:hover {
	color: #ffffff;
	text-decoration: none;
}
.middleWrapper a:active {
	color: #19398a;
}
.middleWrapper #layoutContentBody a.tranCoreButton:active {
	color: #ffffff;
	text-decoration: none;
}
.middleWrapper a {
	color: #19398a;
}
.middleWrapper a.tranCoreButton {
	color: #ffffff;
	text-decoration: none;
}

.middleWrapper .label {
	color: #4D4F53;
}

.middleWrapper .fieldtitle {
	color: #4D4F53;
}

#layoutDateMessageArea {
	color:#4D4F53;
}

#layoutHeaderContainer .contentAreaSubHeader {
	color:#4D4F53;
}
.middleWrapper h2.contentAreaSubHeader {
	color:#4D4F53;
	/*text-transform: capitalize;*/
}

h2.contentAreaSubHeader {
	margin: 0px;
	padding: 0px;
}

.middleWrapper h1, h2, h3, h4, h5, h6, .contentAreaTitleSection {
	color: #4D4F53;
}


div#layoutContentWrapper { 
	opacity:;
 	/* filter:alpha(opacity=0);  For IE8 and earlier */
}


/*************************** Table Info Box ***************************/

.table_header_coloring {
	color:White;
	background-color:#19398a;
}

.column_header_coloring {
	color:#19398a;
}

.column_header_coloring a:link {
	color:White;
}

.column_header_coloring a:visited,
.column_header_coloring a:active {
	
}

.column_header_coloring a:hover {
	color:White;
}

th {
	color:#4D4F53;
	background-color:#FFFFFF
}

.vcp_transactionDetail_Type {
	color:White
}

.tc_Table tr.odd {
	background-color:#ebebeb;
}

/*************************** Login / Unauthenticated ***************************/

#loginEnhancement {
	background-color: #D7D7D7;
}

.loginTitle {
    color:#FFFFFF;
    /* background-color:#4D4F53; */
    background:url("/onlineCard/static/elan/img/bar_gradient.png") repeat-x #4D4F53;
}

/****************************** Carousel Box **********************************/
.bx-wrapper .bx-viewport {
	border: none;
	left: 0px; 
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
	bottom: 20px;
	width: 95%;
	text-align: right;
	font-size: 0px;
}
.bx-pager-item {
}
.bx-wrapper {
	margin: 0 auto;
}
ul.bxslider {
	position: relative;
	margin: 0;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	color: #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: none repeat scroll 0 0 #19398A;
}

/*************************** User Info Box ***************************/

.welcomeMessageArea {
    color:#4D4F53;
    background-color:;
   	background: -moz-linear-gradient(top,  0%,  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,), color-stop(100%, )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  0%,  100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  0%,  100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  0%,  100%); /* IE10+ */
	background: linear-gradient(to bottom,  0%,  100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='',GradientType=0); /* IE6-8 */
	
}

.vcp_welcomeUser_links a:link {
	color:#19398a;
	text-decoration:none;
}

.vcp_welcomeUser_links a:link img {
	background-color:#19398a;
}

.vcp_welcomeUser_links a:active,
.vcp_welcomeUser_links a:visited {
	color:#19398a;
}

.vcp_welcomeUser_links a:active img,
.vcp_welcomeUser_links a:visited img {
	background-color:#19398a;
}

.vcp_welcomeUser_links a:hover {
	color:#19398a;
}

.vcp_welcomeUser_links a:hover img {
	background-color:#19398a;
}

.vcp_welcomeUser_attention {
	color:#EE0000 !important;
}

.vcp_welcomeUser_attention img {
	background-color:#EE0000 !important;
}

.vcp_welcomeUser_links_tablet a {
	background-color:;
    background: -moz-linear-gradient(top,  0%,  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,), color-stop(100%, )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  0%,  100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  0%,  100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  0%,  100%); /* IE10+ */
	background: linear-gradient(to bottom,  0%,  100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='',GradientType=0); /* IE6-8 */
	color:;
}

.welcomeMessageArea .tranCoreButton {
	background-color:;
	background: -moz-linear-gradient(top,  0%,  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,), color-stop(100%, )); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  0%,  100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  0%,  100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  0%,  100%); /* IE10+ */
	background: linear-gradient(to bottom,  0%,  100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='',GradientType=0); /* IE6-8 */
	color:; */
}

/*************************** Transaction Details Specific Styles ***************************/

.vcpTransDetailsImage {
	background-color:#19398a;
	background: -moz-linear-gradient(top, #19398a 0%, #19398a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19398a), color-stop(100%, #19398a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #19398a 0%, #19398a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #19398a 0%, #19398a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #19398a 0%, #19398a 100%); /* IE10+ */
	background: linear-gradient(to bottom, #19398a 0%, #19398a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19398a', endColorstr='#19398a',GradientType=0); /* IE6-8 */
}

.topNavSmall {
    background-color: #19398a;
}

#tc_accountSummaryHeader {
	color: #FFFFFF;
    background:url("/onlineCard/static/elan/img/theme/elan1/bar_gradient.png") repeat-x #555555;
}

.printerFriendlyTransactionDetailsHeader {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left:1%;
    background:url("/onlineCard/static/elan/img/theme/elan1/bar_gradient.png") repeat-x;
	color: #FFFFFF;
	font-weight: bold;
}
.printerFriendlyTransactoinDetailsDateRange {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 2%;
}

/*************************** Alert Specific Styles ***************************/

.tab {
    text-transform: uppercase;
}

.selected-tab {
    background-color: #19398a;
}

.selected-tab a {
    color: #FFFFFF;
}

/* ************************* TABLET LANDSCAPE VIEW ************************** */
@media only screen and (max-width: 1024px) {

}

/* ************************** TABLET PORTRAIT VIEW ************************** */
@media only screen and (max-width: 790px) {

}

/* ******************************* PHONE VIEW ******************************* */
@media only screen and (max-width: 640px) {
	/*************************** Navigation Bar ***************************/

	.activeMenuItem {
		background-color:#FFFFFF; 
	}
	.inactiveTab {
		background-color: #373739;
	}
	ul.leftNav li.activeMenuItem a.activeMenuItem,
	ul.leftNav li.activeMenuItem a.activeMenuItem:link,
	ul.leftNav li.activeMenuItem a.activeMenuItem:hover,
	ul.leftNav li.activeMenuItem a.activeMenuItem:visited,
	ul.leftNav li.activeMenuItem a.activeMenuItem:active {
		color: #373739;
	}
	ul.leftNav li a,
	ul.leftNav li a:link,
	ul.leftNav li a:hover,
	ul.leftNav li a:visited,
	ul.leftNav li a:active {
		color:#FFFFFF;
	}

	ul.leftNav li.activeMenuItem {
		background-color:#FFFFFF; 
	}
	ul.leftNav li {
		background-color:#373739; 
	}
	
	ul.leftNav li {
		border-right: 0px;
	}
	ul.leftNav li.leftMost {
		border-left: 0px; 
	}

	ul#navTabs li {
    	border-right: none;
    	border-top: 1px solid #EBEBEB;
		border-bottom: 1px solid #EBEBEB;
	}
	ul#navTabs li.activeMenuItem {
		background-color: #19398a;
	}
	ul#navTabs li.inactiveTab {
		background-color: #FFFFFF;
	}
	ul#navTabs li.activeMenuItem a {
		background-color: #19398a;
		color: #FFFFFF;
	}
	ul#navTabs li.inactiveTab a {
		background-color: #FFFFFF;
		color: #4D4F53;
	}
	.optionsSmallCell {
		display: table-cell;
		background-color: #D7D7D7;
		line-height: 34px;
		text-align: center;
		width: 50%;
		cursor: pointer;
	}
	.lastNavLink {
		border-bottom: 1px solid #373739;
	}
	.navMenuWrapper {
		background-image: none;
		background-color: none;
		border: none;
	}

	.tranCoreButton {
	  	margin-bottom: 10px;
	}
}

/* ******************************* LAYOUT RELATED ******************************* */
.usb-app div.loginSpacer {
    position: relative;
    width: 2%;
    float: left;
}
@media only screen and (max-width: 640px) {
    .usb-app div.loginSpacer {
        display: none;
    }
    
}

.usb-app .tab a, .usb-app .tab a:hover, .usb-app .tab > span, .usb-app .tab > span:hover {
    color: #4D4F53;
    font-weight: bold;
    font-size: 1.167em;
}
.usb-app .selected-tab a, .usb-app .selected-tab a:hover, .usb-app .selected-tab > span, .usb-app .selected-tab > span:hover {
    color: #fff;
}
.usb-app .alerts .tranCoreButton.disabled {
    background-color: #ebebeb;
    color: #4D4F53;
}

@media only screen and (max-width: 640px) {
	
	    .usb-app div.loginBox {
	    	width: 96%;
			border-width: 0px;
	    }
	
		.usb-app .loginForm, .loginTitle {
			width: 100%;
		}

		.usb-app div.loginSpacer {
			display: none;
		}
		
	}

.usb-app a img {
border:  none;
}

.usb-app #ieUpgradeMask {
display: none;
background: #000000;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
filter:alpha(opacity=50);
opacity: .5;
}

.usb-app #ieUpgradeMaskFrame {
display: none;
width: 100%;
position: absolute;
z-index: 999;
height: 100%;
top: 0;
left: 0;
filter:alpha(opacity=0);
opacity: 0;
}

.usb-app #ieUpgrade {
display: none;
width: 500px;
background: #ffffff;
z-index: 1010;
position: absolute;
top: 20px;
border: 1px solid red;
padding: 10px 25px 10px;
}

.usb-app #ieUpgrade h1 {
color: #646262;
font-weight: bold;
font-size: 16px;
margin: 0;
padding: 0;
clear: both;
}

.usb-app #ieUpgrade .upgradeContent {
color: #646262;
font-size: 12px;
text-align: left;
padding-top: 10px;
}


.usb-app #ieUpgrade .upgradeClose {
margin: 0 0 10px;
color: #226afb;
font-weight: bold;
font-size: 14px;
}

.usb-app #ieUpgrade .upgradeCloseX {
margin: 0 0 10px;
color: #226afb;
font-weight: bold;
font-size: 14px;
float: right;
color: red;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}

.usb-app #upgradeCloseLink {
cursor: pointer;
text-decoration: underline;
}

.usb-app #ieUpgrade .upgradeBrowsers {
margin: 0 auto;
text-align: center;
}

.usb-app #ieUpgrade .upgradeBrowsers img {
margin: 0 10px;
}

.usb-app #upgradeBrowsersLinks {
list-style-type: none;
text-align: center;
margin-left: 10px;
height: 100px;
}

.usb-app #upgradeBrowsersLinks li{
float: left;
color: #226afb;
font-size: 11px;
}

.usb-app #upgradeBrowsersLinks li a{
text-decoration: none;
color: #226afb;
font-size: 11px;
}

/*for slider on mobile, slides are not extending to correct width*/
ul.bxslider:after {
	content: '.';
	visibility: hidden;
	display: block;
	clear: both;
	height: 0;
}
.bx-wrapper img {
	min-width: 100%;
}

#shieldLibraryComponent .usb-button.button--primary , #shieldLibraryComponent .tooltip__content--dark{
    background: #D93F4D;
    color: #ffffff;
}

#shieldLibraryComponent .form-control__radio .input__container input[type="radio"]:checked {
	border: 2px solid #D93F4D;
	background-color: #D93F4D;
  }

/*Trancore body color*/
#shieldLibraryComponent .usb-accordion .accordion-panel__header,
#shieldLibraryComponent .usb-accordion .accordion-panel__content{
color: #666666;
}
#chatCta, #chatCta:hover,#chatCta:focus, #shieldLibraryComponent .usb-button.button--primary.chatCta,
#shieldLibraryComponent .usb-button.button--primary.chatCta:hover, 
#shieldLibraryComponent .usb-button.button--primary.chatCta:focus,
#shieldLibraryComponent .usb-button.button--primary.chatCta:focus:before,
#shieldLibraryComponent .usb-button.button--primary.chatCta:active
.usb-button.chatCta:focus:before,
.usb-button.button--primary.chatCta:active,
.usb-button.button--primary.chatCta:hover,
.usb-button.button--primary.chatCta:focus,
#shieldLibraryComponent .usb-button.button--primary.chatCta:active,
.usb-button.chatCta:focus:before,
.tranCoreButton.chatCta:hover{
    background-color: #19398a;
    background:#19398a;  
    font-size: 11px;
    border-radius: 0px;
}
button.sendBtn{
background: #19398a;
}
div.floatingBtn, button.floatingBtn{
background-color: #19398a;
font-family: arial, sans-serif;
}
.tranCoreButton.chatCta:disabled, #chatCta:disabled:focus, #chatCta:disabled,#chatCta:disabled:hover, #shieldLibraryComponent .usb-button.button--primary.chatCta:disabled, .usb-button.button--primary.chatCta:focus:before{
	color: #4D4F53;
	background-color:#ebebeb;
	cursor: not-allowed;
}
.yesBtn, .yesBtn:hover{
	background-color:#19398a;
	color:White; 
}
.noBtn, .noBtn:hover{
	color: #19398a;
}