.calc-breadcrumb-current {
    color: #b01f26;
}

.calc-intro-text {
    color: #444;
}

.calc-intro-text--trace-resistance {
    color: #000;
    font-weight: 400;
}

.calc-intro-text--inductance {
    font-weight: 700;
}

.calc-intro-text--magnetic-field {
    color: #000;
}

.calc-intro-meta {
    font-size: 13px;
    color: #444;
}

.calc-icon-label {
    color: #1a3a6b;
}

.calc-ipc-note {
    margin-left: 4px;
}

.calc-diagram-image {
    width: 200px;
    height: auto;
}

.calc-diagram-label {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

.calc-diagram-gap {
    width: 60px;
    flex-shrink: 0;
}

.calc-icon-badge {
    width: 22px;
    height: 22px;
    background: #1a3a6b;
    font-size: 12px;
}

.calc-enter-params {
    color: #2a4a8a;
    margin-left: 4px;
}

.calc-form-note {
    font-size: 13px;
    color: #666;
}

.calc-form-note--cable-impedance {
    color: #000;
}

/* Dark (instead of the brand red) active-card radio dot, scoped to this
   calculator's cable-type selector only — the card border itself stays
   the standard brand red. */
.calc-tt-panel--cable-impedance .calc-tt-radio-on {
    color: #1a1a1a;
}

.calc-explore-title {
    font-size: 17px;
}

.calc-explore-copy {
    font-size: 13px;
}

.calc-view-all-btn {
    background: #b01f26;
    border: 1px solid #b01f26;
    color: #fff;
    font-size: 14px;
    padding: 8px 24px;
}
.calc-view-all-btn:hover,
.calc-view-all-btn:focus {
    
    color: #fff;
}


/* Additional classes extracted from inline styles in PcbTraceWidthCalculator.vue */
.calc-label {
    font-size: 13px;
    color: #333;
}

.calc-select-small {
    min-width: 90px;
    max-width: 110px;
    font-size: 13px;
}

.calc-select-full {
    height: 32.9px;
    padding: 0 10px;
    background-color: #fff;
}
.calc-select-rf {
    width: 220px;
    font-size: 13px;
    flex-shrink: 0;
}

.calc-rf-spinner {
    color: #b01f26;
    font-size: 13px;
}

.calc-rf-note-indent {
    margin-left: 25px;
}

.calc-help-note {
    font-size: 11px;
    color: #888;
}

.calc-hr {
    border: 0;
    border-top: 1px solid #d0d0d0;
    margin: 12px 0 16px;
}

.calc-btn-primary {
    background: #b01f26;
    border-color: #b01f26;
    color: #fff;
    font-size: 15px;
    padding: 8px 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.calc-btn-primary:hover,
.calc-btn-primary:focus {
    color: #fff;
}

.calc-reset-btn {
    color: #b01f26;
    font-size: 13px;
}

.calc-reset-icon {
    font-size: 15px;
}

.calc-results-intro {
    font-size: 13px;
    color: #666;
}

.calc-results-intro--magnetic-field {
    color: #000;
}

.calc-result-label {
    font-size: 13px;
    color: #555;
}

.calc-result-label--trace-resistance {
    font-weight: 700;
}

.calc-result-label--inductance {
    font-weight: 700;
}

.calc-result-label--magnetic-field {
    color: #000;
    font-weight: 700;
}

.calc-result-label--cable-impedance {
    color: #000;
}

.calc-result-number {
    font-size: 28px;
    font-weight: 700;
    color: #28a745;
    line-height: 1.1;
}

.calc-result-number--magnetic-field {
    color: #000;
}

.calc-result-unit {
    font-size: 14px;
    font-weight: 400;
    color: #28a745;
    margin-left: 4px;
}

.calc-result-number--magnetic-field .calc-result-unit {
    color: #000;
    font-weight: 700;
}

.calc-result-placeholder {
    font-size: 20px;
    color: #bbb;
    letter-spacing: 2px;
}

.calc-advanced-table-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: hidden;
}

.calc-advanced-table {
    font-size: 12px;
    border-collapse: collapse;
    height: 100%;
}

.calc-table-th {
    background: #fafafa;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    padding: 10px 14px;
}

.calc-table-th-accent {
    color: #28a745;
    border-right: 1px solid #e0e0e0;
}

.calc-table-td {
    padding: 12px 14px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    color: #444;
}

.calc-table-row {
    height: 48px;
}

.calc-table-empty {
    color: #bbb;
    letter-spacing: 2px;
}

.result-card.calc-result-card--active {
    border-color: #16812d !important;
    background: #f0fff4;
}

.calc-cta {
    background: #fdf4f4;
    border: 1px solid #f0d8d8;
    gap: 16px;
}

.calc-cta-heading {
    font-size: 14px;
}

.calc-how-toggle {
    font-size: 14px;
    text-decoration: none;
}

.calc-how-toggle-icon {
    font-size: 11px;
    color: #b01f26;
    transition: transform 0.2s;
    display: inline-block;
}

.calc-how-body {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    padding-top: 16px;
}

/* Moved from PcbTraceWidthCalculator.vue scoped styles */
.btn-link:hover {
    text-decoration: underline;
    color: #b01f26 !important;
}

.blue-cont{
    background:#f0f2f5;
    box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
    -webkit-box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    color: #333;
    font-size: 12px;
    font-weight: 600;
}

.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #d9d9d9;
}

.section-divider::before {
    margin-right: 15px;
}

.section-divider::after {
    margin-left: 15px;
}

.result-card{
    border:1px solid #16812d !important;
    background:#f0fff4;
    min-height:200px;
    border-radius: 10px;
}

/* Calculator catalog cards (moved from CalculatorCard.vue scoped styles so the
   server-rendered Blade cards on /calculators pick them up). */
/* Equal-height card grid: stretch each column so every .calc-cont matches the
   tallest card in the row. */
.calc-card-grid {
    display: flex;
    flex-wrap: wrap;
}

.calc-card-grid > [class*="col-"] {
    display: flex;
}

.calc-card-grid .calc-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Vertically center the icon against the text within a card. */
.calc-cont > .row {
    align-items: center;
}

.calc-cont {
    border: 1px solid #dadada;
    display: block;
    padding: 30px 15px;
    border-radius: 5px;
    line-height: 17px;
    background: #fafafa;
}

.calc-cont:hover {
    border-color: #b01f26 !important;
    background: #fff !important;
}

/* "Coming soon" cards are not links — keep them visually inert. */
.calc-cont--soon {
    opacity: 0.6;
    cursor: default;
}

.calc-cont--soon:hover {
    border-color: #dadada !important;
    background: #fafafa !important;
}

.calc-name {
    font-size: 13px;
    font-weight: bold;
    color: #4d4d4d;
    margin: 0;
}

.calc-icon {
    flex-shrink: 0;
    margin-right: 5px;
    background: #fff;
    padding: 10px;
    border-radius: 100%;
    width: 80px;
    height: 80px;
}

.calc-desc {
    font-size: 13px;
    color: #666;
}

.calc-soon-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: #b01f26;
    border: 1px solid #f0d8d8;
    background: #fdf4f4;
    padding: 1px 8px;
    border-radius: 10px;
}

/* Inline submit error inside the widget (replaces the SPA's modal dialog). */
.calc-submit-error {
    color: #b01f26;
    font-size: 13px;
}

/* Native <details> "How is this calculated?" toggle. */
.calc-how > summary {
    cursor: pointer;
    list-style: none;
    font-size: 14px;
}

.calc-how > summary::-webkit-details-marker {
    display: none;
}

.calc-how > summary::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 8px;
    font-size: 11px;
    color: #b01f26;
    transition: transform 0.2s;
}

.calc-how[open] > summary::before {
    transform: rotate(90deg);
}

/* Static SEO sub-headings inside the What/Why copy blocks (e.g. Crosstalk's
   "Microstrip Vs Stripline" / "Key factors affecting Crosstalk"). */
.calc-how-subheading {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.calc-how-subheading-accent {
    font-size: 14px;
    font-weight: 600;
    color: #b01f26;
}

/* Crosstalk Calculator — transmission line type selector */
.calc-tt-panel {
    background-color: #f0f2f5;
    box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
    -webkit-box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
}

.calc-tt-panel-title {
    color: #1a3a6b;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
}

.calc-tt-panel > div:first-child {
    margin-bottom: 0px !important;
}

.calc-tt-panel .calc-form-note {
    margin-bottom: 28px !important;
}

.calc-tt-card {
    background: #fff;
    cursor: pointer;
    padding: 0px 25px !important;
    border-radius: 5px !important;
}

.calc-tt-card--active {
    border-color: #b01f26 !important;
}

.calc-tt-radio-on {
    color: #b01f26;
    margin-right: 8px;
    font-size: 20px;
}

.calc-tt-radio-off {
    color: #aaa;
    margin-right: 8px;
    font-size: 20px;
}

.calc-tt-label {
    font-size: 16px;
    color: #333;
    line-height: 1.25;
}

.calc-tt-label--inductance {
    font-weight: 700;
}

/* Scoped to the resistor calculator's own selector cards — bolder than the
   fw-semibold other calculators' type selectors use, per request, without
   changing those shared cards elsewhere. */
.calc-tt-label--resistor {
    font-weight: 700;
}

.calc-tt-thumb {
    width: 195px;
    height: 110px;
    object-fit: contain;
    transform: translateX(15%);
}

.calc-diagram-image--lg {
    width: 250px;
}

.calc-tip-callout {
    background-color: #fffdf2;
    border: 1px solid #ffecb3;
}

.calc-disclaimer {
    border-bottom: 1px solid #e5e5e5;
    font-size: 12px;
    color: #000000;
    line-height: 1.6;
}

.calc-tip-icon {
    color: #ffc107;
    font-size: 16px;
}

.calc-tip-text {
    font-size: 12px;
    color: #555;
    line-height: 2.5;
}

.calc-how-subheading {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.calc-how-subheading-accent {
    font-size: 14px;
    font-weight: 600;
    color: #b01f26;
}

.calc-factors-list {
    margin: 0;
    padding-left: 18px;
    color: #333;
}

.calc-form-spinner {
    color: #b01f26;
    font-size: 13px;
}

/* Trace-type selector grid (Select Trace Type). */
.calc-tt-panel {
    background-color: #f0f2f5;
    box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
    -webkit-box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 1px 1px 12px -1px rgba(0,0,0,0.16);
}

.calc-tt-panel-title {
    color: #1a3a6b;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
}

.calc-tt-card {
    background: #fff;
    cursor: pointer;
    border-radius: 5px !important;
    /* Bootstrap's flex-wrap row stretch only equalizes height within a
       row of 3 — a fixed min-height keeps all 9 cards the same height
       even if a label wraps to two lines on a narrower viewport. */
    min-height: 77px;
}

.calc-tt-card--active {
    border-color: #b01f26 !important;
}

.calc-tt-radio-on {
    color: #b01f26;
    margin-right: 8px;
    font-size: 18px;
}

.calc-tt-radio-off {
    color: #aaa;
    margin-right: 8px;
    font-size: 18px;
}

.calc-tt-label {
    font-size: 12.6px;
    color: #333;
    line-height: 1.25;
}

.calc-tt-thumb {
    width: 195px;
    height: 110px;
    object-fit: contain;
}

/* The impedance structure thumbnails are flat ~1.81:1 cross-sections
   (644x356 source art) rather than the wider Crosstalk trace-shape
   renders, so they need a smaller, correctly-proportioned box to sit
   comfortably inside a 3-column (vs. 2-column) card grid without
   letterboxing. */
.calc-tt-thumb--impedance {
    width: 103px;
    height: 57px;
}

/* Inductance-type thumbnails vary widely in native aspect ratio (thin bars
   for coupled traces vs. tall coils), so a fixed contain-box keeps the
   9-card grid visually consistent regardless of source art shape. */
.calc-tt-thumb--inductance {
    width: 90px;
    height: 60px;
}

.calc-diagram-image--inductance {
    width: 340px;
}

.calc-inductance-diagram-section {
    padding-top: 5%;
    padding-bottom: 5%;
}

.calc-diagram-image--impedance {
    width: 340px;
}

/* ---- Resistor Color Code Calculator ---- */

/* Type-selector card thumbnail — the real reference art
   (public/img/calculators/resistor-{4,5,6}-bands.png), used as-is. */
.calc-resistor-mini-thumb {
    width: 90px;
    height: auto;
}

/* Main resistor diagram, above the color-selection table. */
.calc-resistor-diagram-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calc-resistor-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Badges are absolutely positioned (see badgeConnectorStyle in the widget)
   at the same left% as the band they describe, so this container has to
   match the body's own width exactly — not the wider lead-to-lead span —
   for those percentages to land in the right place. */
.calc-resistor-badges {
    position: relative;
    width: 280px;
    height: 45px;
    margin: 0 auto;
}

/* Equal gap to the body on both sides — each badge itself is anchored
   flush to its container's near edge (see badgeConnectorStyle), so this
   margin is the only thing setting the connector-line distance. */
.calc-resistor-badges--top {
    margin-bottom: 10px;
}

.calc-resistor-badges--bottom {
    margin-top: 10px;
}

.calc-resistor-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.calc-resistor-badge-label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.calc-resistor-badge-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
}

.calc-resistor-body-wrap {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.calc-resistor-lead {
    width: 40px;
    height: 3px;
    background: #999;
}

/* The body's silhouette (bulbous rounded ends + straight waist) comes from
   public/img/calculators/resistor-no-bands.png applied as a CSS mask (set
   inline by the widget, via resistorBodyMaskStyle) — the fill and bands
   below are plain rectangles that the mask clips to that exact shape, so
   they never need to individually match the curved outline. */
.calc-resistor-body {
    position: relative;
    display: block;
    width: 280px;
    height: 61px;
    margin: 0 4px;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.calc-resistor-body-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ede0c0 0%, #ede0c0 78%, #cbb27e 78%, #cbb27e 100%);
}

.calc-resistor-band {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* Color-selection table. All 12 color rows show at once (matching the PDF),
   the page itself scrolls rather than a boxed-in table with its own
   scrollbar — only horizontal overflow (narrow screens) is caught here. */
/* auto table layout lets sub-pixel rounding across 6-7 columns add up to a
   few px wider than the container, triggering an unnecessary horizontal
   scrollbar — fixed layout makes the table strictly respect its 100% width
   instead of sizing columns from content first. */
.calc-resistor-table {
    table-layout: fixed;
}

.calc-resistor-table .calc-table-td,
.calc-resistor-table .calc-table-th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.calc-resistor-table-wrapper {
    overflow-x: auto;
}

/* .calc-table-row's shared height:48px (sized for Trace Width/Current's
   table) was pinning every row here to 48px regardless of cell padding —
   38px is 20% shorter, as requested. */
.calc-resistor-table .calc-table-row {
    height: 38px;
}

.calc-resistor-table .calc-table-td {
    white-space: nowrap;
    vertical-align: middle;
    /* The base .calc-table-td padding (12px 14px) was sized for a 3-column
       table (Trace Width/Current) — with 6-7 columns of colored buttons
       here it pushed the table wider than its panel, forcing a horizontal
       scroll even to see the last column. */
    padding: 2px;
}

.calc-resistor-table .calc-table-th {
    padding: 8px 6px;
}

.calc-resistor-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-right: 6px;
    vertical-align: middle;
}

.calc-resistor-cell {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: transform 0.1s ease;
    outline: none;
}

/* Without this, a real mouse click leaves the browser's native focus ring
   (blue in Chrome) sitting alongside the white selection ring below —
   synthetic/automated clicks don't trigger it, which is why it's easy to
   miss in a screenshot. Keyboard users still see the white ring once a
   cell is selected via Enter/Space. */
.calc-resistor-cell:focus-visible {
    outline: none;
}

.calc-resistor-cell:hover:not(:disabled) {
    border-color: #b01f26;
}

/* Hovering an already-selected cell (the normal state right after clicking
   one, since the cursor is left sitting on it) otherwise beats the active
   rule below on specificity, turning the white selection ring red — this
   has to match (and beat) the hover rule's own specificity to win. */
.calc-resistor-cell--active:hover:not(:disabled) {
    border-color: transparent;
}

/* White ring + dark inner edge reads as "selected" against any of the 12
   band colors, unlike a fixed brand-red ring (invisible on a red cell).
   This has to be INSET: the table cell wrapping each button clips
   overflow (for its own text-overflow:ellipsis), so an outward-expanding
   ring — or a transform:scale() pushing the button past its own box —
   gets silently cropped away instead of showing as a visible border. */
.calc-resistor-cell--active {
    border-color: transparent;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(0, 0, 0, 0.45);
}

.calc-resistor-cell--disabled,
.calc-resistor-cell:disabled {
    color: #ccc;
    cursor: default;
    background: #fafafa;
}

/* Small checkmark badge on the currently-selected cell for each role. */
.calc-resistor-check {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    color: #16812d;
    font-size: 7px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.calc-result-number--sm {
    font-size: 18px;
}

/* .result-card's shared min-height:200px is sized for the other calculators'
   centered label-over-value cards — these are single-line label/value rows,
   so they only need to be as tall as their own padding + text. */
.calc-resistor-result-card {
    min-height: 0;
    padding: 25px !important;
    flex-wrap: wrap;
    row-gap: 4px;
}

.calc-resistor-result-card .calc-result-label {
    font-weight: 700;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

.calc-resistor-result-card .calc-result-number {
    font-size: 26px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: right;
}


.calc-diagram-image--trace-resistance {
    width: 340px;
}

.calc-trace-resistance-diagram-section {
    padding-top: 4%;
    padding-bottom: 4%;
}


.calc-diagram-image--magnetic-field {
    width: 220px;
}

.calc-magnetic-field-diagram-section {
    padding-top: 4%;
    padding-bottom: 4%;
}


/* Cable Impedance selector-card icons and diagrams are noticeably more
   compact in the PDF than the other multi-type calculators — matched here
   to size (small icon, small paired diagrams close together) and to the
   PDF's left-to-right order (2D cross-section first, then the 3D cutaway),
   bottom-aligned since the 2D shape is shorter than the 3D one. */
.calc-tt-thumb--cable-impedance {
    width: 54px;
    height: 54px;
    margin-right: 15%;
}

/* The twisted-pair source icon is a ~2:1 wide pair of circles (unlike the
   coaxial icon's square ring), so object-fit:contain inside the same 54x54
   box was shrinking its visible circles vertically — widen the box instead
   of the height so the circles read at the same size as the coaxial icon. */
.calc-tt-thumb--cable-impedance-wide {
    width: 97px;
    height: 49px;
}

.calc-cable-diagram-section {
    padding-top: 20px;
    padding-bottom: 20px;
}

.calc-diagram-label--cable-impedance {
    font-size: 12px;
}

.calc-cable-diagram-row {
    gap: 24px;
}

.calc-diagram-image--cable-impedance-3d {
    width: 190px;
}

.calc-diagram-image--cable-impedance-2d {
    width: 140px;
}
/****for mobile screens****/
@media (max-width: 768px) {
    .calc-diagram-image {
        width: 100%;       
        max-width: 200px;  
    }
    .calc-select-small {
        min-width: 60px; 
        max-width: 80px; 
        padding: 0 4px;  
    }

    .input-group {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
    }

    .input-group > .form-control {
        width: 100%;
        min-width: 0;
    }

    .blue-cont input[type="number"] {
        max-width: 75%;
        height: 30px;
        padding: 0 8px;
        font-size: 10px;
    }

    .calc-tt-card {
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 15px !important;
        min-height: 0;
    }

    .calc-resistor-result-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .calc-resistor-result-card .calc-result-number {
        margin-top: 4px;
        white-space: normal !important;
    }

    .calc-select-rf {
        width: auto;
        min-width: 90px;
        max-width: 120px;
        flex-shrink: 1;
    }

    .blue-cont .d-flex.gap-2:has(> .calc-select-rf) input[type="number"] {
        max-width: 60%;
    }

    .calc-tt-thumb,
    .calc-tt-thumb--impedance,
    .calc-tt-thumb--inductance {
    .calc-tt-thumb--impedance,
    .calc-tt-thumb--cable-impedance {
        width: 130px;
        height: 74px;
        transform: none;
    }

    .calc-tt-label {
        font-size: 14px;
    }

    .calc-diagram-image--lg,
    .calc-diagram-image--impedance,
    .calc-diagram-image--inductance {
    .calc-diagram-image--impedance,
    .calc-diagram-image--cable-impedance-3d,
    .calc-diagram-image--cable-impedance-2d {
        width: 100%;
        max-width: 200px;
    }

    .calc-cable-diagram-row {
        gap: 16px;
    }

    .calc-card-grid .row {
        text-align: center;
    }

    .calc-card-grid .calc-icon {
        margin: 0 0 12px;
    }

    .calc-card-grid .col-md-8 {
        padding-left: 15px;
    }

    .d-flex.align-items-center.gap-2 {
        justify-content: center;
    }

    .calc-tt-card > .flex-grow-1 {
        flex: 0 0 100% !important;
        margin-top: 8px;
        justify-content: center !important;
    }

    .calc-form-note,
    .calc-results-intro,
    .calc-intro-text {
        text-align: center;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .calc-diagram-gap {
        display: none;
    }

    .blue-cont form {
        text-align: center;
    }

    .calc-cta {
        justify-content: center !important;
        text-align: center;
    }

    .breadcrumb {
        justify-content: center;
    }

    .calc-explore-title,
    .calc-explore-copy,
    .calc-how-toggle {
        text-align: center;
    }

    .calc-advanced-table-wrapper {
        -webkit-overflow-scrolling: touch;
    }

    .calc-table-th,
    .calc-table-td {
        padding: 8px 10px;
        font-size: 11px;
    }

    .calc-tt-panel .row.g-3 > .col-md-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px !important;
    }

    .calc-tt-panel .col-md-4 .calc-tt-card {
        flex-direction: column;
        padding: 8px 4px !important;
        text-align: center;
        min-height: 90px;
    }

    .calc-tt-panel .col-md-4 .calc-tt-radio-on,
    .calc-tt-panel .col-md-4 .calc-tt-radio-off {
        display: none;
    }

    .calc-tt-panel .col-md-4 .calc-tt-label {
        order: 2;
        font-size: 9px;
        line-height: 1.2;
        margin-top: 4px;
    }

    .calc-tt-panel .col-md-4 .flex-grow-1 {
        order: 1;
        flex: 0 0 auto !important;
        margin-top: 0;
        justify-content: center !important;
    }

    .calc-tt-panel .col-md-4 .calc-tt-thumb--impedance {
        width: 48px;
        height: 27px;
    }

    .calc-tt-panel .col-md-4 .calc-tt-thumb--inductance {
        width: 42px;
        height: 28px;
    }

    .calc-results-intro + p {
        text-align: center;
    }
}