@media (max-width: 600px) {
    #kv-mortgage-calculator-output-header {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table#kv-mortgage-calculator-output {
        width: 100%;
        border-collapse: collapse;
        thead,
        tbody,
        th,
        td,
        tr {
            border: 0;
            display: block;
        }
        tr {
            border: 1px solid #ccc;
            margin-bottom: 15px;
        }
        th {
            border-bottom: 1px solid #ccc;
        }
        td {
            text-align: right;
        }
        td:before {
            float: left;
        }
        td:nth-of-type(1):before {
            content: "Principal";
        }
        td:nth-of-type(2):before {
            content: "Taxes";
        }
        td:nth-of-type(3):before {
            content: "INS/PMI*";
        }
        td:nth-of-type(4):before {
            content: "Other";
        }
        td:nth-of-type(5):before {
            content: "Total";
            font-weight: bold;
        }
    }
}

.kv-mortgage-calculator {
    @extend .kv-row;
    &-sidebar {
        @extend %kv-col-12,
        %kv-col-md-12,
        %kv-col-lg-4;
        border-right: 3px solid $color-light;
        &-image img {
            @include object-fit(cover);
        }
    }
    &-report {
        @extend %kv-col-12,
        %kv-col-md-12,
        %kv-col-lg-8;
        font-size: 0.75em;
        &-breakdown {
            @extend .kv-row;
            &-chart {
                @extend %kv-col-12,
                %kv-col-md-4;
                &-principal {
                    background-color: #d70206;
                }
                &-taxes {
                    background-color: #f05b4f;
                }
                &-pmi {
                    background-color: #f4c63d;
                }
                &-other {
                    background-color: #d17905;
                }
                .ct-label {
                    fill: white;
                    font-size: 8px;
                }
            }
            &-calculated {
                @extend %kv-col-12,
                %kv-col-md-8;
                th span {
                    @extend .kv-mr-1;
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                }
            }
        }
    }
    &-form {
        &>label {
            @extend .kv-d-block,
            .kv-mb-3;
        }
        label [type="text"] {
            width: 100%;
        }
        [name="down-payment-percent"] {
            display: inline-block !important;
            width: 25% !important;
        }
        [name="down-payment-amount"] {
            display: inline-block !important;
            width: 75% !important;
        }
        &-range-input {
            $handle-size: 24px;
            $handle-color: $color-primary;
            $track-color: $color-light;
            -webkit-appearance: none;
            outline: none;
            height: $handle-size / 3;
            width: 100%;
            background: $track-color;
            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: $handle-size;
                height: $handle-size;
                border-radius: 50%;
                background: $handle-color;
                cursor: pointer;
                transition: background .15s ease-in-out;
                &:hover {
                    background: darken($handle-color, 0.25);
                }
            }
            &:active::-webkit-slider-thumb {
                background: darken($handle-color, 0.25);
            }
            &::-moz-range-thumb {
                width: $handle-size;
                height: $handle-size;
                border: 0;
                border-radius: 50%;
                background: $handle-color;
                cursor: pointer;
                transition: background .15s ease-in-out;
                &:hover {
                    background: $handle-color;
                }
            }
            &:active::-moz-range-thumb {
                background: $handle-color;
            }
        }
        select {
            width: 100%;
        }
    }
    // Firefox Overrides
     ::-moz-range-track {
        background: #ccc;
        border: 0;
    }
}