/*** Defaults ***/
body {
    font-family: 'aspira-regular', calibri, arial, sans-serif;
    font-size: 90%;
    line-height: 1.4em;
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    color: #4D4D4D;
}

/* colors and background */
.aib-purple-txt {
	color: #485dc5;
}
.aib-purple-bg {
	background: #485dc5;
}
.aib-green-txt {
	color: #485dc5;
}
.aib-green-bg {
	background: #485dc5;
}
.aib-grey-txt {
	color: #4d4d4d;
}
.welcome-msg {
    margin-bottom: 0.5em;
    width: 100%;
}
.welcome-msg h2 {
    padding-bottom: 0;
}
.welcome-msg p {
    margin-top: 0;
    font-size: 1.2em;
}

input[type='text']:focus {
    outline: 0 !important
}

h1, h2, h3, h4, h5, h6, strong, b, h4 p, .aib-demi-font, b p {
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}

p {
    font-family: 'aspira-regular', calibri, arial, sans-serif;
}

button, button.button-links, .button-links button, a.button-links, .button-links a, .summary-panel, th, .top-row, .title-row, strong, .menu-bar a, .menu-bar button, .radio-bar label, .radio-button label {
    font-family: 'aspira-demi', arial, sans-serif;
    font-weight: normal;
    font-size: inherit
}
input[type='submit'] {
    font-weight: normal;
    font-size: inherit
}
input.pagenum {
    width: auto;
    min-width: 20px;
    color: #4d4d4d;
    padding: 3px 5px;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background: #e3e3e3;
    -webkit-appearance: none;
    text-align: center;
    margin: 0;
}
span.curpage {
    padding: 3px 5px;
    color: #fff;
    background: #485dc5;
}
a:focus {
    outline: none
}
button::-moz-focus-inner {
    border: 0
}

p, h1, h2, h3, h4, h5, h6 {
    padding: .4em 0 .6em;
    margin: 0;
    line-height: 1.4em
}
a {
    color: #485dc5;
}

h1 {
    font-size: 1.75em
}

h2 {
    font-size: 1.50em
}

h3 {
    font-size: 1.25em
}

h4 {
    font-size: 1.10em
}

h5, h5 {
    font-size: 1em
}

.section-header h3 {
    display: inline-block
}

ul, ul li, ol li {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0
}

.bullet-list li {
    display: block;
    margin: 0 2em;
    position: relative;
    padding-bottom: 1em
}

.bullet-list li:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 4px solid #6e6e6e;
    border-radius: 2em;
    position: absolute;
    top: 6px;
    left: -1.5em
}

.paragraph-list li {
    display: block;
    padding-bottom: 1em;
    margin: 0 2em
}

em, i {
    font-style: normal
}

button.selected > i,
i.selected {
    color: #006657;
}

img {
    width: 100%;
    border: none;
}

form {
    display: inline;
    margin: 0;
    padding: 0
}

.spacer {
    display: inline-block;
    width: 22px;
}

.webchat {
    background: #485dc5;
    color: #fff;
    border: 0;
    border-radius: 0.4em;
    position: relative;
    text-align: right;
    margin: 0 1.4em 1em .8em;
    min-height: 3.5em;
}
.webchat p {
    padding: .5em 1em
}
.webchat a {
    color: #485dc5
}
.webchat strong {
    font-size: 1.2em
}
.webchat span {
    display: block;
    float: left;
    position: absolute;
    top: -.35em;
    left: 1em;
    background: #fff;
    border-radius: 10em;
    padding: .5em .8em;
    box-shadow: 0 0 .1em #ddd;
}
.webchat span img {
    width: 3.5em
}
.webchat-link {
    text-align: right;
    position: relative;
    top: -.5em;
    margin-right: 1.5em
}
.accbtns {
    width: 100%;
    height: 100%;
    background: none;
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0;
    -webkit-appearance: none;
    line-height: 1.4em;
    cursor: pointer;
}

.inline-block {
    display: inline-block;
}
.x3-login {
    width: 31%;
}
.x3-loginml {
    margin-left: 1.5%;
}
.x3-loginmr {
    margin-right: 1.5%;
}

/* start recent and historical tsx control */
.hide-large {
    display: none !important;
}
.hide-large-inline {
    display: none !important;
}
.hide-small {
    display: block !important;
}
.hide-td {
    visibility: visible !important;
}
.hide-td-large {
    visibility: hidden !important;
    display: none !important;
}
.sort-button {
    width: 100%;
    text-align: right !important;
}
/* end recent and historical tsx control */

select, input, textarea {
    padding: .6em 0;
    border: .1em solid #c3c3c3;
    margin: 0 0 1em
}

select, input, textarea, .radio-button label, .radio-button-menu label, .radio-bar label, .simple-box button {
    border-color: #c3c3c3;
    outline: none;
}

select.error, input.error, textarea.error, label.error {
    border-color: #e32837;
}

.error input, .error select, .error textarea {
    border-color: #e32837;
}

select, label, input, textarea, button {
    font-family: 'aspira-regular', calibri, arial, sans-serif;
    color: #4d4d4d;
}

.table-layout select, .table-layout input {
    margin: 0;
    height: auto;
}

select, input[type='text'], input[type='number'], input[type='password'], textarea {
    width: 100%
}

select {
    border: .1em solid #c3c3c3;
    outline: 0;
    color: #4d4d4d;
    padding: 4px;
    width: 100%;
    -webkit-appearance: menulist-button;
    height: 34px;
    background: #fff;
}

input.input-error {
    box-shadow: 0 0 .5em #a00;
    transition: box-shadow .5s;
    -webkit-transition: box-shadow .5s
}

input.alpha {
    -webkit-transition: box-shadow .5s;
    background: rgba(62, 22, 40, .50);
    border: none;
    box-shadow: 0 0 .1em #000;
    color: #fff;
    text-align: center;
    transition: box-shadow .5s;
    width: auto
}

input.alpha:hover, input.alpha:focus {
    -webkit-transition: box-shadow .5s;
    box-shadow: 0 0 .1em #fff;
    transition: box-shadow .5s
}

label {
    color: #4d4d4d;
    display: block;
    margin: 0 0 .25em;
    padding-right: 1em;
    position: relative
}

label.confirm {
    padding-right: 0;
}


label span {
    color: #4d4d4d;
    display: block;
    font-size: .9em
}

input[type='text'], input[type='number'], input[type='password'] {
    -webkit-user-modify: read-write-plaintext-only !important;
    text-indent: .5em;
    background: #fff;
}

input.alignc {
    text-indent: 0
}

select[readonly='readonly'], select[disabled='disabled'], input[readonly='readonly'], input[readonly='readonly']:focus, input[disabled='disabled'] {
    background: #e2e2e2;
    border-color: #e2e2e2;
    box-shadow: none;
    color: #4d4d4d;
}

table {
    width: 100%;
    margin: auto;
    border-collapse: collapse
}

table th {
    text-align: left
}

table th, table td {
    border: none;
    padding: .25em;
}

table .button-links {
    margin: 0
}

table th button {
    background: none;
    border: none;
    text-align: left;
    padding: 0;
    font-size: inherit;
    cursor: pointer
}

table .data {
    display: none
}

table tr.data td {
    background: #e2e2e2;
    padding: .75em
}

table tr.date-row {
    background: #eeeaf0;
}

table .dataBlock {
    display: block;
    float: left;
    margin: 0 2% 1em 0;
    width: 30%;
    cursor: pointer
}

table tr.alt-tr {
    background: #eeeaf0;
}
.img-floatr,
.img-floatl {
    width: 40%;
    border: 5px solid #fff;
    box-shadow: 0 0 .1em #000;
    margin: 10px 0 0 20px
}

.img-floatr {
    float: right
}

.img-floatl {
    float: left
}

.apply-button {
    width: auto !important;
    display: block !important;
    clear: both !important;
    padding: .5em 3em !important;
    font-size: 1.4em !important
}

p.italic {
    font-style: italic
}

.printOnly {
    display: none;
}


/*** Simple Defaults ***/
.clear {
    clear: both
}

.clear-plus {
    clear: both;
    padding: 0 0 1em
}

.no-padding {
    padding: 0
}

.no-margin {
    margin: 0
}

.margin-right {
    margin-right: .5em !important
}

.no-border {
    border: none !important
}

.no-display, .hidden {
    display: none
}

.auto-margin {
    margin: auto
}

.floatl {
    float: left
}

.floatr {
    float: right
}

.alignl {
    text-align: left
}

.alignr {
    text-align: right
}

.alignc {
    text-align: center
}

.alignj {
    text-align: justify
}

.protective-layer,
.protective-layer-general {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
    background: rgba(255, 255, 255, 0.5);
}

.hidebr br {
    display: none
}

/*** Basic Layout Settings ***/
.limit-page {
    margin: 0 auto;
    width: 100%;
}

.limit-content {
    width: 95%;
    min-width: 15em;
    max-width: 70em;
    margin: auto
}

.simple-box .simple-box .limit-content {
    width: auto;
    min-width: auto;
    margin: auto
}

.simple-box .simple-box {
    clear: both;
}

.oftd.simple-box {
    padding: 0 !important;
}

.simple-box.confirm {
    width: 70%
}

.page-header .limit-content {
    position: relative
}

.wide-limit .limit-content {
	max-width: 103em;
}

.main-column-left {
    display: block;
    float: left;
    width: 63%
}

.main-column-right {
    display: block;
    float: right;
    width: 63%
}

.side-column-left {
    display: block;
    float: left;
    width: 35%
}

.side-column-right {
    display: block;
    float: right;
    width: 35%
}

.accountoverview.main-column-left {
    display: block;
    float: left;
    width: 74%;
}

.accountoverview.side-column-right {
    display: block;
    float: right;
    width: 25%;
}

.trans-column-left {
    display: block;
    float: left;
    width: 74%;
}

.trans-column-right {
    display: block;
    float: right;
    width: 25%
}

.column-center {
    margin: auto;
    width: 90%;
    max-width: 35em
}

.column-center-terms {
    margin: auto;
    width: 80%;
}

.column-center-wide {
    margin: 2em auto 2em auto;
    min-width: 16em;
    width: 90%
}

.column-right {
    display: block;
    float: right;
    width: 49%
}

.column-left {
    display: block;
    float: left;
    width: 49%
}

.column-left-x3 {
    display: block;
    float: left;
    width: 32.333%
}

.column-left-x3.middle-column {
    margin: 0 1.5%
}

.column-x3 {
    width: 32%;
    margin-right: 1%;
    position: relative
}

/*** CSS Tableless Layout ***/
.table-layout {
    display: table;
    width: 100%;
    overflow: hidden;
    border-collapse: collapse
}

.table-layout ul {
    display: table-row
}

.unpaired-devices ul li.col1, .paired-devices ul li.col1, .unpaired-devices ul li.col2, .paired-devices ul li.col2 {
	width: 35%;
	padding: 0;
}
.unpaired-devices ul li.col3, .paired-devices ul li.col3 {
	width: 20%;
	padding: 0;
}
.unpaired-devices ul li.col4, .paired-devices ul li.col4 {
	width: 10%;
	padding: 0;
}

.table-layout ul:nth-of-type(even) {
    background: #eeeaf0;
}

.table-layout.no-alt ul:nth-of-type(even) {
    background: none
}

.table-layout .date-row li {
    background: #eeeaf0;
    border-right: 0;
    overflow: visible
}

.table-layout.branch ul:nth-of-type(even), .simple-box.bg-green .table-layout ul:nth-of-type(even), .confirm-panel .table-layout ul:nth-of-type(even) {
    background: none
}

.table-layout ul li {
    display: table-cell;
    vertical-align: middle;
    padding: .2em .1em;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    border-bottom: .1em dotted #c3c3c3;
    border-right: .1em dotted #c3c3c3;
}
.myaccounts-list-box {
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: hidden !important;
}
.myaccounts-list-box > a {
	color: #485dc5;
    margin: 0 1em 0.3em 0;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    float: right;
}
.table-layout ul li.forceWrap {
    word-break: break-all
}

.table-layout ul li:last-of-type {
    border: none;
    border-bottom: .1em dotted #c3c3c3;
}

.table-layout ul li button {
    margin: 0 auto;

}

.table-layout li.min-width {
    width: 10px
}

.table-layout.branch {
    display: block;
    margin: .5em 0
}

.table-layout.branch ul li {
    vertical-align: top;
    padding: .3em .2em
}

.table-layout.account-details ul {
    display: block
}

.table-layout.account-details li {
    display: inline-block;
    min-width: 24%;
    border-right: .1em dotted #c3c3c3 !important;
    border-bottom: .1em dotted #c3c3c3 !important;
}

.table-layout.account-details li:last-child {
    border: none
}

.table-layout.account-details li:before, .table-layout.confirm-details li:before {
    content: '' !important
}

.table-layout.confirm-details ul li {
    border: none;
    width: 50%
}

.table-layout.confirm-details ul li:last-child {
    
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.table-layout.confirm-details ul li:only-child {
    width: 100%;
}

.table-layout.confirm-details.arklife ul li:first-child {
        font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.table-layout.confirm-details.arklife ul li:last-child {
    font-weight: normal
}

.table-layout.noTopRow li:before {
    content: '' !important
}

.table-layout .data-row ul {
    display: block;
    margin: 1em 0 2em;
    width: auto
}

.table-layout .data-row li {
    display: block;
    border: none;
    padding: .2em 1em;
    margin: 0
}

.table-layout.colx2 li {
    width: 50%
}

.table-layout .cellRow {
    display: block
}

.table-layout .cellRow strong {
    display: inline-block;
    width: 40%
}

.table-layout .button-links {
    margin: 0;
}

/*confirmation screen panel */
.message-panel, .error-panel, .warning-panel, .confirm-panel, .confirmed-panel {
    display: block;
    margin: 0;
    padding: 1em;
    position: relative;
    background: #fff;
    box-shadow: none;
    border: none
}

.message-panel .fa, .error-panel .fa, .warning-panel .fa, .confirmed-panel .fa {
    font-size: 30px;
    position: relative;
    top: .125em;
    margin-right: .2em
}

.message-panel span .fa, .warning-panel span .fa, .confirmed-panel span .fa {
    top: .3em;
}

.error-panel span .fa {
    top: 0;
}

.warning-panel .fa {
    color: #485dc5;
}

.message-panel .left, .error-panel .left, .warning-panel .left, .confirmed-panel .left {
    float: left
}

.message-panel .right, .error-panel .right, .warning-panel .right, .confirmed-panel .right {
    float: left;
    width: 92%;
}

.confirm-panel {
    width: 80%
}

.confirm-panel-message {
    width: 80%
}

.credit {
    color: #485dc5;
}

.debit {
    color: #485dc5;
}

.credit span, .debit span {
    display: inline-block;
    margin-right: .3em;

    font-size: 14px;
        font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.credit span {
    color: #485dc5;
    display: inline;
}

.debit span {
    color: #485dc5;
    display: inline;
}

.reverse-note {
    display: block;
    text-align: left;
    padding: .2em 15px;
    color: #485dc5;
        font-family: 'aspira-demi', calibri, arial, sans-serif;
    text-transform: uppercase;
    margin: 0 0 1em;
    position: relative
}

.reverse-note:before {
    content: '';
    display: block;
    height: 18px;
    width: 5px;
    background: #485dc5;
    position: absolute;
    opacity: .85;
    left: 0;
    top: 5px
}

.reverse-note p {
    margin: 0;
    padding: 0
}

.reverse-payment {
        font-family: 'aspira-demi', calibri, arial, sans-serif;
    color: #485dc5;
    
}

.reverse-payment li:first-of-type {
    border-left: 5px solid #485dc5
}


/****** START MY ACCOUNTS LIST ******/

.myaccounts-item {
    display: block;
    position: relative;
    margin: 0;
}
.myaccounts-item:hover {
    box-shadow: none;
}
.myaccounts-item.alt-row {
    background: #eeeaf0;
}
.myaccounts-options {
    position: relative;
    display: block;
    border-top: .1em dotted #ccc;
}
.myaccounts-list ul {
    padding: 0.3em 0;
    display: block;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    background: none;
    will-change: background;
    transition: background .2s ease-out;
    -webkit-transition: background .2s ease-out;
}
.myaccounts-list li {
    display: inline-block;
    vertical-align: middle;
    padding: .3em 1em;
    min-width: 20%;
    position: relative;
}
.myaccounts-list button:hover, .myaccounts-list button:focus {
    background: #e2e2e2;
}
.myaccounts-list .myaccounts-item.alt-row button:hover, .myaccounts-list .myaccounts-item.alt-row button:focus {
    background: #dcd5e2;
}
.myaccounts-list button:active {
    background: #f2f2f2;
}

.myaccounts-list ul li:first-child {
    min-width: 32%;
    border: none;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    height: 44px;
    line-height: 36px;
    padding: .5em 1em 0 1em;
}
.myaccounts-list span {
    display: block;
    margin: 0 0 0 3em;
    color: #4d4d4d;
    font-family: 'aspira-demi', arial, sans-serif;
}
.myaccounts-list strong {
    display: block;
    margin: 0;
    color: #4d4d4d;
    font-family: 'aspira-demi', arial, sans-serif;
}
.myaccounts-list em {
    display: block;
    margin: 0;
    color: #4d4d4d;
    font-family: 'aspira-regular', arial, sans-serif;
}

.myaccounts-list ul:before {
    content: "\f054";
    position: absolute;
    left: auto;
    font-family: 'font-awesome';
    right: -5px;
    width: 40px;
    height: 36px;
    font-size: 1.2em;
    color: #4d4d4d;
    padding: .3em .0;
    line-height: 45px;
}
.myaccounts-list ul:hover:before, .myaccounts-list ul:active:before {
    /* background: url('../images/icon-grid-green.png') -50px -50px; */
    color: #485dc5;
}
.myaccounts-list .icon:before {
    left: 10px;
}
.myaccounts-list ul li.icon:before {
    display: block;
}
a#securitycenter {
    margin-bottom: 5px;
    width: 100%;
    float: left;
}
.service-settings-options .bNavBar {
    float: left;
    width: 48%;
    margin: 0 1%;
}
.so-button {
    margin-bottom: 1em;
}
.button-accoption {
    font-family: 'aspira-demi', arial, sans-serif;
    font-weight: normal;
    border: none;
    color: #485dc5;
    cursor: pointer;
    padding: 8px 20px;
    background: none;
    font-size: 1em;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    margin: 0;
    will-change: background;
    transition: background .2s ease-out;
    -webkit-transition: background .2s ease-out;
}
.button-accoption:hover, .button-accoption:focus {
    background: #f2f2f2;
}
.button-accoption:active {
    background: #c3c3c3;
}
.mr5 {
    margin-right: 5px;
}

@media screen and (max-width: 767px) {
    .myaccounts-list ul li {
        display: block;
        margin: 0 !important;
        border: none !important;
        padding: .25em 1em !important;
        width: 90%;
    }
    .myaccounts-list strong, .myaccounts-list em {
        display: inline !important;
    }
    .button-accoption {
        width: 100%;
    }
    .myaccounts-options form {
        display: block;
    }
    .myaccounts-options form:nth-of-type(2) {
        border-top: .1em dotted #e2e2e2;
    }    
}
/****** END MY ACCOUNTS LIST ******/
.trans-column-left .button-links ul {
	float:right;
}

.login-box {
    margin: auto;
    max-width: 60em;
    min-width: 20em;
    width: 75%
}

.login-box .column-center {
    margin: 0
}

.login-banner {
    border: 1em solid #fff !important;
    margin: 1em auto 2em !important;
    border-radius: 0 !important;
    min-height: 34em;
    overflow: hidden;
    padding: 1em 0 2em !important;
    position: relative
}

.login-banner-image {
    background: url('../../roi-desktop/images/6.jpg') no-repeat center center / cover;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.login-banner .side-column-right {
    background: rgba(255, 255, 255, .9) !important;
    border-radius: .4em;
    margin: 2em 0
}

.login-banner .text-links button {
    padding-left: .5em;
    text-shadow: none
}

.login-border {
    border: .4em solid #aaa;
    border: .4em solid rgba(255,255,255, 0.4);
    margin: 0 auto 2em
}
.login-page .login-border.cmsSlot.rsvp {
    border: none;
}
.login-step1 {
    width: 76%;
}

.login-step2 {
    width: 76%;
}
.login-page .fa-mr, .footers .fa-mr, .navMenuSub .fa-mr {
	display: none;
}
.footers p {
	padding: 0.3em 0; 
}
.login-form {
    background: rgb(240, 240, 240);
    /* IE fallback */
    background: rgba(255, 255, 255, .9);
    margin: 0 0 0 !important
}

.loginFormField {
    margin: 0 !important
}

.loginFormField .formLabel {
    width: auto;
    float: none;
    text-align: left
}

.loginFormField .formInput {
    width: 100% !important
}

.stay-secure {
    background: rgba(255, 255, 255, .9);
    margin-top: -1em;
    padding-top: 0
}

.navLogo {
    float: left;
    text-align: left;
    vertical-align: middle;
    width: 94px;
    margin-right: 10px;
}

.navLogo img {
    border: none !important;
    vertical-align: middle;
    width: 250px;
    padding-top: 15px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 5px;
    height: 69px;
}

.login-header {
	text-align: left;
	font-size: 1.3em;
}

.adminBar {
    background: #222;
    border-bottom: .15em solid rgba(255, 255, 255, .2);
    display: block;
    min-height: 2.5em
}

.navBar {
    background: #fff;
    margin-bottom: .5em;
    box-shadow: 0 0 2px 0 #9e9e9e;
}

.navHeader h1 {
	padding-right: auto;
	padding-bottom: auto;
	color: #485dc5;
	height: 88px;
	display: table-cell;
	vertical-align: middle;
	text-rendering: optimizelegibility;
	padding-left: 145px;
}
.navMenuTop.selected button.navMenuButton {
	color: #485dc5;
}
.navMenu button {
    background: none;
    border: none;
    color: #4d4d4d;
    margin: 0;
    min-width: 100%;
    text-align: center;
    min-height: 6em;
    font-family: 'aspira-demi', arial, sans-serif;
    outline: none;
}

.navMenu button:hover {
    background: #111;
    color: #fff;
    cursor: pointer
}

.navMenu button.active {
    background: #111;
    color: #fff
}

.navMenuBlock .navMenu {
    width: 90%;
    float: left;
    padding-top: 2px;

}
.navMenuBlock .navLogo {
    width: 8%;
    float: left;
    margin-right: 2%;
}
.navMenuBlock .navLogo img {
    width: 78px;
    padding: 5px 0;
}
.navMenu button span {
    padding: 0
}

.navMenu ul li:hover .subMenu {
    display: block
}

.navMenu button.active, .navMenu button:hover {
    background: #fff;
    color: #485dc5;
}

.sidemenuicon {
    display: inline-block;
    opacity: .8;
    width: 30px;
    height: 16px;
    position: relative;
    top: 3px;
    left: -5px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important
}

.sidemenuaccounts {
    background-image: url('/roi-desktop/images/icons/Account-Overview-white.png')
}
.sidemenutransfersandpayments {
    background-image: url('/roi-desktop/images/icons/Pay-and-Transfer-white.png')
}
.sidemenumoneymanager {
    background-image: url('/roi-desktop/images/icons/My-money-manager-white.png')
}
.sidemenuapplyandopen {
    background-image: url('/roi-desktop/images/icons/Apply-open-white.png')
}
.sidemenuservicesandsettings {
    background-image: url('/roi-desktop/images/icons/Services-and-settings-white.png')
}

.navIcon {
    display: block;
    min-height: 3em;
    background-repeat: no-repeat !important;
}
#accountoverviewMenu {
	min-width: 16%;
}
#moneymanagerMenu {
	min-width: 22%;
}
#servicesandsettingsMenu {
	min-width: 22%;
}
#accountoverview_button_id .navIcon {
    background-image: url('/roi-desktop/images/icons/account.png')
}
#transfersandpayments_button_id .navIcon {
    background-image: url('/roi-desktop/images/icons/pay_transfer.png')
}
#moneymanager_button_id .navIcon {
    background-image: url('/roi-desktop/images/icons/my_money_manager.png')
}
#applyandopen_button_id .navIcon {
    background-image: url('/roi-desktop/images/icons/apply_open.png')
}
#servicesandsettings_button_id .navIcon {
    background-image: url('/roi-desktop/images/icons/settings.png')
}

#accountoverviewMenu:hover .navIcon, #accountoverviewMenu.navMenuTop.selected .navIcon{
    background-image: url('/roi-desktop/images/icons/account_hover.png')
}
#transfersandpaymentsMenu:hover .navIcon, #transfersandpaymentsMenu.navMenuTop.selected .navIcon {
    background-image: url('/roi-desktop/images/icons/pay_transfer_hover.png')
}
#moneymanagerMenu:hover .navIcon, #moneymanagerMenu.navMenuTop.selected .navIcon {
    background-image: url('/roi-desktop/images/icons/my_money_manager_hover.png')
}
#applyandopenMenu:hover .navIcon, #applyandopenMenu.navMenuTop.selected .navIcon {
    background-image: url('/roi-desktop/images/icons/apply_open_hover.png')
}
#servicesandsettingsMenu:hover .navIcon, #servicesandsettingsMenu.navMenuTop.selected .navIcon {
    background-image: url('/roi-desktop/images/icons/settings_hover.png')
}
.navMenuOpen {
    display: none
}

.navLogout {
    display: none
}

/*** Icons ***/
/* Icons ::Sample List */
ul.icon-samples {
    position: relative
}

ul.icon-samples li {
    display: block;
    float: left;
    width: 15.5%;
    position: relative;
    background: #eee;
    border-radius: .3em;
    cursor: pointer;
    margin: .5em .2em 0;
    padding: 1em 1em 1em 4em
}

ul.icon-samples li:hover {
    background: #e2e2e2;
    color: #4d4d4d
}

/* Icons ::Default Settings */
.icon:before {
    content: '';
    position: absolute;
    left: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
}

.icon-samples .icon:before {
    top: 25%;
    left: 7.5%
}

/* Icons ::Load Images */
.icon:before, .i-default:before, .i-default-hv:hover:before, .i-default-hv:active:before {
    background: url('../../roi-desktop/images/icon-grid-default.png') 
}
.i-next:before {
	background: none !important;
}
.i-green:before, .i-green-hv:hover:before, .i-green-hv:active:before {
    background: url('../../roi-desktop/images/icon-grid-green.png')
}

.i-grey:before, .i-grey-hv:hover:before, .i-grey-hv:active:before {
    background: url('../../roi-desktop/images/icon-grid-grey.png')
}
.side-menu .i-grey:before, .i-grey-hv:hover:before, .i-grey-hv:active:before {
    background: none;
}

.i-white:before, .i-white-hv:hover:before, .i-white-hv:active:before {
    background: url('../../roi-desktop/images/icon-grid-white.png')
}
.side-menu .i-white:before, .i-white-hv:hover:before, .i-white-hv:active:before {
    background: none;
}

/* Icons ::Positions */
.icon .i-accounts:before, .icon.i-accounts:before {
    background-position: 0 -150px
}

.icon .i-apply:before, .icon.i-apply:before {
    background-position: 0 -200px
}

.icon .i-arrowdown:before, .icon.i-arrowdown:before {
    background-position: -50px -450px
}

.icon .i-arrowup:before, .icon.i-arrowup:before {
    background-position: -50px -400px
}

.icon .i-back:before, .icon.i-back:before {
    background-position: -50px -0;
    left: -8px
}

.icon .i-banking:before, .icon.i-banking:before {
    background-position: 0 -50px
}

.icon .i-calendar:before, .icon.i-calendar:before {
    background-position: -100px -250px;
    height: 40px;
    width: 38px;
}

.icon .i-cancel:before, .icon.i-cancel:before {
    background-position: -50px -150px;
    left: -8px
}

.icon .i-only.i-cancel:before, .icon.i-only.i-cancel:before {
    left: 0
}

.icon .i-card:before, .icon.i-card:before {
    background-position: 0 -300px
}

.icon .i-currency:before, .icon.i-currency:before {
    background-position: 0 -150px
}

.icon .i-current:before, .icon.i-current:before {
    background-position: -250px 0
}

.icon .i-dashboard:before, .icon.i-dashboard:before {
    background-position: 0 0
}

.icon .i-down:before, .icon.i-down:before {
    background-position: -100px -50px;
    left: auto;
    right: 0
}

.icon .i-error:before, .icon.i-error:before {
    background-position: 0 -450px
}

.icon .i-globe:before, .icon.i-globe:before {
    background-position: -50px -300px
}

.icon .i-information:before, .icon.i-information:before {
    background-position: -100px -200px
}

.icon .i-locator:before, .icon.i-locator:before {
    background-position: 0 -100px
}

.icon .i-locatorlogo:before, .icon.i-locatorlogo:before {
    background-position: -100px -350px
}

.icon .i-lock:before, .icon.i-lock:before {
    background-position: 0 -350px
}

.icon .i-login:before, .icon.i-login:before {
    background-position: -150px -350px;
    height: 65px;
    top: 16px;
    left: 6px
}

.icon .i-logo:before, .icon.i-logo:before {
    background-position: -100px -300px
}

.icon .i-menu:before, .icon.i-menu:before {
    background-position: -150px -150px
}

.icon .i-message:before, .icon.i-message:before {
    background-position: -100px -150px
}

.icon .i-minus:before, .icon.i-minus:before {
    background-position: -50px -250px
}

.icon .i-new:before, .icon.i-new:before {
    background-position: -150px -250px;
    width: 65px;
    height: 65px
}

.icon .i-cardreader:before, .icon.i-cardreader:before {
    background-position: -250px -250px;
    width: 65px;
    height: 65px
}

.icon .i-codecard:before, .icon.i-codecard:before {
    background-position: -250px -350px;
    width: 65px;
    height: 65px
}
.warning-panel.card-reader-required {
	border: .2em #485dc5 solid;
}
.icon .i-delete:before, .icon.i-delete:before {
    background-position: -150px 0
}

.icon .i-next:before, .icon.i-next:before {
    background-position: -50px -50px;
    left: auto;
    right: -8px
}

.icon .i-phone:before, .icon.i-phone:before {
    background-position: 0 -250px
}

.icon .i-plus:before, .icon.i-plus:before {
    background-position: -50px -200px
}

.icon .i-savings:before, .icon.i-savings:before {
    background-position: -50px -350px
}

.icon .i-search:before, .icon.i-search:before {
    background-position: -150px -100px
}

.icon .i-switch:before, .icon.i-switch:before {
    background-position: -150px -50px
}

.icon .i-pay:before, .icon.i-pay:before {
    background-position: -300px -150px
}

.icon .i-euro:before, .icon.i-euro:before {
    background-position: -300px -150px
}

.icon .i-tick:before, .icon.i-tick:before {
    background-position: -50px -100px;
    left: -6px;
    top: -6px;
}

.icon .i-trash:before, .icon.i-trash:before {
    background-position: -150px 0
}

.icon .i-twitter:before, .icon.i-twitter:before {
    background-position: -200px 0
}

.icon .i-ibb:before, .icon.i-ibb:before {
    background-position: -200px -50px
}

.icon .i-umbrella:before, .icon.i-umbrella:before {
    background-position: -200px -100px
}

.icon .i-reuse:before, .icon.i-reuse:before {
    background-position: -200px -150px
}

.icon .i-gps:before, .icon.i-gps:before {
    background-position: -150px -200px
}

.icon .i-up:before, .icon.i-up:before {
    background-position: -100px -0
}

.icon .i-warning:before, .icon.i-warning:before {
    background-position: 0 -400px
}

.i-mortgage:before {
	background: url('../../roi-desktop/images/icons/mortgage.png') no-repeat !important;
}
.i-loan:before {
	background: url('../../roi-desktop/images/icons/borrow.png') no-repeat !important;
}
.i-card:before {
	background: url('../../roi-desktop/images/icons/credit_card.png') no-repeat !important;
}
.i-current:before, .i-deposit:before {
	background: url('../../roi-desktop/images/icons/current_account.png') no-repeat !important;
}
.i-savings:before {
	background: url('../../roi-desktop/images/icons/savings.png') no-repeat !important;
}
.i-accounts:before {
	background: url('../../roi-desktop/images/icons/insurance.png') no-repeat !important;
}
.i-umbrella:before {
	background: url('../../roi-desktop/images/icons/irish_life_policy.png') no-repeat !important;
}
.i-card-setting:before {
	background: url('../../roi-desktop/images/icons/Manage-your-cards.png') no-repeat !important;
}
.fa-pencil-square-o {
	color: #4d4d4d !important;
	height: 36px;
    line-height: 36px;
}

.icon .i-warning-large:before, .icon.i-warning-large:before {
    background-position: -150px -450px;
    top: 25px;
    margin: 0;
    left: -6px
}

.icon .i-deposit:before, .icon.i-deposit:before {
    background-position: -250px 0
}

.icon .i-pension:before, .icon.i-pension:before {
    background-position: -250px -50px
}

.icon .i-loan:before, .icon.i-loan:before {
    background-position: -250px -100px
}

.icon .i-mortgage:before, .icon.i-mortgage:before {
    background-position: -250px -150px
}

.icon .i-update:before, .icon.i-update:before {
    background-position: -250px -200px;
    margin-top: -24.5px
}

.icon .i-investment:before, .icon.i-investment:before {
    background-position: -200px -200px
}

.icon .i-reuse:before, .icon.i-reuse:before {
    background-position: -300px -200px
}

.icon .i-transactions:before, .icon.i-transactions:before {
    background-position: -300px -0px
}

.icon-samples .icon:before {
    top: 50%;
    left: 0;
    right: auto
}

/* Icons ::Code Card and Card Reader */
.card-required {
    padding-left: 70px;
    position: relative;
    padding-top: 0;
    min-height: 50px
}

.card-required.icon:before {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important
}


/*** Page Headers ***/
.page-header {
    -webkit-background-clip: padding-box;
    background: rgba(0, 0, 0, .1);
    background-clip: padding-box;
    border-bottom: .2em solid rgba(255, 255, 255, .1);
    color: #fff;
    display: block;
    min-height: 85px;
    padding: 1em 0;
    position: relative
}

.page-header h1 {
    display: block;
    float: left;
    margin: .3em 200px 0 0;
    min-height: 1em
}

.page-header .aib-logo {
    background: url('../../roi-desktop/images/aib-logo.png') no-repeat center center;
    border: .1em solid #fff;
    border-radius: .1em;
    display: inline-block;
    float: right;
    height: 70px;
    position: absolute;
    right: 0;
    text-indent: -999em;
    top: 8px;
    width: 42px
}

.page-header .aib-logo:after {
    clear: both;
    content: ''
}

.page-subheader {
    border: none;
    color: #4d4d4d;
    display: block;
    margin: 0 auto;
    padding: .5em 0 0;
    position: relative
}

.page-subheader p {
    margin-top: .5em
}

.section-header {
    display: block
}

.section-header h2 {
    text-transform: uppercase;
    float: left
}

.section-header h3 {
    display: inline-block
}

.round-green-border {
    background: #485dc5;
    border-color: #485dc5;
    border-radius: 2em;
    color: #fff;
    display: block !important;
    float: left !important;
    height: 2.4em;
    margin: .1em .75em 0 0;
    position: relative;
    text-shadow: 0.05em 0.05em 0.05em #333;
    width: 2.4em !important;
}

.more, .less {
    background: #485dc5;
    border-color: #485dc5;
    color: #fff;
    display: inline-block;
    font-size: 1.3em;
    padding: 0 .35em .1em;
    text-indent: .1em;
    vertical-align: middle
}

.warning-box {
    z-index: -1;
    position: relative;
    top: -2.5em
}

.warning-message {
    position: relative;
    padding: 1em 1em 0 3.5em;
    color: #4d4d4d;
}

.time-out-advice, .link-out-advice {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 12%;
    width: 100%;
    height: 500%;
    background: rgba(255, 255, 255, .5);
    z-index: 100000000
}

.topBar {
    background: #4d4d4d;
    display: block;
    padding: .1em 0
}
.topBar p {
    line-height: 2em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.error-panel, .warning-panel, .message-panel {
    display: block;
    margin: .5em auto;
    padding: 0.5em 1em;
    position: relative;
    word-wrap: break-word;
    border: 2px #e32837 solid;
}
.error a {
    color: #485dc5;
}

.error-panel {
    background: #fff;
    color: #e32837;
}

.error-panel.logged-out {
    border: none;
}

.formField .error-panel {
    color: #e32837;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.topupbytext .error-panel {
	float: left;
}
.mobile-topup .topup-error {
	float: right;
	width: 50%;
	margin-bottom: 1em;
}
.pac-confirm .error-panel {
    background: none;
    border: 0;
    color: #e32837;
    float: right;
    margin: 0;
    padding: 0;
}

.warning-panel {
    border: 2px #485dc5 solid;
}

.message-panel {
    background: #e2e2e2;
    border-width: 0;
}

.error-panel {
    color: #e32837;
}

.message-panel.icon:before, .warning-panel.icon:before, .error-panel.icon:before {
    display: none !important
}

.euro-symbol {
    color: #4d4d4d;
    display: block;
    float: left;
    font-size: 1.5em;
    height: 0;
    left: -25px;
    position: relative;
    top: 10px;
    width: 0
}

/*** Card Reader ***/
.card-reader {
    background: #fff;
    border-radius: .4em;
    display: block;
    margin: .5em auto;
    padding: 1em;
}

.card-reader-tips {
    display: block;
    float: left;
    margin: 1% 0 0;
    width: 65%
}

.card-reader-image {
    background: #fff;
    border: none;
    border-left: none;
    border-radius: .6em;
    display: block;
    float: left;
    margin: auto;
    position: relative;
    text-align: center;
    width: 33%;
    z-index: 10
}

.card-reader-image img {
    margin: auto;
    max-width: 250px;
    width: 100%
}

.card-reader-tips li {
    background: #fff;
    border: .1em solid #ddd;
    border-radius: .3em;
    display: block;
    margin: 0 .5em .5em;
    padding: .7em
}

.card-reader-number i {
    background: #485dc5;
    border-radius: 2em;
    color: #fff;
    display: block;
    float: left;
    font-size: 1.2em;
    height: 1.6em;
    line-height: 1.55em;
    margin: 0 2% 0 0;
    text-align: center;
    text-decoration: none;
    width: 1.6em;
        font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.card-reader-text {
    color: #4d4d4d;
    display: inline-block;
    max-width: 85%
}

.card-reader-text span {
    color: #e32837;
}

.card-reader-text strong {
    color: #485dc5;
    font-size: 1.15em
}

.card-reader-text small {
    color: #4d4d4d;
    display: inline-block;
    font-size: .9em;
    margin: .5em 0 0
}

.card-reader-text small i {
    background: #4d4d4d;
    border-radius: .5em;
    color: #fff;
    display: inline-block;
    padding: 0 .75em 0 .65em;
        font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.card-reader-options {
    display: block;
    margin: 1em 0 0;
    text-align: center
}

.card-reader-options a {
    background: #000;
    border-radius: .25em .25em 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-left: .2em;
    padding: .75em;
    text-align: center;
    text-transform: uppercase
}

.card-reader-options a.active-item {
    background: #fff;
    border-color: #fff;
    color: #e32837
}

.card-reader .challenge-code {
    background: #f2f2f2;
    clear: both;
    color: #4d4d4d;
    display: block;
    font-size: 1.1em;
    margin: .5em auto;
    padding: .5em 0;
    text-align: center;
    vertical-align: middle;
    width: 60%
}

.card-reader .challenge-code em {
    color: #4d4d4d;
    font-size: 1.2em
}

.card-reader-form {
    display: block
}

.card-reader-form.mandatory:before {
    right: 13.5%;
    top: 1%
}

.card-reader-form input {
    -webkit-transition: box-shadow .5s;
    background: #fff;
    box-shadow: 0 0 .5em #e2e2e2;
    clear: both;
    color: #4d4d4d;
    display: block;
    margin: 1em auto .5em;
    text-align: center;
    transition: box-shadow .5s;
    width: 60%
}

img.card-reader-icon {
    margin: 0 .25em;
    width: 30px
}

/*** Contact List ***/
.contact-list p {
    display: block;
    line-height: 1.3em;
    padding-left: 30px
}

.contact-list h3.icon {
    display: block;
    padding: 0 0 0 30px
}

.contact-list h3.i-top:before {
    margin-top: 0;
    top: 5px
}

.contact-list h3, .twitter-feed h3 {
    padding-top: 0
}

/*** Simple Box ***/
/* Simple Box ::Defaults */
.simple-box {
    display: block;
    margin: 0 auto .5em;
    padding: 1em;
    position: relative;
}

.simple-box.no-padding {
    padding: 0
}

.simple-box.no-margin {
    margin: 0
}

.simple-box-pad {
    width: 85%;
    margin: auto;
    padding: 1em;
    color: #485dc5;
}

/* Simple Box ::Backgrounds */
.simple-box.bg-white {
    background: #fff;
}

.simple-box.bg-yellow {
    background: #ffbf68
}

.simple-box.bg-green {
    background: #d6ede7;
}

/* confirmation screen */
.simple-box.bg-white .simple-box.bg-green, .confirm-panel {
    background: #eeeaf0;
}

.simple-box.bg-pink {
    background: #eeeaf0;
}

.simple-box.bg-grey {
    background: #e2e2e2;
	padding: 0.5em;
}

/*** Button Links ***/
/* Button Links ::Defaults */
.aibLinkStyle01, a.button-links, button.button-links, .button-links a, .button-links button, .quickpay-label label {
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    outline: 0;
    position: relative;
    padding: 6px 14px;
    border: none !important;
    font-size: 16px;
}
.accBanner .button-links {
    margin-top: 0;
}

.link-text {
	margin-top: 1em;
}

.button-alignc, .button-fullWidth .button-links {
    width: 100%;
}

.button-alignc .button-links {
    width: 60%;
    margin: 1% 20%;
}

.aibLinkStyle01, a.button-links, button.button-links, .button-links a, .button-links button, .quickpay-label label {
    color: #fff;
    background: #485dc5;
}

button.ibGreyButton, 
a#backToTop, 
#securemaildeletemessage_button_id {
    background: #f2f2f2;
    color: #4d4d4d;
    border: 1px #9e9e9e solid !important;
    padding: 5px 14px;
}
li[data-cell-header="Options"] button.button-links,
li[data-cell-header="Options"] .button-links a {
	background: none;
	color: #4d4d4d;
}
li[data-cell-header="Options"] .fa-plus, li[data-cell-header="Options"] .fa-minus, li[data-cell-header="Options"] .fa-chevron-right {
	font-size: 1em;
}
li[data-cell-header="Options"] button.button-links:hover {
	color: #485dc5;
}
.button-links.logout:focus, .button-links.mail:focus {
	    background: #6e6e6e;
}
button[title='Remove'],
button[name='viewAlerts'],
.ht-cell.ht-btn button.button-links,
li[data-cell-header] button, 
li[data-cell-header] a {
    background: none;
    color: #4d4d4d;
}
.edit-phone {
    background: none !important;
    padding-right: 0 !important;
}
.editMobile .error-panel, .editHome .error-panel, .editWork .error-panel{
	float: left
}
button.ibGreyButton:hover, button.ibGreyButton:focus,
a#backToTop:hover, a#backToTop:focus,
#securemaildeletemessage_button_id:hover, #securemaildeletemessage_button_id:focus {
    background: #e2e2e2 !important;
}
.my-details-contact-deails ul li {
	width: 25% !important;
}
.my-details-contact-deails ul li:first-child {
	width: 50% !important;
}
button[name='viewAlerts']:hover, button[name='viewAlerts']:focus, 
button[title='Remove']:hover, button[title='Remove']:focus,
.ht-cell.ht-btn button.button-links:hover, .ht-cell.ht-btn button.button-links:focus, 
li[data-cell-header] button:hover, li[data-cell-header] button:focus,
li[data-cell-header] a:hover, li[data-cell-header] a:focus,
.edit-phone:hover, .edit-phone:focus {
     background: none !important;
}
.ht-cell.ht-btn button.button-links:hover, .ht-cell.ht-btn button.button-links:focus,
button[name='viewAlerts']:hover i, button[name='viewAlerts']:focus i, 
li[data-cell-header] button:hover i, li[data-cell-header] button:focus i,
.edit-phone:hover i, .edit-phone:focus i {
     color: #485dc5 !important;
}
li[data-cell-header] button i, .edit-phone i  {
    color: #4d4d4d !important;
    font-size: 1.5em;
}
.table-layout.account-details ul li{
	border: none !important;
}
#timeoutdlg .simple-box {
	border: 2px #485dc5 solid;
}
#timeoutdlg h2 {
	color: #485dc5;
}
.aibLinkStyle01, a:hover.button-links, a:active.button-links, button:hover.button-links, button:active.button-links, .button-links a:hover, .button-links a:active, .button-links button:hover, .button-links button:active, .quickpay-label label:hover, .quickpay-label label:active, .button-links button:focus, .button-links a:focus, button.button-links:focus, a.button-links:focus {
    background: #f2f2f2;
}

/* Green */
a.button-links.green, button.button-links.green, .button-links a.green, .button-links button.green, .button-links .green a, .button-links .green button, .button-links.green a, .button-links.green button {
    color: #fff;
    background: #485dc5;
    margin-bottom: 10px;
}
.login-border button.button-links.green, .login-border a.button-links.green {
    color: #fff;
    background: #485dc5;
}

.login-border button.button-links.green:hover, .login-border a.button-links.green:hover {
    background: #006657;
}

/* Wine  */
a.button-links.wine, button.button-links.wine, .button-links a.wine, .button-links button.wine, .button-links .wine a, .button-links .wine button, .button-links.wine a, .button-links.wine button {
    color: #fff;
    border-color: #a11d66;
    text-shadow: .05em .05em .05em #333;
    background: #9e1c62
}

/* Grey  */
a.button-links.grey, button.button-links.grey, .button-links a.grey, .button-links button.grey, .button-links .grey a, .button-links .grey button, .button-links.grey a, .button-links.grey button {
    border-color: #ccc;
    color: #4d4d4d
}

/* Alpha */
a.button-links.alpha, button.button-links.alpha, .button-links a.alpha, .button-links button.alpha, .button-links .alpha a, .button-links .alpha button, .button-links.alpha a, .button-links.alpha button {
    border: none;
    background: none;
    color: #4d4d4d
}

.aibLinkStyle01 {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #485dc5;
    display: inline;
    float: none;
    margin: 0;
    padding: 0;
    text-decoration: underline;
    text-indent: 0;
    text-shadow: none;
    box-shadow: none
}

a.button-links:hover, button.button-links:hover, .button-links a:hover, .button-links button:hover, a.button-links:focus, button.button-links:focus, .button-links a:focus, .button-links button:focus {
    background: #006657;
}

/* Alpha (change text color when button in coloured box) */
.error-panel .alpha button, .warning-panel .alpha button, .message-panel .alpha button, .simple-box[class*='bg-'] .alpha button, .error-panel .alpha a, .warning-panel .alpha a, .message-panel .alpha a, .simple-box[class*='bg-'] .alpha a, .error-panel .alpha, .warning-panel .alpha, .message-panel .alpha, .simple-box[class*='bg-'] .alpha {
    color: #4d4d4d !important
}

/* Button Links ::Full Width */
a.button-links.full-width, .button-links a.full-width, .button-links.full-width a {
    display: block
}

button.button-links.full-width, .button-links button.full-width, .button-links.full-width button {
    display: block;
    width: 100%
}

/* Button Links ::Icon Only (move text off-screen) */
.button-links.i-only, .button-links .i-only {
    text-indent: -999em;
    width: 53px;
    display: inline !important;
}

.button-links.i-padr {
    padding-right: 1.7em
}

.button-links.i-padl {
    padding-left: 1.7em
}

.button-links.more:before {
    left: -7px
}

.button-links.logout, .button-links.mail {
	color: #fff !important;
    margin: 0;
    height: 25px;
    font-size: 1em;
    border: 1px #e2e2e2 solid !important;
    padding: 2px 10px;
    margin-top: 2px;
}

.button-links.mail i {
    font-size: 1.3em;
}

.button-links.logout:hover, .button-links.mail:hover {
    background-color: #6e6e6e !important;
}

.button-links.expand {
    background: #fff;
    border: .1em solid #e2e2e2;
    border-radius: .2em;
    padding: .25em;
    color: #4d4d4d;
    cursor: pointer;
    margin: 0;
    font-size: .8em
}

.button-links:hover.expand, .button-links:focus.expand {
    background: #fff
}

.green {
    color: #485dc5;
}

.button-margin {
    margin-bottom: 0.3em;
}
/*** Form inputs ***/
.form-row {
    margin: 2em 0;
    display: block;
    clear: both
}

.formField {
    margin: 1em 0;
    display: block;
    clear: both
}

.login-page .form-head {
    background: none;
    border: none;
    border-radius: .5em .5em 0 0;
    margin: 0 0 1em;
    padding: .75em 1em .75em 4em;
    position: relative
}

.login-page label {
    color: #4d4d4d;
    display: block;
    line-height: 1.1em;
    padding: 0
}

.login-page .page-header {
    min-width: 17.5em
}

.login-page .simple-box-border {
    min-width: 18em
}

.login-page .warning-box {
    width: 85%;
    min-width: 15.5em
}

.logged-out, .timed-out {
    display: block;
    color: #485dc5;
}

.select-menu {
    float: none
}

.select-menu .fa, .select-menu:before {
    display: none
}

.radio-button {
    max-height: 20em;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0.3em 0 0
}

.quickpay .radio-button {
    max-height: 100%;
    overflow-y: hidden;
}

#quickpay .column-x3 {
    min-height: 180px;
}

@media screen and (max-width: 700px) {
	#quickpay .column-x3 {
	    min-height: 0;
	}
}

.radio-button label {
    text-decoration: none;
    display: block;
    clear: both;
    padding: .6em;
    cursor: pointer;
    text-align: left;
    outline: 0;
    color: #4d4d4d;
    text-shadow: none;
    border: .1em solid #e2e2e2;
    margin: 0 auto .25em;
    background: #f2f2f2;
}

.radio-button input[type='radio'] {
    position: absolute;
    left: -999em
}

.radio-button input[disabled='disabled'] + label, .radio-button input[disabled='disabled'] + label:hover, .radio-button input[disabled='disabled'] + label:active {
    background: #fafafa
}

.radio-button .selected {
    border-color: #485dc5;
    color: #485dc5;
    display: block;
    padding-left: 2.5em
}
.radio-button .selected:before {
    content: "\f00c";
    position: absolute;
    top: 50%;
    left: 5px;
    font-size: 2em;
    width: 50px;
    font-family: 'font-awesome';
    height: 50px;
    margin-top: -13px;
}

.radio-button-menu label {
    text-decoration: none;
    display: block;
    clear: both;
    padding: .6em;
    cursor: pointer;
    text-align: left;
    outline: 0;
    color: #4d4d4d;
    text-shadow: .05em .05em .15em #fff;
    background: #fafafa;
    border: .1em solid #ddd;
    border-radius: .2em;
    margin: 0 auto .25em
}

.radio-button-menu span:first-child label {
    margin-bottom: 1em
}

.radio-button-menu:hover span:first-child label {
    margin-bottom: .25em
}

.radio-button-menu input[type='radio'] {
    position: absolute;
    left: -999em
}

.radio-button-menu .selected {
    border-color: #689c38;
    color: #4d4d4d;
    display: block;
    padding-left: 2.5em
}

.radio-button-menu .selected:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    width: 50px;
    height: 50px;
    margin-top: -26px;
    background: url('../../roi-desktop/images/icon-grid-green.png') -50px -100px
}

.radio-button-wine input[type='radio'] {
    position: absolute;
    left: -999em
}

.radio-button-wine label {
    display: inline-block;
    text-align: center;
    padding: .6em 0;
    border: .1em solid #ccc;
    border-radius: .35em;
    margin: .2em .2em .2em 0;
    cursor: pointer;
    text-decoration: none;
    color: #4d4d4d;
    background: #fafafa
}

.radio-button-wine label.selected {
    color: #fff;
    text-shadow: .05em .05em .05em #333;
    background: #9e1c62;
    border-color: #a11d66
}

.radio-button-wine label:hover {
    background: #f2f2f2
}

.radio-button-wine label:active, .radio-button-wine label.selected:hover, .radio-button-wine label.selected:active {
    background: #9e1c62;
    border-color: #a11d66;
    color: #fff;
    text-shadow: .05em .05em .05em #333
}

.radio-button-wine.full-width label {
    display: block
}

/* Checkbox Options UPDATED */
.checkbox label {
    display: block;
    padding-right: 2em;
    padding-left: 3em;
    position: relative;
    cursor: pointer;
    margin: 0 0 1.5em;
    text-align: left
}

.checkbox label:before {
    background: #bbb;
    border: .25em solid #fff;
    border-radius: .2em;
    content: '';
    height: 18px;
    width: 18px;
    left: 8px;
    position: absolute;
    box-shadow: 0 0 .1em #666;
    margin: 0;
    top: 0
}

.checkbox input[type='checkbox'] {
    position: absolute;
    left: -999em;
    /*visibility: hidden*/
}

.checkbox label.selected {
    border-color: #689c38;
    color: #4d4d4d;
}

.checkbox label.selected:after {
	content: "\f00c";
    position: absolute;
    left: 10px;
    width: 50px;
    height: 50px;
    margin: 0;
    top: 0px;
    font-family: 'font-awesome';
    font-size: 2em;
    color: #485dc5;
}

.checkbox label.selected:before {
    background: #e2e2e2 !important
}

.checkbox.label-right label {
    padding-right: 3em;
    padding-left: 2em
}

.checkbox.label-right label:before {
    left: auto;
    right: 0
}

.checkbox.label-right label.selected:after {
    left: auto;
    right: -12px
}

/* Radio Buttons */
.radio {
    display: block;
    margin: 1.5em 0 0
}

.radio label {
    display: block;
    padding-left: 2.5em;
    position: relative;
    cursor: pointer;
    margin: 0 0 1.5em;
    text-align: left
}

.radio label:before {
    background: #bbb;
    border: .25em solid #fff;
    border-radius: 2em;
    content: '';
    height: 18px;
    width: 18px;
    left: 8px;
    margin-top: -14px;
    position: absolute;
    top: 50%;
    box-shadow: 0 0 .1em #666
}

.radio input[type='radio'] {
    position: absolute;
    left: -999em
}

.radio .selected {
    border-color: #485dc5;
    color: #485dc5
}

.radio .selected:after {    
	top: 50%;
    left: 10px;
    width: 50px;
    height: 50px;
    margin-top: -14px;
    content: "\f00c";
    position: absolute;
    font-family: 'font-awesome';
    font-size: 2em;
}

.radio .selected:before {
    background: #eee;
}

/* Mandatory Fields */
.mandatory-field {
    color: #485dc5;
    display: block;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    margin: 0 0 1em;
    padding: .2em 1.25em 0 0;
    text-align: right;
    text-transform: uppercase;
    float: right
}

.mandatory h3, .mandatory h4 {
    margin-top: 0;
    padding-top: 0
}

.mandatory {
    position: relative
}

.mandatory-field:before, .mandatory:before {
    content: '*';
    display: block;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: normal;
    opacity: .85;
    position: absolute;
    text-align: center;
    width: 18px;
    height: 18px;
    top: 0;
    right: auto;
    left: 47%;
    line-height: normal;
    color: #485dc5;
}

.mandatory-field:before, .mandatory.right:before, .formField.full-width .mandatory:before {
    left: auto;
    right: 0
}

.checkbox.label-right .mandatory:before {
    left: 0;
    right: auto
}

/*form input style*/
.euro-symbol {
    display: none
}

.formError {
    display: block;
    margin: 0 0 1em
}

.formLabel {
    display: block;
    float: left;
    width: 50%;
    padding-top: .5em
}

.pac-confirm .formLabel, .code-card-confirm .formLabel {
    width: auto;
    margin-right: 1em;
    padding-right: 1em;
}

.formInput {
    display: block;
    float: left;
    width: 50%;
    position: relative;
}

.formField.full-width .formLabel, .formField.full-width .formInput {
    width: auto;
    float: none;
    text-align: left
}

.formField.wide .formLabel {
    width: 55%;
}

.formField.wide .formLabel p {
    padding-top: .8em;
}

.formField.wide .formInput {
    width: 38%;
}


.radio-bar label.selected, .radio-bar label.selected span {
    color: #fff !important
}

.formLabel.fullWidth, .formInput.fullWidth {
    width: auto;
    text-align: left
}

.formInput, .nscInputs, .creditCardFormat, .fandlAccountNumber {
    text-align: left
}

.formInput .floatr, .formInput .side-column-right {
    float: left
}

.checkboxTandC .mandatory:before {
    right: 0;
    left: auto
}

/* Other Input Formats */
.creditCardFormat input {
    margin-left: 0.2em;
    text-align: center;
    text-indent: 0;
    width: 18%
}

.nscPrefix {
    width: 15%;
    display: inline-block
}

.nscPrefix input, .nscSuffix input {
    text-align: center;
    text-indent: 0
}

.nscSuffix {
    width: 40%;
    display: inline-block;
    margin-left: .3em
}

.fandlAccountNumber input {
    margin-left: 0.2em;
    text-align: center;
    text-indent: 0;
    width: 18%
}

.fandlAccountNumber input[maxlength='6'] {
    width: 30%
}

.fandlAccountNumber input[maxlength='3'] {
    width: 15%
}

.fandlAccountNumber input[maxlength='2'] {
    width: 10%
}

.euroCentInput {
    position: relative
}

.euroCentInput input {
    margin-left: 0.2em;
    text-align: center;
    text-indent: 0;
    width: 18%
}

.euroCentInput span:first-child {
    background: #fff;
    color: #4d4d4d;
    padding: 0;
    position: absolute;
    top: 15%;
    left: .4em;
}

.euroCentInput .euroInput {
    width: 30%;
    text-align: center
}

.euroCentInput .centInput {
    width: 15%;
    text-align: center
}

.accountNumber input {
    text-align: center
}

.accountName input {
    text-align: center
}

.bic input {
    text-align: center
}

.iban input {
    text-align: center
}

/* Calender */
.ui-datepicker {
    display: block;
    left: 50% !important;
    margin-left: -165px;
    position: fixed !important;
    top: 10% !important;
    z-index: 100000 !important;
    font-size: 1.1em
}

.ui-datepicker td {
    padding: 0
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #eeeaf0;
    padding: .6em;
    margin: .1em;
    box-shadow: none;
    text-shadow: none;
    min-width: 1.5em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.ui-datepicker-today .ui-state-default, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #485dc5;
    color: #fff;
}
.ui-datepicker-close.ui-state-hover {
	color: #4d4d4d !important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    border: 1px solid #e2e2e2
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #485dc5;
    color: #fff
}
td.ui-datepicker-today a, td.ui-datepicker-today span {
    background: #6e6e6e !important;
}

input.date,
input.date-readonly {
    text-align: center;
    text-indent: 0;
    padding: .6em 1em;
    width: auto
}

input[maxlength="2"].date {
    min-width: 3em
}

input[maxlength="4"].date {
    min-width: 4em
}

button.date {
    background: none !important;
    border: none !important;
    color: #4d4d4d !important;
    padding: 0 !important;
    position: relative;
    top: 3px;
    left: 3px;
    text-indent: 0 !important;
}
button.date:before {
	background: none;
}

.ui-datepicker {
    top: 5%
}

.ui-datepicker-buttonpane {
    margin: 0 !important
}

.ui-widget-content {
    border: none !important;
    box-shadow: 0 0 .2em #9e9e9e;
    margin-top: 5%;
}

.ui-datepicker-close {
    margin: 0 !important
}
/*** Historical Txs and Payment Logs  ***/
.filterdatepanel .formLabel{
	 width: 100%;
	 margin-top: -17px ;
} 
.filterdatepanel .formInput,.filterdatepanel .floatr {
    width: 100%;
}

.dateSmall {
    width: 15% !important;
    float: left !important;
    padding: 5px;
    text-align:center;
    margin-right: 2% !important;
}

.yearSmall {
    width: 20% !important;
    float: left !important;
    text-align: center;
    padding: 5px;
    margin-right: 2% !important;
}
.filterdatepanel .button-links.yearSmall {
    width: 12% !important;
    float: left;
    top: 0;
}
/*** Mobile Topup ***/
.mobile-topup label {
    position: relative
}

.mobile-topup label i {
    display: none
}

.mobile-topup .mobile-amount label {
    display: inline-block;
    width: 47%;
    padding: .6em 0;
    text-align: center;
    text-indent: 0 !important
}

.mobile-topup .mobile-icons label {
    background: #fff;
    border: .1em solid #c3c3c3;
    border-radius: .2em;
    clear: both;
    color: #4d4d4d;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto .25em;
    min-height: 25px;
    outline: 0;
    padding: 1.2em 0;
    text-align: center;
    text-decoration: none;
    text-indent: -9999em !important;
    text-shadow: .05em .05em .15em #fff;
    width: 47%;
}

.mobile-topup .mobile-icons label.selected {
    border-color: #485dc5;
}

.mobile-topup .mobile-icons label:before {
    content: '';
    background: url('../../roi-desktop/images/mobile-company-icons.png') no-repeat;
    background-color: transparent !important;
    border: none;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0
}

.mobile-topup .mobile-icons input[disabled='disabled'] + label:before {
    content: '';
    background: url('../../roi-desktop/images/mobile-company-icons-bw.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0
}

.mobile-topup .mobile-icons label.selected:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    width: 50px;
    height: 50px;
    margin-top: -26px;
}

.mobile-topup .mobile-icons label[for='VODAFONE']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='VODAFONE']:before {
    background-position: center 5px
}

.mobile-topup .mobile-icons label[for='O2']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='O2']:before {
    background-position: center -65px
}

.mobile-topup .mobile-icons label[for='METEOR']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='METEOR']:before {
    background-position: center -135px
}

.mobile-topup .mobile-icons label[for='3']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='3']:before, .mobile-topup .mobile-icons label[for='THREE']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='THREE']:before {
    background-position: center -215px
}

.mobile-topup .mobile-icons label[for='EMOBILE']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='EMOBILE']:before {
    background-position: center -285px
}

.mobile-topup .mobile-icons label[for='TESCO']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='TESCO']:before {
    background-position: center -365px
}

.mobile-topup .mobile-icons label[for='EIR MOBILE']:before, .mobile-topup .mobile-icons input[disabled='disabled'] + label[for='EIR MOBILE']:before {
    background-position: center -440px
}

.mobile-topup-success {
    display: block
}

#homemoneymngrright {
    display: none;
}
#homemoneymngrleft {
    display: block;
}

#homefootermsgright {
    display: none;
}
#homefootermsgleft {
    display: block;
}

/*** Menu Bar ***/
.menu-bar {
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    color: #4d4d4d;
    border: .1em solid #c3c3c3;
    text-shadow: none;
}

.menu-bar.dark-border {
    border-color: #c3c3c3;
}

.menu-bar.min-width a, .menu-bar.min-width button {
    min-width: 5em
}

.menu-bar a, .menu-bar button {
    display: block;
    float: left;
    margin: 0;
    padding: .6em;
    border: none;
    border-right: .1em solid #bbb;
    cursor: pointer;
    text-decoration: none;
    color: #4d4d4d;
    background: #fff
}

.menu-bar li:last-child a, .menu-bar li:last-child button {
    border: none
}

.menu-bar a:hover, .menu-bar a:active, .menu-bar button:hover, .menu-bar button:active, .menu-bar .active-item a, .menu-bar .active-item button, .menu-bar a.active-item, .menu-bar button.active-item {
    color: #fff;
    text-shadow: .05em .05em .05em #333;
    background: #eee;
}

.menu-bar button:hover, .menu-bar a:hover {
    color: #4d4d4d;
    text-shadow: .05em .05em .15em #fff;
    background: #eee;
}

.menu-bar .active-item a:hover, .menu-bar .active-item a:active, .menu-bar .active-item button:hover, .menu-bar .active-item button:active, .menu-bar a:hover.active-item, .menu-bar a:active.active-item, .menu-bar button:hover.active-item, .menu-bar button:active.active-item {
    color: #fff;
    text-shadow: .05em .05em .05em #333;
    background: #eee
}

/*** Radio Bar ***/
.radio-bar {
    cursor: pointer;
    overflow: hidden;
    color: #4d4d4d;
    text-shadow: .05em .05em .15em #fff;
    margin: 0 0 1em;
    display: block;
    width: 100%
}

.radio-bar.dark-border {
    border-color: #333
}

.radio-bar label {
    display: block;
    float: left;
    width: 47%;
    text-align: center;
    margin: 0;
    padding: .4em 1%;
    border: .1em solid #e2e2e2;
    cursor: pointer;
    color: #4d4d4d;
    background: #f2f2f2;
}

.radio-bar.x3 label {
    width: 30.6%
}

.radio-bar.x4 label {
    width: 22.5%
}
.aibGrey7 {
	color: #4d4d4d !important;
}
.aibWhite {
	color: #fff !important;
}

.radio-bar label:hover {
    background: #f2f2f2;
}

.radio-bar span label {
    border-radius: 0
}

.radio-bar input[type='radio'] {
    position: absolute;
    left: -999em
}

.radio-bar label.selected:hover, .radio-bar label.selected:active, .radio-bar .active-item label:active, .radio-bar .active-item label:hover, .radio-bar label:hover.active-item, .radio-bar label:active.active-item {
    background: #485dc5;
}

.radio-bar label.selected {
    color: #fff;
    text-shadow: none;
    background: #485dc5;
    border: .1em solid #485dc5;
}

/*** Progress Bar ***/
.progress-bar {
    display: block;
    text-align: center;
    /*padding: .5em*/
}

.progress-bar li {
    display: inline-block;
    float: left;
    width: 20%;
    vertical-align: top
}

ul.progress-bar li:first-child strong {
    margin: 0 1% 0 0;
}

ul.progress-bar li:last-child strong {
    margin: 0 0 0 1%;
}

.progress-bar.x2 li {
    width: 50%
}

.progress-bar.x3 li {
    width: 33.333%
}

.progress-bar.x4 li {
    width: 25%
}

.progress-bar.x5 li {
    width: 20%
}

.progress-bar.x6 li {
    width: 16.666%
}

.progress-bar.x7 li {
    width: 14.28%
}

.progress-bar.x8 li {
    width: 12.5%
}

.progress-bar.x9 li {
    width: 10%
}

.progress-bar.x10 li {
    width: 9%
}

.progress-bar strong {
    color: #fff;
    background: #485dc5;
    display: block;
    padding: .3em 0;
    margin: 0 1%;
    border: .14em #485dc5 solid;
}

.progress-bar span {
    color: #485dc5;
    font-size: .9em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.progress-bar .step-to-do strong {
    background: #f2f2f2;
    color: #485dc5;
    border: 1px #485dc5 solid;
}

.progress-bar .step-to-do span {
    color: #485dc5;
}

.progress-bar li button {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: pointer
}

.progress-bar .active-step strong {
    background: #f2f2f2;
    color: #485dc5;
    border: .2em solid #485dc5;
    padding: .23em;
}

.progress-bar strong .fa {
    margin: .2em .3em 0 0;
    float: right
}

/* New Progress bar for SME Loan */
.new-progress-bar {
	margin: 1em 0;
}
.new-progress-bar, .c-steps, .p-steps {
    display: table;
    width: 100%;
}
.new-progress-bar > .steps, .steps-bar {
    display: table-row;
}
.new-progress-bar .steps .step {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #6e6e6e;
	word-break: break-word;
	font-size: 13px;
}
.step-group {
	display: table-cell;
	border-width: 5px;
    border-top: 0;
    border-style: solid;
    border-left: 0;
    border-right: 0;
}
.step-group.completed {	
    border-image: linear-gradient(to right,#512d6d,#485dc5, #c42f9e) 100% 1;    
}
.step-group.completed .step{
	cursor: pointer;
}
.step-group.in-progress {
    border-color: #ccc;
}
.steps-bar .step {
    padding-bottom: 7px;
    border-right: 5px #fff solid;
    position: relative;
    top: 7px;
}

.c-steps .steps-bar .step {
    color: #485dc5;
}
.steps-bar .step.last {
	border-right: 0;
}

@media screen and (max-width: 767px) {
	.step-group.completed {
    	background: linear-gradient(to right,#512d6d,#485dc5, #c42f9e);
	}
	.step-group.in-progress {
   	 	background: #ccc;
	}
	.step-group {
	    border-width: 0;
	    border-style: none;
	}
	.steps-bar .step {
	    padding-bottom: 2px;
	    top: 0;
	    padding-top: 5px;
	}
	.new-progress-bar .steps .step {
		color: #fff;
	}
	.c-steps .steps-bar .step {
	    color: #fff;
	}
}

/*** Summary Panel ***/
.summary-panel {
    display: block;
    text-align: left;
    margin: 0 0 1.5em -1em;
    background: #485dc5;
    background: linear-gradient(45deg, #512d6d 0%, #c42f9e 100%);
    width: 100%;
    padding-right: 2em;
    color: #fff;
}
.summary-panel > p {
    margin-left: 1em;
}

.summary-panel strong, .summary-panel em {
    display: block;
    margin: 0;
}

.summary-panel em {
    font-size: 1.4em
}

.summary-panel .bg-dark strong {
    color: #fff;
}
.summary-panel .bg-dark em {
    color: #fff
}
.summary-panel .bg-dark, .summary-panel .bg-light, .summary-panel .bg-lighter {
    display: inline-block;
    padding: .5em 2em .5em 4em;
    border: .2em solid #eeeaf0;
}
.summary-panel .bg-dark {
    padding-left: 3.5em;
    margin: 0 0 0 -2.2em;
    position: relative;
    z-index: 2;
	border: none;
}
.summary-panel .bg-dark:before {
    content: '';
    position: absolute;
    bottom: -1.2em;
    left: 0;
    border-width: 0 1.2em 1.2em 0;
    border-style: solid;
    border-color: #000 #000 transparent transparent;
    background: none;
    display: block;
    width: 0
}
.summary-panel .bg-light {
    position: relative;
    z-index: 1;
    border: none;
}
.summary-panel .bg-lighter {
    position: relative;
    z-index: 0;
    border: none;
}
.summary-panel.x1 li {
    min-width: 50%
}
.summary-panel.x2 li {
    min-width: 35%
}
.summary-panel.x3 li {
    min-width: 20%
}

/*** Overview List ***/
.overview-list ul {
    display: block;
    margin: .5em auto;
    position: relative;
    cursor: pointer;
    background-color: #f2f2f2;
    padding: 0.2em 0;
}
.overview-list.myaccounts-list ul li {
    border: none;
}
.overview-list.myaccounts-list em {
    font-family: 'aspira-regular', calibri, arial, sans-serif;
}
.overview-list.myaccounts-list ul li:first-child {
	min-width: 36%;
}
.overview-list.myaccounts-list ul {
    margin: 0;
    background-color: #fff;
}
.overview-list.myaccounts-list ul:hover:before, .overview-list.myaccounts-list ul:active:before {
	color: #485dc5;
}
.overview-list ul:hover, .overview-list ul:active {
    background: #e2e2e2;
}

.overview-list ul:first-child {
    border: none
}

.overview-list ul:first-child li {
    border: none
}

.overview-list ul:first-child:before {
    display: none
}

.overview-list li {
    display: inline-block;
    vertical-align: middle;
    padding: .3em .75em;
    min-width: 20%;
    position: relative
}

.overview-list li.balance {
    border-left: .15em dotted #ccc;
    border-right: .15em dotted #ccc
}

.overview-list ul li:first-child {
    min-width: 45%;
    border: none;
    padding: .75em .75em .75em 10px
}

.overview-list span {
    display: block;
    margin: 0 0 0 1.5em;
    color: #4d4d4d;
}

.overview-list strong, .overview-list em {
    display: block;
    margin: 0;
    color: #4d4d4d
}

.overview-list em {
	font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.overview-list ul:before {
    content: "\f054";
    position: absolute;
    left: auto;
    font-family: 'font-awesome';
    right: 0;
    width: 30px;
    height: 36px;
    line-height: 36px;  
}
.overview-list.myaccounts-list ul:before {
    right: -5px;
    width: 40px;
    height: 36px;
    line-height: 36px;
	padding: .3em .0;
	font-size: 1.2em;
	color: #4d4d4d;
	line-height: 45px;
}

.overview-list ul.accordionClass:before {
    display: none
}

.overview-list ul.accordionClass .answer {
    display: block;
    margin-top: .5em
}

.overview-list ul.accordionClass li:before {
    top: 23px
}

.overview-list ul:hover:before, .overview-list ul:active:before {
    /* background: url('../../roi-desktop/images/icon-grid-green.png') -50px -50px */
    color: #485dc5;
}

.overview-list ul.alt-row {
    background: #eeeaf0;
}

.overview-list .i-new:before {
    top: 17px;
    left: -17px
}

.overview-list .banner li {
    color: #485dc5;
    width: auto;
    padding-left: 2em !important;
    text-shadow: 0 0 .1em #fff
}

.overview-list .banner li strong {
    color: #485dc5;
}

.simple-box.overview-footer {
    border-radius: 0 0 .4em .4em;
    margin: -.5em auto 1.5em;
    padding: .5em 2.5em .75em;
    width: 75%;
    background: #485dc5;
    color: #fff;
    border: .15em solid #689c38
}

.overview-footer {
    text-align: center
}

.overview-footer a, .overview-footer button {
    color: #485dc5;
    background: none;
    border: none;
    padding: .2em .5em;
    margin: 0;
    cursor: pointer;
    border-right: .1em dotted #ccc;
    text-decoration: none
}

.overview-footer a:hover, .overview-footer button:hover {
    color: #fff;
    text-decoration: underline
}

.overview-footer li:last-child button {
    border: none
}

/* custom modifications */

.overview-list.overview-custom ul {
    cursor: default;
}

.overview-list.overview-custom ul:first-child {
    border: .1em solid #ddd;
}
.overview-list.overview-custom li.balance {
    border-left: .1em dotted #ccc;
    border-right: .1em dotted #ccc
}
.overview-list.overview-custom ul:before {
    display: none
}
/* end custom */

/* Expand */
.expand-left {
    display: inline-block;
    vertical-align: top
}

.expand-left button {
    margin: 0
}

.expand-right {
    display: inline-block;
    vertical-align: top;
    width: 88%;
    margin-left: 3%
}

.expand-right h4 {
    padding: .5em 0
}

.savings-options button {
    display: block;
    width: 100%;
    margin: .5em auto;
    border-radius: .7em;
    border: .15em solid #ddd;
    padding: 1em .75em;
    position: relative;
    cursor: pointer;
    background: #fafafa;
    text-align: left
}

.savings-options button:hover, .savings-options button:active {
    background: #fafafa
}

.savings-options button:before {
    content: '';
    position: absolute;
    top: 50%;
    left: auto;
    right: -5px;
    width: 50px;
    height: 50px;
    margin-top: -26px;
    background: url('../../roi-desktop/images/icon-grid-grey.png') -50px -50px
}

.savings-options button:hover:before, .savings-options button:active:before {
    background: url('../../roi-desktop/images/icon-grid-green.png') -50px -50px
}

.slide-options ul {
    display: block
}

.slide-options button {
    display: block;
    width: 100%;
    padding: 1em .75em;
    position: relative;
    cursor: pointer;
    text-align: left;
    border: none;
    margin: 0;
    background: #eee;
    border-radius: 0;
    border-bottom: 1px dotted #ccc;
    outline: 0
}

.slide-options button:hover, .slide-options button:active {
    background: #f8f8f8;
    outline: 0
}

.slide-options button:before {
    content: '';
    position: absolute;
    top: 50%;
    left: auto;
    right: -5px;
    width: 50px;
    height: 50px;
    margin-top: -26px;
    background: url('../../roi-desktop/images/icon-grid-grey.png') -50px -50px;
    outline: 0
}

.slide-options button:hover:before, .slide-options button:active:before {
    background: url('../../roi-desktop/images/icon-grid-green.png') -50px -50px;
    outline: 0
}

/*** Quickpay ***/
.quickpay {
    margin-bottom: 1em;
}
.quickpay .radio-button .selected:before {
	display: none;
}
.quickpay .radio-button .selected {
	padding-left:.6em;
}
.quickpay h1 {
    display: inline-block;
    color: #fff;
    padding: 6px 0;
    line-height: 1.75em;
}

.quickpay .radio-button-menu-box {
    height: 11em
}

.quickpay .quickpay-menu {
    text-align: center;
    margin-top: 9px;
}

.quickpay .quickpay-scroll-outer {
    height: 14em;
    overflow: hidden;
    margin: 0 0 1em;
    position: relative
}

.quickpay .quickpay-scroll {
    width: 106%;
    padding-right: 1em;
    height: 14em;
    overflow-y: scroll;
    position: relative
}

.quickpay .quickpay-more {
    display: block;
    position: absolute;
    bottom: .7em;
    right: -1em;
    z-index: 100;
    width: 1.8em;
    height: 1.8em;
    opacity: .25
}

.quickpay .quickpay-more-from {
    display: block;
    position: absolute;
    bottom: .7em;
    left: -2.5em;
    z-index: 100;
    width: 1.8em;
    height: 1.8em;
    opacity: .25
}

.quickpay-close {
    position: relative;
    text-align: center;
    margin-bottom: 3em
}

.quickpay-close a {
    display: inline-block;
    cursor: pointer;
    float: right;
    margin-left: -3.5em;
    text-align: center;
    padding: .6em 2em .8em;
    position: absolute;
    top: -.5em;
    border-radius: 0 0 .5em .5em;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    left: 50%;
    z-index: 10
}

.quickpay-head {
    border: none;
    margin: 0 auto 0;
    background: #485dc5;
}

.quick-apply button {
    min-height: initial
}

/*** Invest ***/
.invest-box {
    border: 1px solid #eee;
    border-radius: .5em;
    padding: .5em 1em;
    background: #fefefe;
    min-height: 10em;
    width: 24%;
    margin: 0 1%;
    display: inline-block;
    vertical-align: middle
}

.invest-box h3 {
    min-height: 2.5em
}

.invest-box img {
    display: block;
    border-radius: .5em;
    background: #fff;
    margin-bottom: .5em;
    box-shadow: 0 0 .2em #ddd;
    border: none
}

/*** Footer Menu ***/
.footer-menu {
    display: block;
    text-align: center;
    margin: 1em auto 0;
    background: #59364f;
    padding: .25em 1em;
    border-radius: .4em
}

.footer-menu li {
    display: inline;
    color: #fff
}

.footer-menu li a,
.footer-menu li span {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0 0 0 1em;
    background: none !important;
    box-shadow: none !important;
    border: none;
    font-size: .85em
}

.footer-menu a {
    color: #485dc5 !important
}

.footer-menu a:hover {
    color: #006657 !important
}

.footer-menu li ul li:last-child {
    clear: none;
    display: inline
}

.footer-menu li:last-child {
    margin: 0;
    display: block;
    clear: both
}

.footer-menu li:last-child span {
    margin: 0
}

.footer-section.lock {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.device-options {
    clear: both;
    display: block;
    float: left
}

.device-options button {
    background: none;
    border: none;
    box-shadow: none;
    color: rgba(80, 33, 66, 0.5);
    cursor: pointer;
    position: relative;
    text-indent: 0
}

.device-options button:hover {
    color: #4d4d4d
}

.fa-mr {
    margin-right: .5em
}

.fa-ml {
    margin-left: .5em
}

.sm-links {
    display: block;
    float: right
}

.sm-links .connect span {
    color: #485dc5;
    display: block;
    float: left;
    font-size: 1.25em;
    margin: 12px 10px 12px 5px;
    text-transform: uppercase;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.sm-links a {
    background: none;
    border: none;
    border-radius: .2em;
    box-shadow: none;
    color: #4d4d4d;
    cursor: pointer;
    height: auto;
    margin: 0 0 0 .4em;
    padding: 0;
    text-shadow: none;
    width: auto
}

.sm-links a:hover {
    background: none;
    color: rgba(80, 33, 66, 0.5)
}

.sm-links a .fa-twitter-square {
    color: #00aced !important
}

.sm-links a .fa-facebook-square {
    color: #485d9e !important
}

.sm-links a .fa-youtube-square {
    color: #c82f2f !important
}

.sm-links a .fa-linkedin-square {
    color: #007bb6 !important
}

.sm-links a .fa-google-plus-square {
    color: #d94836 !important
}

button.icon-desktop, button.icon-tablet, button.icon-mobile {
    background: none;
    border: none;
    height: 45px;
    position: relative
}

button.icon-desktop {
    width: 65px
}

button.icon-tablet {
    width: 32px
}

button.icon-mobile {
    width: 32px
}

/* Online Savers */
.apply-online-options {
    background: url('../../roi-desktop/images/apply-online-bg.jpg') no-repeat right center #231e1b;
    background-size: auto 115%;
    display: block;
    min-height: 15em;
    padding: 1em 0;
    border-radius: .4em
}

.apply-online-options button.button-links {
    display: block;
    background: rgba(255, 255, 255, .85);
    border: none;
    padding: 1em 1.5em;
    margin: 1em 0;
    box-shadow: .1em .1em .2em #333;
    width: 20%;
    min-width: 17em;
    text-align: left;
    border-radius: 0 .5em .5em 0;
    font-size: 1.4em;
    position: relative;
    left: -15px
}

.apply-online-options button.button-links:active, .apply-online-options button.button-links:hover {
    background: rgba(255, 255, 255, .95);
    color: #485dc5;
    box-shadow: .1em .1em .2em #000
}

.apply-online-options button.button-links:after {
    content: '';
    position: absolute;
    bottom: -1.2em;
    left: 0;
    border-width: 0 1.2em 1.2em 0;
    border-style: solid;
    border-color: #444 #444 transparent transparent;
    background: none;
    display: block;
    width: 0;
    height: 0;
    z-index: -1
}
.timeout-warning {
    float: left;
    width: 15%;
    margin: -6% 1% 1% 16%;
}
.timeout-warning img {
	    margin-left: -60%;
}
.timeout-warning h3 {
    width: 60%;
    float: left;
}
.timeout-buttons {
    float: left;
    width: 100%;
}
.ui-datepicker-current {
    display: none !important
}

/* IBAN and BIC converter */
.convertTool {
    display: block;
    background: #e2e2e2;
    box-shadow: none;
    padding: 1em;
    margin: 1em auto
}

.helpText {
    background: #fafafa;
    border: .1em solid rgba(0, 0, 0, .2);
    border-radius: .3em;
    display: block;
    padding: .5em 1em;
    position: relative;
    top: -0.6em
}

.helpTextInputField {
    position: relative;
    top: -0.6em
}

.adminBar, .copyright-footer {
    background: #485dc5;
}
.login-footer > .copyright-footer, .error-footer > .copyright-footer {
    background: #485dc5;
}

.navBar.login {
    background: #fff;
}

.adminBar {
    background: #222;
    color: #fff
}

.quickpay-close a {
    background: #fff;
    border: none;
    box-shadow: .15em .25em .2em #ccc
}

.media-footer {
    margin: 1em auto
}

.links-footer {
    background: #fff;
    padding: 1em 0;
    position: relative;
    box-shadow: 0 0 2px 0 #e2e2e2;
}

.copyright-footer {
    color: #fff;
    font-size: .9em;
    padding: 0.7em 0;
    position: relative;
    text-align: center
}

.copyright-footer li {
    margin: 0 .4em
}

.sm-footer {
    display: block;
    float: right
}

.sm-footer .connect span {
    display: block;
    float: left;
    color: #fff;
    margin: 18px 10px 0 5px
}

.sm-footer button {
    display: block;
    float: left;
    background: #000;
    border: none;
    width: 30px;
    height: 30px;
    margin: 15px 0 0 5px;
    cursor: pointer;
    color: #ccc;
    font-size: .85em;
    border-radius: .2em;
    padding: .2em .2em .3em
}

.sm-footer button:hover {
    background: #fff;
    color: #006657
}

button.icon-desktop, button.icon-tablet, button.icon-mobile {
    position: relative;
    width: 75px;
    height: 45px;
    text-indent: -999em;
    overflow: hidden;
    background: none;
    border: none
}

button.icon-desktop {
    width: 65px
}

button.icon-tablet {
    width: 32px
}

button.icon-mobile {
    width: 32px
}

/* Temporary css for menu navigation button on security & settings landing page */
.buttonMenuTitle {
    display: block;
    float: left;
    border-radius: .5em;
    margin: 1.25em 0 0;
    padding: .5em;
    cursor: pointer;
    border: 2px solid #000
}

.buttonMenuTitle:hover {
    cursor: pointer
}

.buttonMenuTitle:hover .buttonMenuOptions {
    display: block
}

.buttonMenuTitle:hover .buttonMenuOptions {
    border-radius: .5em .5em 0 0
}

.buttonMenuOptions {
    display: none
}

.buttonMenuOptions button:before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 30px;
    background: #ccc;
    border-radius: 10em;
    opacity: .3
}

.bNavBar {
    display: block
}

.bNavBar .bNavMenu {
    display: none;
    padding: .2em 0 2em .5em
}

.bNavBar .bNavMenu button,
.bNavBar .bNavMenu a {
    padding: .4em 0;
    margin: 0;
    border: none;
    min-height: 0;
    text-align: left;
    display: block;
    color: #485dc5;
    background: none;
    border-bottom: .1em dotted #ccc;
    width: 96%
}

.bNavBar .bNavMenu a {
    text-decoration: none
}

.bNavBar .bNavMenu a:hover,
.bNavBar .bNavMenu button:hover {
    cursor: pointer;
    color: #485dc5;
    text-decoration: underline;
}

.navBarMyCards .bNavBar .bNavMenuOpen{
	padding-left:3em;
}
.snowflakeIcon {
    float: left;
    margin-top: .6em;
    margin-left: 0.7em;
    font-size: 1.5em;
    color: #039B7D;
}

.creditSnowflakeIcon{
	float: left;
    margin-top: .48em;
    margin-left: 0.7em;
    font-size: 1.5em;
    color: #039B7D;
}

.myCardsIcon{
	float: left;
    margin-top: .6em;
    margin-left: 0.5em;
    font-size: 1.6em;
    color: purple;
}

.creditMyCardsIcon{
	float: left;
    margin-top: .4em;
    margin-left: 0.5em;
    font-size: 1.6em;
    color: purple;
}

.bNavMenuOpen .fa {
    float: right;
    padding-top: .75em;
    color: #4d4d4d;
    width: 20px;

}
.bNavMenuOpen .link-fa {
    float: right;
    padding-top: .75em;
    padding-right: 0.8em;
    color: #4d4d4d;
}
.bNavMenuOpen:hover {
	background: #e2e2e2;
}
.bNavMenuOpen:hover .fa {
    color: #485dc5;
}
.bNavMenuBlock:hover {
    cursor: pointer
}

.bNavMenuOpen {
}

.bNavMenuOpen br {
    display: none
}

.bNavMenuOpen {
    background: #f2f2f2;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: block;
}

.bNavMenuOpen span {
    display: block;
    margin: 0;
    color: #4d4d4d;
}

.bNavMenuOpen strong {
    display: block;
    margin: 0;
    color: #4d4d4d;
    font-size: 1.2em;
    padding: .4em 0;
}

.bNavMenuOpen em {
    display: block;
    margin: 0;
    color: #485dc5;
    font-size: .95em;
    line-height: 1em;
    font-family: 'aspira-regular'
}
.bNavMenuBlock {
    margin-bottom: 0.5em;
}

.bNavMenuOpen button {
    background: none;
    border: none;
    cursor: pointer;
    padding: .3em;
    text-align: left;
    width: 100%;
    outline: none;
}

.bNavMenuOpen a {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: inline-block !important;
    text-decoration: none;
    padding: .3em;
}

.bNavMenuOpen span img {
    float: left;
    width: 2em;
    margin-right: .3em;
}

.button-links.showList {
    color: #fff;
    display: none;
    float: right !important;
    margin: 0 !important;
    width: auto !important;
}

.menu-bar {
    border-radius: 0;
}

.menu-bar a, .menu-bar button {
    border: none;
    border-right: 1px solid #4d4d4d;
}

.menu-bar.dark-border {
    border: none
}

.menu-bar a:hover, .menu-bar a:active, .menu-bar button:hover, .menu-bar button:active, .menu-bar .active-item a, .menu-bar .active-item button, .menu-bar a.active-item, .menu-bar button.active-item, .menu-bar .active-item a:hover, .menu-bar .active-item a:active, .menu-bar .active-item button:hover, .menu-bar .active-item button:active, .menu-bar a:hover.active-item, .menu-bar a:active.active-item, .menu-bar button:hover.active-item, .menu-bar button:active.active-item {
    background: #485dc5;
    color: #FFFFFF;
    text-shadow: none;
}
.menu-bar a:hover, .menu-bar button:hover {
    background: #e2e2e2;
    color: #4d4d4d;
    text-shadow: none;
}
.quick-apply button {
    float: left;
    margin: 0 0.3em 0.3em 0;
    min-height: 4em;
    min-width: 32.5%;
    width: 48%
}

.inTheRed {
    color: #e32837 !important
}

.nav-col {
    display: block;
    float: left;
    width: 33.333%;
    font-size: .9em
}

.nav-col.xl {
    width: 66.666%
}

.footer-col {
    display: block;
    float: left;
    width: 25%;
    font-size: 1em
}

.footer-col.xl {
    width: 50%
}

.footer-col a {
    color: #485dc5;
}
.login-footer .footer-col a, .error-footer .footer-col a {
    color: #485dc5;
}

.footer-col a:hover {
    text-decoration: underline
}

.footer-col ul li a {
    display: block;
    text-decoration: none;
    border-bottom: .1em dotted rgba(77, 77, 77, .1);
    margin: 0 20% 0 0;
    padding: .25em 0
}

.quick-apply button br, .text-links button:before {
    display: none
}

input.input-error {
    box-shadow: 0 0 .2em #a00
}

input:focus {
    border-color: #808080;
}

.overview-list ul li.icon:before {
    display: block;
    left: 10px;
}

.overview-list .banner li:before {
    display: block !important
}

.overview-list ul li:first-child {
    min-width: 35%;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    padding: 0;
    height: 36px;
    line-height: 36px;
}

.overview-list ul.alt-row {
    background: #eeeaf0;
}
.overview-list ul.alt-row:hover {
	background: #dcd5e2;
}

.overview-list span {
    margin: 0 0 0 4em;
}

.overview-list li.balance {
    border-width: .1em
}

.overview-footer a, .overview-footer button {
    padding: .2em;
    border: none
}

.overview-footer.icon:before {
    display: none
}

.text-links button, .text-links button:hover {
    background: none;
    border: none;
    color: #485dc5;
    text-align: left;
    font-weight: normal;
    padding: 0 0 0 1em;
    text-decoration: underline;
    margin: 0 0 .5em;
    position: relative
}

.text-links button:before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    color: #4d4d4d;
}

.text-links button:hover {
    color: #006657;
}

.text-links .button-links {
    padding: 0
}

.formInput .radio {
    margin-top: .25em
}

.formInput .radio label {
    text-align: left
}

.formInput button {
    margin-top: 0
}

.no-show {
    text-indent: -999em;
    position: absolute;
    height: 0
}

.radio-button-menu-box {
    position: relative;
    min-height: 3em
}

.radio-button-menu {
    display: block;
    height: 2.5em;
    overflow: hidden;
    background: #fff;
    transition: height .4s;
    -webkit-transition: height .4s
}

.radio-button-menu .showList {
    display: none !important
}

.radio-button-menu.optionSelected {
    overflow: inherit
}

.radio-button-menu:hover {
    height: 15em;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    overflow-y: auto
}

.radio-button-menu:hover label {
    display: block !important;
    margin-right: .5em
}

.quickpay .radio-button-menu {
    height: 3em
}

.quickpay .radio-button-menu:hover {
    height: 11em
}

.cms-banner {
    border: 1em solid #fff;
    border-radius: 0;
    box-shadow: 0 0 1em #aaa;
    margin: 1em auto 2em !important;
    overflow: hidden;
    position: relative
}

.navMenuTop {
    position: relative;
    display: block;
    float: left;
    min-width: 20%
}

.navMenuSub {
    display: none;
    position: absolute;
    top: 72px;
    background: #fff;
    padding: 1em;
    left: 0;
    z-index: 100;
    min-width: 15em;
    box-shadow: 1px 6px 10px -3px rgba(77,77,77,1);
}

.navMenuTop:hover .navMenuSub {
    display: block
}

.navMenuTop:hover button.navMenuButton {
    background: #fff;
    color: #485dc5;
    border-bottom: none;
    position: relative;
    border-top: none;
    box-shadow: -1px 10px 15px -3px rgba(77,77,77,1);
}

.navMenuTop.last:hover .navMenuSub {
    left: auto;
    right: 0
}

.navMenuTop button span {
    display: block;
    width: 36px;
    margin: auto;
    height: 36px;
}

.navAdvertSample {
    display: block;
    min-height: 10em;
    border: .5em solid #fff;
    background: #eee url('../../roi-desktop/images/5.jpg');
    background-size: 120%;
    box-shadow: 0 0 .2em #eee
}

.navMenuSub button {
    border: none;
    text-align: left;
    width: 100%;
    min-height: 0;
    padding: .4em 0
}

.navMenuSub button,
.navMenuSub a {
    display: block;
    color: #4d4d4d;
    text-decoration: none;
    margin: 0;
}

.navMenuSub a {
    padding: .25em 0
}

.navMenuSub button:hover,
.navMenuSub a:hover {
    text-decoration: none;
    color: #485dc5;
}
.tabList {
    margin: 1em 0 0 0;
    width: 100%;
    display: table;
    table-layout: fixed;
}
.tabList .tab {
	display: table-cell;
}
.tabList .tab {
	background: #6e6e6e;
	border-right: 3px #f2f2f2 solid;
	vertical-align: middle;
}
.tabList button {
    border: none;
    padding: 0.4em;
    color: #fff;
    float: left;
    cursor: pointer;
    outline: none;
    width: 100%;
    background: none;
    font-size: 16px;
}
.tabList.x1 {
	display: none;
}
.tabList div:last-child {
   border: 0;
}
.tabList .tab:hover {
    color: #fff;
    background-color: #4d4d4d;
}
.tabList .tab.active {
	    background: #fff;
}
.tabList button.active {
    color: #4d4d4d;
    font-family: 'aspira-demi', arial, sans-serif;
}
.transfersandpaymentslanding.main-column-left {
	width: 100%;
}
.transfersandpaymentslanding.side-column-right {
	width: auto;
}
.alertsTable ul li {
    vertical-align: top
}

.alertsTable .clear-plus {
    padding: 0
}

.alertsTable .formField {
    margin: 0
}

.alertsTable .formLabel {
    width: 50%;
    text-align: left
}

.alertsTable .formLabel label {
    margin: 0
}

.alertsTable .select-menu {
    margin: 0
}

.alertsTable .formInput {
    width: 40%
}

.alertsTable .radio-bar {
    margin: 0
}

.alertsTable .radio-bar label {
    width: 45%
}

.alertsTable .fa {
    font-size: 1.4em;
    position: relative;
    top: 3px
}

.messagesTable ul li:first-child {
    width: 10%
}

.messagesTable ul li:last-child {
    width: 3%
}

.messagesTable ul li {
    vertical-align: top
}

.messagesTable .clear-plus {
    padding: 0
}

.messagesTable .formField {
    margin: 0
}

.messagesTable .formLabel {
    width: 50%;
    text-align: left
}
.messagesTable .formLabel label {
    margin: 0
}
.securemailinbox.main-column-left.rsvp {
    width: 100%;
}
.securemailTable ul li:first-child {
    width: 5%
}

.securemailTable ul li:nth-child(2) {
    width: 5%
}

.securemailTable ul li:nth-child(3) {
    width: 20%
}

.securemailTable ul li:nth-child(4) {
    width: 59%
}

.securemailTable ul li:last-child {
    width: 15%
}

.securemailTable ul li {
    vertical-align: top
}

.securemailTable .clear-plus {
    padding: 0
}

.securemailTable .formField {
    margin: 0
}

.securemailTable .formLabel {
    width: 50%;
    text-align: left
}

.securemailTable .formLabel label {
    margin: 0
}

#accountForm .formField,
#accountForm select {
    margin: 0;
}

/* ========================================================================= */
/* filters */
.fm-container {
    display: none;
    margin: 0 auto 3em;
    background: #eeeaf0;
    font-size: .8em
}

.fm-container .filter-menu {
    display: block;
    clear: both;
    border-radius: .5em
}

.fm-container .filter-menu-inner {
    margin: 0 1em;
    padding: .5em 0 1em;
    position: relative;
}

.fm-container .filter-menu .centInput,
.fm-container .filter-menu .euroInput {
    text-align: center;
    text-indent: 0;
}

.fm-container .filter-menu .euroInput {
    width: 52%;
}

.fm-container .filter-menu .centInput {
    width: 15%;
}

.fm-container .filter-menu .amountDot {
    display: inline-block;
    text-align: center;
    width: 3%;
}

.fm-container.filter-ht .col1 {
    margin: 0 1% 0 0;
    width: 39%
}

.fm-container.filter-ip .col1,
.fm-container.filter-op .col1 {
    width: 59%
}

.fm-container .col1 .panel {
    margin: 0;
    width: 48.5%;
}

.fm-container .col1 .panel:first-child {
    margin-right: 2%;
}

.fm-container .col2 {
    margin: 0 1% 0 0;
    width: 33%;
}

.fm-container.filter-ip .col2,
.fm-container.filter-op .col2 {
    margin: 0 0 0 1%;
    width: 39%;
}

.fm-container.filter-ht .col3 {
    margin: 0;
    width: 25%
}

.fm-container input[type="text"] {
    border: 1px #9e9e9e solid;
    border-radius: 0;
    margin: 0 auto;
    text-indent: .2em;
    box-shadow: none;
    background: #fff;
}

.fm-container input[readonly="readonly"] {
    background: #e3e3e3;
    color: #4d4d4d;
}

.fm-container label {
    display: block;
    margin: .5em 0 0;
    padding: 0;
}

.fm-container.filter-ht .col2 li {
    display: block
}

.fm-container.filter-ht .col2 li label {
    cursor: pointer
}

.fm-container.filter-ht .col2 .panel {
    width: 49.5%;
    /*margin-top: 5px*/
}

.fm-container.filter-ht .col2 .fieldset li li {
    font-size: .95em;
    margin-left: .6em;
}

.fm-container.filter-ht .col2 .panel label {
    display: inline
}

.fm-container .panel {
    display: inline-block;
    float: left\9;
    vertical-align: top;
}

.fm-container button {
    margin: 0
}

.fm-close {
    background: #f0e9f0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;    
    bottom: -30px;
    cursor: pointer;
    display: block;
    left: 50%;
    margin-left: -3.5em;
    padding: .6em 2em .8em;
    position: absolute;
    text-align: center;
    width: 2.5em;
    /*z-index: 10;*/
    
    /* radius */
    border-radius: 0 0 1em 1em;
}

.fm-close a {
    color: #485dc5;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.fm-close:hover a {
    color: #4d4d4d;
}

.fm-container .button-links {
    font-size: 1.25em;
}

.fm-container .col1 .button-links {
    width: auto !important;
    background: none !important;
    border: none !important
}

.fm-container .col1 .button-links.icon:before {
    left: -17px;
    bottom: 0;
}

.fm-container .col1 .dateWidth {
    width: 54%;
    float: left;
    margin-right: 2%;
}

button[name="noticeToWithdraw"], #amendMaturity_button_id, button[name="notice7Cancel"], #ftdcurrentmatinst_button_id {
	margin-right: .3em;
}

.fm-container.filter-ht .col1 .valueWidth {
    width: 95%
}
/* filters */
/* ========================================================================= */

.alertsTable ul li {
    vertical-align: top
}

.alertsTable .clear-plus {
    padding: 0
}

.alertsTable .formField {
    margin: 0
}

.alertsTable .formLabel {
    width: 50%;
    text-align: left
}

.alertsTable .formLabel label {
    margin: 0
}

.alertsTable .select-menu {
    margin: 0
}

.alertsTable .formInput {
    width: 40%
}

.alertsTable .radio-bar {
    margin: 0
}

.alertsTable .radio-bar label {
    width: 45%
}

.alertsTable .fa {
    font-size: 1.4em;
    position: relative;
    top: 3px
}

.conditions ul {
    display: block;
    padding-left: 0.5em
}

.conditions ul li {
    display: list-item;
    margin-left: 0.25em;
    list-style: disc
}

.page-subheader.accountoverview p {
    padding: 0 0
}

.account-title {
    margin: 0;
    line-height: 1.4em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    font-size: 1.5em;
    padding: 0.25em 0.25em
}

td.documents a {
    line-height: 1.2em;
    font-size: 0.85em;
    display: block;
    margin-bottom: 0.25em !important;
    text-decoration: none
}

/* CMS styles start*/

.bullet-list li.noBullet {
    padding: 0;
    text-align: left;
}
.bullet-list li.noBullet .content {
    left: -1.5em;
    position: relative;
    color: #485dc5;
}
.simple-box.bg-color {
    background: #f2f2f2;
}
.bullet-list li.noBullet:before {
    border: 0;
    margin: 0;
    padding: 0;
}

.accordionClass {
    cursor: pointer;
}

.cmsAdvert .cmsLinks a {
    display: block;
    width: auto
}

strong .cmsHeaderOnly {
    display: inline;
}

.cmsAdvert .cmsLinks {
    clear: left
}

.cmsAdvert ul {
    list-style: none;
    display: inline;
    padding: 0;
    margin-bottom: 1em;
    text-align: justify;
}

.cmsAdvert li {
    list-style: none;
    display: block;
    margin: .6em;
    position: relative;
    padding-bottom: 0.25em

}

.cmsAdvert li:before {
    list-style: none;
    content: '';
    display: block;
    width: 0;
    height: 0;
    top: 6px;
    left: -1.5em
}

.cmsBody ul {
}

.cmstemplate1 {
}

.cmsLinks {
    display: block;
    float: left;
    font-size: 1em;
    width: 100%;
}

.cmsLinks ul li a {
    border-bottom: .1em dotted rgba(77, 77, 77, .1);
    display: block;
    margin: 0 10% 0 0;
    padding: 0.25em 0;
    text-decoration: none;
}

.cmsLinks a {
    color: #485dc5;
}

.cmsLinks a:hover, .cmsLinks a:focus {
    text-decoration: underline;
}

.cmswarning ul {
    list-style: none;
    display: block;
    padding: 0;
    margin-bottom: 1em
}

.cmswarning li {
    list-style: none;
    display: block;
    margin: 0 2em;
    position: relative;
    padding-bottom: 1em
}

.cmswarning li:before {
    border: 4px solid #666;
    border-radius: 2em;
    position: absolute;
    list-style: none;
    content: '';
    display: block;
    width: 0;
    height: 0;
    top: 6px;
    left: -1.5em
}

.table-layout.norsvp, .table-layout.norsvp table {
    display: table
}


.table-layout.norsvp ul, .table-layout.norsvp tr {
    display: table-row;
    border-bottom: 0.1em dotted #c3c3c3 !important;
}

td.alignr.credit {
    white-space: nowrap;
}

.table-layout.norsvp li, .table-layout.norsvp td {
	display: table-cell;
	width: auto !important;
	max-width: 100% !important;
	padding: .2em !important;
	border: none !important;
}

.table-layout.norsvp table.transaction-table td {
	width: 25% !important;
}

.table-layout.norsvp.transaction-table li {
	width: 33% !important;
}

.table-layout.norsvp li.alignr {
    text-align: right !important;
}

.table-layout.norsvp li:before {
    display: none !important
}

.table-layout.norsvp .date-row li {
    background: #eeeaf0;
}

/* -- RB ---------- */
.ht-table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.ht-table.data {
    background: #f2f2f2;
    display: block;
}

.ht-table.data .dataWrapper {
    display: block;
    width: 100%;
}

.ht-table .dataBlock {
    cursor: pointer;
    display: inline-block;
    /*float: left;*/
    margin: 0 2% 1em 0;
    vertical-align: top;
    width: 25%;
}

.ht-table .dataBlock.first {
    width: 41%;
}

.ht-table .top-row button {
    color: #485dc5;
    cursor: pointer;
    background: none;
    border: none;
    font-size: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
}

.ht-table.alt-row {
    background: #eeeaf0;
}


.ht-table .ht-row {
    display: table-row;
    border-bottom: 0.1em dotted #e2e2e2;
}

.ht-table.data .ht-row {
    display: block;
}

.ht-table .ht-cell {
    border-right: 0.1em dotted #ccc;
    display: table-cell;
    padding: 0.25em;
    width: auto;
}

.ht-table .ht-cell.ht-btn {
    border-right: none;
    width: 42px;
}

.ht-table .ht-bal-detail {
    display: none;
}

/* -- RB ---------- */


.clear-noHeight {
    clear: both;
    height: 0
}

.cmsAdvert {
    background: none repeat scroll 0 0 #fff;
    display: block;
    margin-bottom: 1em;
    overflow: hidden;
    position: relative;
    width: auto
}

.cmsAdvert h3, .cmsAdvert p {
    padding: 0.25em 0;
}

.cmsAdvert .adImage, .cmsAdvert .cmsAdTitle, .cmsAdvert .cmsAdDetail, .cmsAdvert .cmsAdOptions {
    display: table;
    color: #4d4d4d;
}

.cmsAdDetail ul, .cmsAdDetail p {
    text-align: justify;
}

.cmsAdvert .cmsAdOptions {
    clear: both;
    text-align: right
}

.cmsAdvert.imageRight .adImage {
    float: right;
    margin: 0 0 0.5em 0.5em;
    min-width: 12.5em;
    width: 25%;
}

.cmsAdvert.imageLeft .adImage {
    float: left;
    margin: 0 0.5em 0.5em 0;
    min-width: 12.5em;
    width: 40%;
}

.imageTop {
    margin-left: 15%;
}

.cmsAdvert.imageIcon .adImage {
    float: left;
    height: 50px;
    margin: 0 0.5em 0.5em 0;
    position: relative;
    width: 50px
}

.cmsAdvert.imageCover .adImage img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.cmsAdvert.imageCover .cmsAdTitle {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65);
    border-radius: 0.5em 0.5em 0 0;
    clear: both;
    color: #fff;
    float: left;
    padding: 0.5em 1em 0;
    position: relative;
    width: 40%
}

.cmsAdvert.imageCover .cmsAdDetail {
    background: #444;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65);
    border-radius: 0 0 0 0.5em;
    clear: both;
    color: #fff;
    float: left;
    padding: 0 1em 0.5em;
    position: relative;
    width: 40%;
    margin: 1em;
}

.cmsAdvert.imageCover .cmsAdOptions {
    clear: both;
    float: left;
    padding: 0 0 0.5em 2em;
    position: relative;
    width: 40%
}

.cmsAdvert.imageCover .cmsAdOptions button {
    border-radius: 0 0 0.25em 0.25em;
    margin: 0;
    padding-left: 2em;
    padding-right: 2em
}

.cmsAdvertBorder {
    border: 5px solid #ebebeb;
    box-shadow: 0 0 0.2em #ddd;
}

.cmsAdvert.accBanner .col1, .cmsAdvert.accBanner .col2, .cmsAdvert.accBanner .col3 {
    display: block;
    float: left;
    width: 25%;
    min-height: 2em;
    margin: 0.85em 0.3em 0.1em;
}

.cmsAdvert.accBanner .col2 h4 {
    padding: 0;
}

.cmsAdvert.accBanner .col1 h3 {
    background: none;
    color: #485dc5;
    display: block;
    left: -0.5em;
    margin-bottom: 0.5em;
    padding: 0;
    position: relative;
    padding-left: 0.5em;
    font-size: 1.2em;
    border-bottom: 1px #485dc5 solid;
}

.cmsAdvert.accBanner .col3 p {
    font-size: 2em;
    padding: 0
}

div.standingOrderFloatl{
	float:left;
	width:50%;
}
div.standingOrderFloatR{
	float:right;
	width:50%;
}
.standingOrderDuration{
	display:-webkit-box;
}

.standingOrderDurationCheckbox{
	margin-top: -1em;
	margin-left: -0.5em;
  
}


#returnButton{
	display:none;
	margin-top:11%;
	
}
#returnButton Button{
	margin-bottom: 2%;
	margin-top: 0%;
	margin-left:29%;
}
#numPaymentsInput{
	display:block;
}
#endDatePicker{
	display:block;
}

#final-date-warning-panel{
	display: none;
}
.error-panel-so-duration{
    color: #e32837;
    text-align: left;
    display: block;
    margin-bottom: 2em;
    width:85%;
    display:block;
}

 @media screen and (max-width: 800px) {
  
    .standingOrderDuration {
    	display:block;
	}
	
	 .standingOrderDurationCheckbox {
        margin-top: 0em;
   		margin-left: -0.4em;
    }
    
    .error-panel-so-duration{
	    color: #e32837;
    	display: block;
    	border-top: 2em;
    	margin-bottom: 2em;
    	margin-top: 0em;
    	float:left;
	}
	div.standingOrderFloatR{
		float:left;
		width:100%;
	}
	
	.radioso {
         float: left !important;
         width: 100% !important;
	}
                
	.radioso-input {
        width: 100%;
        float: left; 
	}
	
	
	.mobile-topup .topup-error {
		float: left;
		width: 100%;
	}
	
	.inlineInput {
		float: right !important;
		width: 30% !important;
	}
	
}
@media screen and (min-width: 801px) {
	.inlineInput {
		float: right !important;
		width: 50% !important;
	}
}
@media screen and (max-width: 700px) {
	#returnButton Button {
		margin-left: 0%;
	}
	.time-out-advice, .link-out-advice {
		width: 96%; 
		margin-left: 2%;
	}
	.service-settings-options .bNavBar {
	    width: 100%;
	}
}

.cmsAdvert.accBanner .col3 p small {
    font-size: 0.6em
}

.cmsAdDetail.accBanner {
    padding: 0 1em;
}

.savingsProdsBanner {
    margin-left: -1em;
}

.savingsProdsBanner2 {
    margin-left: -2em;
}

.cmsWarningMessage .fa.fa-3x.fa-exclamation-triangle {
    top: 0;
}

.grad {
    background: #6e6e6e;
    color: #fff;
    background: #5e5e5e \9;
}

.cmsAdBoxBorder {
    border: 2px solid #9e9e9e;
    padding: .5em;
}
.cmsAdBoxBorder:hover {
	 background: #f2f2f2 !important;
}

/* .i-custompadr {
    padding-right: 2.25em !important
} */

.cmsSimple-box.bg-white {
    background: none repeat scroll 0 0 #ffffff;
    border: medium none;
}
.cmsSimple-box {
    display: block;
    margin: 0 auto 0.5em;
    padding: .25em .25em 0;
    position: relative;
}

.cmsSimple-box:hover {
    box-shadow: 0 0 .5em #485dc5;
}

.cmsSimple-box button {
    bottom: 0;
    display: none;
    margin: 0;
    padding: 0.2em 0.6em;
    position: absolute;
    right: 0;
}


.onboard {
    background: none repeat scroll 0 0 #fff !important;
}
.onboard .text-content {
    display: block;
    margin: auto;
    width: 97.5%;
}
.onboard .board {
    background: none repeat scroll 0 0 #fefdfe;
    border: 0.25em solid #c3a9c1;
    border-radius: 0.5em;
    display: block;
    float: left;
    margin: 0 0.5% 0.5em;
    position: relative;
    width: 23.1%;
}
.onboard .board:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #c3a9c1 transparent transparent #c3a9c1;
    border-image: none;
    border-style: solid;
    border-width: 1.75em;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
}
.onboard .board .pad {
    padding: 0.2em 1em 1em;
}
.onboard .board h4 {
	font-family: 'aspira-demi', calibri, arial, sans-serif;
    margin-top: 1em;
    min-height: 3em;
    text-align: center;
}
.onboard .board p {
    display: block;
    font-size: 0.9em;
    padding-bottom: 1.5em;
}
.onboard .board img {
    width: 100%;
}
.onboard .board .num {
    color: #fff;
    font-size: 1.2em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    left: 12px;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em #000;
    top: -5px;
}
.onboard .cmsSlot-4col .board {
    min-height: 27em;
    width: 23.1%;
}
.onboard .cmsSlot-2col .board {
    min-height: 10em;
    width: 48%;
}
.onboard .cmsSlot-2col img {
    float: left;
    margin-top: 1em;
    width: 25%;
}
.onboard .cmsSlot-2col h4, .onboard .cmsSlot-2col p {
    float: right;
    min-height: 1em;
    padding: 0;
    text-align: left;
    width: 75%;
}
.onboard .cmsSlot-2col h4 {
    margin-top: 1em;
}
.tick-list {
    border: 0.1em solid #c3a9c1;
    border-radius: 0.5em;
    display: block;
    margin: 0 0.5% 0.5em;
    width: 98.5%;
}
.tick-list ul {
}
.tick-list li {
    background: url("/roi-desktop/_cms/images/onb-tick.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    display: block;
    margin: 1em 2em;
    padding: 0.25em 2.5em 0.5em;
}

.onboard .board .pad a {
    color: #4d4d4d;
    font-family: "aspira-regular",arial;
    text-decoration: none;
}

/* CMS styles end*/

.multiOptionWrap button {
    background: #fafafa;
    border: .1em solid #ccc !important;
    border-radius: .25em;
    margin: 0 .25em .5em 0;
    padding: .25em .5em;
    text-transform: capitalize;
}

.multiOptionWrap select {
    text-transform: capitalize
}

.acc-mgmt-btns {
    display: block;
    width: 48%;
    min-height: 25px;
    float: left;
    margin: 0 1%;
}

.pac-change,
.code-card-input {
    width: 4em;
}

.pac-input {
    width: 3em;
}

/* My Messages | Threads */
.myMessageBox {
    word-wrap: break-word;
}

.msgspecialleft, .msgspecialright {
    width: 100%;
    float: none;
}
@media screen and (min-width: 767px) {
    .msgspecialleft {
        width: 66%;
        float: left;
    }
    .msgspecialright {
        width: 33%;
        float: left;
    }
}

.myMessageBox.latest {
    width: auto;
    float: none !important;
}

.myMessageHeader {
    display: block;
    padding: .75em 1em;
    font-size: 14px;
    border: 1px solid #c3c3c3;
    background: #eeeaf0;
    width: initial;
}

.myMessageHeader ul li {
    border: none ! important;
}

.myMessageReceived, .myMessageSent {
    display: block;
    width: 75%;
    padding: .5em 1em
}

.myMessageReceived {
    float: left;
    background: #fcfcfc;
    border-radius: .75em;
    border: 1px solid #ccc;
}

.myMessageSent {
    float: right;
    background: #dcd5e2;
    border: 1px solid #c3c3c3;
}

.myMessageDate {
    display: block;
    text-align: right;
}

/* My Messages | Forms */
.myMessageForm {
    display: block;
    margin: 0 auto 1em;
    padding: 2em 1em 1.5em;
    font-size: 14px;
    border-radius: .75em;
    border: 1px solid #ccc;
    background: #e8e4eb;
}

.myMessageForm .innerColLeft {
    display: block;
    float: left;
    width: 20%;
    clear: left;
    margin-bottom: 1em;
}

.myMessageForm .innerColRight {
    display: block;
    float: right;
    width: 80%;
    clear: right;
    margin-bottom: 1em;
}

.myMessageForm select {
    width: 100%;
    font-size: 15px;
    border: 1px solid #ccc;
}

.myMessageForm textarea {
    display: block;
    width: 97.5%;
    min-height: 20em;
    border: 1px solid #ccc;
    background: #fff;
    font-family: arial, sans-serif;
    padding: .5em 1%;
    font-size: 15px;
}

.myMessageForm .responseTime {
    display: block;
    float: right;
    font-size: 11px;
    margin-top: .5em;
}

.myMessageForm .responseTime span {
        font-family: 'aspira-demi', calibri, arial, sans-serif;
}

.wordCount {
    display: block;
    float: right;
    clear: both;
}

.wordCount span {
        font-family: 'aspira-demi', calibri, arial, sans-serif;
    color: #485dc5;
}

.wordCount span.lowCount {
    color: #c00;
}

.myMessageForm .showError {
    color: #c00;
    display: block;
    padding: 0 0 .5em;
}

/* My Messages | Message List */

.messagesai {
    font-size: 20px;
    color: #4d4d4d;
}

.messagesaigrey {
    font-size: 20px;
    color: #4d4d4d;
}

.myMessageList button {
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
}

.myMessageList .fa {
    font-size: 1.5em;
    color: #4d4d4d;
}

/* My Messages | Paging */
.myMessagePaging {
    display: block;
    margin-top: 2em;
    height: 3em;
    text-align: center;
}

.myMessagePaging input[type="submit"] {
    border: none;
    background: none;
    color: #4d4d4d;
    padding: .1em;
    margin: 0;
    cursor: pointer;
}

.myMessagePaging input[type="submit"].selected {
        font-family: 'aspira-demi', calibri, arial, sans-serif;
    font-size: 1.3em;
    position: relative;
    top: 1px;
}

/* My Accounts notice deposit product buttons */
.overviewOptions {
    position: relative;
    text-align: right;
    top: -.5em;
    right: 1%;
}

.overviewOptions button {
    border-top: 0;
    border-radius: 0 0 .3em .3em;
    margin: 0;
    background: #eee
}

.overviewOptions button:hover {
    background: #ddd
}

.confirmed-panel .fa {
    color: #485dc5;
}

/* SME loan pages related ----------------------------- */
.sme .dateTag {
    margin: 0;
}

.sme .formInput {
    float: left !important;
    position: relative;
    width: auto;
}

.sme input.date {
    padding: 0.6em 0.2em;
    width: 6em;
}

.sme .date.button-links {
    left: 103%;
    position: absolute;
    top: 0;
}

.sme-errors .error-panel {
    background: none;
    border: none;
    color: #e32837;
}

#calculator {
    float: left;
    margin-left: 42%;
    margin-top: -1.5em;
}

#loan-result {
    display: none;
}

#mail_r_button_id {
    display: block;
    margin-right: 10px;
}

#mail_l_button_id {
    display: none;
}

#attachment-info-link {
    height: 1.2em;
}
textarea#queryDetails {
    width: 99%;
    max-width: 99%;
    min-height: 16em;
    max-height: 16em;
}

.my-applications-document-option.button-links {
    padding: 0;
}
.my-applications-document-option.button-links a {
    margin: 0;
    color: #485dc5 !important;
    text-decoration: underline;
        padding: 5px 14px;
}

.href-option.button-links a {
    margin: 0;
    padding: 5px 14px;
}

#replyForm {
    width: 70%;
    float: left;
}

.cmsAdDetail em, .cmsAdDetail i {
    font-style: italic;
}

.button-links.hyperlink {
    width: auto !important;
    display: inline !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-family: aspira-regular !important;
    text-decoration: underline !important;
    color: #485dc5 !important;
}

.login-border.login-step1.cmsSlot {
    margin-top: 20%;
    width: 100%;

}

.loginbackground {
    background: #485dc5;
    color: #fff;
    padding: 0.5em 0 0;
}

.loginbackground h3 ,.loginbackground p {
    text-align: center;
    padding: .25em;
}

.emaildisplay {
    max-width: 20em;
    word-wrap: break-word
}

.regulatorybox p {
    margin-top: 4%;
}
.cmsFooterImg {
    width: 30%;
    margin-left: 75%;
}

.regulatorybox .wide {
    margin-left: 2em;
}

.regulatorybox p.error-panel {
	float: left;
}

.regulatorybox .wide1 {
    margin-left: 5em;
}

.regulatorybox .radioso{
	float: right;
    width: 50%;
    margin-right: 0;
}
.radioso-input label {
	padding-left: 2em;
	padding-right: 0;
}
.radioso-input label:before, .radioso-input .selected:after {
	left: 0
}
.warning-border {
    border: 0.15em solid black;
    border-radius: 0.2em;
    display: block;
    margin: 0 auto 0.5em;
    padding: 1em;
    position: relative;
}

.login-border .column-x3 {
    margin-right: 2% !important;
    position: relative !important;
    width: 30% !important;
    clear: none !important;
}

.login-border .floatl {
    float: left !important;
}

.navLogo.navLogoCentre {
    margin-right: 45%;
}

#mail_t_button_id {
    display: block;
    float: right;
    margin-top: 0.9em;
    padding: 1em;
}

#mail_t_form_id .button-links.mail.alpha.floatr {
    box-shadow: none !important;
}

.cmsAdvert.accBanner .col1 {
    width: 26%;
}
.cmsAdvert.accBanner .col2 {
    text-align: justify;
    width: 52%;
}
.cmsAdvert.accBanner .col3 {
    width: 19%;
}

.loginlink a {
    margin-right: 1em;
}


@media screen and (max-width: 900px) {
    .myMessageList button {
        max-width:10em; text-align:left;
    }
    
  .cmsAdvert.accBanner .col3 {width: 17%;}
  .cmsAdvert.accBanner .col1 {width: 40%;}
  .cmsAdvert.accBanner .col2 {text-align: justify;width: 38%;}
	
   .hide-large {display: block !important;}
   .hide-large-inline {display: inline-block !important;}
   .hide-small {display:none !important;}
   .hide-td {visibility: hidden !important; display: none !important;}
   .hide-td-large {visibility: visible !important; display: table-cell !important;}

	.table-layout.norsvp.transaction-table li {
		width: auto !important;
	}
}

.loginlink-column-left {
    display: block;
    float: left;
    width: 68%;
    text-align: left

}

/* @media screen and (min-width: 767px) {
    .loginlink-column-left {
        display: block;
        float: left;
        width: 72%;
        text-align: left
    }
} */

.table-layout .panel .message-panel {
    width: 190%;
}

.fa.fa-grey.fa-exclamation-circle {
    color: #4d4d4d;
}

.fa.fa-orange.fa-times-circle {
    color: orange;
}

.full-width {
    width: 100%;
}

/*** Responsive Changes ***/
@media screen and (max-width: 1000px) {
    
    .navLogo.navLogoCentre {
        margin-right: 40%;
    }
    
    .accountoverview.main-column-left {
        float: none;
        width: auto;
    }
    
    .accountoverview.side-column-right {
        float: none;
        width: auto;
    }
    
    #homemoneymngrright {
        display: block;
    }
    #homemoneymngrleft {
        display: none;
    }
    
    #homefootermsgright {
        display: block;
    }
    #homefootermsgleft {
        display: none;
    }
    
    .message-panel span .fa, .error-panel span .fa, .warning-panel span .fa, .confirmed-panel span .fa {
        top: .1em;
    }
    
    .login-border.login-step1.cmsSlot {
        margin-top: 30%;
        width: 90%;
    }
    
    .regulatorybox .wide {
        margin-left: 0;
    }
    .regulatorybox .wide1 {
        margin-left: 0;
    }
    
    .footer-col, .footer-col.xl {
        width: 33.333%
    }
    
    .footer-col ul li a {
        margin-right: 10%;
    }
    
    
    .cmsFooterImg {
        margin-left: 30%;
        width: 65%;
    }
    
    /* ========================================================================= */
    /* filters */
    .fm-container.filter-ht .col1,
    .fm-container.filter-ht .col2 {
        width: 47.5%;
        margin: 0 2% 0 0;
    }
    
    .fm-container.filter-ht .col3 {
        width: 100%;
        margin: 0;
    }
    /* filters */
    /* ========================================================================= */
    
    .message-panel .right, .error-panel .right, .warning-panel .right, .confirmed-panel .right {
        width: 85%
    }
    
    /* CMS Styles*/
    .onboard .cmsSlot-4col .board {
        min-height: 30em;
        width: 47.9%;
    }
    .onboard .cmsSlot-2col .board {
        min-height: 2em;
        width: 97.9%;
    }
    /* CMS Styles*/
    
    .cmsAdvert.accBanner .col1 {
        width: 27%;
    }
    .cmsAdvert.accBanner .col2 {
        text-align: justify;
        width: 51%;
    }
    .cmsAdvert.accBanner .col3 {
        width: 18%;
    }
}

@media screen and (max-width: 900px) {
    .myMessageList button {
        max-width:10em;
        text-align: left;
    }
    
    .cmsAdvert.accBanner .col3 {
        width: 17%;
    }
    .cmsAdvert.accBanner .col1 {
        width: 40%;
    }
    .cmsAdvert.accBanner .col2 {
        text-align: justify;
        width: 38%;
    }
    
    .hide-large {
        display: block !important;
    }
    .hide-large-inline {
        display: inline-block !important;
    }
    .hide-small {
        display: none !important;
    }
    .hide-td {
        visibility: hidden !important;
        display: none !important;
    }
    .hide-td-large {
        visibility: visible !important;
        display: table-cell !important;
    }
}

@media screen and (max-width: 800px) {
    
    table {
        font-size: .9em
    }
    
    body > .limit-page {
        padding-top: 9em
    }
    
    body.no-margin > .limit-page, .limit-page.menu-adjust {
        padding-top: 0;
    }
	.column-center {
   		width: 98%
	}
	.tpp-login-form .column-center {
		width: 90%;
	}   
    .menuwrapper {
        left: 0;
        /* position: fixed; */
        top: 0;
        width: 100%;
        z-index: 100
    }    
    
    .navLogo {
        float: right;
        text-align: right
    }
    
    .navLogo img {
        width: 59px;
    }
    
    .login .navLogo {
        float: left;
        text-align: left;
        width: 74.5px;
        margin-right: 4px;
    }
    .navHeader h1.login-header {
        padding: 0;
        height: 69px;
        display: table-cell;
        vertical-align: middle;
        font-size: 1.75em;
    }
    
    .navMenuOpen {
	    border: 1px solid #4d4d4d;
	    cursor: pointer;
	    display: block;
	    float: right;
	    padding: 8px 10px 6px;
	    width: 30px;
	    height: 22px;
	    margin-top: 25px;
	    text-align: center;
	}
    .summary-panel {
    	width: 100%;
    }
        
    .navMenuOpen span {
        display: block;
        height: .25em;
        margin: .35em 0;
        background: rgba(255, 255, 255, .25)
    }
    
    .navMenuOpen i {
	    color: #4d4d4d;
	    font-size: 2.2em;
	}
    
    .navMenuOpen i {
	    color: #4d4d4d;
	    font-size: 1.5em;
	}
    
    .navMenuOpen:hover span {
        background: rgba(255, 255, 255, .75)
    }
    
    .navMenuTop {
        position: static;
        display: block;
        float: none;
        min-width: 0
    }
    
    .navMenuTop.selected {
        border-bottom: none;
    }
    
    .navMenuBlock {
        position: relative
    }
    
    .navMenuBlock:hover {
        cursor: pointer
    }    
    
    .navMenuBlock:hover .navMenu {
        display: block;
        width: 100%;
        border: 1px #e2e2e2 solid;
    	padding-top: 0;
    }
    
    .navMenu {        
        z-index: 10000;
        display: none;
        position: absolute;
        top: 63px;
        left: 0;
        min-height: auto;
        width: auto;
        min-width: 18em;
    	width: 100%;
    }
    
    .navMenu button {
	    border: none;
	    display: block;
	    float: none;
	    margin: 0;
	    min-height: initial;
	    min-width: 0;
	    padding: 1em;
	    text-align: left;
	    border-bottom: 1px #f2f2f2 solid;
	    width: 100%;
	    background-color: #fff;
	    border-radius: 0;
	}
	.navMenu button.active, .navMenu button:hover, .navMenuTop:hover button.navMenuButton {
		box-shadow: none; 
		border-bottom: 1px #f2f2f2 solid;
	}
       
    .navMenu .navMenuSub button {
        border-bottom: 0.1em dotted rgba(0, 0, 0, 0.1)
    }
    
    .navMenu button span {
        display: inline;
        padding: .5em 0 0
    }
    
    .navMenu button span i {
        font-size: 2em;
        margin: 0 .25em 0 0;
        min-width: 1.5em;
        position: relative;
        top: 3px
    }
    
    .navMenu li:first-child button {
        border-left: none
    }
    
    .navMenu li button {
        border: none;
        border-bottom: .1em solid rgba(0, 0, 0, .1);
        margin: 0;
        padding: 1em .5em 1.25em
    }
    
    .navMenu li:last-child button {
        border-bottom: none
    }
    
    .navMenuTop {
        position: relative
    }
    
    .navMenuSub {
        padding: 0 1em;
        right: auto;
        left: 98% !important;
        top: 0;
        position: absolute;
        width: auto;
        display: none !important
    }
    
    .navMenuSub a, .navMenuSub button {
        padding: .5em 0 !important
    }
    
    .navMenuTop:hover .navMenuSub {
        display: block
    }
    
    .navMenu.js .navMenuTop:hover .navMenuSub {
        display: none
    }
    
    .product-basic, .product-info {
        width: 50%
    }
    
    .quick-apply button {
        width: 100%;
        min-height: initial
    }
    
    .quick-apply button br {
        display: none
    }
    
    .quick-apply button {
        float: none;
        display: block;
        width: 100%;
        min-height: 1em
    }
    
    .quick-apply button br {
        display: none
    }
        
    .overview-list ul li {
        display: block;
        margin: 0 !important;
        border: none !important;
        width: 90%
    }
    
    .overview-list ul.banner li {
        width: 85% !important
    }
    
    .overview-list strong, .overview-list em {
        display: inline !important
    }
    
    .simple-box.overview-footer {
        display: block;
        margin: 1em auto !important;
        border-radius: .4em;
        width: auto
    }
    
    .mandatory .formInput,
    .formLabel, .formInput, .formError {
        width: auto;
        float: none;
        text-align: left
    }
    .pac-input {
    	min-width: 30px;
    }
    
    .formInput.radio.floatr.wide, .formInput.radio.floatr.wide1 {
        width: 50%;
    }
    
    .txtRequestedLimit__id .formLabel {
        display: block !important;
        float: left !important;
        margin-right: 4% !important;
        padding-top: 0.5em !important;
        text-align: right !important;
        width: 38% !important;
    }
    
    .txtRequestedLimit__id .formInput {
        display: block !important;
        float: left !important;
        position: relative !important;
        width: 55% !important;
    }
    
    
    
    .pac-change,
    .code-card-input {
        width: 4em;
    }
    
    .mandatory-field:before, .mandatory:before {
        font-size: 20px;
        font-size: 1.3rem;
        left: auto;
        right: 0;
    }
    
    .table-layout.account-details li {
        border-right: none;
        display: inline-block;
        min-width: 45%;
        padding: .5em
    }
    
    .side-column-right {
        margin-top: 7.5%
    }
    
    #quickpay .side-column-right {
        margin-top: 0
    }
    
    .side-column-right {
        margin-top: 0;
    }
    .column-left-x3 {
        display: block;
        float: left;
        width: 100%
    }
    .column-left-x3.middle-column {
        margin: 0
    }
    .column-x3 {
        position: relative
    }
    .column-right {
        display: block;
        float: right;
        width: 100%;
    }
    .column-left {
        display: block;
        float: left;
        width: 100%
    }
    .onboard .cmsSlot-4col .board, .onboard .cmsSlot-2col .board {
        margin: 0 auto 1em;
        width: 99%;
    }
    
    #replyForm {
        width: auto;
        float: none;
    }
    
    #calculator {
        margin-left: 0;
    }
    
    /* ========================================================================= */
    /* filters */
    .fm-container.filter-ht .col1 {
        margin: 0 1% 0 0;
        width: 53%;
    }
    
    .fm-container.filter-ht .col2 {
        margin: 0;
        width: 45%;
    }
    
    .fm-container.filter-ht .col3 {
        width: 100%
    }
    /* filters */
    /* ========================================================================= */
    .cmsAdvert.accBanner .col3 {
        width: 18%;
    }
    .cmsAdvert.accBanner .col1 {
        width: 40%;
    }
    .cmsAdvert.accBanner .col2 {
        text-align: justify;
        width: 38%;
    }
    
    .login-banner {
    	min-height: 10em;
    }
    .login-border.login-step1.cmsSlot {
    	margin: 0 1em;
    }
}

@media screen and (max-width: 700px) {
    
    .column-center-wide {
        margin: auto;
        min-width: auto;
        width: auto;
    }
    
    .myMessageHeader ul li {
        display: inline !important;
    }
    
    .cmsFooterImg {
        width: 100%;
        margin: 0;
    }
    
    .summary-panel .bg-dark, .summary-panel .bg-light, .summary-panel .bg-lighter {
        display: block;
    }
    
    body > .limit-page {
        padding-top: 10em
    }
    
    body.no-margin > .limit-page {
        padding-top: 0;
    }
    
    .card-reader-form input {
        width: 80%!important;
    }
    
    input.date, input.date-readonly {
        padding: 0.6em 1em;
        text-align: center;
        text-indent: 0;
        width: auto;
    }
        
    /* to stop iphone zooming-in on input field */
    input {
        font-size: 14px;
    }
    
    #mail_r_button_id {
        display: none ! important;
    }
    
    #mail_l_button_id {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0.2em 0.2em 0 0;
    }
    
    .rsvp {
        display: block;
        float: none ;
        width: auto;
        clear: both ;
    }
    
    .floatr, .floatl {
        display: block;
        width: auto;
    }
            
    
    
    .warning-panel span.floatl {
        float: left;
    }
    
    .error-panel span.floatl {
        float: left;
    }
    
    .error-panel p, .warning-panel p {
        margin: 0;
        padding: 0;
    }
    
    .floatl-zoomed {
        float: left !important;
        width: initial !important;
        clear: none !important;
    }
    
    
    .mobile-topup .mobile-icons label.rsvp {
        width: 100% !important;
    }
    
    .rsvp .alignr {
        text-align: left !important;
    }
    
    .rsvp td.alignr {
        text-align: right !important;
    }
    
    .mandatory .formInput,
    .formLabel, .formInput, .formError {
        width: auto;
        float: none;
        text-align: left
    }
    
    .pac-confirm .formLabel, .code-card-confirm .formLabel {
        margin-right: 0;
    }
    
    .pac-confirm .error-panel {
        float: left;
    }
    
    table th {
        display: none
    }
    
    table td {
        display: block;
        width: auto;
        max-width: 100%;
        padding: .4em;
        text-align: left !important;
        position: relative;
        padding-left: 50%;
        min-height: 1.5em;
        border-right: none
    }
    
    table tr.data td {
        display: block;
        width: auto;
        max-width: 100%;
        text-align: left !important;
        position: static;
        border-bottom: 2.5em solid #fff
    }
    
    table td:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 42%;
        white-space: nowrap;
        color: #4d4d4d;
            font-family: 'aspira-demi', calibri, arial, sans-serif;
        padding: .4em;
        overflow: hidden
    }
    
    table tr.data td:before {
        display: none
    }
    
    table.ui-datepicker-calendar td {
        display: table-cell;
        width: auto;
        max-width: none;
        padding: 0;
        text-align: center !important;
        position: static;
        min-height: 0
    }
    
    .mandatory-field {
        font-size: .8em;
        line-height: 1.2em;
    }
    
    .mandatory-field:before, .mandatory:before {
        font-size: 18px;
        font-size: 1.1rem;
    }
    
    .mandatory-field:before {
        top: 1px;
        width: auto;
    }
    
    .quickpay .radio-button-menu-box {
        min-height: 0
    }
    
    .product-basic, .product-info {
        width: 100%
    }
    
    .device-options button {
        padding: 0 .2em
    }
    
    .sm-links .fa-3x, .device-options .fa-3x {
        font-size: 2.5em
    }
    
    .device-options, .sm-links {
        float: none;
        text-align: center;
    }
    
    .sm-links .connect {
        display: block;
        clear: both;
        margin: 1em auto
    }
    
    .sm-links .connect span {
        float: none;
    }
    
    .sm-links a {
        margin: 0
    }
    
    .footer-col ul li a {
        margin: 0
    }
    
    .radio-bar label {
        display: block;
        float: none;
        width: 95% !important;
        border-radius: .2em !important;
        margin: .25em;
        border: .1em solid rgba(0, 0, 0, .2) !important
    }
    
    input.date {
        padding: .6em
    }
    
    .hidebr br {
        display: block
    }
    
    .summary-panel .bg-dark, .summary-panel .bg-light, .summary-panel .bg-lighter {
        margin: .5em auto;
        padding: .5em 1em;
        border-radius: .7em;
        overflow-y: auto;
    }
    
    .summary-panel .bg-dark:before {
        border: none
    }
    
    .summary-panel li {
        border-radius: .2em !important;
        margin: 0 !important;
        border: none !important
    }
    
    .summary-panel strong {
        display: inline
    }
    
    .summary-panel em {
        float: right;
        font-size: 1.2em;
    }
    
    .overview-list ul li {
        display: block;
        width: auto
    }
    
    .progress-bar span {
        display: none
    }
    
    .table-layout {
        display: block
    }    
    .table-layout ul {
        display: block
    }
    
    .table-layout ul li {
        display: block;
        width: auto;
        max-width: 100%;
        padding: .2em;
        border: none;
    }
    
    li.ht-cell.ht-trans.alignr.credit, li.ht-cell.ht-trans.alignr.debit {
        white-space: nowrap;
    }
    
    .table-layout.rsvp .top-row {
        display: none;
    }
    
    .table-layout.rsvp li {
        position: relative;
        padding-left: 50% !important;
        min-height: 1.5em
    }
    
    .table-layout.unpaired-devices ul li:last-of-type, .table-layout.paired-devices ul li:last-of-type {
    	border: none;
    }
    
    .table-layout.noTopRow.rsvp li {
        position: relative;
        padding-left: 0 !important;
        min-height: 1em;
        width: 100%;
    }
    
    .table-layout.rsvp li:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 42%;
        white-space: nowrap;
        color: #4d4d4d;
            font-family: 'aspira-demi', calibri, arial, sans-serif;
        padding: .2em;
        overflow: hidden;
        text-align: left;
    }
    
    .table-layout.rsvp .data-row li:before {
        content: '' !important
    }
    
    .table-layout.rsvp .data-row li:before {
        content: '' !important
    }
    
    .reverse-payment li:first-of-type {
        border-left: none;
    }
    
    .table-layout .reverse-payment {
        border-left: 5px solid #485dc5 !important
    }
    
    .table-layout .reverse-payment li:before {
        color: #485dc5 !important
    }
    
    .table-layout.account-details li {
        border-right: none !important
    }
    
    .table-layout.account-details li strong {
        display: inline-block;
        width: 29%
    }
    
    .table-layout.account-details li br {
        display: none
    }
    
    .table-layout.confirm-details li {
        border: none !important
    }
    
    .table-layout.confirm-details ul {
        border-bottom: .1em dotted #ccc;
        padding-bottom: .25em;
        margin-bottom: .25em;
    }
    
    .table-layout.confirm-details ul li {
        width: 46%;
        display: inline-block;
    }
    
    /* MESSAGES MOBILE START ====================================*/
    
    .myMessageList ul {
        width: 100%;
        height: auto;
        min-height: 30px;
        font-size: 13px;
    }
    .myMessageList.table-layout {
    	display: table;
    }
    .myMessageList.table-layout ul {
    	display: table-row;
    }
    .myMessageList ul li {
        min-height: 36px;
        display: table-cell;
    }    
    .myMessageList ul li:before {
        display: none;
    }    
    .myMessageList ul li button {
        padding: 0 !important;
    }
    .myMessageList.table-layout ul li:last-of-type {
    	border:none;
    }
    .my-message-left-buttons {
	    width: 70% !important;
	    float: left;
	}
	.my-message-left-buttons button {
	    float: left;
	    margin-right: 3%;
	}
	.my-message-right-buttons {
	    width: 30% !important;
	    float: left;
	}
	.my-message-right-buttons button {
	    float: right;
	}
	.break-btn-txt {
		white-space: normal;
	}
    button#optout_button_id {
	    margin-top: 3%;
	}
    /* MESSAGES MOBILE END =======================================*/
    
    .menu-bar.rsvp {
        border: none
    }
    
    .menu-bar.rsvp + button.button-links, .menu-bar.rsvp + a.button-links, .menu-bar.rsvp {
        display: block;
        width: 100%;
        margin: 0 auto 1em;
        float: none !important
    }
    
    .menu-bar.rsvp a, .menu-bar.rsvp button {
        width: 100%;
        border: .1em solid #ccc !important;
        border-radius: .4em;
        margin: 0 0 .5em
    }
    
    .menu-bar {
        display: block;
        padding-bottom: 1em;
        border: none
    }
    
    .menu-bar a, .menu-bar button, .menu-bar li:last-child a, .menu-bar li:last-child button {
        display: block;
        width: 100%;
        margin: .25em auto;
        padding: .6em 0;
        border: .1em solid #c3c3c3;
    }
    
    .quickpay label, .quickpay input {
        font-size: 1.1em;
        margin: .5em auto
    }
    
    .quickpay .column-x3, .quickpay .button-links {
        width: auto !important
    }
    
    .quickpay .radio-button label {
        width: auto
    }
    
    .quickpay .column-x3, .quickpay .button-links {
        width: auto !important;
        margin: 1em auto !important;
        float: none !important
    }
    
    .navMenuSub {
        left: 20% !important;
        top: 80%;
        box-shadow: .25em .1em .25em #000
    }
    
    /* ========================================================================= */
    /* filters */
    
    .fm-container .col1 .euroInput,
    .fm-container .col1 .euroInput {
        width: 60%;
    }
    
    .fm-container .col1 .centInput,
    .fm-container .col1 .centInput {
        width: 16%;
    }
    
    .fm-container.filter-ht .col1,
    .fm-container.filter-ht .col2,
    .fm-container.filter-ip .col1,
    .fm-container.filter-ip .col2,
    .fm-container.filter-op .col1,
    .fm-container.filter-op .col2,
    .fm-container.filter-ht .col3 {
        margin: 0;
        width: 100%;
    }
    
    .fm-container.filter-ht .col2 .fieldfooter-section li li {
        font-size: .85em;
    }
    /* filters */
    /* ========================================================================= */
    
    .page-subheader.accountoverview h1, .page-subheader.accountoverview p {
        padding: 0
    }
    
    .side-column-right {
        margin-top: 1%;
    }
    
    .column-left-x3.middle-column {
        margin: 0
    }
    
    .column-right {
        display: block;
        float: right;
        width: 100%;
    }
    
    .column-left {
        display: block;
        float: left;
        width: 100%
    }
    
    .footer-section.lock {
        bottom: 0;
        left: 0;
        position: relative;
        width: 100%;
    }
    
    form .table-layout select,
    form .table-layout input[type='text'],
    form .table-layout input[type='number'],
    form .table-layout input[type='password'],
    form .table-layout textarea {
        width: 95%
    }
    
    form .table-layout .alignr {
        text-align: left;
    }
    .aibLinkStyle01, a.button-links, button.button-links, .button-links a, .button-links button, .quickpay-label label {        
    	display: block;   
    }
    .error-panel .aibLinkStyle01 {
    	display: inline-block;
	}
    .login-form button {
    	width: 100%;
    }
    
    .myMessageBox a {
        display: inline !important;
    }
    
    .button-links.autowidth, .no-rsvp-link.button-links button, .no-rsvp-link.button-links a {
        width: auto !important;
        display: inline !important
    }
       
    .button-links.logout, .button-links.mail {
        width: auto !important;
    	float: right;
    	margin-right: 35px;
    }
    
    .button-links.mail i {
	    font-size: 1.5em;
	    padding: 0.1em;
	    color: #fff;
	    padding: 0;
	}
    #mail_t_button_id {
    	padding: 0;
    }
    .table-layout button, .table-layout a {
        width: 100% !important;
        padding-left: 0;
        margin: 0 !important;
        text-align: left;
    }
    
    .ht-table button {
    	text-align: center;
    }
    .table-layout button.i-only, .table-layout a.i-only {
        width: 53px !important;
    }
    
    button.date.button-links {
        display: inline-block !important;
        width: auto !important;
    }
    
    .cmsAdvert.accBanner .col1 {
        width: 100%;
    }
    .cmsAdvert.accBanner .col2 {
        text-align: justify;
        width: 96%;
    }
    .cmsAdvert.accBanner .col3 {
        width: 98%;
    }
    .cmsAdvert.accBanner .col3 button {
  		 width: 100%;
	}
       
    .loginlink a {
        margin: 0 19% !important;
        width: 50% !important;
    }
    .login-step1,.login-step2 {
        width: 90%;
    }

     float: none;
    } */
    .navLogo.navLogoCentre {
        float: none;
    } */
    .navLogo.navLogoCentre {
        margin-right: 38%;
    }
    .table-layout.unpaired-devices.rsvp ul li, .table-layout.paired-devices.rsvp ul li {
	    overflow: visible;
	    width: auto;
	    padding: 1px 0;
    }   

}

/* Webchat related pages */
@media screen and (max-width: 600px) {
    
    .card-reader-image.rsvp {
        min-height:0 !important
    }
    .card-reader-tips.rsvp {
        clear: both
    }
    
    .tabList {
        margin: auto;
    }
    
    
    .no-rsvp-tabs.tabList button {
        width: auto;
    }
    
    .chatbox {
        display: block;
        float: right;
        width: 60%
    }
    
    /* transactions table */
    .trans-column-left .top-row td:first-child {
        width: 33.3333% !important;
    }
    
    /* Debit and Credit Arrows */
    .debit, .credit {
        display: block;
        float: right;
    }
    
    /* Historical Transactions */
    .table-layout .top-row button, .table-layout .top-row a {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .table-layout .ht-table li {
        text-overflow: clip !important;
    }
    
    .table-layout form {
        display: inherit
    }
    
    .table-layout ul li.ht-desc.forceWrap {
        word-break: normal !important;
    }
    
    /* Nav header alignment issues */
    .navHeader {
        margin-left: 3em;
        font-size: .8em;
    }
    
    .cmsLinks ul li a {
        margin: 0;
    }
    
    .cmsAdvert.accBanner .col1 {
        width: 42%;
    }
    .cmsAdvert.accBanner .col2 {
        text-align: justify;
        width: 33%;
    }
    .cmsAdvert.accBanner .col3 {
        width: 20%;
    }
}

@media screen and (max-width: 500px) {
    
    body > .limit-page {
        padding-top: 6em;
    }
    
    body.no-margin > .limit-page {
        padding-top: 0;
    }
    
    .navLogo {
        width: 50px
    }
    
    .topBar {
        display: none
    }
    
    .navLogout {
        display: block
    }
    
    .rsvp-width {
        display: block !important;
        float: none !important;
        width: 100% !important;
        clear: both !important
    }
    
    .mandatory-field {
        font-size: .7em;
        line-height: 1.2em;
        width: 60%;
    }
    
    .ht-table .dataBlock,
    .ht-table .dataBlock.first {
        display: block;
        float: none;
        width: auto;
    }
    
    .ht-table .ht-cell.ht-date {
        width: 50px;
    }
    
    .side-column-right {
        margin-top: 1%;
    }
    .column-left-x3 {
        display: block;
        float: left;
        width: 100%
    }
    .column-left-x3.middle-column {
        margin: 0
    }
    .column-right {
        display: block;
        float: right;
        width: 100%;
    }
    .column-left {
        display: block;
        float: left;
        width: 100%
    }
    .footer-section.lock {
        bottom: 0;
        left: 0;
        position: relative;
        width: 100%;
    }
    
    .cmstemplate1,.cmsImageOnly {
        padding: auto;
    }
    .cmsAdDetail ul, .cmsAdDetail p {
        text-align: left;
    }
    
    /* ========================================================================= */
    /* filters */

    .fm-container.filter-ip .col1 .euroInput,
    .fm-container.filter-op .col1 .euroInput {
        width: 67%;
    }
    
    .fm-container.filter-ip .col1 .centInput,
    .fm-container.filter-op .col1 .centInput {
        width: 18%;
    }
    
    /* filters */
    /* ========================================================================= */
    
    
    
    .txtRequestedLimit__id .formLabel {
        padding-top: 0em !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    .txtRequestedLimit__id .formInput {
        width: 100% !important;
    }
    
    .bNavMenuOpen strong {
        margin-left: 2.5em;
    }
    
    .cmsAdvert.accBanner .col1 {
        width: 100%;
    }
    .cmsAdvert.accBanner .col2 {
        text-align: justify;
        width: 95%;
    }
    .cmsAdvert.accBanner .col3 {
        width: 98%;
        float: right;
    }
    .table-layout .panel .message-panel {
        width: 85%;
    }
    .login-border .floatr {
    	width: 100%;
	}
	.loginlink-column-left {
	    display: block;
	    float: left;
	    width: 100%;
	    text-align: left	
	}
    .tabList button {
    	padding: 0.6em 0.1em;
    }
}

@media screen and (max-width: 479px) {
    .ht-table .ht-bal {
        display: none;
    }
    .navLogo.navLogoCentre {
        margin-right: 30%;
    }

}

@media screen and (max-width: 400px) {
    
    .navLogo.navLogoCentre {
        margin-right: 27%;
    }
    
    .table-layout.rsvp li {
        min-height: 2.5em
    }
    
    .overview-list ul:before {
    	    width: 20px;
    }
    .overview-list ul li.icon:before {
    	left: 3px;
    }
    .overview-list span {
    	    margin: 0 0 0 3em;
    }
    
    .fm-container .col1 .button-links {
    	width: auto !important;
    }

}


@media screen and (max-height: 400px) {
    .navMenu {
        top: 25px;
    }
    
    .navMenu button {
        padding: .5em;
    }
    
    .navMenuOpen {
        margin: .3em 0 .3em 0;
    }

}

/* estatement css start */

.radio-bar-estmt label {
    font-family: 'aspira-demi', arial, sans-serif;
    font-weight: normal;
    font-size: inherit
}
.radio-bar-estmt label {
    border-color: #485dc5
}
div .simple-box {
    overflow: auto;
}

.radio-bar-estmt label.selected span {
    color: #fff !important
}
/*** Radio Bar ***/
.radio-bar-estmt {
    cursor: pointer;
    overflow: hidden;
    color: #485dc5;
    text-shadow: .05em .05em .15em #fff;
    margin: 0 0 0em;
    display: block;
    width: 50%;
    margin-left: 30%;
}

.radio-bar-estmt.dark-border {
    border-color: #485dc5
}

.radio-bar-estmt label {
    display: inline-block;
    float: none;
    width: 15%;
    text-align: center;
    margin: -1%;
    padding: .4em 1%;
    border: none;
    cursor: pointer;
    color: #4d4d4d;
    border-bottom: .1em solid #e2e2e2;
    border-top: .1em solid #e2e2e2;
    border-right: .1em solid #e2e2e2;
    border-left: .1em solid #e2e2e2;
    background: #f2f2f2;
}

.radio-bar-estmt.x3 label {
    width: 30.8%
}

.radio-bar-estmt.x4 label {
    width: 22.5%
}

.radio-bar-estmt span label {
    border-radius: 0
}

.radio-bar-estmt span:first-child label {
    border: .1em solid #ccc;
    border-right-color: #bbb;
    border-radius: .2em 0 0 .2em
}

.radio-bar-estmt span:last-child label {
    border: .1em solid #ccc;
    border-left: none;
    border-radius: 0 .2em .2em 0
}

.radio-bar-estmt input[type='radio'] {
    position: absolute;
    left: -999em
}

.radio-bar-estmt label.selected:hover, .radio-bar-estmt label.selected:active, .radio-bar-estmt .active-item label:active, .radio-bar-estmt .active-item label:hover, .radio-bar-estmt label:hover.active-item, .radio-bar-estmt label:active.active-item {
    background: #485dc5;
}

.radio-bar-estmt label.selected {
    color: #fff;
    text-shadow: none;
    background: #485dc5;
}
.alertsTable .radio-bar-estmt {
    margin: 0
}

.alertsTable .radio-bar-estmt label {
    width: 45%
}

.alertsTable .radio-bar-estmt-estatement3 {
    margin: 0
}

.alertsTable .radio-bar-estmt-estatement3 label {
    width: 45%
}

.alertsTable .radio-bar-estmt {
    margin: 0
}

.alertsTable .radio-bar-estmt label {
    width: 45%
}

.alertsTable .radio-bar-estmt-estatement3 {
    margin: 0
}

.alertsTable .radio-bar-estmt-estatement3 label {
    width: 45%
}
.radio-bar-estmt label {
    display: block;
    float: left;
    width: 43% !important;
    margin: .0em;
    border: .1em solid #e2e2e2 !important;
    height: 1.2em;
}

#freeze-confirmed h3{
	float:left;
}
.freeze-icon{
	width:15%;
	float:right;
	padding-bottom: 3%;
	
}
#freeze-icon{
	width:15%;
	float:right;
	padding-bottom: 3%;
	
}

#unfreeze-icon{
	width:20%;
	float:right;
	margin-right: -4%;
    margin-top: -4%;
	
}
div#freeze-tandc label{
	width:80%;
}
div#widen-confirm-box .simple-box{
	width:auto;
}

@media screen and (max-width: 700px) {
	#freeze-icon {
		width: 20%;
		float: right;
		padding-bottom: 3%;
		margin-right: 0%;
	}
	#unfreeze-icon{
		width:25%;
		float:right;
		margin-right: -4%;
    	margin-top: -4%;
	}
    .radio-bar-estmt {
        margin-left: 0 !important
    }
    .fm-container .panel.filtersearchpanel {
    	width: 100%;
	}
}
@media screen and (max-width: 400px) {
	#freeze-icon {
		display:none;
	}
	#unfreeze-icon{
		display:none;
	}
}
@media screen and (max-width: 700px) {
}

@media screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
    .radio-bar-estmt label {
        display: block !important;
        float: left !important;
    }
}
@media screen and (device-aspect-ratio: 40/71) {
    .radio-bar-estmt label {
        width: 35% !important;
        line-height: 20px;
        padding: 3px;
    }
}
.statementMessage {
    background: #485dc5;
    color: #fff;
    text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 1em;
}

.statementErrorMessage {
    background: #e32837;
    color: #fff;
    text-align: center;
    width: 100%;
    float: left;
}

.updatedAccount {
    border: 2px #485dc5 solid;
}

.updatedAccountError {
    border-style: solid;
    border-width: 3px 3px 3px 3px;
    border-color: #f00e4e;
}

div.nocursor .button-accoption{
	cursor: auto !important;
}
div.transparent-background .cmsAdvert {
	background-color:transparent !important;
}
/* eStatement Interrupt Screen screen start */
.eStatementInterruptScreen {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    float: left;
    margin: .5em 0;
}
.eStatementInterruptScreen h1 {
    color: #485dc5;
    border-bottom: 2px #E7E7E7 solid;
    text-align: center;
    font-size: 2.5em;
    padding-bottom: .3em;
}
.interruptScreenContainer {
    width: 96%;
    margin: 0 2%;
    float: left;
}
.pageContent {
    width: 90%;
    margin: 0 5%;
}
.authText{
    display: block;
    margin: 0;
    color: #485dc5;
    font-size: .95em;
    line-height: 1em;
    font-family: 'aspira-regular';
    }

.interruptScreenContainer p {
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 0 0 25px 0;
}
.innerPageContent .cAlign {
    text-align: center;
}
.innerPageContent {
    margin-top: 2%;
}
.instructionsColumn {
    width: 100%;
    float: left;
}
.buttonsColumn {
    width: 100%;
    float: left;
}
.stopStatement {
    background-color: #485dc5 !important;
    border: .1em solid #485dc5 !important;
}
.noChange {
    background-color: #485dc5 !important;
    border: .1em solid #485dc5 !important;
}
.buttonWrapper {
    float: left;
    width: 100%;
}
.buttonWrapper button {
    color: #fff !important;
    padding: 10px 8px;
    min-width: 25%;
    text-align: center;
    text-shadow: none;
    background-image: none !important;
    font-size: 1.2em;
    float: right;
}
.buttonWrapper button i {
    float: right;
    margin-top: 4px;
}
.image_block {
    width: 80%;
    float: left;
    margin: 0 10%;
}
.image_icon {
    width: 33%;
    float: left;
}
.image_icon p {
    text-align: center;
    font-size: 1.3em;
    width: 80%;
    margin: 2% 10%;
    color: #485dc5;
        font-family: 'aspira-demi', calibri, arial, sans-serif;
}
.image_icon img {
    width: 40%;
    display: block;
    margin: 0 auto;
}
.divider {
    width: 2px;
    height: 120px;
    float: left;
    background-color: #e2e2e2;
    margin-top: 1%;
}
.learn_more {
    text-align: center;
    font-size: 1.2em;
    padding: 1em 0;
    float: left;
    width: 100%;
}
.hideInDesktop {
    display: none;
}

.phone-prefix-column {
    display: block;
    float: left;
    width: 16%;
    margin-left: 2% 
}

.phone-number-column {
    display: block;
    float: right;
    width: 45%
}

@media screen and (max-width: 767px) {

	.buttonWrapper button {
		min-width: 40%;
	}
	.buttonsColumn {
    	margin-top: -1em;
	}
	.image_block {
    	width: 100%;
		margin: 0;
	}
	
	.table-layout.norsvp table.transaction-table td {
    	width: 33% !important;
    }
}

@media screen and (max-width: 900px) {
    .buttonWrapper button {
        min-width: 40%;
    }
    .image_block {
        width: 100%;
        margin: 0;
    }
    .image_icon p {
        width: 86%;
        margin: 2% 7%;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .buttonWrapper button {
        min-width: 40%;
    }
    .buttonsColumn {
        margin-top: -3em;
    }
}
@media only screen and (max-width: 480px) {
    .hideInMobile {
        display: none;
    }
    .hideInDesktop {
        display: block;
    }
    .interruptScreenContainer p {
        font-size: 1.1em;
        line-height: 1.5em;
        padding: 0 0 1em 0;
        text-align: center;
    }
    .list_block.hideInDesktop ul {
        list-style: square inside !important;
        display: block !important;
        width: 70%;
        margin: 0 15%;
        float: left;
        margin-bottom: 1em;
    }
    .list_block.hideInDesktop ul li {
        width: 90%;
        float: left;
        font-size: 1.1em;
        line-height: 30px;
        color: #485dc5;
        padding: 5px 0 !important;
            font-family: 'aspira-demi', calibri, arial, sans-serif;
        display: list-item;
        text-indent: -20px;
        margin-left: 10%;
    }
    .list_block.hideInDesktop li::before {
        content: '\002022';
        padding-right: 10px;
    }
    .eStatementInterruptScreen h1 {
        font-size: 1.5em;
    }
    .buttonsColumn {
        margin-top: .1em;
    }
    .learn_more {
        font-size: 1em;
    }
    .buttonWrapper button {
        font-size: 1em;
    }
    .learn_more span {
    
    }

}
.learn_more .fa-info-circle {
		color: #485dc5 !important;
	}
	
h3.transactionTitle {
    width: 100%;
    padding: 0;
    color: #4d4d4d;
    font-size: 1.75em;
    border-bottom: 1px #6e6e6e solid;
}


/* eStatement Interrupt Screen screen end */
/* estatement css end */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .navHeader h1 {
        height: 59px;
    }
    .login .navLogo {
        width: 79px;
        margin-right: 0;
    }
    .login .navLogo img {
        width: 59px;
    }
}
@media (max-device-width: 1280px) and (orientation: landscape) {
    .navHeader h1 {
        height: 69px;
    }
    .login .navLogo {
    width: 252px;
    margin-right: 0;
    height: 69px;
    }
    .login .navLogo img {
    width: 252px;
    height: 69px;
    }
}
::-moz-selection {
    background: #e2e2e2;
}
::selection {
    background: #e2e2e2;
}

/* auto address overwrite commmon css */

.autoaddress-control>.autoaddress-button {
    background-color: #485dc5 !important;
}
div#autoAddressSearchBar {
    background-color: #eeeaf0 !important;
    padding: 0.8em !important;
}
.autoaddress-control>.autoaddress-text-box {
	border: 1px solid #c3c3c3 !important;
	color: #4d4d4d !important;
	border-color: #c3c3c3 !important;	
}
.autoaddress-control .autoaddress-options-msg.error,
.autoaddress-control .autoaddress-options-msg.info,
.autoaddress-control .autoaddress-options-msg.success,
.autoaddress-control .autoaddress-options-msg.warning {
	border-radius: 0 !important;
}
.autoaddress-control .autoaddress-options-msg.success {
	border: 1px solid #485dc5 !important;
    color: #485dc5 !important;
    border-left: 45px solid #485dc5 !important;
}
.autoaddress-control,
.autoaddress-control .autoaddress-autocomplete .autoaddress-suggestion,
.autoaddress-control .autoaddress-autocomplete .autoaddress-suggestion:first-child:after,
.autoaddress-control .autoaddress-options-container .autoaddress-options-list li a {
	color: #4d4d4d !important;
}
.autoaddress-control .autoaddress-autocomplete .autoaddress-suggestion:first-child:hover {
    background: #6e6e6e !important;
    color: #fff !important;
}
.autoaddress-control .autoaddress-options-container .autoaddress-options-tabs li a.selected {
	border-top: 2px solid #485dc5 !important;
    color: #485dc5 !important;
    border-bottom: 1px solid #fff !important;
}
.autoaddress-control a.autoaddress-back-link {
	background: url(../images/back.png) 10px 9px no-repeat #f2f2f2 !important;
    font-size: 1em !important;
    text-transform: none !important;
    border: 1px solid #9e9e9e !important;
    border-radius: 0 !important;
    color: #4d4d4d !important;
    font-family: 'aspira-demi', calibri, arial, sans-serif !important;
    box-shadow: none !important;
}
.autoaddress-control .autoaddress-autocomplete .autoaddress-suggestion:first-child:hover:after,
.autoaddress-control .autoaddress-autocomplete .autoaddress-suggestion:hover {
	color: #fff !important;
}

/* Business Loan Application */
section.information {
    border-top: 0.1em #485dc5 solid;
    border-bottom: 0.1em #485dc5 solid;
    margin: 1em 0 2em 0;
    float: left;
    width: 100%;
}
.information-title {    
    padding: 0.5em 0;
    cursor: pointer;
    float: left;
    width: 100%;
}

.information-title i {
    display: block;
    width: 4%;
    float: left;
    margin-top: 4px;
    text-align: center;
}

.tpp-page-body {
	    min-height: 84%;
}

.tpp-footer-section{
    width: 100%;
    border-top: .2em #485dc5 solid;
    background-color:white;
    margin-top:2%;
}

body.logged-in {
    min-height: 83%;
}

.tpp-footer-pos{
	padding-bottom: 25%;
}

.tpp-footer-col ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.tpp-footer-col li{
	text-align: center;
    float: left;
    padding-right: 4%;
}

.tpp-security-li {
    float: right !important;
    padding-right: 0 !important;
    background: url('/roi-desktop/images/tpp-lock-icon.png') no-repeat;
    background-position: top left;
    text-align: right !important;
    padding-left: 2.5%;
}
.tpp-security-li a {    
    color: #4d4d4d !important; 
    margin: 0 !important;
}
.tpp-footer-col {
    display: block;
    float: left;
    width:100%;
    font-size: 1em;
}
.tpp-links-footer {
    background: #fff;
    padding: 1em 0;
    position: relative;
    border-bottom: 0.07em #e2e2e2 solid;
    -webkit-box-shadow: inset 0px 10px 5px -10px #9e9e9e;
	-moz-box-shadow: inset 0px 10px 5px -10px #9e9e9e;
	box-shadow: inset 0px 10px 5px -10px #9e9e9e;
}
.tpp-links-footer u {
	text-decoration: none;
	color:#574e5b;
	font-family: 'aspira-demi', calibri, arial, sans-serif;
}
.tpp-footer-col a {
    color: #485dc5;
}
.tpp-footer-col ul li a {
    display: block;
    text-decoration: none;
    line-height: 30px;
}
.tpp-login-form{
	margin-bottom: .5em;
    -webkit-box-shadow: 0px 1px 5px 0px #9e9e9e;
	-moz-box-shadow: 0px 1px 5px 0px #9e9e9e;
	box-shadow: 0px 1px 5px 0px #9e9e9e;
    background: rgba(255, 255, 255, .9);
    width: 66%;
    margin: auto;
    position: relative;
    display: block;
    overflow: auto;
    clear: both;
    overflow: hidden;
    word-wrap: break-word;
}

.tpp-loggedin-form{
	margin-bottom: .5em;
    -webkit-box-shadow: 0px 1px 5px 0px #9e9e9e;
	-moz-box-shadow: 0px 1px 5px 0px #9e9e9e;
	box-shadow: 0px 1px 5px 0px #9e9e9e;
    background: rgba(255, 255, 255, .9);
    margin: auto;
    position: relative;
    display: block;
    overflow: auto;
    clear: both;
    overflow: hidden;
    word-wrap: break-word;
    padding:2%;
}

.tpp-confirm-form{
	margin-bottom: .5em;
    -webkit-box-shadow: 0px 1px 5px 0px #9e9e9e;
	-moz-box-shadow: 0px 1px 5px 0px #9e9e9e;
	box-shadow: 0px 1px 5px 0px #9e9e9e;
    background: rgba(255, 255, 255, .9);
    width: 100%;
    margin: auto;
    position: relative;
    display: block;
    overflow: auto;
    clear: both;
    overflow: hidden;
    word-wrap: break-word;
}

@media screen and (max-width: 980px) {
.tpp-confirm-form{
	padding: 0em;
}
}

 .tpp-confirm-form .column-center.rsvp .simple-box.bg-white.no-margin .limit-content {
	width: 100% !important;
}
 

.tpploginFormField {
    margin: 0 !important
}

.tpploginFormField .formLabel {
    width: auto;
    float: none;
    text-align: left
}

.tpploginFormField .formInput {
    width: 100% !important
}

.tpp-center-header{
	text-align: center;
	font-size:2.5em;
}
.tpp-footer-section .copyright-footer{
	background-color: #fff !important;
	color: #574e5b !important;
	text-align: center;
}

@media screen and (max-width: 400px) {
    .tpp-center-header{
		text-align: center;
		font-size:1.5em;
	}
	.tpp-login-form {
		width:95% !important;
	}
	.tpp-login-form .column-center{
		margin: 1em;
	}
	
	.tpp-confirm-form{
    	width: 90%;
	}
	
}
.tpp-confirm-form .column-center{
	max-width:60em;
}

@media screen and (max-width: 700px) {
    .tpp-center-header{
		text-align: center;
		font-size:1.8em;
	}
	.tpp-login-form {
		width:70% !important;
	}
	.tpp-login-form {
		    padding: 1em;
	}
	
}
@media screen and (max-width: 750px) {
   .tpp-login-form {
		    padding: 1em;
	}
}

.tpp-text-align{
	text-align:left !important;
	color:black;
}

.tpp-log-out-text{
	margin: auto;
    text-align: center;
    color: #485dc5;
}
.tpp-consent-margin{
	margin-top:1%;
}
.tpp-log-out-text a{
	color: #485dc5;
}
.tpp-login-form a{
	color: #485dc5;
}
.tpp-loggedin-form a{
	color: #485dc5;
}

.tpp-limit-content-margin .limit-content{
	margin-bottom:2%;
}

#tpp-account-confirm-button{
	width:100%;
}
#tpploginbutton{
	width:100%;
}
#tpploginconsentbutton{
	width: 35em;
}
.tpp-acc-overview-buttons{
	width: 50%;
    text-align: center;
    margin-top: .3em;
    margin-bottom: 0.3em;
    margin-left: 30%;
    margin-right: 30%;
    display: inline-block;
    cursor: pointer;
    position: relative;
    background: #e2e2e2;
    border: 2px #9e9e9e solid;
    padding: 0.5em;
}

.tpp-ck-button {
    margin-bottom: 10px;
    background-color: #f2f2f2;
    border: 2px solid #D0D0D0;
    overflow: hidden;
    margin-left: 25%;
    padding: 0;
    width: 50%;
    height: 35px;
    
}
.tpp-account-alignment{
	text-align:center;
}
.tpp-ck-button label {
     display: block;
     width: 100%;
     padding: 0;
     margin: 0;
     cursor: pointer;
}

.tpp-ck-button label span {
    display: block;
    text-align: center;
    line-height: 40px;
}
.tpp-black-error-panel .error-panel p {
	padding-top: 15px;
}
.tpp-ck-button input {
  	position:fixed;
  	left:100%;
  	top:0;
}
.tpp-pageFooter {
	position: absolute;
	bottom: 0;
	top:100%;
	width: 100%;
}
.tpp-consent-ul{
	display: table;
    margin: auto;
    width: 63%;
    margin-left: 25%;
    margin-right: 30%;
}
.tpp-alignc{
	text-align:center;
	color:#4D4D4D;
}
.tpp-alignl{
	text-align:left;
	color:#4D4D4D;
}
.tpp-p-align{
	font-size: 80%;
	margin-right: 6%;
}
.tpp-consent-ul li{
	display: list-item;
    margin-left: 0.25em;
    list-style: disc;
    text-align:left;
    width: 90%;
    font-size: 80%;
}

.tpp-x3-login {
    width: 30%;
}
.tpp-accs-chosen-list{
	width:100%;
	margin-bottom: 1em;
	float: left;
	padding:1em;
}
.tpp-accs-chosen-list-left{
	float:left;
	width: 35%;
}
.tpp-accs-chosen-list-right {
    width: 65%;
    float: left;
    padding-top: 5px;
}
.tpp-list-padding {
    font-size: 1em;
    width: 42%;
    float: left;
    background: #f2f2f2;
    margin: 5px 10px;
    border-left: 4px #485dc5 solid;
    padding: 10px 10px;
}
.account-expiry .tpp-list-padding {
	border-color: #485dc5;
}
.tpp-confirm-buttons{
	width:100%;
	margin-top: 15%;
}
#tpp-account-back-button{
	height:3em;
	width:40%;
	background: #f2f2f2;
    color: #4d4d4d;
    border: .1em #9e9e9e solid !important;
    padding: 5px 14px;
}
#tpp-confirm-button{
	height:3em;
	width:59%;
	color: #fff;
    background: #485dc5;
}
.tpp-confirmation-header{
	margin-top: 5%;
	float:right;
	width:91%;
}
#tpp-confirm-icon{
	width:7%;
	float:left;
	margin-top:4%;
}
.tpp-header-confirm-image{
	width:100%;
	margin-bottom:1em;
	height:4em;
}
@media screen and (max-width: 700px) {
	.tpp-security-li {
		padding-left: 4%;
	}
}
@media screen and (max-width: 500px) {
    .tpp-confirmation-header{
		width:86%;
	}
	#tpp-confirm-icon{
		width:12%;
	}
	.tpp-footer-col li {
		width: 25%; 
	}
	.tpp-footer-col ul li a {
		line-height: 20px;
	}
	.tpp-security-li {
		text-align: left !important;
    	padding-left: 8%;
    	width: 20% !important;
	}
	ul.permission-list li {
		width: 100% !important;
	}
}
.tpp-footer-section.login-page-footer {
    position: absolute;
    bottom: 0;
    top: 83%;
}

.tpp-accountoverview-next-button{
	float:left;
	width:20%;
}
.tpp-accountoverview-confirm-button{
	float:right;
	padding-left: 0.4%;
	margin-left: 2%;
	width: 23%;
}
.tpp-confirm-form button#codecardback {
    margin-left: 0;
}
.tpp-confirm-form .code-card-confirm {
    margin-right: 12%;
    float: left;
    width: 84%;
}
.tpp-accountoverview-next-button button{
	width:100%;
}
.tpp-custom-error-message .error-panel{
	text-align: center;
    border: none;
}
@media screen and (max-width: 500px) {
	.tpp-footer-section.login-page-footer {
	    position: absolute;
	}
	.rebranded-cardreader-icon {
		display: none;
	}
	.tpp-accountoverview-next-button {
		width: 100%;
		margin:0%;
	}
	.tpp-accountoverview-confirm-button {
		width: 100% !important;
	}
	.tpp-accs-chosen-list-right{
		float:none;
	}
	.pisp-tableleft-col1 {
	    width: 30% !important;
	    font-size: small;
	}
	.pisp-tableleft-col2 {
	    width: 70% !important;
	    font-size: small;
	}
}
@media screen and (max-width: 700px) {	
	#tpploginconsentbutton {
		width: 100% !important;
	}
	.tpp-ck-button {
		width: 70%; 
		margin-left: 15%;
	}
	.tpp-accs-chosen-list-left, .tpp-list-padding {
		width: 100%;
	}
	.tpp-footer-section.login-page-footer {
	    top: 100%;
	}
	.pisp-select-header{
	    width: 100% !important;
    	padding: 3% 0 2% !important;
	}
	#pisp-next-button {
    	width: 100% !important;
	}
}
@media screen and (max-width: 830px) {
	.tpp-accountoverview-confirm-button {
		width: 35%;
	}
}
.tpp-agreement-text{
	color:#4D4D4D;
	font-size: 1em;
	text-align:center;
}

.tpp-black-error-panel .error-panel{
	color:#574e5b;
	border:.2em #574e5b solid;
}
.tpp-black-error-panel .error-panel span .fa{
	font-size: 40px;
    position: relative;
    top: 0.125em;
    margin-right: .2em;
}
.tpp-black-error-panel .error-panel p{
	 display: -webkit-box;	
}
#tpp-exit-aib-link{
	padding:-1%;
}

 .tpp-checkbox-checked{
	border-color: #485dc5;
}
.tpp-checkbox-unchecked{
	border:2px solid #D0D0D0;
}

.tpp-login-next-button button{
	width:20%;
}
.tpp-login-next-button i{
	display:none;

}
.tpp-loggedin-form .column-center{
	max-width:59em;
}
.tpp-warning-panel-margin{
	margin:2%;	
}
.tpp-login-next-button{
	text-align:center;
}

.tppmandatory-field:after, .tppmandatory:after {
    content: '*';
    display: block;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: normal;
    opacity: .85;
    position: absolute;
    text-align: center;
    width: 18px;
    height: 18px;
    top: 0;
    right: auto;
    left: -8%;
    line-height: normal;
    color: #485dc5;
}

.tppmandatory-field {
    color: #485dc5;
    display: block;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    margin: 0 0 1em;
    padding: .2em 1.25em 0 0;
    text-align: right;
    text-transform: uppercase;
    float: right
}
.tppmandatory {
    position: relative
}

#tpp-exit-aib-link i.fa.fa-chevron-right.fa-mr {
    position: relative;
    top: 0.1em;
}

.rebranded-cardreader-icon {
	width: 5%;
    margin-right: 17%;
    float: left;
    margin-right: 3%;
    margin-top: 0%;
}

.information-title span {
    width: 96%;
    float: left;
    line-height: 1.3em;
    font-size: 1.3em;
}
ul.information-list {
    width: 92%;
    float: left;
    margin: 1% 0 0 7%;
}
ul.information-list li {
    list-style: url(../../roi-desktop/images/icons/tick-icon.png);
    display: list-item;
    padding-bottom: 1em;
}
section.calculation_information {
    float: left;
}
.repayment-details {
    float: left;
    width: 100%;
    border: 1px #c3c3c3 solid;
    min-height: 150px;
    margin: 0 0 1em 0;
    background: url(../../roi-desktop/images/icons/curved_purple_lines.png) no-repeat;
    background-position: 45%;
}
span.repayment-inline-block {
    display: block;
    text-align: center;
    padding: 0.3em 0;
    font-size: 1.3em;
}
span.highlight-txt {
    font-size: 1.3em;
}
span.highlight-txt-total {
    font-size: 2em;
    color: #c42f9e;
}
.interest-info {
    text-align: left;
    width: 32%;
    float: left;
    margin-top: 8%;
    padding: 2% 2% 0 1%;
}
.total-cost {
    float: right;
    width: 50%;
    padding: 1% 0;
}
ul.terms-list {
    float: left;
    margin-left: 10px;
}
.terms-list li {
	float: left;
	width: 100%;
	margin-bottom: 6px;
}
.note-msg {
	 text-align: justify;
}
.disclaimer-msg {
    margin-left: 4%;
    text-align: justify;
}
@media screen and (max-width: 900px) {
	ul.information-list {
		margin: 1% 0 1% 8%;
		width: 91%;
	}
	.information-title span {
		font-size: 1.2em;
	}
	.information-title i {
		margin-top: 2px;
	}
	span.repayment-inline-block {
		padding: 0.3em 0;
    	font-size: 1em;
	}
	.interest-info {
		font-size: 13px;
	}
	.repayment-details {
		background-position: 54%;
	}
	span.highlight-txt-total {
		font-size: 1.5em;
	}
	.total-cost {
		padding: 2% 0;
	}
}
@media only screen and (max-width: 767px) {
	.hideInMobile {
        display: none;
    }
    .hideInDesktop {
        display: block;
    }
    section.information {
    	    margin: 1em 0;
    }
    .information-title i {
	    width: 6%;
	    margin-top: 0;
	}
    .information-title span {
	    width: 94%;
	    font-size: 1.2em;
	    line-height: 1em;
	}
    ul.information-list {
	    width: 88%;
	    margin: 1% 0 1% 17%;
	}
	.repayment-details {
	    float: left;
	    width: 100%;
	    border: 1px #4d4d4d solid;
	    margin: 3% 0 0 0;
	    background: none;
	    min-height: auto;
	    max-height: inherit;
	}
	span.repayment-inline-block {
	    display: block;
	    text-align: center;
	    padding: 0.2em;
	}	
	.interest-info {
	    text-align: center;
	    margin: 2% 3%;
	    width: auto;
	}
	.total-cost {
	    width: 100%;
	}
	span.highlight-txt {
	    font-size: 1.2em;
	}
	span.highlight-txt-total {
	    font-size: 1.5em;
	}
}

/* SME Confirm Screen */
.confirm-information {
	width: 100%;
	float: left;
	margin: 1em 0;
	border-color: #c3c3c3;
    border-style: solid;
    border-width: 1px 0;
}
.details-title {
    padding: 8px 0;
    cursor: pointer;    
}
.details-title span {
    font-size: 1.2em;
}
.details-title i {
    color: #485dc5;
    font-size: 1.5em;
    margin-left: 5px;
    width: 4%;
}
.details-list-item {
    padding: 8px 0;
    width: 100%;
    float: left;
}
.details-list-item .info-label {
    width: 70%;
    float: left;
}
.details-list-item .info-label span {
    margin-left: 10%;
    display: block;
    margin-right: 10%;
}
.details-list-item .info-value {
    width: 30%;
    float: left;
}
.details-list-item .info-value span {
	font-family: 'aspira-demi', calibri, arial, sans-serif;
}
section.confirm-information .details-title.open {
    color: #485dc5;
}


.payment-logs-sort-buttons{
	font-size: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
}
.payment-logs-sort-buttons i{
	padding-left: 1em;

	}
	

@media screen and (max-width: 775px) {
   .payment-logs-sort-buttons i{
	padding-left: 0.5em;

	}
}
.confirm-screen-icon {
	width: 100%;
    float: left;
    padding-left: 2em;
    padding-top: 2px;
    margin-left: -2.3em;
}
h3.failed-trans {
    background: url('../../roi-desktop/images/icons/failed-transaction.png') no-repeat;
}
h3.submitted-trans {
	background: url('../../roi-desktop/images/icons/submitted-transaction.png') no-repeat;
}
.pt-fund-transfer-confirm-panel .table-layout ul:nth-of-type(even) {
    background: none;
}
.pt-fund-transfer-confirm-panel .table-layout:nth-child(even) {
    background: #eeeaf0;
}
.pt-fund-transfer-confirm-panel .table-layout ul li {
    padding: 5px 10px;
}
.pt-fund-transfer-confirm-panel .right {
	width: 100%;
}
@media screen and (max-width: 767px) {
	.confirmed-panel .confirm-screen-icon {
		padding-top: 0px;
    	margin-left: -0.5em;
	}
	.pt-fund-transfer-confirm-panel .table-layout.confirm-details ul {
		border: none;
	}
}

.simple-box.bg-white.alerts_settings {
    padding-bottom: 2em;
}
.alerts_settings h2 {
    width: 96%;
    float: left;
    padding-left: 4%;
}
.alerts_settings_item {
    width: 88%;
    float: left;
    padding: 1% 6%;
}
.alerts_settings_option {
    width: 90%;
    float: left;
}
.option_action {
    width: 10%;
    float: left;
}
.option_action button {
    float: right;
    background: none;
    border: none !important;
    outline: none;
    padding: 0;
    font-size: 1.25em;
    cursor:pointer;
}
.option_label {
    font-size: 1.25em;
    color: #485dc5;
}
.option_action button:hover, .option_action button:focus {
	background: none !important;
}
.option_action button i.fa-pencil-square-o:hover {
    color: #485dc5 !important;
}

@media screen and (max-width: 400px) {
	.alerts_settings h2 {
	    width: 100%;
	    padding-left: 0;
	}
	.alerts_settings_item {
	    width: 100%;
	    padding: 2% 0;
	}
}

/* Landing page What's New Area CSS starts */
.t1-image {
    width: 35%;
    float: left;
}
.t1-content {
    width: 63%;
    float: left;
    margin-left: 2%;
}
.t1-content-body {
    margin-bottom: 10px;
}
.t1-content-title h2 {
    padding: 5px 0;
}
				  
.t1-content.no-image {
	width: 96%;
}
.whats-new.t2 {
    background: url(/roi-desktop/images/whats-new.png) no-repeat, #fff;
    padding: 5px 10px;
}
.t2-content {
    color: #fff;
    width: 100%;
    float: left;
}
.t2-button {
    width: 100%;
    float: left;
}
.t2-content h2, .t2-content .t2-content-txt {
	width: 70%;
	margin-right: 30%;
}
@media screen and (max-width: 600px) {
	.whats-new {
    	padding: 5px;
	}
	.t1-image {
	    width: 50%;
	}
	.t1-content {
    	width: 48%;
	}
	.t1-content-title {
    	font-size: 1.25em;
	}
	.t1-content-title h2 {
		font-size: 1em;
	}
	.t1-content-body {
		font-size: 14px;
	}
	.t1-content-button button {
		width: 100%;
		padding: 5px;
	}
	.whats-new.t2 {
	    padding: 5px 5px;
	    background-position: 100% 100%;
	}
	.t2-content h2 {
		font-size: 1.2em;
    	width: 100%;
	}
	 .t2-content .t2-content-txt {
	 	width: 80%;
    	margin-right: 2%;
	 }
}
@media screen and (max-width: 700px) {
	.whats-new.t2 {
		background-position: 115% 100%;
	}
	.t2-content h2, .t2-content .t2-content-txt {
		width: 80%;
	}
}
@media screen and (max-width: 320px) {
	.whats-new.t2 {
	    background-position: 110% 0;
	}
}
/* Landing page What's New Area CSS ends */

/* SME Suitability */
.form-input-field, .form-select-field, .form-radiobar-field {
	float: left;
}
.form-input-field.small, .form-select-field.small, .form-radiobar-field.small {
	width: 50%; 
	margin: 0 25%;
}
.form-input-field.medium, .form-select-field.medium, .form-radiobar-field.medium {
	width: 70%; 
	margin: 0 15%;
}
.form-input-field.large, .form-select-field.large, .form-radiobar-field.large {
	width: 100%; 
	margin: 0;
}
.form-input-field label, .form-select-field .select-label, .form-radiobar-field .select-label {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 1em;
    display: block;
    padding: 0;
}
.form-input-field input[type="text"] {
    text-align: center;
    border-radius: 0.25em;
    border-color: #9e9e9e;
    font-size: 1em;
    padding: 0.5em 0;
}
.form-input-field .error-panel {
    color: #e32837;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: center;
}
section.intro-note {
    border-bottom: 1px #fab809 solid;
    padding: 1em 0;
}
section.intro-note .cmsAdvert {
	margin-bottom: 0;
}
section.intro-note p {
    background: url('../../roi-desktop/images/icons/intro-warning.png') no-repeat;
    margin: 0;
    padding: 0 0 0 3em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    font-size: smaller;
    background-position: left center;
}
.form-select-field input[type="radio"] {
    display: none;
}
.form-select-field label {
    border: 1px #9e9e9e solid;
    padding: 0.5em 1em;
    cursor: pointer;
    margin-bottom: 0;
    border-bottom: 0;
}
.form-select-field label:nth-of-type(1) {
	 border-radius: 0.25em 0.25em 0 0;
}
.form-select-field label:nth-last-of-type(1) {
	 border-bottom: 1px #9e9e9e solid;
	 border-radius: 0 0 0.25em 0.25em;
}
.form-select-field label.fade {
	color: #c3c3c3;
	border-color: #c3c3c3;
}
.form-select-field label.fade:hover {
	color: #4d4d4d;
}
.form-select-field label.selected {
	font-family: 'aspira-demi', calibri, arial, sans-serif;
	border-color: #c3c3c3;
}
.sub-section {
	width: 100%;
	float: left;
}

/* Product Cards */
.single-product-card {
    width: 100%;
    border: 1px #c3c3c3 solid;
    float: left;
}
.product-card-page {
	float: left;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 30%;
	padding: 0 1%;
}
.single-product-card .product-card-p1 {
	margin-left: 2%;
}
.single-product-card .product-card-p3 {
	margin-right: 2%;
}
.single-product-card .product-card-p1, .single-product-card .product-card-p2 {
	box-shadow: 1px 0 0px 0px #c3c3c3;
}
h6.product-title {
    font-size: 1.25em;
    padding: 0;
    text-align: center;
    width: 100%;
    float: left;
}
.product-image {
    width: 50%;
    margin: 10% 25%;
    float: left;
}
.product-desc {
    text-align: center;
    width: 90%;
    margin-right: 10%;
}
ul.product-points {
    display: list-item;
    padding: 2% 3%;
    width: 94%;
}
ul.product-points li {
    list-style: disc;
    display: list-item;
    padding: 3% 0;
    margin-left: 1em;
}
.product-subtitle {
    text-align: center;
    width: 100%;
    font-size: 1.2em;
}
.single-product-card .product-subtitle {
	margin: 1em 0;
}
.product-calculator {
    font-size: 1.1em;
    float: left;
    min-height: 327px;
    width: 100%;
}
.single-product-card .product-calculator {
	margin: 3% 0 10% 5%;	
}
.single-product-card a, .product-card a {
    word-wrap: break-word;
    display: block;
}
.product-calculator div {
    width: 100%;
    float: left;
    padding: 0.5em 0;
    text-align: center;
}
.product-calculator span.duration {
    color: #c42f9e;
    font-size: 2em;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
}
.product-calculator span.total {
	color: #c42f9e;
}
.product-calculator select {
   	width: 80%;
    text-align: center;
    font-size: 1em;
    margin: 3% 10%;
    height: 40px;
    padding-left: 5px;
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    border-color: #9e9e9e;
}
button.apply-for-product {
    width: 70%;
    font-size: 1em;
    margin-left: 15%;
}
a.button-links.apply-for-product {
    float: left;
    width: 80%;
    margin: 0 5%;
}
.product-cards-container {
	width: 100%;
	overflow: hidden;
}
.product-card-container {
	  margin-bottom: 30px;
}
.product-card {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    width: 100%;
}
.product-card-front, .product-card-back {
	width: 100%;
	height: 400px;
	border-radius: 4px;
	border: 1px #c3c3c3 solid;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.product-card-container {
    width: 30%;
    height: 420px;
    float: left;
    margin: 0 0.6%;
}
.product-card .product-card-content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 1em;
}
.product-card .product-card-content .product-card-main {
    width: 100%;
    float: left;
    min-height: 327px;
}
.product-card .product-card-footer {
    border-top: 1px solid #EEEEEE;
    color: #999999;
    margin: 1em 0 0;
    padding: 0.5em 0 0;
    text-align: center;
    width: 100%;
    float: left;
}
button.go-next, .product-card-btn-nxt {
    float: right;
    width: 10%;
}
button.go-prev, .product-card-btn-prev {
    float: left;
    width: 10%;
}
.nav-dots {
    width: 20%;
    margin-left: 45%;
    margin-top: 0;
}
.nav-dots span {
    width: 10px;
    height: 10px;
    background: #c3c3c3;
    border-radius: 100%;
    display: block;
    float: left;
    margin: 8px 2px 0 2px;
}
.nav-dots span.active {
    width: 12px;
    height: 12px;
    margin-top: 7px;
    background: #6e6e6e;
}
.product-card .product-card-footer button {
    background: none;
    border: none !important;
    outline: none;
    cursor: pointer;
    font-size: 1.4em;
}
.product-card-nav {
    width: 3%;
    float: left;
    height: 400px;
    line-height: 400px;
}
.product-cards-container.x2 .product-card-nav {
	margin-left: 15%;
}
.product-card-nav button {
    border: none;
    background: none;
    font-size: 2em;
    outline: none;
    cursor: pointer;
    color: #9e9e9e;
}
.product-card-btn-nxt {
    left: 74% !important;
    bottom: 7px !important;
}
.product-card-back .btn-simple:hover {
    background: none !important;
}
.product-card-content .product-desc {
	width: 100%;
	margin-right: 0;
	float: left;
}
.product-card-content button.apply-for-product {
    min-width: 80%;
    margin-left: 10%;
    width: auto;
    font-size: 1em;
}
.contact-aib-team {
    width: 100%;
    float: left;
    margin: 1em 0;
}
.contact-aib-team .contact-img {
    width: 14%;
    float: left;
    margin: 0 43%;
}
.contact-aib-team .contact-info {
    width: 100%;
    font-size: 1.1em;
    line-height: 1.5em;
}
.animated {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(-10px);
  }
  60% {
  	-webkit-transform: translateX(-5px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-10px);
  }
  60% {
  	transform: translateX(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
.application-decision-img {
	width: 10%;
	float: right;
}
.application-decision-content {
    width: 88%;
    float: right;
    margin-right: 2%;
}
.application-decision-content p, .sme-loan-declined p {
    font-size: 1.2em;
}
 .sme-loan-approved p {
 	font-size: 1.1em;
 }
p.text-indent {
    text-indent: 2em;
    padding: 0;
}
.application-decision-form {
    width: 100%;
    float: left;
}
.application-decision-form textarea {
    padding: 2%;
    font-size: 1.1em;
    width: 96%;
}
.green-tick {
	background: url('../../roi-desktop/images/icons/green-tick.png') no-repeat;
	padding-left: 1.5em;
    background-position: 0px 6px;
}
ol.documentation-points {
	padding: 0;
}
ol.documentation-points li{
	display: list-item;
    list-style: decimal;
    list-style-position: inside;
    padding: 2px 0 12px 0;
}
@media screen and (max-width: 1024px) {
	.product-calculator select {
	    width: 80%;
	    font-size: 1.2em;
	    margin: 3% 0 3% 8%;
	    height: 30px;
	    padding-left: 20px;
	}
	.product-calculator {
	    font-size: 1em;
	}
	h6.product-title {
	    font-size: 1.25em;
	}
	button.apply-for-product {
	    margin-left: 15%;
	    width: auto;
	    font-size: 1em;
	    min-width: 70%;
	}
	.product-card-container {
		width: 45%;
	}
	.product-image {
	    width: 34%;
	    margin: 10% 33%;
	}
	.product-cards-container.x2 .product-card-nav {
    	margin-left: 0;
	}
}
@media screen and (max-width: 800px) {
	.contact-aib-team .contact-img {
	    width: 20%;
	    margin: 0 40%;
	}
}
@media screen and (max-width: 700px) {
	.form-radiobar-field .radio-bar span {
	    display: table-cell;
	    width: 48%;
	    float: left;
	}
	.form-radiobar-field .radio-bar label {
	    width: 100% !important;
	    border-radius: 0!important;
	    margin: 0;
	}
	.form-input-field.small, .form-select-field.small, .form-radiobar-field.small, .form-input-field.medium, .form-select-field.medium, .form-radiobar-field.medium {
		width: 96%;
		margin: 0 2%;
	}
	section.intro-note p {
		background: none;
		padding: 0;
		font-size: small;
	}
	section.intro-note {
    	border: 1px #fab809 solid;
    	padding: 1em;
    	margin: 0;
    }
	.product-card-page {
		width: 90%;
		padding: 0;
		margin: 2% 5%;
	}
	.single-product-card .product-card-p1 {
		margin-left: 5%;
	}
	.single-product-card .product-card-p1, .single-product-card .product-card-p2 {
		padding-bottom: 1em;
    	box-shadow: 0px 1px 0px 0px #c3c3c3;
	}
	.single-product-card .product-desc {
		width: 100%;
		margin-right: 0;
	}
	.product-card-container {
    	width: 80% !important;
    	margin-left: 5%;
	}
	.nav-dots {
    	width: 40%;
    }
    .product-subtitle {
    	margin: 0;
    }
    .application-decision-img {
		width: 30%;
		margin: 0 35%;
	}
	.application-decision-content {
		width: 100%;
		margin: 0;
	}
	p.text-indent {
		text-indent: 0;
		padding: inherit;
	}
	.product-calculator {
		margin: 0;
	}
}
@media screen and (max-width: 500px) {
	.contact-aib-team .contact-img {
	    width: 30%;
	    margin: 0 35%;
	}
	.contact-aib-team .contact-info {
	    font-size: 1.1em;
	}
}
@media screen and (min-width: 701px) {
	.table-layout.my-applications {
	    width: 98%;
	    padding: 0 1%;
	    overflow: auto;
	}
	.table-layout.my-applications ul {
	    height: 50px;
	    border-bottom: 1px #c3c3c3 solid;
	    border-left: 1px #c3c3c3 solid;
	    border-right: 1px #c3c3c3 solid;
	    background: none;
	}
	.table-layout.my-applications ul li {
	    border: none;
	    padding-left: 0.5em;
	    text-align: left;
	}
	.table-layout.my-applications ul.top-row {
	    border-left: 0;
	    border-right: 0;
	    height: 30px;
	}
	.table-layout.my-applications ul li .button-links {
	 	padding: 0;
	}
	.my-applications-title {
		border-bottom: 1px #ccc solid;
	    padding-bottom: 0;
	    margin-bottom: 1em;
	    width: 98%;
	}
}


.pisp-table{
	width:100%;
	float:left;
}
.pisp-tableleft{
	width:94%;
	padding:3%;
	float:left;
}
.pisp-tableleft-title {
	text-decoration: underline;
}
.pisp-tableleft-col1 {
	float:left;
	width:40%
}
.pisp-tableleft-col1 label {
	margin: 0;
}
.pisp-tableleft-col2 {
	float:left;
	width:60%
}

.pisp-select-header{
	border-top: .1em solid rgba(77, 77, 77, .1);
    border-bottom: 0.1em solid rgba(77, 77, 77, .1);
    width: 40%;
    margin: 0 0 2%;
    float: left;
    padding: 3% 30% 2%;
}
.pisp-select-header label{
	display:block;
	width: 100%; 
	float: left;
}
.pisp-select-box{
	width:100%;
	display:block;
	margin-bottom: 8%;
	float: left;
}
#add-payment-note{
	float:left;
	padding: 0;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
#mandatory-field-placement{
	padding:2%;
}
.mandatory-pisp{
	 color: #485dc5;
	 display: inline;
}
#optional-message-pisp{
	width:100%;
	float: left;
}
#optional-message-pisp .formField {
	margin: 0;
}
#pisp-next-button{
	width:65%;
}
.tpp-limit-content {
    width: 95%;
    min-width: 15em;
    max-width: 70em;
    margin: auto
}
.sam-remove-access {
    display: none;
}
.sam-remove-access.is-active {
    display: block;
}

.sam-accordion-head {
    float: left;
    width: 100%;
    cursor: pointer;
    line-height: 30px;
    min-height: 30px;
}
.sam-header {
    float: left;
    width: 100%;
    min-height: 30px;
    line-height: 30px;
}
.sam-accordion-head.alt-row {
    background: #eeeaf0;
}
.sam-application-name, .application-title {
    width: 82%;
    float: left;
    min-height: 30px;
    line-height: 30px;
    border-right: 1px #9e9e9e dotted;
}
.sam-application-status, .status-title {
    width: 16%;
    float: left;
    padding-left: 1% !important;
}
.sam-accordion-body {
    width: 99.5%;
    box-shadow: 0px 1px 1px #eeeaf0, 0px -1px 1px #eeeaf0;
    float: left;
    border-left: 3px #4d4d4d solid;
    padding: 10px 0;
}
.sam-accordion-body-left {
	width: 81%;
	float: left;
	padding-left: 2%;
}
.sam-accordion-body-right {
	width: 17%;
	float: left;
}
.sam-accounts {
    width: 25%;
    float: left;
}
.sam-cards {
    width: 25%;
    float: left;
}
.sam-permission-time {
    width: 48%;
    float: left;
}
.sam-accordion-body span {
    width: 100%;
    display: block;
    float: left;
}
.sam-title {
    font-family: 'aspira-demi', calibri, arial, sans-serif;
    padding: 10px 0 5px 0;
}
.sam-application-status i {
    float: right;
    margin-right: 8px;
    line-height: 28px;
}
.sam-remove-access button.remove-access {
	margin: 15% 0 5% 0;
}
.sam-permission {
    margin-bottom: 10px;
    float: left;
    width: 100%;
}
.sam-time {
    float: left;
    width: 100%;
}
.application-title, .status-title {
	padding: 0;
}
.sam-application-status i.fa.fa-chevron-up {
    color: #485dc5;
}
@media screen and (max-width: 800px) {
	.sam-application-name, .application-title {
		width: 55%;
	}
	.sam-application-status, .status-title {
		width: 41%;
    	padding-left: 3% !important;
	}
	.sam-accordion-body-left {
	    width: 98%;
	    padding-left: 2%;
	}
	.sam-accordion-body-right {
    	width: 100%;
    }
    .sam-accounts {
	    width: 55%;
	    float: left;
	}
	.sam-cards {
	    width: 45%;
	    float: left;
	}
	.sam-permission-time, .sam-remove-access {
	    width: 100%;
	    float: left;
	}
	.sam-access-expiry {
	    width: 98%;
	    padding-left: 2%;
	    float: left;
	}
	.sam-remove-access button.remove-access {
	    margin: 2%;
	    width: 96%;
	}
	.sam-accordion-body {
		border-left: 0;
		padding: 0;
	}
}
ul.permission-list {
	width: 94%;
	float: left;
	background: #eeeaf0;
	padding: 1.5% 3%;
}
ul.permission-list li {
	width: 50%;
	float: left;
	padding: 2px 0;
	color: #4d4d4d;
}

/* Do NOT add new css content below this line. New css should be placed either within or above the @media settings */