html, body {
max-width: 100%;
} #mortgage-calculator {
background: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
max-width: 1100px;
margin: 0 auto;
font-family: Arial, sans-serif;
} .moc-container {
display: flex;
gap: 30px;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
} .moc-form {
flex: 1;
min-width: 300px;
max-width: 420px;
} .moc-field-group {
margin-bottom: 15px;
}
.moc-field-group label {
display: block;
font-weight: 500;
margin-bottom: 5px;
font-size: 16px;
} .moc-field-group input {
width: 100%;
padding: 8px 10px;
font-size: 14px;
border: 2px solid #333;
border-radius: 4px;
background-color: #fff !important;
color: #000;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.moc-field-group input:focus {
border-color: #2dc98a;
box-shadow: 0 4px 12px rgba(116, 205, 169, 0.35);
outline: none;
} .moc-field-group select {
width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 2px solid #333;
border-radius: 4px;
background-color: transparent;
color: #000;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px 20px;
}
.moc-field-group select:focus {
border-color: #2dc98a;
box-shadow: 0 4px 12px rgba(116, 205, 169, 0.35);
outline: none;
} .moc-flex-row {
display: flex;
gap: 10px;
align-items: center;
}
.moc-flex-row input {
flex: 1;
}
.moc-flex-row input#interest {
flex: 0 0 100px;
max-width: 100px;
}
.moc-flex-row span {
font-weight: 500;
font-size: 16px;
margin: 0 5px;
} .moc-field-group input + select {
margin-top: 8px;
} .term-inputs {
display: flex;
gap: 10px;
align-items: center;
}
.term-inputs input {
flex: 1;
}
.term-inputs input#term_years {
flex: 0 0 100px;
max-width: 100px;
}
.term-inputs input#term_months {
flex: 0 0 100px;
max-width: 100px;
}
.term-inputs span {
font-size: 16px;
font-weight: 500;
margin: 0 5px;
} .moc-currency-wrapper {
position: relative;
width: 100%;
display: inline-block;
}
.moc-currency-wrapper input {
width: 100%;
padding-left: 34px !important;
box-sizing: border-box;
}
.moc-currency-wrapper .moc-currency {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-left: 15px;
padding-right: 0px;
border: 2px solid #333;
border-right: none;
border-radius: 4px 0 0 4px;
background-color: #fff;
color: #2dc98a;
font-weight: 700;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.moc-currency-wrapper input:focus + .moc-currency {
border-color: #2dc98a;
box-shadow: 0 4px 12px rgba(116, 205, 169, 0.35);
}
.moc-currency-wrapper .moc-currency {
transition: border-color 0.2s, box-shadow 0.2s;
}
.moc-currency-wrapper input:focus {
border-color: #2dc98a;
box-shadow: 0 4px 12px rgba(116, 205, 169, 0.35);
outline: none;
}
.moc-currency-wrapper input:focus + .moc-currency {
border-color: #2dc98a;
box-shadow: 0 4px 12px rgba(116, 205, 169, 0.35);
}
.moc-recurring-select {
margin-top: 10px;
width: 100%;
padding: 8px 10px;
font-size: 14px;
border: 2px solid #333;
border-radius: 4px;
appearance: none;
background-color: #fff;
color: #000;
cursor: pointer;
box-sizing: border-box;
}
.moc-flex-row .moc-currency-wrapper {
position: relative;
flex: 1;
min-width: 120px;
}
.moc-flex-row .moc-currency-wrapper input {
width: 100%;
padding-left: 50px;
box-sizing: border-box;
}
.moc-flex-row .moc-currency-wrapper .moc-currency {
position: absolute;
left: -5px;
top: 0;
bottom: 0;
border: 2px solid #333;
border-right: none;
border-radius: 4px 0 0 4px;
background-color: #fff;
color: #2dc98a;
font-weight: 700;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.moc-flex-row .moc-currency-wrapper input:focus + .moc-currency {
border-color: #2dc98a;
box-shadow: 0 4px 12px rgba(116, 205, 169, 0.35);
} .moc-field-group input:disabled,
.moc-flex-row input:disabled {
border: 2px solid #ccc !important;
color: #888 !important;
cursor: not-allowed;
opacity: 1 !important;
}
.moc-currency-wrapper input:disabled + .moc-currency,
.moc-flex-row .moc-currency-wrapper input:disabled + .moc-currency {
border-color: #ccc !important;
box-shadow: none !important;
color: #ccc !important;
} .moc-currency-wrapper input:focus + .moc-currency,
.moc-flex-row .moc-currency-wrapper input:focus + .moc-currency {
box-shadow: none;
border-color: #2dc98a;
} .moc-button {
width: 100%;
margin-top: 15px;
padding: 12px;
background-color: #2dc98a !important;
color: #fff;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
}
.moc-button:hover {
background-color: #4BCD99 !important;
} .moc-button-reset {
display: block;
width: 48%;
padding: 10px;
margin: 15px auto 0 auto;
background-color: #636363;
color: #fff;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
transition: background-color 0.2s;
}
.moc-button-reset:hover {
background-color: #636D6D;
} .moc-right {
flex: 1.5;
min-width: 320px;
} .moc-results {
background-color: transparent;
border: none;
}
.moc-results h4 {
margin-top: 0;
font-size: 16px;
}
.moc-results p {
margin: 8px 0;
font-size: 14px;
}
.moc-results-totals p {
margin: 8px 0;
font-size: 18px;
}
p.estimate-message {
font-size: 16px;
line-height: 1.2;
} .moc-highlight {
display: inline-block;
margin-left: 8px;
font-size: 18px;
font-weight: 700;
color: #0074d9;
}
.moc-highlight.savings { color: #2dc98a; }
.moc-highlight.time { color: #2dc98a; }
.moc-highlight.total { color: #34495e; } .moc-charts {
background-color: transparent;
border: none;
margin-top: 25px;
margin-bottom: 20px;
} .moc-charts canvas {
width: 100% !important;
height: auto !important;
} #moc-table table {
margin-top: 15px;
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
#moc-table th {
text-align: left;
font-weight: 700;
color: #333;
padding: 10px 8px;
}
#moc-table td {
border: none;
padding: 8px;
text-align: left;
color: #333;
}
#moc-table tr:nth-child(even) {
background-color: rgba(0,0,0,0.03);
}
#moc-table td:first-child {
font-weight: 600;
text-align: left;
padding-left: 10px;
}
.moc-results-content #moc-table {
overflow-x: auto;
}
.moc-placeholder-info p {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: #555;
}
.moc-placeholder-about p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.moc-placeholder-about h5 {
font-size: 20px;
color: #2dc98a;
margin: 35px 0 5px 0;
}
.moc-disclaimer p {
color: #555;
font-size: 13px;
margin-top: 0px;
margin-bottom: 0px;
}
.moc-disclaimer h5 {
color: #2dc98a;
margin: 15px 0 5px 0;
} #moc-line-chart {
width: 100% !important;
height: auto !important;
max-height: 350px !important;
display: block;
} @media (max-width: 768px) {
.moc-container {
flex-direction: column;
gap: 20px;
}
.moc-form,
.moc-right {
min-width: auto;
max-width: 100%;
width: 100%;
}
.moc-right {
margin-top: 20px;
}
#moc-line-chart {
max-height: 350px !important;
}
label {
font-size: 80% !important;
}
.moc-field-group .term-inputs span {
font-size: 80% !important;
}
#or-span {
font-size: 80% !important;
}
.moc-placeholder-about h5 {
margin-top: 20px;
}
.wp-block-site-logo {
width: 100px;
}
.wp-block-heading.has-text-align-center.has-x-large-font-size {
font-size: 24px !important;
}
.has-text-align-center.has-normal-font-size {
font-size: 90% !important;
}
}
@media (max-width: 480px) {
.term-inputs input#term_years,
.term-inputs input#term_months {
flex: 1 1 auto;
max-width: 100%;
min-width: 0;
}
.moc-flex-row span,
.term-inputs span {
font-size: 14px;
margin: 0 4px;
white-space: nowrap;
}
.moc-currency-wrapper input {
padding-left: 28px !important;
}
.moc-currency-wrapper .moc-currency,
.moc-flex-row .moc-currency-wrapper .moc-currency {
padding-left: 10px;
padding-right: 0px;
font-size: 18px;
}
.moc-highlight {
display: block;
margin-left: 0;
}
}*{box-sizing:border-box}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,html{height:100%}.wp-site-blocks{display:flex;flex-direction:column;height:100%}footer{margin-block-start:auto!important}.wp-block-spacer{margin-block-start:0!important}.edit-post-visual-editor__post-title-wrapper,.is-root-container .wp-block[data-align=full]>.wp-block-cover,.is-root-container .wp-block[data-align=full]>.wp-block-group,.wp-block-cover.alignfull,.wp-block-group.alignfull,.wp-block-group.has-background,.wp-site-blocks,body>.is-root-container{padding-left:var(--wp--custom--spacing--outer);padding-right:var(--wp--custom--spacing--outer)}.is-root-container .wp-block[data-align=full],.wp-site-blocks .alignfull,.wp-site-blocks>.wp-block-cover,.wp-site-blocks>.wp-block-group.has-background,.wp-site-blocks>.wp-block-template-part>.wp-block-cover,.wp-site-blocks>.wp-block-template-part>.wp-block-group.has-background,body>.is-root-container>.wp-block-cover,body>.is-root-container>.wp-block-template-part>.wp-block-cover,body>.is-root-container>.wp-block-template-part>.wp-block-group.has-background{margin-left:calc(var(--wp--custom--spacing--outer)*-1)!important;margin-right:calc(var(--wp--custom--spacing--outer)*-1)!important;width:unset}.has-ti-bg-inv-background-color{background-color:var(--wp--preset--color--raft-bg-inv)}.has-ti-bg-background-color{background-color:var(--wp--preset--color--raft-bg)}.has-ti-bg-alt-background-color{background-color:var(--wp--preset--color--raft-bg-alt)}.has-ti-fg-alt-color{color:var(--wp--preset--color--raft-fg-alt)}.has-ti-accent-background-color{background-color:var(--wp--preset--color--raft-accent)}.has-ti-accent-secondary-background-color{background-color:var(--wp--preset--color--raft-accent-secondary)}.has-huge-font-size{line-height:1.25}.has-x-large-font-size{line-height:1.3}.has-large-font-size{line-height:1.4}.has-medium-font-size{line-height:1.5}.has-normal-font-size{line-height:1.7}.has-small-font-size{line-height:1.6}.comment-form input:not([type=submit]),.comment-form textarea,.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,input:read-write,select,textarea{background:var(--wp--preset--color--raft-bg);border:2px solid var(--wp--preset--color--raft-fg);border-radius:5px;color:var(--wp--preset--color--raft-fg)}button[type=submit],input[type=submit]{background:var(--wp--preset--color--raft-accent);border:0;border-color:var(--wp--preset--color--raft-accent);border-radius:5px;box-shadow:none;color:var(--wp--preset--color--raft-fg-alt);font-size:var(--wp--preset--font-size--normal);font-weight:600;padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--50)}.comment-form{grid-column-gap:15px;display:grid;grid-template-columns:repeat(3,1fr)}.comment-form>*{grid-column:1/span 3}.comment-form>.comment-form-author,.comment-form>.comment-form-email,.comment-form>.comment-form-url{grid-column:span 1}input:read-write:not([type=search]),select,textarea{font-size:var(--wp--preset--font-size--normal);padding:12px;width:100%}input,textarea{font-family:inherit}textarea{resize:vertical}.wp-block-image.aligncenter{margin-left:auto;margin-right:auto}.wp-block-image.alignleft{float:left;margin-right:2em}.wp-block-image.alignright{float:right;margin-left:2em}.wp-block-gallery.has-nested-images figcaption,figure.wp-block-image figcaption{opacity:.6;text-align:left}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{background:rgba(0,0,0,.3);margin:0;opacity:1;padding:8px;text-align:left}.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption{background:0;opacity:.6}.wp-block-separator.is-style-wide{width:100%}.wp-block-categories.is-style-raft-pills{align-items:center;display:flex;flex-wrap:wrap;font-size:var(--wp--preset--font-size--small);list-style:none;padding-left:0}.wp-block-categories.is-style-raft-pills li{background-color:var(--wp--preset--color--raft-bg-alt);border-radius:25px;margin:5px;padding:8px 24px}.wp-block-post-terms{display:flex;flex-wrap:wrap}.wp-block-post-terms.taxonomy-category a{background-color:var(--wp--preset--color--raft-bg-alt);border-radius:25px;margin:5px;padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40)}.wp-block-post-terms.taxonomy-category .wp-block-post-terms__separator{display:none}.wp-block-post-terms.has-text-align-center{justify-content:center}.wp-block-post-terms.has-text-align-right{justify-content:flex-end}.wp-block-query-pagination-numbers .page-numbers:not(:last-child){margin-right:16px}.wp-block-search .wp-block-search__button{background:var(--wp--preset--color--raft-accent);border-color:var(--wp--preset--color--raft-accent);border-radius:5px;color:var(--wp--preset--color--raft-fg-alt)}.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{background:var(--wp--preset--color--raft-bg);color:var(--wp--preset--color--raft-fg)}.wp-block-navigation__responsive-container.is-menu-open{--navigation-layout-justification-setting:center}.wp-block-navigation__responsive-container.is-menu-open>.wp-block-navigation__container{gap:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:24px!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>li>a{font-size:var(--wp--preset--font-size--large)!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{gap:24px!important}.wp-block-latest-posts img{display:block}.wp-block-latest-posts .wp-block-latest-posts__post-title{display:block;font-size:var(--wp--preset--font-size--medium);font-weight:600;margin-bottom:10px}.wp-block-latest-posts .wp-block-latest-posts__post-author,.wp-block-latest-posts time{font-size:var(--wp--preset--font-size--small)}.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background-color:var(--wp--preset--color--raft-bg-alt)}.wp-block-table thead{border-bottom:2px solid}.wp-block-table tfoot{border-top:2px solid}.wp-block-table figcaption{opacity:.6}@media (max-width:769px){body{--wp--preset--font-size--small:12px;--wp--preset--font-size--normal:16px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:24px;--wp--preset--font-size--x-large:28px;--wp--preset--font-size--huge:36px}}