/* Hypothekenrechner */
.ValidationSummary,
.hide,
body div .hide,
.invisible,
.insymaSpecialOverlay .insymaOverlayOnly,
body .ui-datepicker {
    display: none;
}

.part_hypothekenrechner .datepicker-wrapper {
    display: flex;
}

.part_hypothekenrechner .ui-datepicker-trigger {
    position: relative;
    width: 38px;
    background-color: white;
    border: none;
}

.part_hypothekenrechner .ui-datepicker-trigger:focus {
    box-shadow: none;
    border: none;
}

.part_hypothekenrechner .ui-datepicker-trigger::before {
    content: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.5 16.5'%3E%3Cpath fill='%23675e54' d='M9.6,13.5h1.3c0.3,0,0.6-0.3,0.6-0.6v-1.3c0-0.3-0.3-0.6-0.6-0.6H9.6C9.3,11,9,11.3,9,11.6v1.3C9,13.2,9.3,13.5,9.6,13.5z'/%3E%3Cpath fill='%23675e54' d='M9.6,10.5h1.3c0.3,0,0.6-0.3,0.6-0.6V8.6c0-0.3-0.3-0.6-0.6-0.6H9.6C9.3,8,9,8.3,9,8.6v1.3C9,10.2,9.3,10.5,9.6,10.5z'/%3E%3Cpath fill='%23675e54' d='M6.6,10.5h1.3c0.3,0,0.6-0.3,0.6-0.6V8.6C8.5,8.3,8.2,8,7.9,8H6.6C6.3,8,6,8.3,6,8.6v1.3C6,10.2,6.3,10.5,6.6,10.5z'/%3E%3Cpath fill='%23675e54' d='M3.6,13.5h1.3c0.3,0,0.6-0.3,0.6-0.6v-1.3c0-0.3-0.3-0.6-0.6-0.6H3.6C3.3,11,3,11.3,3,11.6v1.3C3,13.2,3.3,13.5,3.6,13.5z'/%3E%3Cpath fill='%23675e54' d='M6.6,13.5h1.3c0.3,0,0.6-0.3,0.6-0.6v-1.3c0-0.3-0.3-0.6-0.6-0.6H6.6C6.3,11,6,11.3,6,11.6v1.3C6,13.2,6.3,13.5,6.6,13.5z'/%3E%3Cpath fill='%23675e54' d='M12.8,2h-1.2V0.6c0-0.3-0.3-0.6-0.6-0.6h-0.3C10.3,0,10,0.3,10,0.6V2H4.5V0.6C4.5,0.3,4.2,0,3.9,0H3.6C3.3,0,3,0.3,3,0.6V2H1.8C0.8,2,0,2.8,0,3.8v11c0,1,0.8,1.8,1.8,1.8h11c1,0,1.8-0.8,1.8-1.8v-11C14.5,2.8,13.7,2,12.8,2z M1.5,6.5H13v8.2c0,0.1-0.1,0.2-0.2,0.2h-11c-0.1,0-0.2-0.1-0.2-0.2V6.5z M1.8,3.5h11c0.1,0,0.2,0.1,0.2,0.2V5H1.5V3.8C1.5,3.6,1.6,3.5,1.8,3.5z'/%3E%3Cpath fill='%23675e54' d='M3.6,10.5h1.3c0.3,0,0.6-0.3,0.6-0.6V8.6C5.5,8.3,5.2,8,4.9,8H3.6C3.3,8,3,8.3,3,8.6v1.3C3,10.2,3.3,10.5,3.6,10.5z'/%3E%3C/svg%3E");
    position: absolute;
    width: auto;
    height: auto;
    left: 8px;
    top: 8px;
    transition: all 0.3s ease 0s;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.part_hypothekenrechner .InLineValidate {
    margin-top: 10px;
}

.part_hypothekenrechner .InLineValidateCaption {
    color: #ce3434;
}

.part_hypothekenrechner section.info_section {
    /*
    background-color: rgba(0, 74, 153, .1);
    border-radius: 6px;
    border:1px solid rgb(0, 74, 153);
*/
    background: none;
    padding: 0;
}

.part_hypothekenrechner .info_wrap {
    position: relative;
}

.part_hypothekenrechner #info_open {
    color: #004899;
    font-weight: 500;
    cursor: pointer;
}

.part_hypothekenrechner #info_text {
    margin-top: 20px;
}

.part_hypothekenrechner .balken {
    background-color: #b02b2c;
    border-radius: 3px;
    display: block;
    height: 6px;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
}

.part_hypothekenrechner .balken::before {
    background-color: #6d9130;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    content: "";
    height: 6px;
    position: absolute;
    width: 33.33%;
}

.part_hypothekenrechner .balken .pointer {
    background-color: #6d9130;
    border-radius: 100px;
    display: block;
    height: 20px;
    left: 0;
    margin-left: -10px;
    position: absolute;
    top: -27px;
    width: 20px;
}

.part_hypothekenrechner .balken_nok .pointer {
    background-color: #b02b2c;
}

.part_hypothekenrechner #balken_tragbarkeit_2 {
    background-color: #0364c4;
}

.part_hypothekenrechner #balken_tragbarkeit_2 .pointer,
.part_hypothekenrechner #balken_tragbarkeit_2.balken_nok .pointer,
.part_hypothekenrechner #balken_tragbarkeit_2::before {
    background-color: #004899;
}

.part_hypothekenrechner .box {
    position: absolute;
    background: #b02b2c;
    border: 1px solid #b02b2c;
    padding: 5px;
    text-align: left;
    color: #fff;
    bottom: 60px;
}

.part_hypothekenrechner .box p {
    margin-bottom: 0;
}

.part_hypothekenrechner .box p:before {
    content: "\f06a";
    font-size: 20px;
    color: #fff;
    display: block;
    margin-bottom: 10px;
}

.part_hypothekenrechner .box:after,
.box:before {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.part_hypothekenrechner .box:after {
    border-color: rgba(176, 43, 44, 0);
    border-top-color: #b02b2c;
    border-width: 7px;
    margin-left: -7px;
}

.part_hypothekenrechner .box:before {
    border-color: rgba(176, 43, 44, 0);
    border-top-color: #b02b2c;
    border-width: 8px;
    margin-left: -8px;
}

.ui-tooltip * {
    color: #333 !important;
}

.ui-tooltip {
    background-color: #e8e6e4 !important;
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}
/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
    background-image: none;
}

body .ui-tooltip {
    border-width: 2px;
}

.part_hypothekenrechner .balken .pointer:before {
    content: "";
    height: 7px;
    width: 7px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    color: white;
    position: absolute;
    top: 5px;
    left: 6px;
}

.part_hypothekenrechner .auswertung {
    padding: 20px;
    border-radius: 3px;
    position: relative;
}

.part_hypothekenrechner .auswertung p:last-child {
    margin-bottom: 0;
}

.part_hypothekenrechner .auswertung.nok {
    background-color: #f4e8e8;
    border: 1px solid #a82c32;
}

.part_hypothekenrechner .auswertung.nok li::before {
    background-image: none !important;
    display: none;
}

.part_hypothekenrechner .auswertung.ok {
    background-color: #eff3e7;
    border: 1px solid #6d9130;
}

.part_hypothekenrechner .auswertung.extok {
    background-color: #fef1d3;
    border: 1px solid #f7b828;
}

.part_hypothekenrechner .auswertung strong {
    display: block;
    margin-bottom: 1em;
    font-weight: 300;
}

.part_hypothekenrechner .auswertung.nok strong {
    color: #a82c32;
}

.part_hypothekenrechner .auswertung.ok strong {
    color: #6d9130;
}
.part_hypothekenrechner .auswertung.extok strong {
    color: #f7b828;
}

.part_hypothekenrechner #hypothek strong,
.part_hypothekenrechner #tragbarkeit.auswertung strong {
    font-size: 18px;
    display: block;
    margin-bottom: 1em;
    font-weight: 600;
}

#chart_tragbarkeit_1,
#chart_tragbarkeit_2 {
    text-align: center;
}

.part_hypothekenrechner #hypoForm,
.part_hypothekenrechner .auswertung {
    margin-top: 2em;
    margin-bottom: 2em;
    clear: both;
}

.part_hypothekenrechner .auswertung ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px solid #cfccc9;
}

.part_hypothekenrechner .auswertung li {
    display: table-cell;
    width: 33%;
    padding: 10px 20px !important;
    border-left: 1px solid #cfccc9;
}

.part_hypothekenrechner .auswertung li::before {
    background-image: none !important;
}

.part_hypothekenrechner .auswertung li:first-child {
    border: 0;
}

.part_hypothekenrechner .auswertung ul h3 {
    border: 0;
    text-align: center;
}

.part_hypothekenrechner .auswertung li.nok h3 {
    color: #b51a39;
}

.debug {
    margin-top: 2em;
}

.debug input {
    float: left;
    margin-right: 5px;
    text-align: right;
    width: 70%;
}

.part_hypothekenrechner #Message {
    padding: 10px;
    border: 1px solid #708f27;
    margin-bottom: 2em;
}

.part_hypothekenrechner #Message p {
    padding-left: 65px;
    margin-bottom: 0;
}

/* Icons */
.part_hypothekenrechner .icon.info {
    color: white;
    font-size: 14px;
    line-height: 23px;
}

/* Slider */
.part_hypothekenrechner .ui-slider {
    background-color: #f1f1f1;
    border: 1px solid #cfccc9;
    border-radius: 6px;
    display: block;
    float: left;
    height: 6px;
    margin-right: 20px;
    margin-top: 7px;
    width: 80%;
}

.part_hypothekenrechner .ui-widget-header {
    background-color: #004899;
}

.part_hypothekenrechner .ui-slider-horizontal .ui-slider-handle {
    border-radius: 20px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    height: 20px;
    margin-left: -0.6em;
    top: -8px;
    width: 20px;
}

.part_hypothekenrechner .ui-slider-horizontal .ui-slider-handle:before {
    content: "";
    display: block;
    height: 36px;
    margin: -9px;
    width: 36px;
    z-index: 0;
}

.part_hypothekenrechner .ui-slider-horizontal .ui-slider-handle.ui-state-active {
    background-color: #004899;
    border-color: #fff;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.info-title-wrapper {
    display: flex;
    justify-content: center;
}

.part_hypothekenrechner section label, .info-title {
    position: relative;
}

.part_hypothekenrechner .info {
    font-family: "AvenirLTPro-Light", Arial, Verdana, Helvetica, sans-serif;
    font-style: normal;
    position: absolute;
    right: -25px;
    height: 20px;
    width: 20px;
    background-color: #004899;
    border-radius: 50%;
    display: flex;
    top: 0;
    justify-content: center;
    align-self: center;
}

#chart_belehnung {
    text-align: right;
    padding-right: 30px;
}

.part_hypothekenrechner input.error {
    border: 1px solid #a82c32;
    color: #a82c32;
}

.part_hypothekenrechner .error label {
    color: #a82c32;
}

.part_hypothekenrechner tspan {
    font-family: inherit !important;
}

#hypoForm input[type="submit"] {
    background-color: #ffc40b;
}

#hypoForm input[type="submit"]:hover { 
    background-color: #f8b51d;
    border-color: #f8b51d;
}



/* On/Off switch */
.onoffswitch {
    cursor: pointer;
    position: relative;
    width: 95px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    cursor: pointer;
    height: 32px;
    left: 0;
    position: absolute;
    width: 95px;
    z-index: 50;
    opacity: 0.01;
}

.part_hypothekenrechner section label.onoffswitch-label {
    border: 1px solid #cfccc9;
    border-radius: 20px;
    cursor: pointer;
    display: block;
    max-width: none;
    overflow: hidden;
    padding: 0;
    width: auto;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}

.onoffswitch-inner:after,
.onoffswitch-inner:before {
    background-color: #fff;
    color: #161616;
    font: "Roboto", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 100%;
}

.onoffswitch-inner:before {
    content: "ja";
    text-align: left;
    padding-left: 15px;
}

.onoffswitch-inner:after {
    content: "nein";
    padding-right: 15px;
    text-align: right;
}

.onoffswitch-switch {
    background: #cfccc9;
    display: block;
    height: 18px;
    margin: 6px;
    position: absolute;
    top: 0;
    right: 63px;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
    width: 18px;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner:before {
    background-color: #708f27;
    color: white;
}

#tooltip {
    color: #444;
    background: #e8e6e4;
    position: absolute;
    z-index: 100;
    padding: 15px;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}

#tooltip:after /* triangle decoration */ {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #e8e6e4;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #e8e6e4;
    top: -20px;
    bottom: auto;
}

#tooltip.left:after {
    left: 10px;
    margin: 0;
}

#tooltip.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

.headerColMobile {
    display: none !important;
}

#maxPurchasePriceOutput {
    display: none;
}

@media (max-width: 991px) {
    .pageBox.mortgagecalculator--wrapper {
        padding: 15px 5px;
    }
    .mortgagecalculator--wrapper .form {
        padding: 0 5px !important;
    }
    .mortgagecalculator--wrapper h4 {
        margin-bottom: 20px !important;
    }
    #chart_belehnung {
        text-align: left;
    }
    .part_hypothekenrechner #hypothek,
    .part_hypothekenrechner #tragbarkeit.auswertung {
        padding-left: 0;
        padding: 5px;
    }
    .headerCol {
        display: none !important;
    }
    .headerColMobile {
        display: block !important;
    }
    .part_hypothekenrechner .balken .pointer {
        left: 10px;
    }
}