@charset "UTF-8";
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* Media queries */
/*$tablet-width: 768px;*/
/* +250px  */
/*colors*/
/* Media queries */
/*$tablet-width: 768px;*/
/* +250px  */
/*colors*/
/* flex */
@font-face {
  font-family: 'HelenPro';
  src: url("../fonts/Helen Pro/Helen Pro 0Bold.otf?v=6") format("opentype");
  /*src: url('../fonts/icomoon/icomoon.eot?v=6');
    src: url('../fonts/icomoon/icomoon.eot?v=6') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?v=6') format('truetype'), url('../fonts/icomoon/icomoon.woff?v=6') format('woff'), url('../fonts/icomoon/icomoon.svg?v=6#icomoon') format('svg');*/
  /*font-weight: normal;
    font-style: normal;*/ }

.modal-dialog.test {
  margin: 0 auto;
  border: 2px solid red; }

.modal-dialog {
    margin: 26px auto 6% auto;
}
/*.modalDialogHeader .modal-dialog {
    width: 63%;
    margin: 15% auto;
}*/
/*.modalDialogList .modal-dialog {
    width: 63%;
    margin: 15% auto;
}*/
/*.modalContent1 {
    padding-top: 15px;
}*/
.modalContent1 .modal-content {
    color: #5c5c5c;
    border-radius: initial;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    height: 50%;
    padding: 20px 0px;
}

.modalContent1 .modal-content .modal-body {
    padding: 5px;
}

.calculator-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: center; }

.calculator-wrapper > div {
  display: flex;
  flex: 1 1 auto;
  justify-content: center; }

.calculator-logo-area {
  display: flex;
  flex-direction: column;
  width: 30%; }

.calculator-logo-area h2 {
  color: #ff0000;
  font-family: 'HelenPro';
  margin-bottom: 16px;
  font-size: 21px;
}

.calculator-logo-area img {
  width: 190px; }

.calculator-input-area {
  display: flex;
  flex-direction: column;
  width: 35%;
  padding: 0 16px; }


.calculator-buttons {
  display: flex;
  flex-direction: column;
  width: 35%;
  justify-content: flex-end !important;
  margin-bottom: 20px;
  text-align: center;
  align-items: center;
  padding: 0px 40px; }

.calculator-buttons h3 {
  color: #203c7b;
  margin-bottom: 10px;
  font-size: 17px; }

    .calculator-buttons h2 {
        color: #ff0000;
        margin-bottom: 30px;
        font-size: 21px;
    }

.calculator-buttons .info-icon:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ""; }
    .calculator-buttons .info-icon-header:before {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "";
    }


.calculator-buttons a {
  background-color: #043968;
  color: white;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 0 20px;
  margin-top: 26px;
  position: relative; }

.credit-calculator-btn {
  color: #6d6c6b;
  text-decoration: none;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  line-height: 18px;
  padding-left: 27px;
  position: relative;
  margin-top: 0;
  right: 0;
  width: auto;
  padding: 17px 32px; }
  .credit-calculator-btn:before {
    font-family: 'icomoon';
    content: "\e939";
    position: absolute;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: left;
    left: 0;
    font-size: 16px; }
    .credit-calculator-btn:after {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-right: 5px;
        content: "";
        background: url("../../Content/Images/calculator/postbank_logo_small.png") no-repeat 0 0;
        background-size: 100%;
        position: absolute;
        top: 25%;
        left: 87%;
    }
  .credit-calculator-btn span {
    display: inline-block;
    vertical-align: top;
    border-bottom: 1px solid;
    top: 20%;
    left: 87%;
  }
.creditCalculatorButton {
    border: 1px solid #cbcbcb;
   /*width: 195px;*/ 
    padding: 3px;
    position: relative;
    z-index: 3;
    right: 0;
    height: auto;
    width: auto;
    /*top: 25%;*/
}
.creditCalculatorBtn {
    color: #6d6c6b;
    text-decoration: none;
    font-size: 12px;
    display: flex;
    justify-content: center;
    /* padding-left: 20px;*/
}
.calculatorMonthlyRateBtn {
    color: #d41f00;
    font-weight: bold;
    text-align: center !important;
    font-size: 13px;
    display: block;
    background: transparent;
    border: none;
    margin: 0 auto !important;
}
.calculator-logo-btn {
    width: 100px;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
}
#calculator-button {
    padding: 5px 1px 5px 1px;
    font-size: 11px;
    display: inline-block;
}

.calculator-logo-button {
    width: 90px;
    display: block;
    position: relative;
    z-index: 1;
    top: 0px;
    left: 22px;
}
.logoImgHolder {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content:center;
}
@media (max-width: 720px) {
    .calculator-logo-button {
        left: 15%;
    }
}

@media (max-width: 414px) {
    .calculator-logo-button {
        left: 40%;
    }
}

@media (max-width: 375px) {
    .calculator-logo-button {
        left: 37%;
    }
}

@media (max-width: 280px) {
    .calculator-logo-button {
        left: 32%;
    }
}

 .calculator__text, .calculator__title {
    padding-left: 5px;
    font-size: 11px;
    font-weight: bold;
}

#infoHolderButtonList {
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
}
.tooltip-button-list {
    width: 15px;
    height: 15px;
    font-size: 13px;
}
/* Tooltip container */

.tooltip-button-list {
    border: none !important;
    /*position: absolute;*/
    z-index: 1;
    /*top: 54%;
    left: 140px;*/
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: #d41f00;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 15px;
    color: #ffffff;
}


/* Tooltip text */

.tooltip_text_list {
    width: 12vw;
    height: 211px;
    max-width: 1024px;
    background-color: #fff;
    color: #5c5c5c;
    text-align: justify;
    overflow-y: scroll;
    padding: 7px;
    border-radius: 1px;
    display: none;
    font-size: 10px;
    position: absolute;
    bottom: -122%;
    right: -1px;
    margin-left: -60px;
    /* opacity: 0; */
    /* transition: opacity 0.3s; */
    -webkit-box-shadow: -1px -1px 10px rgb(0 0 0 / 20%);
    box-shadow: -1px -1px 10px rgb(0 0 0 / 20%);
    z-index: 10;
}

@media (max-width: 1024px) {
    .tooltip_text_list {
        display: none !important;
    }
}

#infoHolderButtonList:hover .tooltip_text_list {
    display: block;
}

#infoHolderButtonList.active .tooltip_text_list {
    display: none !important;
}

/* Show the tooltip text when you mouse over the tooltip container */

.tooltip-button-list:hover {
    background-color: #173070;
}

.toolTipInfoButton {
    text-align: left;
    font-size: 11px;
}

.info-icon-button.active {
    color: #fff;
    background-color: #173070;
    top: 2%;
    transition: none;
}
.info-text-list {
    width: calc(100% - 250px);
}
@media (max-width: 1399px) {
    .tooltip_text_list {
        width: 15vw;
    }
}
@media (max-width: 1280px) {
    .card-list-item {
        font-size: 11px;
    }
    .tooltip_text_list {
        width: 15.5vw;
        height: 170px;
        max-width: 895px;
        font-size: 8px;
        bottom: -67%;
    }
}
@media (max-width: 1024px) {
    .creditCalculatorBtn {
        /*padding-left: 10px;*/
        display: flex;
        justify-content: center;
        font-size: 11px;
    }
    .calculatorMonthlyRateBtn {
        padding-left: 1px;
        display: inline;
        font-size: 11px;
    }

    .tooltip-button-list {
        top: 41%;
        left: 69%;
    }
    .calculator-logo-btn {
        width: 80px;
  
    }
    .tooltip-button-list {
        width: 15px;
        height: 15px;
    }
    .info-text-list {
        padding-top: 10px;
    }
    .card-list-item {
        font-size: 11px;
    }
      
    
}


@media (max-width: 540px) {
    .tooltip-button-list {
        left: 64%;
        top: 49%;
    }
    .searchBtnHolder {
        display:block;
       
    }
    .creditCalculatorButton {
        display: flex;
        flex-direction: column;
        left: 0;
        /*overflow: scroll;*/
        max-height: 200px;
        width: auto;
    }
   
    .card-list-item a.map{
        position:relative;
    }
}


    @media (max-width: 360px) {
      
        /*.calculator-logo-btn {
            left: 105px;
        }*/
    }

    @media (max-width: 320px) {
        tooltip-button-list {
            top: 42%;
            left: 65%;
        }

        .calculator-logo-btn {
            left: 85px;
        }
       
    }

    @media (max-width: 280px) {

        /*.calculator-logo-btn {
            left: 71px;
        }*/
      
        .tooltip-button-list {
            top: 39%;
            left: 70%;
        }
    }

    .testt {
        border: 1px solid red;
    }


    

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

    .toolTipInfo {
        text-align: left;
        font-size: xx-small;
    }

.toolTipInfo1, .toolTipInfoHeader {
    text-align: left;
    font-size: 15px;
}

    #close-info {
        float: right;
        display: inline-block;
        cursor: pointer;
        background: transparent;
    }

    .info-icon.active {
        color: #fff;
        background-color: #173070;
    }
.info-icon-header.active {
    color: #fff;
    background-color: #173070;
}

    #calculator-button::after {
        content: none !important;
    }
.close-button {
    border: none;
    position: relative;
    z-index: 99;
    color: #5c5c5c;
    cursor: pointer;
    /* right: 2%; */
    /* top: 2%; */
    font-size: 2em;
    line-height: 1;
    left: calc(100% - 30px);
    top: 50px;
    background-color: transparent;
}

    @supports (-ms-ime-align: auto) {
        input [type=range] {
            margin: 0;
        }
    }

    @media only screen and (max-width: 1200px) {
        .modalDialog .modal-dialog {
            width: 65%;
            margin: 26px auto;
        }
        .modalDialogHeader .modal-dialog {
            width: 65%;
            margin: 26px auto;
        }

        .modalDialogList .modal-dialog {
            width: 65%;
            margin: 26px auto;
        }

        .input-main-wrapper .input-wrapper h2 {
            font-size: 16px;
            margin-top: 5px;
            margin-left: 0px;
        }

        .input-main-wrapper .input-wrapper input {
            font-size: 16px;
        }

        .input-main-wrapper .input-wrapper div {
            margin-left: 10px;
            font-size: 15px;
            position: absolute;
            z-index: 3;
            right: 35%;
        }

        .calculator-logo-area h2 {
            font-size: 21px;
        }

        .calculator-buttons h2 {
            font-size: 20px;
        }

        .calculator-buttons h3 {
            font-size: 15px;
        }

        .calculator-buttons a {
            font-size: 14px;
        }

        .calculator-buttons div {
            margin-top: 10px;
        }

        .input-main-wrapper {
            width: 107%;
        }
    }

    @media (min-width: 1024px) {
        .modalDialog .modal-dialog {
            max-width: 1200px;
            width: 100%;
        }
        .modalDialogHeader .modal-dialog {
            max-width: 1200px;
            width: 100%;
        }

        .modalDialogList .modal-dialog {
            max-width: 1200px;
            width: 100%;
        }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
        .modalDialog .modal-dialog {
            width: 80%;
            margin: 5% auto;
        }
        .modalDialogHeader .modal-dialog {
            width: 80%;
            margin: 5% auto;
        }

        .modalDialogList .modal-dialog {
            width: 80%;
            margin: 5% auto;
        }

        .input-main-wrapper .input-wrapper h2 {
            font-size: 14px;
            float: left;
            margin-top: 5px;
        }

        .input-main-wrapper .input-wrapper input {
            width: 70px;
            font-size: 15px;
        }

        .input-main-wrapper .input-wrapper div {
            width: 127px;
            font-size: 15px;
            margin-left: 15px;
        }

        .calculator-buttons h3 {
            font-size: 15px;
        }

        .calculator-buttons h2 {
            font-size: 19px;
        }

        .calculator-logo-area h2 {
            font-size: 20px;
        }

        .credit-calculator-btn:after {
            top: 24%;
            left: 88%;
        }
    }

    @media (max-width: 767px) {
        .modalDialog .modal-dialog {
            width: 94%;
            margin: 5% auto;
        }
        .modalDialogHeader .modal-dialog {
            width: 94%;
            margin: 5% auto;
        }

        .modalDialogList .modal-dialog {
            width: 94%;
            margin: 5% auto;
        }

        .calculator-wrapper {
            flex-direction: column;
        }

            .calculator-wrapper > div {
                width: 100%;
                text-align: center;
            }

        .input-main-wrapper {
            width: 100%;
        }

            .input-main-wrapper .input-wrapper div {
                width: 150px;
                right: 6%;
                font-size: 20px;
            }

        .credit-calculator-btn:after {
            top: 22%;
            left: 8%;
        }

        .input-main-wrapper .input-wrapper h2 {
            font-size: 22px;
        }

        .input-main-wrapper .input-wrapper input {
            font-size: 21px;
            width: 85px;
        }

        .input-main-wrapper .input-wrapper .tenor-years-input {
            width: 45px;
        }

        .calculator-logo-area img {
            padding-bottom: 15px;
        }

        .calculator-buttons h3 {
            font-size: 21px;
        }
        .close-button {
            left: calc(100% - 40px);
        }
    }

    @media (max-width: 480px) {
        .input-main-wrapper .input-wrapper div {
            width: 115px;
            font-size: 16px;
        }

        .input-main-wrapper .input-wrapper input {
            width: 70px;
            font-size: 16px;
        }

        .input-main-wrapper .input-wrapper .tenor-years-input {
            width: 35px;
            font-size: 16px;
        }

        .input-main-wrapper .input-wrapper h2 {
            font-size: 19px;
        }

        .calculator-buttons a {
            font-size: 15px;
        }
    }

    @media (max-width: 280px) {
        .modalDialog .modal-dialog {
            width: 90%;
            margin: 5% auto;
        }
        .modalDialogHeader .modal-dialog {
            width: 90%;
            margin: 5% auto;
        }

        .modalDialogList .modal-dialog {
            width: 90%;
            margin: 5% auto;
        }

        .input-main-wrapper .input-wrapper {
            flex-direction: column;
        }

            .input-main-wrapper .input-wrapper h2 {
                font-size: 15px;
                margin-top: 8px;
                margin-right: 115px;
            }

            .input-main-wrapper .input-wrapper div {
                width: 120px;
            }

        .calculator-buttons h3 {
            font-size: 15px;
        }

        .calculator-buttons div {
            margin-left: 0px;
            margin-top: 0px;
        }

        .calculator-logo-area img {
            padding-bottom: 15px;
        }

        .input-main-wrapper .input-wrapper div {
            width: 115px;
        }
    }