body {
color: #777;
}
/* Home page (scoped to body.home) */
body.home {
background-color: #f9f9f9;
color: #444;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.home footer {
margin-top: auto;
}
footer .footer-menu a {
display: block;
}
footer .footer-top {
margin-bottom: 10px;
}
footer .footer-top p {
margin: 0;
}
footer .footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
}
footer .footer-legal {
padding-top: 6px;
padding-bottom: 6px;
}
footer .footer-right {
padding-top: 6px;
padding-bottom: 6px;
text-align: right;
}
footer .footer-menu {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
}
footer .footer-menu a {
display: inline-block;
}
footer .footer-links {
display: flex;
align-items: center;
justify-content: flex-end;
}
footer .footer-links {
margin-top: 8px;
}
footer .footer-links-sep {
padding: 0 6px;
}
/* Floating WhatsApp button (site-wide) */
.whatsapp-float {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #0f5f69;
color: #fff !important;
font-weight: bold;
text-decoration: none !important;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 2px 2px 10px #ddd;
}
.whatsapp-float .whatsapp-float-icon {
font-size: 14px;
letter-spacing: 0.5px;
}
.whatsapp-float .whatsapp-float-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
background: #165392;
color: #fff !important;
}
@media (max-width: 767px) {
body.home #pageHeader {
margin-bottom: 12px;
}
.whatsapp-float {
right: 12px;
bottom: 12px;
width: 52px;
height: 52px;
}
}
@media (max-width: 767px) {
footer .footer-right {
text-align: left;
}
footer .footer-menu,
footer .footer-links {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
body.home footer .text-right {
text-align: left;
margin-top: 8px;
}
}
/* Responsive tables (site-wide) */
@media (max-width: 991px) {
table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table th,
table td {
white-space: nowrap;
}
}
body.home .home-topbar,
.home-topbar {
background: #fff;
border-bottom: 1px solid #e7e7e7;
}
body.home .home-topbar-row,
.home-topbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
}
body.home .home-brand img,
.home-brand img {
height: 34px;
width: auto;
display: block;
}
body.home .home-nav,
.home-nav {
display: flex;
align-items: center;
gap: 18px;
}
body.home .home-nav-link,
.home-nav-link {
color: #666;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
}
body.home .home-nav-link:hover,
.home-nav-link:hover {
color: #333;
text-decoration: none;
}
body.home .home-send,
.home-send {
border-radius: 4px;
font-size: 15px;
padding: 8px 14px;
text-transform: uppercase;
}
body.home .home-send-after,
.home-send-after {
display: inline-flex;
align-items: center;
margin-left: 10px;
}
body.home .home-send-after-icon,
.home-send-after-icon {
height: 34px;
width: auto;
display: block;
}
@media (max-width: 767px) {
body.home .home-nav-link,
.home-nav-link {
display: none;
}
}
body.home .home-hero {
background: #0f5f69;
}
body.home .home-hero-bg {
padding: 70px 0 60px;
color: #fff;
background-image:
linear-gradient(90deg, rgba(9, 71, 79, 0.92) 0%, rgba(17, 103, 114, 0.86) 55%, rgba(17, 103, 114, 0.80) 100%),
url(/img/hero2.jpg);
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
}
body.home .home-hero-copy {
padding-top: 32px;
}
@media (min-width: 992px) {
body.home .home-hero-align {
display: flex;
flex-wrap: wrap;
align-items: center;
}
body.home .home-hero-copy {
padding-top: 0;
}
}
body.home .home-hero-title {
margin: 0 0 12px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.1;
color: #fff;
}
body.home .home-hero-subtitle {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
line-height: 1.55;
}
body.about .about-hero-title {
margin-bottom: 12px;
}
body.about .about-hero-secondary {
display: inline-block;
margin-top: 8px;
font-weight: 700;
font-size: 0.72em;
line-height: 1.15;
}
body.contact .contact-hero-secondary {
display: inline-block;
margin-top: 8px;
font-weight: 700;
font-size: 0.72em;
line-height: 1.15;
}
body.faq .faq-hero-secondary {
display: inline-block;
margin-top: 8px;
font-weight: 700;
font-size: 0.72em;
line-height: 1.15;
}
/* Legal/Policy pages: shared hero secondary text */
.legal-hero-secondary {
display: inline-block;
margin-top: 8px;
font-weight: 700;
font-size: 0.72em;
line-height: 1.15;
}
/* Legal/Policy pages: closer card under hero (match FAQ) */
body.useragreement.public-page #pageBody,
body.privacy.public-page #pageBody,
body.compliance.public-page #pageBody {
padding-top: 0;
}
@media (min-width: 992px) {
body.useragreement.public-page .public-content-card,
body.privacy.public-page .public-content-card,
body.compliance.public-page .public-content-card {
margin-top: -48px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
}
/* FAQ page: pull card closer to hero */
body.faq.public-page #pageBody {
padding-top: 0;
}
@media (min-width: 992px) {
body.faq.public-page .public-content-card {
margin-top: -48px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
}
/* FAQ page: accordion styling */
body.faq .faq-title {
margin-top: 0;
}
body.faq .faq-lead {
margin: 0 0 16px;
color: #666;
}
body.faq .faq-accordion {
margin-top: 10px;
}
body.faq .faq-accordion .panel {
border-radius: 6px;
overflow: hidden;
}
body.faq .faq-accordion .panel + .panel {
margin-top: 10px;
}
body.faq .faq-accordion .panel-heading {
background: #fff;
padding: 14px 16px;
}
body.faq .faq-accordion .panel-heading:hover {
background: #f6f6f6;
}
body.faq .faq-accordion .panel-title a {
display: block;
text-decoration: none;
color: #113F6D;
font-weight: 600;
position: relative;
padding-right: 22px;
overflow-wrap: anywhere;
}
body.faq .faq-accordion .panel-title a:focus {
outline: 2px solid #165392;
outline-offset: 2px;
}
body.faq .faq-accordion .panel-title a:after {
content: "\2212";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #165392;
font-weight: 700;
}
body.faq .faq-accordion .panel-title a.collapsed:after {
content: "+";
}
body.faq .faq-accordion .panel-body {
line-height: 1.6;
overflow-wrap: anywhere;
}
body.faq .faq-list {
margin: 8px 0 12px;
padding-left: 0;
list-style: none;
}
body.faq .faq-list > li {
position: relative;
padding-left: 22px;
margin: 8px 0;
}
body.faq .faq-list > li:before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 10px;
height: 10px;
border-radius: 50%;
background: #165392;
transform: translateY(-50%);
}
@media (max-width: 991px) {
body.faq .public-content-card {
padding-left: 12px;
padding-right: 12px;
}
}
@media (max-width: 767px) {
body.faq .home-hero-bg {
padding: 44px 0 40px;
background-position: center;
}
body.faq .home-hero-title {
font-size: 28px;
}
body.faq .faq-lead {
margin-bottom: 12px;
}
body.faq .faq-accordion .panel-heading {
padding: 12px 12px;
}
body.faq .faq-accordion .panel-title a {
padding-right: 26px;
line-height: 1.25;
}
body.faq .faq-accordion .panel-title a:after {
right: 2px;
}
}
body.contact .contact-content {
padding-top: 0;
}
body.contact .contact-cards {
margin-top: -60px;
}
body.contact .contact-card {
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
body.contact .contact-card .panel-heading {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-weight: 600;
}
@media (max-width: 767px) {
body.contact .contact-cards {
margin-top: -30px;
}
}
body.home .home-hero-cta .btn {
margin-right: 8px;
margin-bottom: 10px;
}
body.home .home-hero-cta .btn-success {
background-color: #47a447;
border-color: #398439;
}
body.home .home-rate-card {
margin-top: 10px;
border-radius: 6px;
background: #fff;
border: 1px solid #e7e7e7;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
body.home .home-rate-card-inner {
padding: 18px 18px 14px;
background: rgba(9, 71, 79, 0.92);
border-radius: 6px;
color: #fff;
}
body.home .home-rate-card-title {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin-bottom: 10px;
}
body.home .home-rate-card-rate {
font-size: 18px;
color: #fff;
margin-bottom: 10px;
}
body.home .home-rate-card-rate-value {
color: #47a447;
font-weight: 700;
}
body.home .home-rate-card-meta {
font-size: 11px;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 10px;
}
body.home .home-rate-card-actions {
margin-bottom: 10px;
}
body.home .home-rate-title {
margin-top: 0;
margin-bottom: 6px;
font-size: 18px;
}
body.home .home-rate-value {
margin-bottom: 10px;
font-size: 16px;
}
body.home .home-rate-meta {
margin: 0 0 10px;
font-size: 12px;
color: #888;
}
/* Keep calculator IDs for JS, but make it flow inside the rate card on home */
body.home #calculator {
position: static;
display: block;
width: 100%;
max-width: none;
padding: 10px 0 0;
border: 0;
background-color: transparent;
}
body.home .home-calculator {
display: block;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 12px;
color: #333;
}
/* Home: calculator stays open (no toggle UI) */
body.home #showCalc {
display: none;
}
body.home .home-calculator-close {
display: none;
}
body.home .home-calc-row {
margin-bottom: 10px;
}
body.home .home-calc-label {
display: block;
font-weight: normal;
color: #333;
margin: 0;
}
body.home .home-calc-label-text {
display: block;
font-size: 12px;
margin-bottom: 5px;
}
body.home .home-calc-inline {
display: flex;
align-items: center;
gap: 8px;
}
body.home .home-calc-radio {
font-weight: normal;
font-size: 12px;
color: #333;
margin-right: 8px;
}
body.home .home-calc-currency {
font-weight: 700;
color: #333;
}
body.home .home-calc-input {
max-width: 180px;
}
body.home .home-calc-submit {
margin-left: 6px;
}
body.home .home-calc-results {
font-size: 12px;
color: #333;
padding-top: 4px;
border-top: 1px solid #e7e7e7;
margin-top: 10px;
padding-top: 10px;
}
body.home .home-calculator-close {
text-align: right;
font-size: 12px;
margin-top: 6px;
}
body.home .home-calculator-close a {
color: #47a447;
}
body.home .feature-card {
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 18px 15px;
min-height: 170px;
margin-bottom: 15px;
}
body.home .feature-card h4 {
margin-top: 0;
}
/* Home mockup-style content section */
body.home .home-content {
background: #f3f3f3;
padding: 35px 0 40px;
border-top: 1px solid #e7e7e7;
}
body.home .home-section-title {
margin: 0 0 18px;
font-size: 18px;
font-weight: 600;
color: #666;
text-transform: none;
height: auto;
overflow: visible;
}
body.about .about-mission-title {
margin: 0 0 14px;
text-align: center;
font-size: 34px;
font-weight: 300;
color: #666;
}
/* About page: closer to hero + modern card feel (match FAQ) */
body.about .about-content {
padding-top: 0;
}
body.about .about-mission-card {
max-width: 1020px;
margin: 0 auto;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 22px 22px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
@media (min-width: 992px) {
body.about .about-mission-card {
margin-top: -48px;
}
}
body.about .about-mission-text {
max-width: 980px;
margin: 0 auto;
color: #777;
line-height: 1.75;
font-size: 14px;
}
body.about .about-mission-text p {
margin: 0 0 14px;
}
body.about .about-mission-text p:last-child {
margin-bottom: 0;
}
body.about .about-subtitle {
margin: 18px 0 10px;
font-size: 18px;
font-weight: 600;
color: #113F6D;
}
body.about .about-list {
max-width: 980px;
margin: 0 auto 14px;
color: #888;
padding-left: 0;
list-style: none;
}
body.about .about-list li {
margin-bottom: 8px;
position: relative;
padding-left: 22px;
}
body.about .about-list li:before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 10px;
height: 10px;
border-radius: 50%;
background: #165392;
transform: translateY(-50%);
}
body.public-page #pageBody {
background: #f3f3f3;
padding: 35px 0 40px;
border-top: 1px solid #e7e7e7;
}
body.public-page .public-content-card {
max-width: 1020px;
margin: 0 auto;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 22px 22px;
}
body.public-page .public-content-card > .row {
margin-left: 0;
margin-right: 0;
}
body.public-page .public-content-card > .row > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
body.public-page .public-content-card h1 {
margin-top: 0;
margin-bottom: 14px;
font-weight: 600;
color: #555;
}
body.public-page .public-content-card h2,
body.public-page .public-content-card h3,
body.public-page .public-content-card h4 {
color: #666;
}
body.public-page .public-content-card p,
body.public-page .public-content-card li {
color: #777;
line-height: 1.75;
font-size: 14px;
}
body.public-page .public-content-card ul {
padding-left: 18px;
}
@media (max-width: 767px) {
body.public-page .public-content-card {
padding: 18px 16px;
}
}
@media (max-width: 767px) {
body.about .about-mission-title {
font-size: 26px;
}
body.about .about-mission-card {
padding: 18px 16px;
}
}
body.home .home-services {
margin-bottom: 18px;
display: flex;
flex-wrap: wrap;
}
body.home .home-services > [class*="col-"] {
display: flex;
}
body.home .home-service {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
text-align: left;
padding: 16px 14px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 8px;
box-shadow: 2px 2px 10px #ddd;
width: 100%;
height: 100%;
}
body.home .home-service-icon {
width: 58px;
height: 58px;
border-radius: 6px;
background: #0f5f69;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
align-self: center;
}
body.home .home-service-icon .glyphicon {
font-size: 24px;
color: #fff;
}
body.home .home-service-title {
font-weight: 600;
color: #444;
font-size: 16px;
align-self: center;
text-align: center;
}
body.home .home-service-text {
font-size: 14px;
color: #555;
line-height: 1.5;
width: 100%;
}
body.home .home-locations-panel {
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
body.home .home-locations-panel-head {
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
body.home .home-locations-panel-head .input-group-addon {
background: #fff;
}
body.home .home-locations-panel-head .form-control {
height: 40px;
}
body.home .home-locations-cta {
margin-top: 10px;
}
body.home .home-locations-panel-body {
padding-top: 14px;
}
@media (min-width: 992px) {
body.home .home-locations-cta {
margin-top: 0;
}
}
body.home .home-loc-card {
border: 1px solid #f0f0f0;
background: #fbfbfb;
border-radius: 6px;
padding: 12px;
margin-bottom: 12px;
transition: box-shadow 120ms ease, border-color 120ms ease;
}
body.home .home-loc-card:hover {
border-color: #e7e7e7;
box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
body.home .home-loc-title {
font-weight: 700;
color: #113F6D;
margin-bottom: 8px;
}
body.home .home-loc-line {
font-size: 12px;
color: #777;
line-height: 1.45;
}
body.home .home-loc-cols {
display: flex;
gap: 12px;
}
body.home .home-loc-col {
flex: 1 1 0;
}
body.home .home-loc-col-contacts {
text-align: right;
}
@media (max-width: 767px) {
body.home .home-locations-panel {
padding: 14px;
}
body.home .home-locations-panel-head .text-right {
text-align: left;
}
body.home .home-loc-cols {
display: block;
}
body.home .home-loc-col-contacts {
text-align: left;
margin-top: 8px;
}
}
.home-map {
margin-top: 12px;
padding: 10px;
text-align: center;
}
.home-map-canvas {
width: 100%;
height: 380px;
border-radius: 6px;
border: 1px solid #e7e7e7;
overflow: hidden;
}
/* Green-tint the map tiles (homepage only) */
.tl-branch-map .leaflet-tile-pane {
filter: hue-rotate(115deg) saturate(240%) brightness(0.88) contrast(1.08);
position: relative;
}
.tl-branch-map .leaflet-tile-pane::after {
content: '';
position: absolute;
inset: 0;
background: rgba(76, 174, 76, 0.28);
mix-blend-mode: multiply;
pointer-events: none;
}
body.home .home-map img {
max-width: 100%;
height: auto;
display: inline-block;
}
/* Locations panel (used on other public pages too) */
.home-locations-panel {
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.home-locations-panel-head {
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.home-locations-panel-head .input-group-addon {
background: #fff;
}
.home-locations-panel-head .form-control {
height: 40px;
}
.home-locations-cta {
margin-top: 10px;
}
.home-locations-panel-body {
padding-top: 14px;
}
@media (min-width: 992px) {
.home-locations-cta {
margin-top: 0;
}
}
.home-loc-card {
border: 1px solid #f0f0f0;
background: #fbfbfb;
border-radius: 6px;
padding: 12px;
margin-bottom: 12px;
transition: box-shadow 120ms ease, border-color 120ms ease;
}
.home-loc-card:hover {
border-color: #e7e7e7;
box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.home-loc-title {
font-weight: 700;
color: #113F6D;
margin-bottom: 8px;
}
.home-loc-line {
font-size: 12px;
color: #777;
line-height: 1.45;
}
.home-loc-cols {
display: flex;
gap: 12px;
}
.home-loc-col {
flex: 1 1 0;
}
.home-loc-col-contacts {
text-align: right;
}
@media (max-width: 767px) {
.home-locations-panel {
padding: 14px;
}
.home-locations-panel-head .text-right {
text-align: left;
}
.home-loc-cols {
display: block;
}
.home-loc-col-contacts {
text-align: left;
margin-top: 8px;
}
}
.home-map {
padding: 10px;
text-align: center;
}
.home-map img {
max-width: 100%;
height: auto;
display: inline-block;
}
body.app {
padding-top: 60px !important;
}
.navbar .container {
padding: 0;
}
#calculator {
position: absolute;
width: 400px;
max-width: 400px;
padding: 15px;
background-color: #fff;
border: 1px solid #ccc;
display: none;
z-index: 2;
}
.header {
padding: 10px 0;
}
.header .phone {
text-align: right;
padding-top: 0px;
}
/* Header phone number */
#pageHeader .phone h3 {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 8px 0 0 0;
padding: 6px 10px;
border: 1px solid #e7e7e7;
border-radius: 6px;
background: #fff;
color: #113F6D;
font-size: 18px;
line-height: 1.2;
}
#pageHeader .phone h3 span.glyphicon {
font-size: 18px;
}
#pageHeader .phone h3 .header-phone-link,
#pageHeader .phone h3 .header-phone-link:visited {
color: inherit;
text-decoration: none;
}
#pageHeader .phone h3 .header-phone-link:hover,
#pageHeader .phone h3 .header-phone-link:focus {
color: inherit;
text-decoration: underline;
}
.header .phone p,
.header .phone p a,
.header .phone p a:visited {
color: #A6A6A6;
}
.header .phone .shaka-wrap {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.header .phone .shaka-wrap .brand.shaka img {
height: 52px;
width: auto;
max-width: 50%;
display: block;
}
.header .phone .shaka-label {
color: #A6A6A6;
font-size: 12px;
font-weight: 600;
margin-top: 2px;
}
/* Header: Log in / Register links */
#pageHeader .header-auth-links {
margin: 6px 0 0 0;
}
#pageHeader .header-auth-links small {
display: inline-flex;
align-items: center;
gap: 8px;
}
#pageHeader .header-auth-link {
display: inline-block;
padding: 6px 12px;
border: 1px solid #113F6D;
border-radius: 4px;
background: #165392;
color: #fff !important;
text-decoration: none;
font-weight: 600;
font-size: 13px;
}
#pageHeader .header-auth-link:visited {
color: #fff !important;
}
#pageHeader .header-auth-link:hover,
#pageHeader .header-auth-link:focus {
background: #113F6D;
text-decoration: none;
}
#pageHeader .header-auth-sep {
color: #c9c9c9;
}
.brand {
padding: 15px 0;
display: block;
}
.brand img {
max-width: 100%;
height: auto;
}
@media (max-width: 767px) {
/* Prevent sideways scrolling in the mobile header */
body.home {
overflow-x: hidden;
}
#pageHeader {
overflow-x: hidden;
}
#pageHeader .container,
#pageHeader .row,
#pageHeader .navbar,
#pageHeader .navbar-header,
#pageHeader .navbar-collapse,
#pageHeader .navbar-nav,
#pageHeader .navbar-form,
#pageHeader .form-group,
#pageHeader .form-control,
#pageHeader .btn {
max-width: 100%;
box-sizing: border-box;
}
#pageHeader .navbar-collapse,
#pageHeader .navbar-collapse.in,
#pageHeader .navbar-collapse.collapsing {
overflow-x: hidden;
}
/* Header top row */
#pageHeader .header {
padding: 8px 0;
}
#pageHeader .brand {
padding: 8px 0;
}
#pageHeader .phone {
text-align: left;
padding-top: 6px;
}
#pageHeader .phone .shaka-wrap {
justify-content: flex-start;
}
#pageHeader .phone h3 {
display: inline-flex;
width: 100%;
justify-content: center;
margin: 8px 0 0 0;
font-size: 17px;
}
#pageHeader .header-auth-links small {
flex-wrap: wrap;
gap: 10px;
}
#pageHeader .header-auth-sep {
display: none;
}
/* Navbar spacing + toggle alignment */
#pageHeader .navbar {
margin-bottom: 0;
}
#pageHeader .navbar.navbar-default {
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
}
#pageHeader .navbar-header {
display: flex;
justify-content: flex-end;
width: 100%;
padding: 0 10px;
}
#pageHeader .navbar-toggle {
margin-right: 0;
margin-top: 8px;
margin-bottom: 8px;
border-color: #113F6D;
background: #165392;
border-radius: 4px;
}
#pageHeader .navbar-toggle:hover,
#pageHeader .navbar-toggle:focus {
background: #113F6D;
}
#pageHeader .navbar-toggle .icon-bar {
background-color: #fff;
}
#pageHeader .navbar-collapse {
padding-left: 0;
padding-right: 0;
}
#pageHeader .navbar-collapse.in,
#pageHeader .navbar-collapse.collapsing {
border-top: 1px solid #e7e7e7;
padding: 8px 10px;
}
/* Mobile expanded menu: navigation links */
#pageHeader .navbar-collapse.in .navbar-nav,
#pageHeader .navbar-collapse.collapsing .navbar-nav {
width: 100%;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
overflow: hidden;
margin: 0;
}
#pageHeader .navbar-collapse.in .navbar-nav > li,
#pageHeader .navbar-collapse.collapsing .navbar-nav > li {
float: none;
border-bottom: 1px solid #e7e7e7;
}
#pageHeader .navbar-collapse.in .navbar-nav > li:last-child,
#pageHeader .navbar-collapse.collapsing .navbar-nav > li:last-child {
border-bottom: 0;
}
#pageHeader .navbar-collapse.in .navbar-nav > li > a,
#pageHeader .navbar-collapse.collapsing .navbar-nav > li > a {
padding: 12px 14px;
color: #113F6D;
font-weight: 600;
}
#pageHeader .navbar-collapse.in .navbar-nav > li > a:hover,
#pageHeader .navbar-collapse.in .navbar-nav > li > a:focus,
#pageHeader .navbar-collapse.collapsing .navbar-nav > li > a:hover,
#pageHeader .navbar-collapse.collapsing .navbar-nav > li > a:focus {
background: #f6f6f6;
color: #113F6D;
}
#pageHeader .navbar-collapse.in .navbar-nav > li.active > a,
#pageHeader .navbar-collapse.in .navbar-nav > li.active > a:hover,
#pageHeader .navbar-collapse.in .navbar-nav > li.active > a:focus {
background: #165392;
color: #fff;
}
/* Mobile expanded menu: login panel */
#pageHeader .navbar-collapse.in .navbar-form.navbar-right,
#pageHeader .navbar-collapse.collapsing .navbar-form.navbar-right {
margin-top: 10px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 10px;
}
#pageHeader .navbar-nav {
margin: 0;
}
/* Header navbar: make login form usable on mobile */
#pageHeader .navbar-form.navbar-right {
float: none !important;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#pageHeader .navbar-form .form-group {
display: block;
width: 100%;
margin: 0 0 8px 0;
}
#pageHeader .navbar-form .form-control {
width: 100%;
}
#pageHeader .navbar-form .btn {
display: block;
width: 100%;
margin: 0 0 8px 0;
}
#pageHeader .navbar-form .btn:last-child {
margin-bottom: 0;
}
}
.masthead .container {
background-image: url(../img/home-background.jpg);
background-repeat: no-repeat;
background-position: bottom right;
padding: 20px 10px 30px;
}
/* Public header: navbar login form polish (desktop/tablet) */
#pageHeader .tl-header-login .form-group {
margin-right: 8px;
}
#pageHeader .tl-header-login .btn {
margin-left: 6px;
}
#pageHeader .tl-header-login .help-block {
margin: 4px 0 0;
}
@media(max-width:991px){
.masthead .container {
background: none;
text-align: center;
}
}
.masthead h2 {
font-weight: normal;
}
.features {
padding: 40px 0 30px;
}
span.glyphicon {
font-size: 85%;
color: #47a447;
}
#homeBody {
background-color: #f9f9f9;
border-top: 1px solid #efefef;
}
#pageBody {
background-color: #fff;
}
#pageBottom{
color: #7F7F7F;
font-size: 80%;
padding: 20px 0 30px;
background-color: #efefef;
border-top: 1px solid rgb(231,231,231);
}
#pageBottom a {
color: #7F7F7F;
}
a#facebook {
opacity: 0.4;
position: relative;
bottom: 2px;
transition: all 0.2s ease-in-out;
}
a#facebook:hover {
opacity: 1;
}
/* Footer styles */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 0;
}
body > footer {
position: relative;
width: 100%;
height: auto;
background-color: #fff;
border-top: 1px solid #e7e7e7;
color: #777;
line-height: 1.5;
padding: 18px 0;
}
body > footer .right {
text-align: right;
}
body > footer a,
body > footer a:visited {
color: #666;
}
body > footer a:hover {
color: #333;
text-decoration: none;
}
/* Screenshot-style footer layout (keeps existing colors) */
body > footer .footer-accent {
height: 4px;
background-color: #47a447;
}
body > footer .site-footer {
padding-top: 22px;
}
body > footer .footer-main {
padding-bottom: 8px;
}
body > footer .footer-col {
margin-bottom: 18px;
}
body > footer .footer-brand img {
height: 34px;
width: auto;
display: block;
}
body > footer .footer-tagline {
margin: 10px 0 0;
font-size: 12px;
opacity: 0.9;
}
body > footer .footer-social {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
}
body > footer .footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid currentColor;
border-radius: 999px;
text-decoration: none;
}
body > footer .footer-social-img {
max-width: 16px;
max-height: 16px;
display: block;
}
body > footer .footer-social-pill {
font-size: 12px;
font-weight: bold;
}
body > footer .footer-title {
font-size: 14px;
font-weight: bold;
margin: 0 0 10px;
}
body > footer .footer-list a {
display: block;
margin: 0 0 6px;
}
body > footer .footer-muted {
font-size: 12px;
opacity: 0.9;
margin: 0 0 8px;
}
body > footer .footer-locations-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
body > footer .footer-locations-arrow {
margin-left: auto;
}
body > footer .footer-disclaimer {
font-size: 12px;
opacity: 0.9;
}
body > footer .footer-disclaimer p {
margin: 0;
}
body > footer .footer-divider {
height: 1px;
background-color: currentColor;
opacity: 0.25;
margin: 18px 0;
}
body > footer .footer-meta {
font-size: 12px;
}
@media (max-width: 767px) {
body > footer .footer-locations-arrow {
display: none;
}
}
.required, .alert span.glyphicon.red {
color: #900;
}
.step p {
text-align: right;
font-weight: bold;
}
.check {
border: 1px solid #e2e2e2;
background: #fff;
padding: 10px;
}
.check .inner {
background-color: #F1F1F1;
padding: 20px;
}
.check .form-inline input {
width: 150px;
}
.control input#date1, .control input#date2 {
width: 110px;
}
#city, #state, #zip {
margin-bottom: 0;
}
.payee {
padding: 20px 0 10px;
border-bottom: 1px solid #e2e2e2;
margin-bottom: 20px;
}
.steps {
padding: 15px 0;
}
/*
.calendar {
padding: 15px;
border: 1px solid #e2e2e2;
background-color: #fff;
border-radius: 5px;
cursor: pointer;
}
.calendar td {
padding: 2px;
text-align: center;
}
*/
/* Calendar */
div.calendar { position: relative; }
.calendar, .calendar table {
border: 1px solid #556;
font-size: 11px;
color: #000;
width:165px;
cursor: default;
background: #eef;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /* They are the navigation buttons */
padding: 2px; /* Make the buttons seem like they're pressing */
}
.calendar .nav {
background: #778 url(../images/menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
background: #fff;
color: #000;
padding: 2px;
}
.calendar thead .headrow { /* Row containing navigation buttons */
background: #778;
color: #ffffff;
}
.calendar thead .daynames { /* Row
containing the day names */
background: #bdf;
}
.calendar thead .name { /* Cells | containing the day names */
border-bottom: 1px solid #556;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #a66;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background-color: #aaf;
color: #000;
border: 1px solid #04f;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background-color: #77c;
padding: 2px 0px 0px 2px;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells | containing month days dates */
width: 2em;
color: #456;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
color: #fbb;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #bdf;
}
.calendar tbody .rowhilite td {
background: #def;
}
.calendar tbody .rowhilite td.wn {
background: #eef;
}
.calendar tbody td.hilite { /* Hovered cells | */
background: #def;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}
.calendar tbody td.active { /* Active (pressed) cells | */
background: #cde;
padding: 2px 2px 0px 2px;
}
.calendar tbody td.selected { /* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #fff;
color: #000;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #a66;
}
.calendar tbody td.today { /* Cell showing selected date */
font-weight: bold;
color: #00f;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The |
in footer (only one right now) */
text-align: center;
background: #556;
color: #fff;
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell | */
background: #fff;
color: #445;
border-top: 1px solid #556;
padding: 1px;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
background: #77c;
padding: 2px 0px 0px 2px;
}
/* Combo boxes (menus that display months/years for direct selection) */
.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #655;
background: #def;
color: #000;
font-size: 90%;
}
.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}
.calendar .combo .label-IEfix {
width: 4em;
}
.calendar .combo .hilite {
background: #acf;
}
.calendar .combo .active {
border-top: 1px solid #46a;
border-bottom: 1px solid #46a;
background: #eef;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
#converted_result {
padding: 8px 0 0;
font-size: 120%;
}
.transactions td {
padding: 10px 5px;
border: 1px solid #d3d3d3;
}
.transactions tr.header,
.transactions tr.totals {
background: #fff;
color: #666;
}
tr.header th,
tr.totals th {
padding: 10px 5px;
}
.transactions tr.entry {
border-bottom: 1px solid #d3d3d3;
border-left: 1px solid #d3d3d3;
}
.transactions tr.header {
border-bottom: 2px solid #d3d3d3;
}
.receipt {
position: relative;
}
.receipt .print {
position: absolute;
top: 5px;
right: 5px;
}
.panel-title {
text-align: center;
}
.send-money {
background: #f9f9f9;
border: 1px solid #e2e2e2;
padding: 20px;
}
.large * {
font-size: 120% !important;
}
#send-to-bank {
display: none;
}
.app #pageBody > .container {
padding-top: 30px
}
/* Transaction History (app pages) */
.tl-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 10px 0 12px;
}
.tl-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid #e7e7e7;
background: #f9f9f9;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #666;
}
.tl-pill .tl-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #bbb;
display: inline-block;
}
.tl-pill-dark {
background: #333;
border-color: #333;
color: #fff;
}
.tl-pill-dark .tl-dot {
background: #fff;
}
.tl-pill-success {
background: #dff0d8;
border-color: #d6e9c6;
}
.tl-pill-success .tl-dot {
background: #3c763d;
}
.tl-pill-warning {
background: #fcf8e3;
border-color: #faebcc;
}
.tl-pill-warning .tl-dot {
background: #8a6d3b;
}
@media (max-width: 767px) {
.tl-toolbar {
gap: 8px;
}
/* Inline spacer used for desktop alignment */
.tl-toolbar > div[style*="flex: 1 1 auto"] {
display: none;
}
.tl-toolbar .input-group {
width: 100% !important;
flex: 1 1 100%;
}
.tl-toolbar button.btn {
width: 100%;
}
}
@media print {
.noPrint {
display: none;
}
} |