.tac-tool {
--tac-green: #005b36;
--tac-green-hover: #00492c;
--tac-result: #037f3d;
--tac-ink: #19392e;
--tac-muted: #758079;
--tac-line: #dce4de;
--tac-panel: #f6f6f6;
color: var(--tac-ink) !important;
background: #fff !important;
border: 1px solid var(--tac-line) !important;
border-radius: 12px !important;
box-shadow: 0 8px 26px #19392e05 !important;
margin: 1.25rem 0 !important;
max-width: 980px !important;
overflow: hidden !important;
font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
}
.tac-tool *,
.tac-tool *::before,
.tac-tool *::after {
box-sizing: border-box !important;
}
.tac-tool button,
.tac-tool input,
.tac-tool select {
font: inherit !important;
-webkit-tap-highlight-color: transparent;
}
.tac-tool input {
margin-bottom: 0 !important;
}
.tac-tool .tac-form {
padding: 30px 32px !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
}
.tac-tool .section-top {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px 14px !important;
margin: 0 0 28px !important;
padding: 0 !important;
}
.tac-tool .section-top h2 {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: var(--tac-ink) !important;
background: none !important;
border: 0 !important;
}
.tac-tool .section-top .helper {
flex: 1 1 220px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 12px !important;
line-height: 1.7 !important;
color: #737b75 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .section-top .helper:empty {
display: none !important;
}
.tac-tool .text-btn {
flex: 0 0 auto !important;
margin-left: auto !important;
border: 1px solid #dce1dc !important;
border-radius: 6px !important;
padding: 7px 13px !important;
background: #fff !important;
color: #69736b !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer !important;
}
.tac-tool .text-btn:hover,
.tac-tool .text-btn:focus {
border-color: var(--tac-result) !important;
color: var(--tac-result) !important;
background: #fff !important;
}
.tac-tool .tac-fields .field {
margin: 0 0 22px !important;
padding: 0 !important;
}
.tac-tool .tac-fields label {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
margin: 0 0 10px !important;
padding: 0 !important;
color: var(--tac-ink) !important;
background: none !important;
border: 0 !important;
}
.tac-tool .row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 15px !important;
margin: 0 !important;
padding: 0 !important;
}
.tac-tool .row.two {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.tac-tool .row.two.leading-pair {
align-items: start !important;
}
.tac-tool .row.two.swap-row {
grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: end !important;
}
.tac-tool .row .field {
min-width: 0 !important;
}
.tac-tool .input-wrap {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
.tac-tool .input-wrap > span {
position: absolute !important;
right: 13px !important;
top: 65% !important;
transform: translateY(-50%) !important;
font-size: 12px !important;
color: #87928b !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool input,
.tac-tool select {
width: 100% !important;
max-width: 100% !important;
height: 48px !important;
min-height: 48px !important;
background: #fff !important;
border: 1px solid #d6dfd8 !important;
border-radius: 5px !important;
padding: 0 13px !important;
color: var(--tac-ink) !important;
outline: none !important;
box-shadow: none !important;
line-height: 1.4 !important;
}
.tac-tool input {
padding-right: 42px !important;
font-size: 17px !important;
font-variant-numeric: tabular-nums;
}
.tac-tool input:focus,
.tac-tool select:focus {
border-color: #00834b !important;
box-shadow: 0 0 0 3px #00834b15 !important;
}
.tac-tool .select-wrap {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
.tac-tool .select-wrap select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding-left: 45px !important;
padding-right: 40px !important;
cursor: pointer !important;
background: #fff !important;
transition: border-color 0.15s;
}
.tac-tool .select-wrap:hover select {
border-color: #7ba48a !important;
}
.tac-tool .select-icon {
position: absolute !important;
left: 14px !important;
top: 45px !important;
width: 20px !important;
height: 20px !important;
color: #498260 !important;
pointer-events: none !important;
z-index: 1 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .select-icon svg,
.tac-tool .tac-icon {
display: block !important;
width: 20px !important;
height: 20px !important;
color: inherit !important;
}
.tac-tool .select-arrow {
position: absolute !important;
right: 14px !important;
top: 65% !important;
width: 8px !important;
height: 8px !important;
border: 0 !important;
border-right: 1.5px solid #8a968c !important;
border-bottom: 1.5px solid #8a968c !important;
background: none !important;
transform: translateY(-60%) rotate(45deg) !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
.tac-tool .swap {
width: 40px !important;
height: 48px !important;
min-width: 40px !important;
min-height: 40px !important;
margin: 0 0 22px !important;
padding: 0 !important;
border: 1px solid var(--tac-line) !important;
border-radius: 5px !important;
background: var(--tac-panel) !important;
color: var(--tac-green) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
.tac-tool .swap:hover,
.tac-tool .swap:focus {
border-color: var(--tac-result) !important;
color: var(--tac-result) !important;
background: var(--tac-panel) !important;
}
.tac-tool .swap svg {
width: 20px !important;
height: 20px !important;
}
.tac-tool .tac-error {
color: #c72836 !important;
font-size: 12px !important;
margin: 5px 0 12px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .tac-error:empty {
display: none !important;
}
.tac-tool .result-shell {
margin: 18px 0 0 !important;
padding: 0 !important;
}
.tac-tool .primary {
width: 100% !important;
min-height: 48px !important;
padding: 15px 20px !important;
background: var(--tac-green) !important;
color: #fff !important;
border: 0 !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer !important;
}
.tac-tool .primary:hover,
.tac-tool .primary:focus {
background: var(--tac-green-hover) !important;
color: #fff !important;
}
.tac-tool .primary > span:last-child {
font-size: 18px !important;
line-height: 1 !important;
color: inherit !important;
}
.tac-tool .result-shell aside {
margin: 20px 0 0 !important;
padding: 22px !important;
border: 0 !important;
border-radius: 15px !important;
background: var(--tac-panel) !important;
box-shadow: none !important;
float: none !important;
width: auto !important;
max-width: none !important;
}
.tac-tool .result-top {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 7px !important;
font-size: 13px !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--tac-ink) !important;
background: none !important;
border: 0 !important;
}
.tac-tool .badge {
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 20px !important;
padding: 4px 9px !important;
font-size: 10px !important;
font-weight: 400 !important;
color: #69736b !important;
border: 0 !important;
box-shadow: none !important;
line-height: 1.4 !important;
}
.tac-tool .badge:empty {
display: none !important;
}
.tac-tool .result-values {
margin: 16px 0 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .result-value,
.tac-tool .secondary-result {
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
flex-wrap: wrap !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
.tac-tool .result-value strong,
.tac-tool .secondary-result strong {
font-size: 24px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
color: var(--tac-result) !important;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .result-value > span,
.tac-tool .secondary-result > span {
font-size: 13px !important;
color: #6e6e6e !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .result-caption {
font-size: 12px !important;
color: #718275 !important;
margin: 2px 0 0 !important;
padding: 0 !important;
line-height: 1.5 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .secondary-result .cuft-caption {
width: 100% !important;
font-size: 12px !important;
color: #6e6e6e !important;
line-height: 1.5 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .breakdown {
margin: 16px 0 0 !important;
padding: 14px 0 0 !important;
border: 0 !important;
border-top: 1px solid #e0e0e0 !important;
background: none !important;
}
.tac-tool .breakdown > span {
font-size: 12px !important;
color: #6e6e6e !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .breakdown p {
font-size: 12px !important;
line-height: 1.8 !important;
margin: 5px 0 0 !important;
padding: 0 !important;
overflow-wrap: anywhere;
background: none !important;
border: 0 !important;
color: var(--tac-ink) !important;
}
.tac-tool .fine {
font-size: 11px !important;
line-height: 1.7 !important;
color: #737b75 !important;
margin: 12px 0 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
.tac-tool .result-contact {
display: block !important;
font-size: 12px !important;
line-height: 1.8 !important;
color: var(--tac-result) !important;
text-decoration: none !important;
margin: 24px 0 0 !important;
padding: 16px 0 0 !important;
border: 0 !important;
border-top: 1px solid #dedede !important;
background: none !important;
box-shadow: none !important;
}
.tac-tool .result-contact:hover,
.tac-tool .result-contact:focus {
text-decoration: underline !important;
color: var(--tac-result) !important;
} .tac-tool .tac-form[data-tool="cbm"] .result-values {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 24px !important;
row-gap: 3px !important;
align-items: start !important;
margin-top: 16px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values > .result-value {
grid-column: 1 !important;
grid-row: 1 !important;
margin: 0 !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values > .result-caption {
grid-column: 1 !important;
grid-row: 2 !important;
margin: 0 !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values > .secondary-result {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
margin: 0 !important;
border: 0 !important;
border-left: 1px solid #d3e3d3 !important;
padding-left: 24px !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-content: start !important;
align-items: baseline !important;
column-gap: 10px !important;
row-gap: 3px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .secondary-result .cuft-caption {
grid-column: 1 / -1 !important;
}
.tac-tool .tac-form[data-tool="cbm"] .breakdown {
margin-top: 24px !important;
padding-top: 18px !important;
} .tac-tool .tac-form:not([data-tool="cbm"]) .result-shell aside {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 24px !important;
row-gap: 14px !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .result-top {
grid-column: 1 / -1 !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .result-values {
grid-column: 1 !important;
grid-row: 2 !important;
min-width: 0 !important;
margin-top: 0 !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) .result-values .result-value {
margin-top: 0 !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .breakdown {
grid-column: 2 !important;
grid-row: 2 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 0 24px !important;
border-top: 0 !important;
border-left: 1px solid #dedede !important;
align-self: stretch !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .fine {
grid-column: 1 / -1 !important;
margin: 0 !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .result-contact {
grid-column: 1 / -1 !important;
}
.tac-tool .tac-field--shape,
.tac-tool .is-hidden {
display: none !important;
} .tac-tool .tac-rate-meta {
display: none !important;
}
.tac-tool .tac-empty {
margin: 0 !important;
padding: 24px !important;
color: var(--tac-muted) !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
@media (min-width: 801px) {
.tac-tool .tac-form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: auto auto auto auto !important;
column-gap: 0px !important;
align-items: start !important;
padding: 30px 32px !important;
}
.tac-tool .tac-form > .section-top {
grid-column: 1 !important;
grid-row: 1 !important;
}
.tac-tool .tac-form > .tac-fields {
grid-column: 1 !important;
grid-row: 2 !important;
min-width: 0 !important;
}
.tac-tool .tac-form > .tac-error {
grid-column: 1 !important;
grid-row: 3 !important;
}
.tac-tool .tac-form > .result-shell {
display: contents !important;
}
.tac-tool .tac-form > .result-shell > .primary {
grid-column: 1 !important;
grid-row: 4 !important;
align-self: start !important;
margin: 0 !important;
}
.tac-tool .tac-form > .result-shell > aside {
grid-column: 2 !important;
grid-row: 1 / span 4 !important;
margin: 0 !important;
align-self: stretch !important;
min-width: 0 !important;
padding: 28px !important;
border-radius: 15px !important;
background: var(--tac-panel) !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-shell aside {
display: flex !important;
flex-direction: column !important;
}
.tac-tool .tac-form[data-tool="cbm"] aside > .result-contact {
margin-top: auto !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) .result-shell aside {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: auto auto auto 1fr !important;
column-gap: 20px !important;
row-gap: 18px !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .result-top {
margin-bottom: 4px !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .breakdown {
margin: 0 !important;
padding: 0 0 0 20px !important;
border-top: 0 !important;
border-left: 1px solid #dedede !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .fine {
margin: 0 0 10px !important;
align-self: start !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .result-contact {
align-self: end !important;
margin-top: 24px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values {
column-gap: 18px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values > .secondary-result {
padding-left: 18px !important;
}
}
@media (max-width: 800px) {
.tac-tool .tac-form {
padding: 24px !important;
}
.tac-tool .section-top h2 {
order: 0 !important;
}
.tac-tool .section-top .text-btn {
order: 1 !important;
}
.tac-tool .section-top .helper {
order: 2 !important;
flex-basis: 100% !important;
}
.tac-tool .row,
.tac-tool .row.two,
.tac-tool .row.two.swap-row {
grid-template-columns: 1fr !important;
}
.tac-tool .swap {
width: 100% !important;
height: 40px !important;
}
.tac-tool .swap svg {
transform: rotate(90deg) !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) .result-shell aside {
display: block !important;
}
.tac-tool .tac-form:not([data-tool="cbm"]) aside > .breakdown {
margin-top: 16px !important;
padding: 14px 0 0 !important;
border-left: 0 !important;
border-top: 1px solid #e0e0e0 !important;
}
}
@media (max-width: 480px) {
.tac-tool .tac-form[data-tool="cbm"] .result-values {
gap: 14px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values > .secondary-result {
padding-left: 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values strong {
font-size: 22px !important;
}
.tac-tool .tac-form[data-tool="cbm"] .result-values .result-value,
.tac-tool .tac-form[data-tool="cbm"] .result-values .secondary-result {
flex-direction: column !important;
gap: 4px !important;
}
}