.slider { float: left; margin: 18px 0 0 0; position: relative; cursor: pointer } .handle, .handle:hover { top: -8px; position: absolute; display: block; cursor: pointer } .range { color: #000000; background-color: #ffffff; box-shadow: inset #979797 1px 1px 2px; border-radius: 2px; border: none; float: left; clear: left; margin: 0; width: 108px; padding: 5px 0 5px 7px; text-align: left; border: 1px solid #cccccc \9; width: 107px \9 } .range.short-input { width: 47px } .standard-label, .standard-input { clear: left; float: left } .standard-label { font-size: 12px; font-weight: bold } .standard-input { font-size: 12px; height: 18px; width: 115px } .handle { width: 10px; height: 10px } .slider { width: 100px; height: 15px } .range { clear: none } select { width: 107px } select.long { width: 170px } .ui-selectmenu { box-shadow: inset #979797 1px 1px 2px; background-color: #ffffff !important; border: none; border-radius: 2px; color: #000000 !important; display: block; display: inline-block; float: left; line-height: 23px !important; margin: 0; overflow: hidden; padding: 2px; position: relative; text-align: left; text-decoration: none !important; height: 23px !important; zoom: 1; border: 1px solid #cccccc \9 } .ui-selectmenu .ui-selectmenu-status { padding-left: 7px; height: 23px } .ui-selectmenu .ui-selectmenu-icon-wrapper { width: 18px; height: 18px; top: 15px !important; right: 5px !important; position: absolute !important; margin-top: -10px !important; background-color: #458ccc; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5193cf', endColorstr='#3072ae'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#5193cf', endColorstr='#3072ae')"; background: -webkit-gradient(linear, left top, left bottom, from(#5193cf), to(#3072ae)); background: -moz-linear-gradient(top, #5193cf, #3072ae); border-radius: 3px } .ui-selectmenu .ui-selectmenu-icon-wrapper:hover { background-color: #458ccc; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3072ae', endColorstr='#5193cf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3072ae', endColorstr='#5193cf')"; background: -webkit-gradient(linear, left top, left bottom, from(#3072ae), to(#5193cf)); background: -moz-linear-gradient(top, #3072ae, #5193cf) } .ui-selectmenu .ui-selectmenu-icon-wrapper .ui-selectmenu-icon { width: 10px; height: 6px; background-image: url("img/select_arrow.png"); display: block } .ui-selectmenu-menu { background-color: #ffffff; color: #000; display: none; font-family: Helvetica, Verdana, Arial, Sans-serif; list-style: none; margin: 0; overflow: auto !important; overflow-x: hidden !important; padding: 0; position: absolute; top: 0; z-index: 999999; box-shadow: 3px 3px 3px #7e7e7e } .ui-selectmenu-menu ul { margin: 0; overflow: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch } .ui-selectmenu-menu li { cursor: pointer; padding: 0 5px 0 7px; border: 1px solid #dbdbdb; border-bottom: none } .ui-selectmenu-menu li a { padding: 0 !important; line-height: 30px; font-size: 13px; text-decoration: none; color: inherit } .ui-selectmenu-menu li:hover { background-color: #4389c8 !important; background: none; color: #ffffff !important; border-right: none } .ui-selectmenu-menu li.ui-corner-bottom { border-bottom: 1px solid #dbdbdb } .ui-selectmenu-open { display: block } ul.ui-selectmenu-open { margin: 0 } .ui-selectmenu-menu-dropdown { padding-left: 0px !important } .loan-calculator-app article, .loan-calculator-app aside, .loan-calculator-app details, .loan-calculator-app figcaption, .loan-calculator-app figure, .loan-calculator-app footer, .loan-calculator-app header, .loan-calculator-app hgroup, .loan-calculator-app menu, .loan-calculator-app nav, .loan-calculator-app section { display: block } .loan-calculator-app body { line-height: 1 } .loan-calculator-app ol, .loan-calculator-app ul { list-style: none } .loan-calculator-app blockquote, .loan-calculator-app q { quotes: none } .loan-calculator-app blockquote:before, .loan-calculator-app blockquote:after, .loan-calculator-app q:before, .loan-calculator-app q:after { content: ''; content: none } .loan-calculator-app table { border-collapse: collapse; border-spacing: 0 } .pull-right { float: right } .gbst-clear { clear: both } .loan-calculator-app { position: relative; line-height: normal; float: left; } .loan-calculator-app button, .loan-calculator-app input[type=button] { padding: 0 } .loan-calculator-app .gbst-loan-repayment { display: none; border: 7px solid #e2e2e2; background-color: white; border-radius: 0; box-shadow: none; padding: 0; font-family: Helvetica, Verdana, Arial, Sans-serif; font-size: 13px } .loan-calculator-app .gbst-loan-repayment ul { color: #000; list-style: none; margin: 0; padding: 0; zoom: 1 } .loan-calculator-app .gbst-loan-repayment .info-icon { background: url("img/info-icon.png") no-repeat; width: 25px; height: 26px; background-color: #458ccc } .loan-calculator-app .gbst-loan-repayment .print-icon { background: url("img/printer-icon.png") no-repeat; width: 24px; height: 29px; background-color: #458ccc } .loan-calculator-app .gbst-loan-repayment .email-icon { background: url("img/email-icon.png") no-repeat; width: 26px; height: 21px; margin-top: 2px; background-color: #458ccc } .loan-calculator-app .gbst-loan-repayment .handle { background: url("img/slider-handle.png") repeat-x; width: 23px; height: 23px } .loan-calculator-app .gbst-loan-repayment .slider { background: url("img/slider.png") repeat-x; width: 115px; height: 8px } .loan-calculator-app .gbst-loan-repayment .progress { background: url("img/progress.png") repeat-x; background-color: #458ccc; height: 8px } .loan-calculator-app .gbst-loan-repayment .title { padding: 11px; position: relative; z-index: 1 } .loan-calculator-app .gbst-loan-repayment .title h1 { color: #000000; line-height: normal; font-size: 18px; font-weight: bold; margin: 0; padding: 0 } .loan-calculator-app .gbst-loan-repayment .title .info-panel { background-repeat: no-repeat; right: 5px; position: absolute; top: -6px; z-index: 2 } .loan-calculator-app .gbst-loan-repayment .title .info-panel .button-wrapper { display: block; float: left; margin-top: 13px; margin-left: 14px } .loan-calculator-app .gbst-loan-repayment .title .info-panel .button-wrapper.email { margin-top: 13px; margin-left: 10px } .loan-calculator-app .gbst-loan-repayment .title .info-panel .button-wrapper.print { margin-top: 11px; margin-left: 10px } .loan-calculator-app .gbst-loan-repayment .title .info-panel .button-wrapper .button { border: none; cursor: pointer } .loan-calculator-app .gbst-loan-repayment .title .info-panel .button-wrapper .button:focus { outline: 1px solid #E59700 } .loan-calculator-app .gbst-loan-repayment .title .background_panel_default { background-image: url("img/buttons_header.png"); background-position: 0 -40px; width: 90px; height: 102px } .loan-calculator-app .gbst-loan-repayment .title .background_panel_default .email { display: none } .loan-calculator-app .gbst-loan-repayment .title .background_panel_default.wide { background-image: url("img/buttons_header_wide.png"); background-position: 10px -45px; width: 152px; height: 115px } .loan-calculator-app .gbst-loan-repayment .title .background_panel_default.wide .first { margin-left: 33px } .loan-calculator-app .gbst-loan-repayment .title .background_panel_default.wide .email { display: block } .loan-calculator-app .gbst-loan-repayment .content { padding: 0 0 7px 0 !important } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper { position: relative } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section { box-shadow: inset 0 0 7px #ffffff } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section hr { color: #cccccc; opacity: 0.3 } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section h2 { background: #000; border-top-left-radius: 18px; border-bottom-left-radius: 18px; color: #FFFFFF; font-family: "RobotoLight", Helvetica, Verdana, Arial, Sans-serif; font-size: 13px; line-height: 35px; margin: 0; height: 36px; padding: 0 } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section h2 .number-wrapper { background: #c60c46; border: 18px; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; float: left; font-family: 'CorpidHeavy', arial; line-height: 36px; text-align: center; width: 36px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section h2 .title-wrapper { margin-left: 15px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section .expandable { padding: 0 0 30px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section ul { list-style: none; margin: 0; padding: 0 } #content-wrapper .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li { float: left; margin: 30px 1px 7px 8px; background: none; } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .slider-box, .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .slider-label, .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .standard-label, .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .standard-input { clear: left; float: left } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .slider-label, .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .standard-label { font-size: 1em; font-weight: bold; margin-bottom: 7px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .slider { margin-top: 10px; width: 158px; *margin-top: 30px; *float: none } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .slider-label { *width: 100% } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li input { clear: both } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .range { border: 1px solid #CCCCCC; box-shadow: none; font-family: "Roboto", Helvetica, Verdana, Arial, Sans-serif; font-size: 12px; height: 18px; line-height: 18px; margin-right: 9px; padding: 3px 0 3px 7px; width: 80px; *margin-left: -15px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li select { width: 80px !important } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .ui-selectmenu { background-color: #FEFEFE; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e9e9e9'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e9e9e9')"; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e9e9e9)); background: -moz-linear-gradient(top, #fefefe, #e9e9e9); border: 1px solid #CCCCCC; box-shadow: none; font-size: 12px; height: 28px !important; line-height: 20px !important; width: 80px !important } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .ui-selectmenu-icon-wrapper { background-color: transparent; filter: transparent; -ms-filter: transparent; background: transparent; background: transparent; height: 6px; width: 10px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .ui-selectmenu-status { padding-left: 5px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li .ui-selectmenu-icon { background-image: url("img/select_arrow.png"); margin-top: 4px; height: 6px; width: 10px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li.slider-wrapper { *width: 257px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li.input-wrapper { width: 97px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li.select-wrapper { width: 144px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section li.short-select-wrapper { width: 125px } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section .repaymentType select, .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section .repaymentType .ui-selectmenu { width: 130px !important } .loan-calculator-app .gbst-loan-repayment .content .results-line { zoom: 1 } .loan-calculator-app .gbst-loan-repayment .content .results-line .results-title { background: #c60c46; border-bottom-left-radius: 18px; border-top-left-radius: 18px; color: #ffffff; font-size: 13px; line-height: normal; margin-bottom: 10px; padding: 10px 9px 10px 18px; -webkit-margin-before: 0 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper { background-color: #ffffff; border: none; margin: 10px; position: relative; zoom: 1 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper { float: left; position: relative; z-index: 1; padding-left: 0; width: 60%; min-width: 260px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .logo { position: absolute; right: 20px; top: 45px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .loan-chart { z-index: -1; height: 306px; position: relative; display: block } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper { position: absolute; z-index: 999; width: 162px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .arrow { height: 23px; margin-top: 20px; width: 12px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .arrow.left { background-image: url("img/chart_arrow_left.png"); display: block; float: left } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .arrow.right { background-image: url("img/chart_arrow_right.png"); display: none; float: left } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper.right .arrow.left { display: none } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper.right .arrow.right { display: block } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip { background-color: #e7e7e7; border: none; border-radius: 0; box-shadow: 3px 3px 3px #7e7e7e; float: left; padding: 7px; text-align: left; width: 135px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .line { border: none; border-bottom: 1px solid #999999; clear: both; height: 0; margin: 2px 0 !important; width: 100% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip span { display: inline-block; font-size: 12px; padding: 1px; *padding: 0 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .tooltip-title { font-size: 14px; font-weight: bold; margin-bottom: 7px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .summary-label { float: left } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .summary-value { float: right; font-weight: bold } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .symbol { display: inline-block; float: left; height: 10px; margin-right: 5px; margin-top: 3px; width: 10px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .symbol.principal { background-color: #c60c46 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .chart-wrapper .chart-tooltip-wrapper .chart-tooltip .symbol.total { background: #458ccc } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType { color: #FFFFFF; left: 106px; position: absolute; top: -39px; *top: 100px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .radiogroup-label { display: none } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset { border: none; padding: 0 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset legend { display: none } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset .ui-button { float: left; display: inline-block; position: relative; padding: 0; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset input.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); z-index: -1 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset label.ui-state-default { background-color: #FFFFFF; border: 1px solid #FFFFFF; color: #C60C46 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset label.ui-state-active { background-color: transparent; color: #FFFFFF } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset label.ui-button:nth-of-type(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset label:nth-of-type(2) { border-top-right-radius: 3px; border-bottom-right-radius: 3px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .displayType .ui-buttonset span.ui-button-text { font-size: 12px; display: block; font-weight: bold; line-height: 1.4; padding: 2px 13px 2px 12px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table-wrapper { float: left; display: none; padding: 5px 0 0; width: 57%; margin-left: 3% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table-wrapper .back, .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table-wrapper .next { color: white; cursor: pointer; background: #c60c46; border: none; border-radius: 3px; margin: 5px 2px 2px 2px; padding: 3px 5px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table { font-size: 12px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table th, .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table td { font-weight: normal; border-bottom: 1px dotted #cccccc } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table thead th { font-weight: bold; padding: 15px 0 0; text-align: right } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table td { padding: 7px 0; text-align: right; width: 15% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .amortization-table .payment-period { text-align: center; width: 15% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper { float: left; width: 40% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-arrow { background-image: url("img/arrow.png"); float: left; height: 23px; margin: 30px 0 0 -12px; width: 12px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-responsive { float: left; margin-left: 10%; width: 90% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-responsive .content { padding: 15px 15px 9px 14px !important } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box { width: 100% } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box.frequency-result { background: #EEEEEE } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box.total-result { background-color: #DDDDDD; color: #FFF; margin-top: 3px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box.total-result .content { height: 195px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box.total-result sup { font-size: 15px !important } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box .label { font-size: 14px; font-weight: bold; color: #FFF } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box .value { font-size: 36px; font-weight: bold; margin: 0 } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box .value.small { font-size: 25px } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box .value sup { font-size: 20px; position: relative; top: 3px; color: #fff; vertical-align: super; } .loan-calculator-app .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box .value span { position: relative } .loan-calculator-app .gbst-loan-repayment.flat-design { font-family: "Roboto", Helvetica, Verdana, Arial, Sans-serif; border: 1px solid #e2e2e2 } .loan-calculator-app .gbst-loan-repayment.flat-design .slider { background: url("img/slider.png") repeat-x } .loan-calculator-app .gbst-loan-repayment.flat-design .slider .progress { background: none } .loan-calculator-app .gbst-loan-repayment.flat-design .slider .handle { background: url("img/slider-handle.png") repeat-x; width: 18px; height: 28px } .loan-calculator-app .gbst-loan-repayment.flat-design .title h1 { font-size: 24px; font-weight: 300 } .loan-calculator-app .gbst-loan-repayment.flat-design .title .background_panel_default { background-image: none; top: -2px } .loan-calculator-app .gbst-loan-repayment.flat-design .title .background_panel_default .wide { background-image: none } .loan-calculator-app .gbst-loan-repayment.flat-design .title .background_panel_default .info-icon { background: url("img/info-icon.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .title .background_panel_default .print-icon { background: url("img/printer-icon.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .title .background_panel_default .email-icon { background: url("img/email-icon.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .content .inputs-wrapper div h2 { color: #000 !important; font-weight: 300; font-size: 18px; border-bottom: 1px solid #CCCCCC; border-top-left-radius: 0px; border-bottom-left-radius: 0px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .inputs-wrapper div h2 .number-wrapper { border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; margin-left: 10px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .inputs-wrapper div li .range { background-color: #f6f8f9 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .inputs-wrapper div li .standard-label, .loan-calculator-app .gbst-loan-repayment.flat-design .content .inputs-wrapper div li .slider-label, .loan-calculator-app .gbst-loan-repayment.flat-design .content .inputs-wrapper div li .radio-buttons-label { font-family: "RobotoLight", Helvetica, Verdana, Arial, Sans-serif; font-weight: 300 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-line { font-family: "RobotoLight", Helvetica, Verdana, Arial, Sans-serif } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-line .results-title { color: #000 !important; font-size: 18px; font-weight: 300; border-bottom-left-radius: 0px; border-top-left-radius: 0px; border-top-left-radius: 0px; border-bottom: 1px solid #CCCCCC; height: 44px; font-size: 21px !important; padding-top: 11px !important; padding-left: 10px !important; } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .results-content { color: white !important } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType { left: 130px; top: -49px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-state-default { border: 1px solid #CCCCCC; background-color: #FEFEFE; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e9e9e9'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e9e9e9')"; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e9e9e9)); background: -moz-linear-gradient(top, #fefefe, #e9e9e9); height: 30px !important; color: #C60C46 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-button:nth-of-type(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label:nth-of-type(2) { border-top-right-radius: 3px; border-bottom-right-radius: 3px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-left { height: 29px; width: 29px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-left span.ui-button-text { background: url("img/chart_icon.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-left.ui-state-active span.ui-button-text, .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-left.ui-state-hover span.ui-button-text { background: url("img/chart_icon_selected.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-right { height: 29px; width: 29px } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-right span.ui-button-text { background: url("img/table_icon.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-right.ui-state-active span.ui-button-text, .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-corner-right.ui-state-hover span.ui-button-text { background: url("img/table_icon_selected.png") no-repeat } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-state-active, .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-state-hover { border: 1px solid #CCCCCC; background-color: #4d4d4d; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#4d4d4d'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#4d4d4d')"; background: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#4d4d4d)); background: -moz-linear-gradient(top, #4d4d4d, #4d4d4d) } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-state-active.ui-state-hover, .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType label.ui-state-hover.ui-state-hover { background-color: #4d4d4d !important } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType span.ui-button-text { color: transparent } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .displayType .amortization-table-wrapper th { font-weight: 500 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .outputs-wrapper .results-arrow { display: none } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .outputs-wrapper .results-box.frequency-result { color: #FFFFFF !important } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .outputs-wrapper .results-box.frequency-result .label { color: #FFFFFF !important; font-weight: 500 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .outputs-wrapper .results-box.frequency-result .value { font-weight: 500 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .outputs-wrapper .results-box.total-result .label { font-weight: 500 } .loan-calculator-app .gbst-loan-repayment.flat-design .content .results-wrapper .outputs-wrapper .results-box.total-result .value { font-weight: 500 } .loan-calculator-app .modal-overlay { background-color: #FFFFFF; border: none; border-radius: 0; box-shadow: 3px 3px 3px #7E7E7E; font-family: Helvetica, Verdana, Arial, Sans-serif; font-size: 13px; display: none; margin: 7px; text-align: left; z-index: 99999 } .loan-calculator-app .modal-overlay.flat-design { font-family: "Roboto", Helvetica, Verdana, Arial, Sans-serif } .loan-calculator-app .modal-overlay.flat-design p { font-weight: 300 } .loan-calculator-app .modal-overlay.flat-design h2 { font-weight: 300 } .loan-calculator-app .modal-overlay.flat-design h3 { font-weight: 300 } .loan-calculator-app .modal-overlay.flat-design h4 { font-weight: 300 } .loan-calculator-app .modal-overlay.flat-design label { font-weight: 500 !important } .loan-calculator-app .modal-overlay.flat-design strong { font-weight: 400 } .loan-calculator-app .modal-overlay .modal-overlay-header .title { border-bottom: 1px solid #E2E2E2; font-size: 1.3846em; margin: 0 10px; padding: 22px 14px 20px 14px } .loan-calculator-app .modal-overlay .modal-overlay-header .close { background-color: #ffffff; background-image: url("img/infoboxclose.png"); border: none; cursor: pointer; height: 25px; right: 25px; position: absolute; top: 20px; width: 25px } .loan-calculator-app .modal-overlay .content { overflow-y: auto } .loan-calculator-app .modal-overlay .wrapper { padding: 25px 25px 25px 25px } .loan-calculator-app .modal-overlay .wrapper h2, .loan-calculator-app .modal-overlay .wrapper h3, .loan-calculator-app .modal-overlay .wrapper h4, .loan-calculator-app .modal-overlay .wrapper ul { padding: 0 } .loan-calculator-app .modal-overlay .wrapper h3, .loan-calculator-app .modal-overlay .wrapper h4 { margin: 15px 0 0 0 } .loan-calculator-app .modal-overlay .wrapper h2 { font-size: 18px; margin: 0 0 30px 0 } .loan-calculator-app .modal-overlay .wrapper h3 { font-size: 15px } .loan-calculator-app .modal-overlay .wrapper h4 { font-size: 13px } .loan-calculator-app .modal-overlay .wrapper p, .loan-calculator-app .modal-overlay .wrapper li { font-size: 12px; line-height: 16px; margin: 0 } .loan-calculator-app .modal-overlay .wrapper li { margin: 5px 0 } .loan-calculator-app .modal-overlay .wrapper table { margin: 10px 0 } .loan-calculator-app .modal-overlay .wrapper .dependantsTable { text-align: center } .loan-calculator-app .modal-overlay .wrapper .dependantsTable td { width: 50px } .loan-calculator-app .modal-overlay#email-overlay .wrapper { padding: 5px 24px 25px 25px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .field { min-height: 30px; width: 100% } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs { position: relative; zoom: 1 } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav { height: 25px; margin: 0; padding: .2em .2em 0; padding-top: 0; padding-left: 0; padding-bottom: 25px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li { border-bottom: 0 !important; float: left; list-style: none; margin: 0 .2em 1px 0; padding: 0; position: relative; top: 1px; white-space: nowrap; width: 80px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li a { background: url("img/radio_deselect.png") no-repeat; background-position: left; color: #000000; cursor: pointer; float: left; font-size: 12px; height: 21px; padding: .5em 1em; padding-left: 25px; padding-top: 12px; text-decoration: none; width: 21px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li a:active, .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li a:hover, .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li a:visited, .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li a:focus { color: #000 } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li.ui-tabs-selected a { cursor: text; background: url("img/radio_select.png") no-repeat; background-position: left; height: 21px; width: 21px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li.ui-state-disabled a { cursor: text } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-panel { background: none; border-width: 0; display: block; padding: 0 } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs .ui-tabs-hide { display: none !important } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs-panel ul { list-style: none; padding: 0; margin-left: 0px; min-height: 100px; width: 100% } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs-panel ul li { float: left; margin: 11px 0; width: 287px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs-panel ul li.last-modal-field { width: 264px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs-panel ul li label { color: #000; font-size: 1.0833em; font-weight: bold; margin-bottom: 9px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .ui-tabs-panel ul li input { border: 1px solid #CCCCCC; box-shadow: none; font-size: 12px; height: 22px; line-height: 18px; margin-top: 5px; width: 262px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .textarea_container h4 { margin-top: 30px; margin-bottom: 7px; size: 12px; width: 100% } .loan-calculator-app .modal-overlay#email-overlay .wrapper .textarea_container textarea { border-color: #CCC; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 126px; resize: none; width: 100% } .loan-calculator-app .modal-overlay#email-overlay .wrapper .submit_button_container { height: 50px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .submit_button_container .email_form_submit { float: right; height: 35px; margin-top: 11px; text-align: center; width: 145px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .button { background-color: #458ccc; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5193cf', endColorstr='#3072ae'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#5193cf', endColorstr='#3072ae')"; background: -webkit-gradient(linear, left top, left bottom, from(#5193cf), to(#3072ae)); background: -moz-linear-gradient(top, #5193cf, #3072ae); border: 0; border-radius: 5px; color: #ffffff; cursor: pointer; font-weight: bold; height: 30px; width: 100px } .loan-calculator-app .modal-overlay#email-overlay .wrapper .button:hover { background-color: #458ccc; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3072ae', endColorstr='#5193cf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3072ae', endColorstr='#5193cf')"; background: -webkit-gradient(linear, left top, left bottom, from(#3072ae), to(#5193cf)); background: -moz-linear-gradient(top, #3072ae, #5193cf) } .loan-calculator-app .modal-overlay#email-overlay .wrapper .error { border-color: #d90000 !important } .loan-calculator-app .modal-overlay#email-overlay .wrapper .error p { color: #d90000 } .loan-calculator-app .modal-overlay#email-overlay .wrapper .email_thanks { font-size: 1em } .loan-calculator-app .modal-overlay#email-overlay .wrapper .email_thanks p { margin-top: 16px } .loan-calculator-app .cta { border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; padding: 0 10px } .loan-calculator-app .cta p { font-size: 1.2em } .loan-calculator-app .cta p a { background-color: #458ccc; font-size: 1.1em; color: #fff; padding: 7px 15px; text-decoration: none; margin-left: 10px } .loan-calculator-app .calculator-disclaimer { padding: 15px 15px 5px 15px; display: block; color: #B2B2B2; font-size: 11px } .loan-calculator-app .powered-by .powered-by-image { background: url("img/logo_poweredby.png") no-repeat; display: block; float: right; height: 17px; margin: 5px 15px; width: 153px } .loan-calculator-app.responsive_layout { width: 100% } .loan-calculator-app.phones_layout { min-width: 300px; width: 100% } .loan-calculator-app.phones_layout .gbst-loan-repayment .content .results-wrapper .chart-wrapper { float: none; min-width: auto; width: auto } .loan-calculator-app.phones_layout .gbst-loan-repayment .content .results-wrapper .amortization-table-wrapper { float: none; width: 97% } .loan-calculator-app.phones_layout .gbst-loan-repayment .content .results-wrapper .outputs-wrapper { float: none; width: 100% } .loan-calculator-app.phones_layout .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-arrow { display: none } .loan-calculator-app.phones_layout .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-responsive { float: none; margin: 15px 0 0 0; width: 100% } .loan-calculator-app.phones_layout .gbst-loan-repayment .content .results-wrapper .outputs-wrapper .results-box.total-result .content { height: auto } .loan-calculator-app.phones_layout .chart-tooltip-wrapper { width: 127px !important } .loan-calculator-app.phones_layout .chart-tooltip-wrapper .chart-tooltip { width: 100px !important } .loan-calculator-app.phones_layout .chart-tooltip-wrapper .chart-tooltip .summary-value { float: left !important; text-align: left !important; width: 100% !important } @media all and (max-width: 560px) { .loan-calculator-app .title h1 { margin-top: 45px !important } } @media all and (max-width: 389px) { .loan-calculator-app .title h1 { text-align: center } } @media print { .loan-calculator-app div.expandable { display: block !important } .loan-calculator-app .info-panel, .loan-calculator-app .number-wrapper { display: none } .loan-calculator-app .gbst-loan-repayment { border: none } .loan-calculator-app .gbst-loan-repayment .content .inputs-wrapper .section { box-shadow: none } } .interestRate { clear: both !important; }