@font-face
{
    font-family: 'PT Sans';
    src: url('/fonts/PT_Sans-Caption-Web-Regular.ttf') format('truetype');
}
@font-face
{
    font-family: 'Montserrat Bold';
    src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face
{
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
}
@font-face
{
    font-family: 'Source Sans Pro Bold';
    src: url('/fonts/SourceSansPro-SemiBold.ttf') format('truetype');
}

/*RESTYLE/PC DASHBOARD*/
p.lead {
	font-size:18px;
	font-weight:700;
	line-height: 1.3;
}
pull-left h1, pull-left h2, pull-left h3 {
	margin-bottom:10px;
    font-weight:normal;
}
hr { 
	border: 0; 
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1); 
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.pull-right {
    float: right; /* Positions elements right */
}
.pull-left {
    float: left; /* Positions elements left */
}
.center {
	text-align:center;
}
.clear {
	clear:both;
}
.small {
	font-size:12px;
}
.forgotten-password {
	font-size:13px; /* Sets the size of the forgotten text */
	line-height:2.7;
}
/* #MAIN STYLES */

#main {
	padding:10px 40px;
}
#main h1 {
	text-transform:uppercase;
	text-align:center;
	font-size:32px;
	color:#000000;
}
#main h1 i {
	color: #e8e8e8; /* Padlock icon colour and size */
	font-size:40px; 
	width: 25.72px;
}
#main-contents {
	margin:40px auto 0 auto;
	width: 900px; 
}
#main-contents .inner {
	width:420px; /* Containers width of the inner divs */
}
#main-contents h2 {
	color: #e8e8e8;
	font-size:28px;
}
#main hr {
	background-color: ;
}
/*MidMenu & BottomMenu styles*/
.midMenuItem,
.languageSelector {
    border-right: 1px solid #ffffff;
    margin: 0px;
    height: 36px;
    min-height: 36px;
    font-family: arial, sans-serif; font-size: 12px; color: #424242;
    color: #424242;
    background-color: #e8e8e8;
    white-space: nowrap;
}
.midMenuItem.activeMenu {
    color: #424242;
    background-color: #ffffff
}
.midMenuItem:hover {
    color: #424242;
    background-color: #ffffff;
    cursor: pointer;
}
.midMenuItem a.clsNoUnderline {
    display: block;
    color: #424242;
    
    padding-right: 20px;
    padding-left: 20px;
    height: 36px;
    line-height: 36px;
}
.midMenuItem.activeMenu a.clsNoUnderline {
    color: #424242;
    font-weight: bold;
}
/* WEBLOGIN FORM STYLES -
applies to all pages with an input box - for WebLogin use only*/

.inputbox {
	background-color: #e8e8e8;
	border-radius: 10px;
	padding:20px;
	color: #FFFFFF;
	margin-bottom:20px;
}
.inputbox input[type=text], .inputbox input[type=check], .inputbox input[type=password] {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #e6e6e6;
    border-radius: 4px;
	font-size:14px;
}
.inputbox #loginUserContainer input[type=text], .inputbox #loginPasswordContainer input[type=password]{
	
}
.inputbox input.memorable {
	width: 15%;
}
.inputbox input.two-factor {
	width: 20%;
}
.inputbox input.crontoinput {
	width: 70%;
}
.inputbox h3 {
	font-weight:700;
	font-size:16px;
	line-height:2em;
	display:block;
	border-bottom:1px solid rgba(255, 255, 255, 0.3);
}

.inputbox .innertext {
	padding-top:16px;
}
.inputbox #loginUserContainer {
	position: relative; 
}
.inputbox #sbtLogin {
	top: 36px;
    position: absolute;
    right: 5px;
}
.timed-out {
	border-radius: 10px;
	padding:20px;
	border: 2px solid #e6e6e6;
	background-image:url(../images/secure-web-portal-banner.jpg);
	background-repeat:no-repeat;
	background-position:center;
	height:170px;
	margin-bottom:20px;	
}
.fa.fa-lock:before {
	content: ;
}
#loginHeader i {
	vertical-align: top;
}
form[name="frmLogin"] .inputbox label:not([for="chkRememberMe"]) {
	font-family: ;
}
form[name="frmLogin"] input {
	
}
form[name="frmLogin"] button {
	
}
input#chkRememberMe {
	
}
label[for="chkRememberMe"] {
	
}
/* MAIN MENU - 
page specific styles */

.system-option {
	border-radius: 20px;
	border: 1px solid #e8e8e8;
	background-color:#f9f9f9;
	position: relative;
	width:400px;
	margin-bottom:10px;
	overflow:hidden;
}
.system-option h3 {
	margin-bottom:0;
	font-weight:700;
	font-size:16px;
	line-height:1em;
}
.system-option p {
	font-size:13px;
	margin-bottom:0
}
.system-option a {
	color:#000; /* sets link colour */
	text-decoration:none
}
.system-option .arrow-tab {
	width:45px;
	background-color: #e8e8e8;
	height:41px;
	padding:10px 0 0 15px;
	color:#476e96
}
.system-option:hover .arrow-tab {
	color: #FFFFFF
}
.system-option .opt-text {
	margin-top:8px;
	padding-left:70px;
}
.active {
    color: #FFFFFF !important;
	font-weight:bold;
	background-image: url(../images/selected.png);
	background-repeat: no-repeat;
	background-position:bottom center;
}
/* #HEADER STYLES - 
These apply to all screens */

#header .branding {
	height:95px;
	background-color:#051931; /* Customer brand colour */
}
#header .branding img.logo {
	padding:15px 20px; /* Customer logo spacing */
}
.navbar {
	height:48px;
	background-color:#e8e8e8; /* Customer brand colour */
	border-bottom:6px solid #c1c7cd; /* Customer brand colour */
	text-transform:uppercase;
}
.navbar ul {
	list-style-type:none;
	padding:0 20px;
	position:absolute;
}
.navbar ul li {
	display:inline;
    float: left;
}
.navbar ul li a {
    display: block;
	padding: 13px 20px;
	color:#fff;
    text-decoration: none;
}
/* DASHBOARD - 
Page specific styles */

#dashboard-contents {
	width:1230px;
	margin:20px auto;
}
#dashboard-contents img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
#dashboard-contents .outer-left-container {
	width:1030px; /* Outer Left Container Div, contains #assets-panel, #payments-panel, #manager-details panels */
}
#dashboard-contents .outer-right-container {
	width:180px; /* Outer Right Container Div, contains #notifications-panel */
}
#dashboard-contents #assets-panel, #dashboard-contents #manager-details {
	width:358px;
}
#dashboard-contents #payments-panel {
	width:650px;
}
#dashboard-contents #notifications-panel {
	width: inherit;
}
#dashboard-contents .panel {
    background-color: #fff;
    border: 1px solid #e8e8e8; /* Customer brand colour */
    border-radius: 4px;
	margin-bottom:20px
}
.scroll-panel .panel-body { /* THIS STYLE ADDS SCROLL BARS TO PANELS */
  	overflow-y: scroll;
  	border:none;
}
#assets-panel .panel-body {
  	height:300px
}
#payments-panel .panel-body {
	height:477px;
}
#notifications-panel .panel-body {
	height:477px;
}
#dashboard-contents .panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid #e8e8e8; /* Customer brand colour */
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	background-color:#e8e8e8;
	color:#424242;
	font-weight:700;
	font-size:17px
}
#dashboard-contents .panel-body {
    padding: 15px;
	background-color:#f9f9f9;
	border-radius: inherit;
}
#notifications-panel ul.notes li {
	list-style-type:none
}
#notifications-panel ul.notes li .header {
	font-size:13px;
	font-weight:700;
}
#notifications-panel ul.notes li p {
	font-size:12px;
	margin-bottom:5px;
}
#notifications-panel ul.notes li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #999999;
}

/* DivTable Styles -
These styles apply to recent payments panel */

.divtable{
	display: table;
	width: 100%;
	font-size:13px;
	line-height:16px;
}
.tabletitle {
	font-weight:700;
	text-transform:uppercase;
	font-size:13px
}
.tablerow {
	display: table-row;
}
.tablecell {
	border-bottom: 1px dotted #999999;
	display: table-cell;
	padding: 10px;
}
.tablebody {
	display: table-row-group;
}

/* Relationship Manager Details Styles - 
These styles apply to the relationship manager panel */

#dashboard-contents #manager-details p {
	margin-bottom:0;
	font-size:13px;
}
#dashboard-contents #manager-details p i {
	color:#e8e8e8; /* Customer brand colour */
}

/* Notifications Counters - 
These styles add a circle red with number to the Nav icons */

i.fa-bell-o, i.fa-envelope-o, i.fa-phone {
    position:relative; 
    font-size: 1.6em;
    color: #e8e8e8;
    cursor: pointer;
    margin:4px 0 0 5px
}
span.fa-circle {
    position: absolute;
    font-size: 0.6em;
    top: -1px;
    color: red;
    right: -3px;
}
span.num {
    position: absolute;
    font-size: 0.5em;
    top: 0px;
    color: #fff;
    right: -1px;
    font-weight:700;
    font-family: 'PT Sans', sans-serif;
}
.navbar ul.icons {
	position:relative;
}
.navbar ul.icons li {
	padding:5px 16px;
}
.navbar ul.icons li a {
    display: block;
    padding: 0;
    color: #e8e8e8;
    text-decoration: none;
}

/*Additions JS*/
.pull-left h2 {
    font-weight:normal;
    margin-top:-10px;
}
#main h1{
    font-weight:normal;
    font-family:  'PT Sans', sans-serif; /* Sets the overall font - currently set to a Google font */
}
#main-contents p{
    margin-bottom:15px;
}
#main-contents{
	font-family:  'PT Sans', sans-serif; /* Sets the overall font - currently set to a Google font */
    font-size: 15px;
    line-height: 1.5;
}
#main-contents button{
	font-family:  'PT Sans', sans-serif;
}
#main-contents h2{
	font-family:  'PT Sans', sans-serif; /* Sets the overall font - currently set to a Google font */
}
.inputbox .helpbox{
    text-align:left;
    margin-bottom:10px;
}
.helpLink{
    color:#FFFFFF;
    text-decoration:none;
}
.helpLink:hover{
    color:#FFFFFF;
    text-decoration:none;
}
.inputbox .helpbox i {
	font-size:20px;
    position:relative;
    top:2px;
}
a.viewbtn {
    background-color:transparent;
    color: #424242;
	border:1px solid #424242;
    padding: 2px 5px;
    font-size: 13px;
	line-height:16px;
    cursor: pointer;
	text-decoration:none;
	font-weight: 400;
}
a.viewbtn:hover {
	    background-color: rgba(0,0,0,0.1);
}
#notifications-panel ul.notes{
    padding-left:0px;
}
/*Timeout warning*/
#clickBlocker {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #00000094;
    display: none;
    z-index: 16777270;
    top: 0px;
}
#timeoutWarningContainer {
    display: none;
    position: fixed;
    padding: 10px;
    background-color: #ffffff;
    color: #424242;
    border: black solid 1px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 8px;
    left: 50%;
    top: 40%;
    max-width: 100%;
    width: 255px;
    z-index: 16777271;
}
#timeoutWarningReset {
    float: right;
    margin: 10px 0px 0px 10px;
}
#timeoutWarningLogout {
    margin: 10px 10px 0px 0px;
}
#timeoutText {
    font-size: 13px;
}
#timeoutHeader {
    margin-top: 0px;
}
#timeoutWarningContainer button {
    height: 30px; margin: 10px 0px 10px 10px; padding-left: 10px; padding-right: 10px; background-color: #437cc4; background-image: none; color: #ffffff; font-size: 14px; border: 0; border-radius: 5px; cursor: pointer;
}
#timeoutOccurredContainer {
    display: none;
    position: fixed;
    padding: 10px;
    background-color: #ffffff;
    color: #424242;
    border: black solid 1px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 8px;
    left: 50%;
    top: 40%;
    max-width: 100%;
    width: 255px;
    z-index: 16777271;
}
#timeoutOccurredOk {
    margin: 10px 10px 0px 0px;
}
#timeoutOccurredHeader {
    margin-top: 0px;
}
#timeoutOccurredText {
    font-size: 13px;
}
#timeoutOccurredContainer button {
    height: 30px; margin: 10px 0px 10px 10px; padding-left: 10px; padding-right: 10px; background-color: #437cc4; background-image: none; color: #ffffff; font-size: 14px; border: 0; border-radius: 5px; cursor: pointer;
}
td.srInput input, td.srInput select, td.srInput table{
	width: 100%;
}
#execute:hover, #sbtAction:hover, .btnHolder input:hover{
	
}
#execute:active, #sbtAction:active, .btnHolder input:active{
	
}
#btnAnchor{
	background-color: ;
	color: ;
	font-weight: bold;
	border-radius: 15px;
	padding: 2px 10px 2px 10px;
	text-decoration: none;
}
#btnAnchor:hover{
	background-color: ;
}
#btnAnchor:active{
	background-color: ;
}
.tr0{
	background-color: #ffffff;
}
.tr1{
	background-color: #ffffff;
}

textarea{
	background-color: white;
}

input[type='radio']{
	accent-color: #0075ff;
}
.microsoftButton{
	font-family: Segoe UI Regular !important;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: #2F2F2F;
	display: inline-flex;
	align-items: center;
	padding-left: 12px;
	padding-right: 12px;
	height: 40px;
	border-radius: 5px;
	border: 0px;
	width: 210px;
	margin: 4px;
	cursor: pointer;
}
.microsoftLogo{
	padding-right: 12px;
}
.signInHolder{
	width:100%;
}