.vmcalc {
--vmcalc-accent: #ffaf00;
--vmcalc-accent-soft: rgba(255, 175, 0, 0.16);
--vmcalc-accent-dark: #161616;
--vmcalc-bg-1: #16171c;
--vmcalc-bg-2: #0b0c0f;
--vmcalc-surface: rgba(255, 255, 255, 0.04);
--vmcalc-surface-hover: rgba(255, 255, 255, 0.065);
--vmcalc-border: rgba(255, 255, 255, 0.09);
--vmcalc-border-strong: rgba(255, 255, 255, 0.18);
--vmcalc-text: #f3f4f6;
--vmcalc-muted: #9a9ca3;
--vmcalc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--vmcalc-text) !important;
display: block !important;
font-family: var(--vmcalc-font) !important;
font-size: 16px !important;
isolation: isolate;
letter-spacing: 0 !important;
line-height: 1.4 !important;
margin: 1.25rem 0 !important;
max-width: 900px !important;
opacity: 1 !important;
overflow: visible !important;
text-align: left !important;
visibility: visible !important;
width: 100% !important;
}
.vmcalc *,
.vmcalc *::before,
.vmcalc *::after {
box-sizing: border-box !important;
}
.vmcalc__grid {
background:
radial-gradient(120% 140% at 8% -10%, rgba(255, 175, 0, 0.16), transparent 55%),
radial-gradient(90% 120% at 105% 0%, rgba(255, 175, 0, 0.08), transparent 60%),
linear-gradient(165deg, var(--vmcalc-bg-1) 0%, var(--vmcalc-bg-2) 65%) !important;
border: 1px solid var(--vmcalc-border) !important;
border-radius: 22px !important;
box-shadow:
0 24px 60px -28px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
display: block !important;
min-width: 0 !important;
padding: 1.1rem !important;
position: relative !important;
}
.vmcalc__controls {
display: block !important;
min-width: 0 !important;
order: 2 !important;
width: 100% !important;
}
.vmcalc__control {
background: var(--vmcalc-surface) !important;
border: 1px solid var(--vmcalc-border) !important;
border-radius: 14px !important;
margin: 0 0 0.7rem !important;
padding: 0.95rem 1.05rem !important;
transition: background-color 180ms ease, border-color 180ms ease !important;
}
.vmcalc__control:last-child {
margin-bottom: 0 !important;
}
.vmcalc__control:hover,
.vmcalc__control:focus-within {
background: var(--vmcalc-surface-hover) !important;
border-color: var(--vmcalc-border-strong) !important;
}
.vmcalc__control-header,
.vmcalc__range-meta,
.vmcalc__breakdown li {
align-items: center !important;
display: flex !important;
gap: 1rem !important;
justify-content: space-between !important;
}
.vmcalc__control-header {
align-items: center !important;
flex-direction: row !important;
gap: 0.65rem !important;
}
.vmcalc__label {
color: var(--vmcalc-text) !important;
display: inline-block !important;
font-family: var(--vmcalc-font) !important;
font-size: 0.94rem !important;
line-height: 1.25 !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
}
.vmcalc__value {
color: var(--vmcalc-accent) !important;
font-family: var(--vmcalc-font) !important;
font-size: 1rem !important;
line-height: 1.25 !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
}
.vmcalc__range-wrap {
position: relative !important;
margin: 0.7rem 0 0.3rem !important;
}
.vmcalc__range {
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
display: block !important;
height: 1.85rem !important;
margin: 0 !important;
outline: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.vmcalc__range::-webkit-slider-runnable-track {
background:
linear-gradient(
to right,
var(--vmcalc-accent) 0%,
var(--vmcalc-accent) var(--vmcalc-range-progress, 0%),
rgba(255, 255, 255, 0.12) var(--vmcalc-range-progress, 0%),
rgba(255, 255, 255, 0.12) 100%
) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
height: 0.45rem !important;
}
.vmcalc__range::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
background: #ffffff !important;
border: 3px solid var(--vmcalc-accent) !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
height: 1.3rem !important;
margin-top: -0.42rem !important;
transition: box-shadow 150ms ease, transform 150ms ease !important;
width: 1.3rem !important;
}
.vmcalc__range:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 8px var(--vmcalc-accent-soft), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.vmcalc__range:active::-webkit-slider-thumb {
box-shadow: 0 0 0 10px var(--vmcalc-accent-soft), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
transform: scale(1.05) !important;
}
.vmcalc__range::-moz-range-track {
background: rgba(255, 255, 255, 0.12) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
height: 0.45rem !important;
}
.vmcalc__range::-moz-range-progress {
background: var(--vmcalc-accent) !important;
border-radius: 999px !important;
height: 0.45rem !important;
}
.vmcalc__range::-moz-range-thumb {
background: #ffffff !important;
border: 3px solid var(--vmcalc-accent) !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
height: 1.1rem !important;
transition: box-shadow 150ms ease !important;
width: 1.1rem !important;
}
.vmcalc__range:hover::-moz-range-thumb {
box-shadow: 0 0 0 8px var(--vmcalc-accent-soft), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.vmcalc__range:focus-visible::-webkit-slider-thumb {
outline: 2px solid #ffffff !important;
outline-offset: 3px !important;
}
.vmcalc__range:focus-visible::-moz-range-thumb {
outline: 2px solid #ffffff !important;
outline-offset: 3px !important;
}
.vmcalc__range-bubble {
background: #ffffff !important;
border-radius: 999px !important;
bottom: calc(100% + 0.25rem) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
color: var(--vmcalc-accent-dark) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
left: var(--vmcalc-bubble-position, 0%) !important;
opacity: 0 !important;
padding: 0.2rem 0.5rem !important;
pointer-events: none !important;
position: absolute !important;
transform: translate(-50%, 4px) !important;
transition: opacity 140ms ease, transform 140ms ease !important;
white-space: nowrap !important;
z-index: 2 !important;
}
.vmcalc__range-bubble::after {
border: 4px solid transparent !important;
border-top-color: #ffffff !important;
content: "" !important;
left: 50% !important;
position: absolute !important;
top: 100% !important;
transform: translateX(-50%) !important;
}
.vmcalc__range-bubble.is-visible {
opacity: 1 !important;
transform: translate(-50%, 0) !important;
}
.vmcalc__range-meta {
color: var(--vmcalc-muted) !important;
font-size: 0.78rem !important;
margin: 0 !important;
padding: 0 !important;
}
.vmcalc__summary {
align-self: start !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid var(--vmcalc-border) !important;
border-radius: 16px !important;
margin: 0.7rem 0 0 !important;
min-width: 0 !important;
order: 1 !important;
padding: 1.1rem !important;
width: 100% !important;
}
.vmcalc__estimate {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 0 0.8rem !important;
min-height: 4.6rem !important;
padding: 0 !important;
}
.vmcalc__summary-label {
color: var(--vmcalc-muted) !important;
display: block !important;
font-size: 0.76rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
margin: 0 0 0.28rem !important;
padding: 0 !important;
text-transform: uppercase !important;
}
.vmcalc__total {
background: linear-gradient(90deg, #ffffff 0%, #ffe6b0 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
display: block !important;
font-size: clamp(1.85rem, 9vw, 2.35rem) !important;
font-variant-numeric: tabular-nums !important;
font-weight: 800 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
transition: filter 200ms ease !important;
word-break: break-word !important;
}
.vmcalc__estimate.is-updating .vmcalc__total {
filter: drop-shadow(0 0 10px rgba(255, 175, 0, 0.55)) !important;
}
.vmcalc__zone {
margin: 0 0 0.8rem !important;
padding: 0 !important;
}
.vmcalc__zone-label {
color: var(--vmcalc-muted) !important;
display: block !important;
font-size: 0.76rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
margin: 0 0 0.36rem !important;
padding: 0 !important;
}
.vmcalc__sla-heading {
align-items: center !important;
display: flex !important;
gap: 0.4rem !important;
margin: 0 0 0.36rem !important;
padding: 0 !important;
}
.vmcalc__sla-heading .vmcalc__zone-label {
margin: 0 !important;
}
.vmcalc__sla-info {
align-items: center !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow: none !important;
color: var(--vmcalc-muted) !important;
display: inline-flex !important;
flex: 0 0 auto !important;
height: 1rem !important;
justify-content: center !important;
margin: 0 !important;
opacity: 0.8 !important;
padding: 0 !important;
text-decoration: none !important;
transition: color 150ms ease, opacity 150ms ease !important;
width: 1rem !important;
}
.vmcalc__sla-info:hover,
.vmcalc__sla-info:focus-visible {
color: var(--vmcalc-accent) !important;
opacity: 1 !important;
outline: 0 !important;
text-decoration: none !important;
}
.vmcalc__sla-info:focus-visible {
box-shadow: 0 0 0 2px var(--vmcalc-accent) !important;
border-radius: 50% !important;
}
.vmcalc__sla-info-icon {
display: block !important;
fill: currentColor !important;
height: 0.82rem !important;
margin: 0 !important;
padding: 0 !important;
width: 0.82rem !important;
}
.vmcalc__sla-info-icon circle {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
}
.vmcalc__sla-info-icon path {
fill: currentColor !important;
}
.vmcalc__toggle {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--vmcalc-border) !important;
border-radius: 10px !important;
display: flex !important;
flex-direction: row !important;
gap: 0.25rem !important;
margin: 0 !important;
min-width: 0 !important;
padding: 0.25rem !important;
position: relative !important;
width: 100% !important;
}
.vmcalc__toggle-button {
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 7px !important;
box-shadow: none !important;
color: #d5d6d9 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
flex: 1 1 0 !important;
justify-content: center !important;
font-family: var(--vmcalc-font) !important;
font-size: 0.74rem !important;
font-weight: 700 !important;
hyphens: none !important;
line-height: 1.15 !important;
margin: 0 !important;
min-height: 2.35rem !important;
min-width: 0 !important;
overflow-wrap: normal !important;
padding: 0.48rem 0.28rem !important;
position: relative !important;
text-align: center !important;
text-decoration: none !important;
text-transform: none !important;
transition: color 180ms ease !important;
white-space: nowrap !important;
width: auto !important;
word-break: keep-all !important;
z-index: 1 !important;
}
.vmcalc__toggle-button:hover {
color: #ffffff !important;
}
.vmcalc__toggle-button:focus-visible {
outline: 2px solid var(--vmcalc-accent) !important;
outline-offset: 2px !important;
}
.vmcalc__toggle-button.is-active {
color: #161616 !important;
}
.vmcalc__toggle-highlight {
background: linear-gradient(135deg, #ffffff, #ffe2a3) !important;
border-radius: 7px !important;
box-shadow: 0 4px 12px rgba(255, 175, 0, 0.25) !important;
height: calc(100% - 0.5rem) !important;
left: 0.25rem !important;
position: absolute !important;
top: 0.25rem !important;
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
width: calc(50% - 0.375rem) !important;
z-index: 0 !important;
}
.vmcalc[data-vmcalc-zone="high"] .vmcalc__zone-toggle .vmcalc__toggle-highlight,
.vmcalc[data-vmcalc-currency="eur"] .vmcalc__currency-toggle .vmcalc__toggle-highlight {
transform: translateX(calc(100% + 0.25rem)) !important;
}
.vmcalc__currency-toggle {
margin: 0.62rem 0 0 !important;
max-width: 9rem !important;
width: 9rem !important;
}
.vmcalc__currency-toggle .vmcalc__toggle-button {
font-size: 0.7rem !important;
min-height: 1.75rem !important;
padding: 0.34rem 0.28rem !important;
}
.vmcalc__stage-slider {
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
display: block !important;
height: 1.35rem !important;
margin: 0.05rem 0 0.16rem !important;
outline: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.vmcalc__stage-slider::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
var(--vmcalc-accent) 0%,
var(--vmcalc-accent) var(--vmcalc-sla-progress, 0%),
rgba(255, 255, 255, 0.14) var(--vmcalc-sla-progress, 0%),
rgba(255, 255, 255, 0.14) 100%
) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
height: 0.42rem !important;
}
.vmcalc__stage-slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
background: #ffffff !important;
border: 3px solid var(--vmcalc-accent) !important;
border-radius: 50% !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
height: 1.05rem !important;
margin-top: -0.32rem !important;
transition: box-shadow 150ms ease !important;
width: 1.05rem !important;
}
.vmcalc__stage-slider:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 7px var(--vmcalc-accent-soft), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
.vmcalc__stage-slider::-moz-range-track {
background: rgba(255, 255, 255, 0.14) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
height: 0.42rem !important;
}
.vmcalc__stage-slider::-moz-range-progress {
background: var(--vmcalc-accent) !important;
border-radius: 999px !important;
height: 0.42rem !important;
}
.vmcalc__stage-slider::-moz-range-thumb {
background: #ffffff !important;
border: 3px solid var(--vmcalc-accent) !important;
border-radius: 50% !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
height: 0.9rem !important;
width: 0.9rem !important;
}
.vmcalc__stage-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid #ffffff !important;
outline-offset: 3px !important;
}
.vmcalc__stage-slider:focus-visible::-moz-range-thumb {
outline: 2px solid #ffffff !important;
outline-offset: 3px !important;
}
.vmcalc__stage-labels {
color: var(--vmcalc-muted) !important;
display: grid !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
gap: 0.25rem !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
line-height: 1.12 !important;
margin: 0.02rem 0 0 !important;
padding: 0 !important;
}
.vmcalc__stage-labels span {
color: var(--vmcalc-muted) !important;
display: block !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.vmcalc__stage-labels span:nth-child(1) {
text-align: left !important;
}
.vmcalc__stage-labels span:nth-child(2) {
text-align: center !important;
}
.vmcalc__stage-labels span:nth-child(3) {
text-align: right !important;
}
.vmcalc__backup-option {
align-items: center !important;
display: flex !important;
gap: 0.5rem !important;
justify-content: space-between !important;
margin: 0.6rem 0 0 !important;
min-width: 0 !important;
padding: 0 !important;
}
.vmcalc__backup-label {
align-items: center !important;
color: #dcdde0 !important;
cursor: pointer !important;
display: inline-flex !important;
flex: 1 1 auto !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
gap: 0.5rem !important;
line-height: 1.2 !important;
margin: 0 !important;
min-width: 0 !important;
padding: 0 !important;
}
.vmcalc__backup-label span {
color: #dcdde0 !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
} .vmcalc__backup-checkbox {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: rgba(255, 255, 255, 0.14) !important;
background-image: radial-gradient(circle, #ffffff 48%, transparent 50%) !important;
background-position: 0.16rem center !important;
background-repeat: no-repeat !important;
background-size: 1rem 1rem !important;
border: 1px solid var(--vmcalc-border-strong) !important;
border-radius: 999px !important;
box-shadow: none !important;
cursor: pointer !important;
flex: 0 0 auto !important;
height: 1.3rem !important;
margin: 0 !important;
min-height: 1.3rem !important;
min-width: 2.35rem !important;
padding: 0 !important;
transition: background-color 180ms ease, background-position 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms ease !important;
width: 2.35rem !important;
} .vmcalc .vmcalc__backup-checkbox::before,
.vmcalc .vmcalc__backup-checkbox::after,
.vmcalc .vmcalc__backup-checkbox:checked::before,
.vmcalc .vmcalc__backup-checkbox:checked::after {
background: none !important;
content: none !important;
display: none !important;
}
.vmcalc__backup-checkbox:hover {
border-color: rgba(255, 255, 255, 0.4) !important;
}
.vmcalc__backup-checkbox:checked {
background-color: var(--vmcalc-accent) !important;
background-image: radial-gradient(circle, var(--vmcalc-accent-dark) 48%, transparent 50%) !important;
background-position: calc(100% - 0.16rem) center !important;
border-color: var(--vmcalc-accent) !important;
}
.vmcalc__backup-checkbox:focus-visible {
outline: 2px solid var(--vmcalc-accent) !important;
outline-offset: 2px !important;
}
.vmcalc__breakdown {
border-top: 1px solid var(--vmcalc-border) !important;
list-style: none !important;
margin: 0 !important;
padding: 0.6rem 0 0 !important;
}
.vmcalc__breakdown li {
align-items: flex-start !important;
color: #d5d6d9 !important;
font-size: 0.86rem !important;
gap: 0.6rem !important;
line-height: 1.25 !important;
margin: 0 !important;
padding: 0.26rem 0 !important;
transition: opacity 180ms ease !important;
}
.vmcalc__breakdown li::before,
.vmcalc__breakdown li::after {
content: none !important;
}
.vmcalc__breakdown-label {
align-items: center !important;
color: #d5d6d9 !important;
display: inline-flex !important;
gap: 0.45rem !important;
margin: 0 !important;
min-width: 0 !important;
padding: 0 !important;
}
.vmcalc__breakdown-label span {
color: #d5d6d9 !important;
font-weight: 400 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.vmcalc__breakdown-icon {
color: var(--vmcalc-accent) !important;
display: inline-block !important;
fill: currentColor !important;
flex: 0 0 auto !important;
height: 0.92rem !important;
margin: 0 !important;
padding: 0 !important;
width: 0.92rem !important;
}
.vmcalc__breakdown-label .fa-solid {
align-items: center !important;
background-color: currentColor !important;
color: var(--vmcalc-accent) !important;
display: inline-flex !important;
flex: 0 0 auto !important;
font-size: 0.9rem !important;
height: 0.92rem !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
width: 0.92rem !important;
}
.vmcalc__breakdown-label .fa-cloud-arrow-up {
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6.7%2018.5A5.2%205.2%200%200%201%206.1%208.2a7%207%200%200%201%2013.2%202.1%204.2%204.2%200%200%201-.7%208.2H14v-5h2.2L12%209.2l-4.2%204.3H10v5H6.7z'/%3E%3C/svg%3E") center / contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6.7%2018.5A5.2%205.2%200%200%201%206.1%208.2a7%207%200%200%201%2013.2%202.1%204.2%204.2%200%200%201-.7%208.2H14v-5h2.2L12%209.2l-4.2%204.3H10v5H6.7z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.vmcalc__breakdown-label .fa-cloud-arrow-up::before {
content: "" !important;
}
.vmcalc__breakdown [data-vmcalc-line-total],
.vmcalc__breakdown [data-vmcalc-sla-total],
.vmcalc__breakdown [data-vmcalc-backup-total],
.vmcalc__breakdown [data-vmcalc-os-updates-total] {
color: #ffffff !important;
flex: 0 0 auto !important;
font-variant-numeric: tabular-nums !important;
font-weight: 700 !important;
text-align: right !important;
}
.vmcalc__breakdown-item--muted,
.vmcalc__breakdown-item--muted .vmcalc__breakdown-label,
.vmcalc__breakdown-item--muted .vmcalc__breakdown-label span,
.vmcalc__breakdown-item--muted .vmcalc__breakdown-icon,
.vmcalc__breakdown-item--muted .fa-solid,
.vmcalc__breakdown-item--muted [data-vmcalc-backup-total],
.vmcalc__breakdown-item--muted [data-vmcalc-os-updates-total] {
color: #86878d !important;
}
.vmcalc__breakdown-item--muted {
opacity: 0.55 !important;
}
@media (min-width: 721px) and (pointer: fine) {
.vmcalc__grid {
align-items: stretch !important;
display: flex !important;
gap: 0.9rem !important;
}
.vmcalc__controls {
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
gap: 0.65rem !important;
min-width: 0 !important;
order: 1 !important;
}
.vmcalc__summary {
align-self: stretch !important;
flex: 0 0 290px !important;
margin: 0 !important;
order: 2 !important;
width: 290px !important;
}
.vmcalc__control {
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
min-height: 0 !important;
padding: 0.9rem 1rem !important;
}
.vmcalc__control-header {
align-items: center !important;
flex-direction: row !important;
gap: 0.75rem !important;
}
.vmcalc__value {
white-space: nowrap !important;
}
.vmcalc__range {
height: 1.2rem !important;
}
.vmcalc__range::-webkit-slider-thumb {
height: 1.15rem !important;
margin-top: -0.35rem !important;
width: 1.15rem !important;
}
.vmcalc__range::-moz-range-thumb {
height: 1rem !important;
width: 1rem !important;
}
.vmcalc__total {
font-size: clamp(1.85rem, 1.5rem + 0.75vw, 2.2rem) !important;
}
.vmcalc__toggle {
flex-direction: row !important;
}
.vmcalc__breakdown li {
align-items: center !important;
gap: 0.65rem !important;
}
}
@media (max-width: 720px) {
.vmcalc {
left: auto !important;
margin: 1.25rem 0 !important;
max-width: 100% !important;
overflow-x: hidden !important;
position: static !important;
right: auto !important;
transform: none !important;
width: 100% !important;
}
.vmcalc__summary {
position: static !important;
}
}
@media (max-width: 460px) {
.vmcalc {
font-size: 16px !important;
margin: 1.25rem 0 !important;
}
.vmcalc__grid {
padding: 0.9rem !important;
}
.vmcalc__control {
padding: 0.95rem !important;
}
.vmcalc__control-header {
align-items: center !important;
flex-direction: row !important;
gap: 0.65rem !important;
}
.vmcalc__value {
white-space: normal !important;
}
.vmcalc__range {
height: 1.88rem !important;
}
.vmcalc__range::-webkit-slider-thumb {
height: 1.4rem !important;
margin-top: -0.5rem !important;
width: 1.4rem !important;
}
.vmcalc__range::-moz-range-thumb {
height: 1.2rem !important;
width: 1.2rem !important;
}
.vmcalc__total {
font-size: clamp(1.85rem, 9vw, 2.28rem) !important;
}
.vmcalc__toggle {
flex-direction: row !important;
}
.vmcalc__breakdown li {
align-items: flex-start !important;
gap: 0.6rem !important;
}
}
@media (prefers-reduced-motion: reduce) {
.vmcalc__control,
.vmcalc__toggle-highlight,
.vmcalc__total,
.vmcalc__range-bubble,
.vmcalc__backup-checkbox,
.vmcalc__range::-webkit-slider-thumb,
.vmcalc__stage-slider::-webkit-slider-thumb {
transition: none !important;
}
}