﻿.dialog-header-error {
    background-color: #d2322d
}

.dialog-header-wait {
    background-color: #428bca
}

.dialog-header-notify {
    background-color: #eee
}

.dialog-header-confirm {
    background-color: #333
}

    .dialog-header-confirm h4, .dialog-header-confirm span, .dialog-header-error h4, .dialog-header-error span, .dialog-header-wait h4, .dialog-header-wait span {
        color: #fff
    }



.tdAltHero { padding: 10px; }
.tdBordered { border: 2px solid #ff6900; }
.tdHeroRatePadding { padding-top: 11px; }
.tdHeroTitle { color: #ff6900; font-size: 18px; text-align: center; }
.tdHeroDisclaimer {margin-top: 5px;font-size: 13px; text-align:center;}

.tdApplyButton { font-size: 24px; }
.td3dButton {
    box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
    0 -1px 1px #666, /*top external shadow*/
    inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
    inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
}

.tdChevronBar  {border-bottom: 1px solid #000;margin-top: 1em;}

.tdHeroRatePadding {
    padding-top: 11px;
}
#tdOnline h1, #tdOnline h2, #tdOnline h3, #tdOnline h4 {

}
.tdConfiguredFor {font-style: italic;color:#8b91a2;}

#tdOnline h1 {
    font-size: 40px;
}

#tdOnline h3 {
    font-size: 18px;
}
.mt-none {margin-top: 0px !important;}
.tdFtRates  {padding: 20px 0;}
.tdProductFtRateHeading {
    margin-top: 0;
}
.tdProductFtRate, .tdProductFtRateSm, .tdProductFtTerm {
    font-size: 60px;
}
.tdProductFtTerm {
    margin-top: 15px;
    font-size: 35px;
}

.tdProductFtRateSm {
    font-size: 30px;
}

.tdFtDirectRates { padding: 20px 0 20px 0; color: #f05827; font-family: 'BryantWebCondensed', sans-serif; }

.tdProductFtDirectRateHeading {
    margin-top: 0;
}

.tdProductFtDirectRate, .tdProductFtDirectRateSm, .tdProductFtDirectTerm {
    font-size: 100px;
    font-weight: 800;
}

.tdProductFtDirectTerm { margin-top: 15px; font-weight: 400; font-size: 35px; }

.tdProductFtDirectRateSm { font-size: 30px; font-weight: 400; }

.tdTypicalImage {max-height: 180px;margin:0 auto;}

.mgTbLg {margin: 50px 0;}
.mgBLg {margin: 0 0 50px 0;}

.narrowCol:not(:first-child), .narrowCol:not(:last-child) {
    padding-right: 5px;
    padding-left: 5px;
}

#tdImageHeader {
    min-height: 250px;
    background-color: #3c3c3a;
    top: 110px;
    position: relative;
    margin-bottom: 100px;
    background-image: url('../../../../0/tdonline/tdonlineheader.html');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}



@media only screen and (max-width : 992px) {
    #tdImageHeader {
        background-image: none;
        margin-top: 0 !important;
        position: inherit !important;
    }


}



#tdIHIntro {
    margin-top: 50px;padding-top: 50px;
}
#tdIHIntro h1
{
    font-size: 35px;

}

#tdIHIntro p {
    font-size: 20px;
    color: #fff;
}

.btnRowMgn {margin-right: 20px;}

.borderless > tbody > tr > td,
.borderless > tbody > tr > th,
.borderless > tfoot > tr > td,
.borderless > tfoot > tr > th,
.borderless > thead > tr > td,
.borderless > thead > tr > th {
    border: none;
}
#tdHeroRates {
}

#tdCalcPanel, .tdDgBg { background-color: #f05827; }

.tdSectionBottom { padding: 0 0 2em 0; }


.tdSection {
    padding: 2em 0;
}

.tdSectionSlim {
    padding: 0.8em 0 1em !important;
}

.mgTop {
    margin-top: 0.8em;
}

.mgBottom {
    margin-bottom: 0.8em;
}


.mgSection {
    margin: 4px 0
}

.tdSection h3, .tdInfoSection h3, .mgSection h3 {
    font-size: 20px;
    color: #ed7e31
}

.tdBgGrey {
    background-color: #f7f7f7
}

.tdBgGreyDk {
    background-color: #f2f2f2;
}

.tdBgGreyDkTwo { background-color: #ffc399; }

.tdBgOrange {
    background-color: #fbe5d7
}

.tdBgOrangeDk {
    background-color: #f8cbac
}

.tdTypicalText {margin-top: 30px;padding-right: 55px;font-size: 18px;}

.tdHeroRate {
    margin: 0 auto;
}

.tdHeroRateMonths {
    font-size: 13px !important;
    float: left;
    line-height: 35px;
    width: 30%;
    text-align: right;
    font-weight: bold;
}

.tdHeroRate h3 {
    font-weight: bold;
    float: left;
    margin: 0;
    font-size: 35px !important;
    color: #000;
    width: 65%;
    margin-left: 4%;
    text-align: right;
 
}

.tdHeroRate h3 small {
    font-size: 13px;
}
.tdQuadColour {
    margin-bottom: 20px;
}
    .tdQuadColourSlim {margin-bottom: 10px;}

.tdQuadContent {
    padding: 1em 15px;
}

    .tdQuadContent h3 {
        color: #ed7e31;
    }

.tdFormGroup {margin-right:10px;margin-top: 10px;}
.tdFormGroupLabel { font-size: 13px; color: #fff; }

.resetInstructionMessage {
    padding: 8px;
    color: #fff;
    background-color: #ed7e31;
}
.mb1 {margin-bottom:1em;}
.tdCalcLinkEst, .tdCalcTotExp {
    font-size: 11px;
    color: #fff;
}

    .tdCalcTotExp span {font-size: 9px;}
    
    .tdCalcLinkEst a {
        color: #fff
    }

        /*.tdCalcLinkEst a:hover {
            color: #fff
        }*/

.tdFormGroup input, .tdFormGroup select, .tdFormGroup input[disabled], .tdFormGroup select[disabled] { background-color: #c9461c; border-color: #b5370e; color: #fff; }
.tdFormGroup ::placeholder { color: #fff; }

#tdCalcPanel {
    color: #fff;
}

    #tdCalcPanel .btn-primary { background-color: #b5370e !important }
#tdCalcPanel .btn-primary:hover {background-color:#fff !important;color:#f05827 !important}

    #tdCalcPanel h3 {
        color: #fff;
    }

.tdCalcTotal {
    color: #fff;
    font-size: 40px;
}

.tdCalcHead h3 {
    margin-top: 0 !important;
}


.tdLightOrange {
    background-color: #fef8eb
}

.tdLightOrangeTwo {
    background-color: #fef3e1
}

.tdApply h3, .tdApply h4 {
    color: #000;
    font-size: 15px;
}

.tdQuadContent ul {
    /*font-size: 14px;*/
    padding: 0;
    padding-left: 10px;
}


/*.td100vh {
    height: 190px;
}*/

/*.row.equal {
    display: flex;
    flex-wrap: wrap;
}*/
.td100vhlz {min-height:190px;}


#tdDirectHeader { min-height: 250px; background-color: #f7f7f7; /*    margin-bottom: 100px;*/ }


@media only screen and (max-width : 768px) {
    /*.row.equal {
        display: block !important;
    }*/
    /*.td100vh {height: auto;}*/
}



.tdMg2 {
    margin: 2em 0;
}

.tdTable th {
    font-size: 12px;
    color: #9b9997;
    text-transform: capitalize;
}

/*! angularjs-slider - v6.5.1 - 
 (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
 https://github.com/angular-slider/angularjs-slider - 
 2018-03-30 */
.rzslider {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 4px;
    margin: 35px 0 15px 0;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .rzslider.with-legend {
        margin-bottom: 40px;
    }

    .rzslider[disabled] {
        cursor: not-allowed;
    }

        .rzslider[disabled] .rz-pointer {
            cursor: not-allowed;
            background-color: #d8e0f3;
        }

        .rzslider[disabled] .rz-draggable {
            cursor: not-allowed;
        }

        .rzslider[disabled] .rz-selection {
            background: #8b91a2;
        }

        .rzslider[disabled] .rz-tick {
            cursor: not-allowed;
        }

            .rzslider[disabled] .rz-tick.rz-selected {
                background: #8b91a2;
            }

    .rzslider span {
        position: absolute;
        display: inline-block;
        white-space: nowrap;
    }

    .rzslider .rz-base {
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .rzslider .rz-bar-wrapper {
        left: 0;
        z-index: 1;
        width: 100%;
        height: 32px;
        padding-top: 16px;
        margin-top: -16px;
        box-sizing: border-box;
    }

    .rzslider .rz-draggable {
        cursor: move;
    }




.rzslider .rz-bar {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: #d8e0f3;
    border-radius: 10px !important;
}

    .rzslider .rz-bar-wrapper.rz-transparent .rz-bar {
        background: transparent;
    }

    .rzslider .rz-bar-wrapper.rz-left-out-selection .rz-bar {
        background: #df002d;
    }

    .rzslider .rz-bar-wrapper.rz-right-out-selection .rz-bar {
        background: #03a688;
    }

    .rzslider .rz-selection {
        z-index: 2;
        background: #0db9f0;
        border-radius: 2px;
    }

    .rzslider .rz-pointer {
        top: -14px;
        z-index: 3;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background-color: #0db9f0;
        border-radius: 16px;
    }

        .rzslider .rz-pointer:after {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 4px;
            content: '';
        }

        .rzslider .rz-pointer:hover:after {
            background-color: #ffffff;
        }

        .rzslider .rz-pointer.rz-active {
            z-index: 4;
        }

            .rzslider .rz-pointer.rz-active:after {
                background-color: #451aff;
            }

    .rzslider .rz-bubble {
        bottom: 16px;
        padding: 1px 3px;
        color: #55637d;
        cursor: default;
    }

        .rzslider .rz-bubble.rz-limit {
            color: #55637d;
        }

    .rzslider .rz-ticks {
        position: absolute;
        top: -3px;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 0;
        margin: 0;
        list-style: none;
        box-sizing: border-box;
    }

    .rzslider .rz-ticks-values-under .rz-tick-value {
        top: auto;
        bottom: -32px;
    }

    .rzslider .rz-tick {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        margin-left: 11px;
        text-align: center;
        cursor: pointer;
        background: #d8e0f3;
        border-radius: 50%;
    }

        .rzslider .rz-tick.rz-selected {
            background: #0db9f0;
        }

    .rzslider .rz-tick-value {
        position: absolute;
        top: -30px;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    .rzslider .rz-tick-legend {
        position: absolute;
        top: 24px;
        max-width: 50px;
        white-space: normal;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);


    }

    .rzslider.rz-vertical {
        position: relative;
        width: 4px;
        height: 100%;
        padding: 0;
        margin: 0 20px;
        vertical-align: baseline;
    }

        .rzslider.rz-vertical .rz-base {
            width: 100%;
            height: 100%;
            padding: 0;
        }

        .rzslider.rz-vertical .rz-bar-wrapper {
            top: auto;
            left: 0;
            width: 32px;
            height: 100%;
            padding: 0 0 0 16px;
            margin: 0 0 0 -16px;
        }

        .rzslider.rz-vertical .rz-bar {
            bottom: 0;
            left: auto;
            width: 4px;
            height: 100%;
        }

        .rzslider.rz-vertical .rz-pointer {
            top: auto;
            bottom: 0;
            left: -14px !important;
        }

        .rzslider.rz-vertical .rz-bubble {
            bottom: 0;
            left: 16px !important;
            margin-left: 3px;
        }

        .rzslider.rz-vertical .rz-ticks {
            top: 0;
            left: -3px;
            z-index: 1;
            width: 0;
            height: 100%;
        }

        .rzslider.rz-vertical .rz-tick {
            margin-top: 11px;
            margin-left: auto;
            vertical-align: middle;
        }

        .rzslider.rz-vertical .rz-tick-value {
            top: auto;
            left: 24px;
            -webkit-transform: translate(0, -28%);
            transform: translate(0, -28%);
        }

        .rzslider.rz-vertical .rz-tick-legend {
            top: auto;
            right: 24px;
            max-width: none;
            white-space: nowrap;
            -webkit-transform: translate(0, -28%);
            transform: translate(0, -28%);
        }

        .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value {
            right: 24px;
            bottom: auto;
            left: auto;
        }

        .custom-slider {margin-top: 60px;}
.custom-slider.rzslider .rz-bar {
    background: #f2f2f2;
    height: 25px;
    border:1px solid #8b91a2;
    border-radius: 3px;
}

.tdProductSelectPanel 
{
    padding-top: 30px;
    text-align: left;
}
.custom-slider.rzslider .rz-selection {
    background: #ed7e31;
}

.custom-slider.rzslider .rz-pointer {
    background-color: #ed7e31;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
    0 -1px 1px #666, /*top external shadow*/
    inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
    inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
}

    .custom-slider.rzslider .rz-pointer:after {
        display: none;
    }


.custom-slider.rzslider .rz-tick {
  background:#f2f2f2;
  margin-top: 5px;
}
.custom-slider.rzslider .rz-tick-legend {
    font-weight: bold;
    margin-top: -68px;
    text-align: center;
    font-size: 18px;
    margin-left: 5px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .custom-slider.rzslider .rz-tick-legend {

        margin-left: 12px !important;
    }
}


.custom-slider.rzslider .rz-tick-value
{
    display:none;
}

    .custom-slider.rzslider .rz-tick.rz-selected {
        background: orange;
    }

