/*---------------------------------*/
/*       CAZLE TOOLS RESET
/*---------------------------------*/

/*------ FORMS ------*/
.mw-200{width:200px;max-width:200px;}
.mw-150{width:150px;max-width:150px;}
.mw-100{width:100px;max-width:100px;}
.mw-75{width:75px;max-width:75px;}


.as-link{
    font-size:0.9rem;
    color:#198281;
}
.as-link:hover{
    color:#093332;
}

.sub-header{
    color:#556a70 !important;
}

.border-top{
    border-top:solid 1px #c6d9d5 !important;
}

.bg-debt-items{
    background-color:#f3f7f7 ;
}

/*------ CARD ------*/
.card{
    border:0px !important;
}
.card-header{
    background-color: #197c8a;
    padding:1em !important;
}
.card-header .cal-header{
    color:#ffffff;
    margin-bottom: 0;
}

.card-shadow{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/*------ ACCORDION ------*/
.accordion-button{
    padding:1em !important;
    font-size: 0.90rem;
    color:#197c8a;
    font-weight: bold;
}
.accordion-button:not(.collapsed) {
    font-weight: bold;
}

.accordion-button::before{
    margin-right:.25rem;
}
.accordion-body{
    background-color: #ffffff;
    padding:1em;
}
.accordion-item{
    border: 0;
}
/*------ LABELS ------*/

.cal-label{
          font-size:1.15em;
          font-weight: bold;
          color: #121f47;
}

.cal-label-sub{
    font-size:1em;
    font-weight: bold;
    color: #0f6780;
}
@media only screen and (max-device-width: 480px) {
    .cal-label-sub{
        font-size:0.9em;
    }
}


.field-description{
          color: rgba(0, 0, 0, .6);
          font-size:0.75em;
}
/*------ INPUT  ------*/
.form-control{
    border: 0.0625rem solid rgba(80, 80, 80, 0.288);
    padding: 0.35rem 1.5rem;
}
 
.btn-calc {

    --bs-btn-color: #000000;
    --bs-btn-border-color: #d3e6e5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #197c8a;
    --bs-btn-hover-border-color: #197c8a;
    --bs-btn-focus-shadow-rgb: 45, 55, 75;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c9493;
    --bs-btn-active-border-color: #197c8a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c9493;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c9493;
    --bs-gradient: none;
  }
.btn-group > .btn{
    padding:0.5rem 1rem 0.5rem 1rem;
}

.btn-group > .btn span{
    font-size:0.75em;
    font-weight: normal;
    color:#777;
}
.btn-check:checked + .btn {
    color: #fff;
    background-color: #197c8a;
    border-color: #197c8a;
}
.btn-check:checked + .btn span {
    color: #fff;

}
/*------ INPUT ICONS ------*/

.input-icon {
    position: relative;
}

.input-icon > i {
    position: absolute;
    display: block;
    transform: translate(0, -50%);
    top: 50%;
    pointer-events: none;
    width: 25px;
    text-align: center;
    font-style: normal;
    font-size: 1.25em;
}

.input-icon > input {
    padding-left: 25px;
    padding-right: 0;
    font-size:1.25em;
    font-weight:bold;
    color:#434343;
}

.input-icon-right > i {
    right: 0;
}

.input-icon-right > input {
    padding-left: 0;
    padding-right: 25px;
    text-align: right;
}

/*------ RANGE ------*/

/*Range Reset*/
.form-range-c{
     -webkit-appearance: none !important;
     appearance: none !important;
     background: transparent !important;
     cursor: pointer !important;
     width: 100% !important;
     height:2em;
 }
 
 /* Removes default focus */
 .form-range-c:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 .form-range-c::-webkit-slider-runnable-track {
    background-color: #b6c2c2;
    border-radius: 0.5rem;
    height: 1rem;  
 }
 
 /* slider thumb */
 .form-range-c::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -8px; /* Centers thumb on the track */
    border: solid 1px #2f4242;
    /*custom styles*/
    background-color: #ffffff;
    height: 2rem;
    width: 2rem;
    border-radius: 1.5rem;
 }
 
 .form-range-c:focus::-webkit-slider-thumb {   
   border: 1px solid #304948;
   outline: 1px solid #304948;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 .form-range-c::-moz-range-track {
    background-color: #b6c2c2;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 .form-range-c::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: #ffffff;
    height: 2rem;
    width: 1rem;
 }
 
 .form-range-c:focus::-moz-range-thumb {
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }


/*------ RESULTS ------*/

.results-wrapper{
    text-align: center;
    margin-bottom:1.5rem;
}
.results-wrapper .output_home_price{
    font-size: 3.5em;
    color: #121f47;
    font-weight:700;
}
@media only screen and (max-device-width: 480px) {
    .results_panel .p-4{
        padding:1rem !important;
    }
    .modal-fullscreen .modal-body {
        padding:0px !important;
    }
}

.breakdown-list {
    list-style: none outside;
    margin: 0 auto;
    padding: 0;
}
.breakdown-list li {

    margin: 10px 0;
    padding: 2px 0;
    overflow: hidden;
}
.breakdown-list .leftover {
    margin-top: 30px;
    margin-bottom: 0;
    padding-top: 18px;
    border-top: solid 1px #ddd;
}
.breakdown-list li span{
    float: right;
    display: inline;
    unicode-bidi: isolate;
    font-weight: bold;
}


.dti-badge {
    font-weight: bold;
    border-radius: 50px;
    padding: .4em .75em .4em .75em;
    display: inline-block;
    transition: background-color .2s ease-in
}

.badge-affordable {
    background-color: rgb(173, 229, 140)
}

.badge-difficult {
    background-color: #ffe800;
    color: #121f47
}

.badge-risky {
    color: #fff;
    background-color: rgba(218, 35, 46, .9);
    text-shadow: 0 0 5px #971018;
    letter-spacing: 1px
}


.breakdown-list .block-label:before {
    content: "";
    border-radius: 2px;
    display: inline-block;
    height: 1em;
    width: 1em;
    background: #333;
    vertical-align: middle;
    margin: 0 0.5em 0 0;
    position: relative;
    top: -2px;
}
.breakdown-list .taxes .block-label:before {
    background: #df6ccf;
}
.breakdown-list .hoa .block-label:before {
    background: #277dff;
}
.breakdown-list .insurance .block-label:before {
    background: #ffc527;
}
.breakdown-list .principal-and-interest .block-label:before {
    background: #7cc456;
}
.breakdown-list .pmi .block-label:before {
    background: #8056c4;
}

.breakdown-list .principal .block-label:before {
    background: #7cc456;
}
.breakdown-list .interest .block-label:before {
    background: #ffc527;
}
.breakdown-list .loan-balance .block-label:before {
    background: #5e9fef;
}
.breakdown-list .extra .block-label:before {
    background: #ef685e;
}

/*---------- slider -----*/

.dti-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    border-radius: 10px;   
    background: linear-gradient(to left, #800000,#ff6600,#ccff33,#00cc00,#099330,#099330);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top: 7px;
    margin-bottom: 7px;
}

.dti-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    border-radius: 50%; 
    background: rgb(255, 255, 255);
    border:solid 1px #000000;
    cursor: pointer;
}


.dti-slider::-moz-range-thumb {
    width: 35px;
    height: 35px;
    border: 0;
    cursor: pointer;
}

.label-affordable{
    font-weight:bold;
    color:#0d752b;
}
.label-risky{
    font-weight:bold;
    color:#800000;
    text-align:right;
}
/*------ TABS ------*/

.nav-cz .nav-item {
    margin: 0.15rem 0.15rem;
  }
  .nav-cz .nav-link {
    font-size:1.15em;
    padding: 1rem 1rem;
    line-height:1.15;
    border-bottom: solid 3px #ebebeb;
  }
  .nav-cz .nav-link:hover {
    color: #2d374b;
    border-bottom: solid 3px #919191;
  }
  .nav-cz .nav-link.active {
    color:#197c8a;
    border-bottom: solid 3px #077c76;
  }
  .nav-cz .nav-link.active:hover,
  .nav-cz .show > .nav-link:hover {
    border-color: transparent;
  }
  @media only screen and (max-device-width: 480px) {
    .nav-cz .nav-link{
        padding: 0.6rem 0.6rem;
        font-size:1.1em;
    }
    .nav-cz .nav-item{
        margin: 0.2rem 0.1rem;
    }
  }

/*------ CTA ------*/
.cal-cta{
    text-align: center;
    background-color: #d0eeeb;
    border-radius: 1em;
}

.mortgage-calculator__chart{
    margin-top:2rem;
    margin-bottom:2rem;
}

.donut-chart-block {
    position: relative;
    width: 100%;
  }
  .donut-chart-block .center-data {
    position: absolute;
    left: 0;
    line-height: 1.3;
    margin-top: -35px;
    right: 0;
    text-align: center;
    top: 50%;
  }
  .center-data .payment-data-title{
      font-size:0.75em;
      color:#001941;
  }
  .center-data .payment-amount-label{
        font-size:2.5em;
        font-weight:800;
        color:#001941;
  }